From 52ead88fb151c2668eb861a2af8736c026cc8825 Mon Sep 17 00:00:00 2001
From: pozafly <pozafly@gmail.com>
Date: Fri, 5 May 2023 23:29:04 +0900
Subject: [PATCH] Updates

---
 404.html                                                      | 2 +-
 404/index.html                                                | 2 +-
 _gatsby/slices/_gatsby-scripts-1.html                         | 2 +-
 about/index.html                                              | 2 +-
 author/another-author/index.html                              | 2 +-
 author/ghost/index.html                                       | 2 +-
 author/pozafly/index.html                                     | 2 +-
 blog/Gatsby-Blog/index.html                                   | 4 ++--
 blog/blog-insert-tap/index.html                               | 4 ++--
 blog/jekyll-kakao-share-button/index.html                     | 4 ++--
 css/stacking-context/index.html                               | 4 ++--
 diary/20210517/index.html                                     | 4 ++--
 diary/20210523/index.html                                     | 4 ++--
 diary/20210530/index.html                                     | 4 ++--
 diary/20210606/index.html                                     | 4 ++--
 diary/20210627/index.html                                     | 4 ++--
 e0525e89-f580b5526d62ccdf5313.js                              | 2 ++
 e0525e89-f580b5526d62ccdf5313.js.map                          | 1 +
 environment/webpack-boilerplate/index.html                    | 4 ++--
 html/meta-tag-and-vue-meta/index.html                         | 4 ++--
 html/pdf-css/index.html                                       | 4 ++--
 html/semantic-web/index.html                                  | 4 ++--
 index.html                                                    | 2 +-
 .../index.html"                                               | 4 ++--
 javascript/array-is-object/index.html                         | 4 ++--
 javascript/closure-with-currying/index.html                   | 4 ++--
 javascript/event-loop-and-async/index.html                    | 4 ++--
 javascript/getter-setter/index.html                           | 4 ++--
 javascript/javascript-mvc/index.html                          | 4 ++--
 javascript/prototype/index.html                               | 4 ++--
 javascript/shallo-copy-and-deep-copy/index.html               | 4 ++--
 javascript/symbol/index.html                                  | 4 ++--
 network/uri-structure/index.html                              | 4 ++--
 node/node-version-manager/index.html                          | 4 ++--
 node/setting-npm-differently-for-each-project/index.html      | 4 ++--
 oracle/CHR-ASCII/index.html                                   | 4 ++--
 .../index.html"                                               | 4 ++--
 .../index.html"                                               | 4 ++--
 page-data/app-data.json                                       | 2 +-
 react/class-functional-component-difference/index.html        | 4 ++--
 rss.xml                                                       | 2 +-
 spring/JUnit(1)motive/index.html                              | 4 ++--
 spring/JUnit(2)Mockito/index.html                             | 4 ++--
 spring/MediaType/index.html                                   | 4 ++--
 tags/auto-mation/index.html                                   | 2 +-
 tags/blog/index.html                                          | 2 +-
 tags/bundler/index.html                                       | 2 +-
 tags/css/index.html                                           | 2 +-
 tags/design-pattern/index.html                                | 2 +-
 tags/diary/index.html                                         | 2 +-
 tags/gatsby/index.html                                        | 2 +-
 tags/html/index.html                                          | 2 +-
 tags/index.html                                               | 2 +-
 tags/j-unit/index.html                                        | 2 +-
 tags/java-script/index.html                                   | 2 +-
 tags/java/index.html                                          | 2 +-
 tags/jwt/index.html                                           | 2 +-
 tags/lets-encrypt/index.html                                  | 2 +-
 tags/media-type/index.html                                    | 2 +-
 tags/my-sql/index.html                                        | 2 +-
 tags/network/index.html                                       | 2 +-
 tags/node-js/index.html                                       | 2 +-
 tags/oracle/index.html                                        | 2 +-
 tags/pdf/index.html                                           | 2 +-
 tags/react/index.html                                         | 2 +-
 tags/semantic-web/index.html                                  | 2 +-
 tags/sentry/index.html                                        | 2 +-
 tags/seo/index.html                                           | 2 +-
 tags/spring-boot/index.html                                   | 2 +-
 tags/spring-security/index.html                               | 2 +-
 tags/tool/index.html                                          | 2 +-
 tags/travis-ci/index.html                                     | 2 +-
 .../tripllo-\354\240\234\354\236\221\352\270\260/index.html"  | 2 +-
 tags/type-script/index.html                                   | 2 +-
 tags/uri/index.html                                           | 2 +-
 tags/vue-js/index.html                                        | 2 +-
 tags/webpack/index.html                                       | 2 +-
 .../index.html"                                               | 2 +-
 .../index.html"                                               | 2 +-
 tripllo/(1)production-motive/index.html                       | 4 ++--
 tripllo/(10)vue-travis-automation/index.html                  | 4 ++--
 tripllo/(11)vue-sentry-error-monitoring-system/index.html     | 4 ++--
 tripllo/(12)aws-lets-encrypt-renewal-automation/index.html    | 4 ++--
 tripllo/(13)Vuex-and-eventBus/index.html                      | 4 ++--
 tripllo/(14)Closure-Currying/index.html                       | 4 ++--
 tripllo/(2)mysql-design-spring-boot/index.html                | 4 ++--
 tripllo/(3)vue-esLint-prettier-setting/index.html             | 4 ++--
 tripllo/(4)spring-security-jwt/index.html                     | 4 ++--
 tripllo/(5)login2-SpringBoot/index.html                       | 4 ++--
 tripllo/(6)login3-vue/index.html                              | 4 ++--
 tripllo/(7)login4-vue-social-login/index.html                 | 4 ++--
 tripllo/(8)vue-refactor1/index.html                           | 4 ++--
 tripllo/(9)vue-refactor2/index.html                           | 4 ++--
 tripllo/tripllo-delete/index.html                             | 4 ++--
 tripllo/tripllo-epilogue/index.html                           | 4 ++--
 typescript/typescript-env/index.html                          | 4 ++--
 .../index.html"                                               | 4 ++--
 webpack-runtime-52fd7f98635d9b9ff5c2.js                       | 2 ++
 webpack-runtime-52fd7f98635d9b9ff5c2.js.map                   | 1 +
 webpack.stats.json                                            | 2 +-
 100 files changed, 152 insertions(+), 146 deletions(-)
 create mode 100644 e0525e89-f580b5526d62ccdf5313.js
 create mode 100644 e0525e89-f580b5526d62ccdf5313.js.map
 create mode 100644 webpack-runtime-52fd7f98635d9b9ff5c2.js
 create mode 100644 webpack-runtime-52fd7f98635d9b9ff5c2.js.map

diff --git a/404.html b/404.html
index 6b2396d0b..6ffaf540c 100644
--- a/404.html
+++ b/404.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/404/index.html b/404/index.html
index 1c5cde5b7..7566cff5c 100644
--- a/404/index.html
+++ b/404/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/_gatsby/slices/_gatsby-scripts-1.html b/_gatsby/slices/_gatsby-scripts-1.html
index 527537882..27aa0111b 100644
--- a/_gatsby/slices/_gatsby-scripts-1.html
+++ b/_gatsby/slices/_gatsby-scripts-1.html
@@ -4,4 +4,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script>
\ No newline at end of file
diff --git a/about/index.html b/about/index.html
index e6f3309ac..430e41127 100644
--- a/about/index.html
+++ b/about/index.html
@@ -72,4 +72,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/author/another-author/index.html b/author/another-author/index.html
index aa04d2b16..59a5477b0 100644
--- a/author/another-author/index.html
+++ b/author/another-author/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/author/ghost/index.html b/author/ghost/index.html
index 3400fdd8a..aab363f08 100644
--- a/author/ghost/index.html
+++ b/author/ghost/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/author/pozafly/index.html b/author/pozafly/index.html
index 23d0e4ec8..098468a96 100644
--- a/author/pozafly/index.html
+++ b/author/pozafly/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/blog/Gatsby-Blog/index.html b/blog/Gatsby-Blog/index.html
index b2e9eaaba..c21f379e3 100644
--- a/blog/Gatsby-Blog/index.html
+++ b/blog/Gatsby-Blog/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">Gatsby 블로그 이사</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/blog/">Blog</a>,  <a href="/tags/gatsby/">Gatsby</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">Gatsby 블로그 이사</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">블로그 이사를 완료했다. 사실 블로그를 어떤 기준으로 운영해야하는지 감이 없기도 했고 개발 기록을 남기는 작업은, 첫 블로그를 만들기 전에 onenote에 전부 작업을 해두고 있었기 때문에 블로그에 전부 옮기는 작업이 귀찮기도 했었다. 하지만 어쨌든 블로그를 만들어뒀기 때문에 포트폴리오 프로젝트 정리를 약간 하는 용도로 사용했다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-03-31">31 Mar 2021</time><span class="byline-reading-time"><span class="bull">•</span>5 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:52.53784505788067%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAgEBgn/xAAWAQEBAQAAAAAAAAAAAAAAAAAEAwX/2gAMAwEAAhADEAAAAc6YFWWGD3cFwGZ//8QAGhAAAgMBAQAAAAAAAAAAAAAAAgUABAYDFv/aAAgBAQABBQLXKV9y7r+mcpK9DnvYsXQj1TiZjBY3a0//xAAiEQACAQMDBQEAAAAAAAAAAAABAgMEITEAERITFCIjcfD/2gAIAQMBAT8BqNoFmpwiN3EcfJyCXRfXJtHfxO63bPEsLZ0tLAoC9apPG2Ijj6P1tf/EACIRAAIBAgUFAAAAAAAAAAAAAAECEQMEABITISIxMkFRYf/aAAgBAgEBPwG3BqGlVLvNu75Rxys3JJbaYhjAnrB+YNy7EnRo779zj14Ax//EACUQAAICAQMDBAMAAAAAAAAAAAIDAQQFERITACFBFBYicTFDof/aAAgBAQAGPwLFEeSrrnKW6td3GNproGzdhRW25azyV8h6fkabU7MedVkDVisnYUzgaGMU28/Ary+DdkJrnVVZuQ2raggYQhMs47DHoYKgKIID1OdCP3BjrdOkm7UpcgWGkVl1hdVS3WbBuWwmOaQ6sbvLlKOU55TZ0mGCM7xhxlAwJsaMPXBsYOhsLYpY/Mp1ge/noZEpj6nT8xpP87fXbolpssWHwnbE6/qXHnXxER1//8QAGhABAQEBAAMAAAAAAAAAAAAAAREAITFxof/aAAgBAQABPyEQxAHp1HwhAzVhUmA8nZYiZM7BYYcgnG8ThPD/ABnsmMsKKtGI9Ot6FJWt+HMlSsAB8GUE4GAcN//aAAwDAQACAAMAAAAQID//xAAZEQEAAwEBAAAAAAAAAAAAAAABESExAFH/2gAIAQMBAT8QQhjvYVZIhECxbAX6gNtUNlcpfMd//8QAFxEBAQEBAAAAAAAAAAAAAAAAAREhYf/aAAgBAgEBPxBB5bEEjUghUStgSqYjHcaAsWChmur/AP/EABkQAQEAAwEAAAAAAAAAAAAAAAERABAhMf/aAAgBAQABPxBVSdDhIXk8p11lVl/qVwhT9wSejhZTxfwAjggwa+5In84WsfzDNAYRABW1kceBDUvHQiEwVX//2Q==" alt=""/><picture><source type="image/avif" data-srcset="/static/a671edcce8e625b6cba1a1bb8d2d7aff/4814e/gatsby.avif 750w,/static/a671edcce8e625b6cba1a1bb8d2d7aff/acf79/gatsby.avif 1080w,/static/a671edcce8e625b6cba1a1bb8d2d7aff/1d69b/gatsby.avif 1123w" sizes="100vw"/><source type="image/webp" data-srcset="/static/a671edcce8e625b6cba1a1bb8d2d7aff/73e0d/gatsby.webp 750w,/static/a671edcce8e625b6cba1a1bb8d2d7aff/9fede/gatsby.webp 1080w,/static/a671edcce8e625b6cba1a1bb8d2d7aff/d4610/gatsby.webp 1123w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/a671edcce8e625b6cba1a1bb8d2d7aff/ca123/gatsby.jpg" data-srcset="/static/a671edcce8e625b6cba1a1bb8d2d7aff/cf2dd/gatsby.jpg 750w,/static/a671edcce8e625b6cba1a1bb8d2d7aff/24294/gatsby.jpg 1080w,/static/a671edcce8e625b6cba1a1bb8d2d7aff/ca123/gatsby.jpg 1123w" alt="Gatsby 블로그 이사"/></picture><noscript><picture><source type="image/avif" srcSet="/static/a671edcce8e625b6cba1a1bb8d2d7aff/4814e/gatsby.avif 750w,/static/a671edcce8e625b6cba1a1bb8d2d7aff/acf79/gatsby.avif 1080w,/static/a671edcce8e625b6cba1a1bb8d2d7aff/1d69b/gatsby.avif 1123w" sizes="100vw"/><source type="image/webp" srcSet="/static/a671edcce8e625b6cba1a1bb8d2d7aff/73e0d/gatsby.webp 750w,/static/a671edcce8e625b6cba1a1bb8d2d7aff/9fede/gatsby.webp 1080w,/static/a671edcce8e625b6cba1a1bb8d2d7aff/d4610/gatsby.webp 1123w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/a671edcce8e625b6cba1a1bb8d2d7aff/ca123/gatsby.jpg" srcSet="/static/a671edcce8e625b6cba1a1bb8d2d7aff/cf2dd/gatsby.jpg 750w,/static/a671edcce8e625b6cba1a1bb8d2d7aff/24294/gatsby.jpg 1080w,/static/a671edcce8e625b6cba1a1bb8d2d7aff/ca123/gatsby.jpg 1123w" alt="Gatsby 블로그 이사"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">Gatsby 블로그 이사</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/blog/">Blog</a>,  <a href="/tags/gatsby/">Gatsby</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">Gatsby 블로그 이사</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">블로그 이사를 완료했다. 사실 블로그를 어떤 기준으로 운영해야하는지 감이 없기도 했고 개발 기록을 남기는 작업은, 첫 블로그를 만들기 전에 onenote에 전부 작업을 해두고 있었기 때문에 블로그에 전부 옮기는 작업이 귀찮기도 했었다. 하지만 어쨌든 블로그를 만들어뒀기 때문에 포트폴리오 프로젝트 정리를 약간 하는 용도로 사용했다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-03-31">31 Mar 2021</time><span class="byline-reading-time"><span class="bull">•</span>5 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:52.53784505788067%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAgEBgn/xAAWAQEBAQAAAAAAAAAAAAAAAAAEAwX/2gAMAwEAAhADEAAAAc6YFWWGD3cFwGZ//8QAGhAAAgMBAQAAAAAAAAAAAAAAAgUABAYDFv/aAAgBAQABBQLXKV9y7r+mcpK9DnvYsXQj1TiZjBY3a0//xAAiEQACAQMDBQEAAAAAAAAAAAABAgMEITEAERITFCIjcfD/2gAIAQMBAT8BqNoFmpwiN3EcfJyCXRfXJtHfxO63bPEsLZ0tLAoC9apPG2Ijj6P1tf/EACIRAAIBAgUFAAAAAAAAAAAAAAECEQMEABITISIxMkFRYf/aAAgBAgEBPwG3BqGlVLvNu75Rxys3JJbaYhjAnrB+YNy7EnRo779zj14Ax//EACUQAAICAQMDBAMAAAAAAAAAAAIDAQQFERITACFBFBYicTFDof/aAAgBAQAGPwLFEeSrrnKW6td3GNproGzdhRW25azyV8h6fkabU7MedVkDVisnYUzgaGMU28/Ary+DdkJrnVVZuQ2raggYQhMs47DHoYKgKIID1OdCP3BjrdOkm7UpcgWGkVl1hdVS3WbBuWwmOaQ6sbvLlKOU55TZ0mGCM7xhxlAwJsaMPXBsYOhsLYpY/Mp1ge/noZEpj6nT8xpP87fXbolpssWHwnbE6/qXHnXxER1//8QAGhABAQEBAAMAAAAAAAAAAAAAAREAITFxof/aAAgBAQABPyEQxAHp1HwhAzVhUmA8nZYiZM7BYYcgnG8ThPD/ABnsmMsKKtGI9Ot6FJWt+HMlSsAB8GUE4GAcN//aAAwDAQACAAMAAAAQID//xAAZEQEAAwEBAAAAAAAAAAAAAAABESExAFH/2gAIAQMBAT8QQhjvYVZIhECxbAX6gNtUNlcpfMd//8QAFxEBAQEBAAAAAAAAAAAAAAAAAREhYf/aAAgBAgEBPxBB5bEEjUghUStgSqYjHcaAsWChmur/AP/EABkQAQEAAwEAAAAAAAAAAAAAAAERABAhMf/aAAgBAQABPxBVSdDhIXk8p11lVl/qVwhT9wSejhZTxfwAjggwa+5In84WsfzDNAYRABW1kceBDUvHQiEwVX//2Q==" alt=""/><picture><source type="image/avif" data-srcset="/static/a671edcce8e625b6cba1a1bb8d2d7aff/4814e/gatsby.avif 750w,/static/a671edcce8e625b6cba1a1bb8d2d7aff/acf79/gatsby.avif 1080w,/static/a671edcce8e625b6cba1a1bb8d2d7aff/1d69b/gatsby.avif 1123w" sizes="100vw"/><source type="image/webp" data-srcset="/static/a671edcce8e625b6cba1a1bb8d2d7aff/73e0d/gatsby.webp 750w,/static/a671edcce8e625b6cba1a1bb8d2d7aff/9fede/gatsby.webp 1080w,/static/a671edcce8e625b6cba1a1bb8d2d7aff/d4610/gatsby.webp 1123w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/a671edcce8e625b6cba1a1bb8d2d7aff/ca123/gatsby.jpg" data-srcset="/static/a671edcce8e625b6cba1a1bb8d2d7aff/cf2dd/gatsby.jpg 750w,/static/a671edcce8e625b6cba1a1bb8d2d7aff/24294/gatsby.jpg 1080w,/static/a671edcce8e625b6cba1a1bb8d2d7aff/ca123/gatsby.jpg 1123w" alt="Gatsby 블로그 이사"/></picture><noscript><picture><source type="image/avif" srcSet="/static/a671edcce8e625b6cba1a1bb8d2d7aff/4814e/gatsby.avif 750w,/static/a671edcce8e625b6cba1a1bb8d2d7aff/acf79/gatsby.avif 1080w,/static/a671edcce8e625b6cba1a1bb8d2d7aff/1d69b/gatsby.avif 1123w" sizes="100vw"/><source type="image/webp" srcSet="/static/a671edcce8e625b6cba1a1bb8d2d7aff/73e0d/gatsby.webp 750w,/static/a671edcce8e625b6cba1a1bb8d2d7aff/9fede/gatsby.webp 1080w,/static/a671edcce8e625b6cba1a1bb8d2d7aff/d4610/gatsby.webp 1123w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/a671edcce8e625b6cba1a1bb8d2d7aff/ca123/gatsby.jpg" srcSet="/static/a671edcce8e625b6cba1a1bb8d2d7aff/cf2dd/gatsby.jpg 750w,/static/a671edcce8e625b6cba1a1bb8d2d7aff/24294/gatsby.jpg 1080w,/static/a671edcce8e625b6cba1a1bb8d2d7aff/ca123/gatsby.jpg 1123w" alt="Gatsby 블로그 이사"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -89,4 +89,4 @@ <h2 id="Gatsby" style="position:relative">Gatsby<a href="#Gatsby" aria-label="Ga
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/blog/blog-insert-tap/index.html b/blog/blog-insert-tap/index.html
index c6a8baf73..ec923c692 100644
--- a/blog/blog-insert-tap/index.html
+++ b/blog/blog-insert-tap/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">블로그 탭 추가, 그리고 회고 시작</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/blog/">Blog</a>,  <a href="/tags/gatsby/">Gatsby</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">블로그 탭 추가, 그리고 회고 시작</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">주간회고를 시작하면서 블로그의 틀을 조금 수정했다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-05-18">18 May 2021</time><span class="byline-reading-time"><span class="bull">•</span>8 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:119.36170212765957%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAYCAYAAAD6S912AAAACXBIWXMAAAsTAAALEwEAmpwYAAAEHklEQVQ4y22V+VMiSRCF+bPnt40N19lxUERFhwZEZEBuh6MZlaMPDsfbMBTv+8JjvFABR/FtZEIrElsRFVXQHV+/zHyVpXt5ecH5+TkuLy9RPDvD/f09Li4ueN7e3uLh4QFnZ2f8/O7ujvf0Do2j42MYAj4IGRmCnIJZTkFHD37/vkSxWORZagBPTk5wdXWF6tMTf5BA9P/R0REeHx8ZqP6aQk8sAktGZpigpKFb3dzC/v4+yo9l/Kk+8YukikatVsPW1hYWFhawvLyMjY0NrK+vY3NzE+lsFn1iFCY5CbOSZhgrNCfGYfT70O/3wxYJw+p2o99kgmC1QozHMTk5ib29PVZXLpfx5/kZlXIZ80tL6PV5YY2EYR4T61ACCqrEkr8pKZhVCcZ4DG32QfT092NmepoVHh8f4/r6Gk9P9Qi0cV4sQoyJ8ETCMMQisGZk6LRkCo0vWPMZtAtmiJEoh7qysvIGpKJUq1WGPT8/80pK25wOhtVDbsBoJaU9P2OsTkqnIcsyJEniHN/c3GBnZwenp6cMen19Re31lffu8TGYpAQsVBRBS6iUhC2fwefvw+jr7UU2m0U8HofP58Pu7i6rKxQKvH8D1mq8/7WwgC5RC7mhjoDWvIoOxxDczu/IZDLI5XKYnp7m0Ofn59lGBG4Fbu/voyPohy2nvgMpf2RQvcOOH8EgJFnG3NwcF4WUJhIJzqMG02xFY/fgAPpQALac0qSQCpJT8cU+CMegHYqqsjoCplIphEIh9ifBtKkBC5sb6BgNwJZVWnI4mUG7w84+JODMzAyb+eDggCtNttEgzQojsoTedKIlh40qd4sRfDUYkEwkMDs7i7W1NT6GlLtKpfIWrrZWKxU4QyF0hQIwpRMfbcM+nMziU6ceXvcIlpaWsLq6yueX8kcebA6ZxkqhgMeHB7aTORioA5uL8nl4CILNhkGbjauseY+AzQppUH4PDw/fft+XSu8hU0HancMwmUxITExgYmICXq8XiqJge3ubQ6acUbujPSmn3LZaiBVaVAl9yXH809mJgM+HSDTKILINGZwm+ZCMTUWiblMqld5gzXnVaSfkX48LRqMRgUAA0WiUj93i4iKHTL2QQtYg2mgOX9vXFWYVtFkFmPsH4PP7EYvFGDg2NsZK6SyTF2kmk8kPBm8tUr3bqBL+6u6Cw26Hx+tlhQSiVRRF9uPU1BSrpXC1K6A51HegksY3JY2/v3ZgaNDOzYAgdNRoFQQB4XAYo6Oj3HFaQ2wNW0dmNv6MoV2vh8vphMViQTAYhKqqDKSculwubhBkdLqs/q8YWhp01qwCfSSEL4YujLjd6DYaMTIygnw+D4/Hw5aha4A6DV0BVPlWIFmG7pwPwI5uA9wuFwYGBuB0OhlIoZIygpDvaFAe6SPNZ7kZ+B9oK293p4hJFgAAAABJRU5ErkJggg==" alt=""/><picture><source type="image/avif" data-srcset="/static/9f6dbe328446b8507551012cda22b44a/df58a/any.avif 470w" sizes="100vw"/><source type="image/webp" data-srcset="/static/9f6dbe328446b8507551012cda22b44a/f13dc/any.webp 470w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/9f6dbe328446b8507551012cda22b44a/91919/any.png" data-srcset="/static/9f6dbe328446b8507551012cda22b44a/91919/any.png 470w" alt="블로그 탭 추가, 그리고 회고 시작"/></picture><noscript><picture><source type="image/avif" srcSet="/static/9f6dbe328446b8507551012cda22b44a/df58a/any.avif 470w" sizes="100vw"/><source type="image/webp" srcSet="/static/9f6dbe328446b8507551012cda22b44a/f13dc/any.webp 470w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/9f6dbe328446b8507551012cda22b44a/91919/any.png" srcSet="/static/9f6dbe328446b8507551012cda22b44a/91919/any.png 470w" alt="블로그 탭 추가, 그리고 회고 시작"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">블로그 탭 추가, 그리고 회고 시작</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/blog/">Blog</a>,  <a href="/tags/gatsby/">Gatsby</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">블로그 탭 추가, 그리고 회고 시작</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">주간회고를 시작하면서 블로그의 틀을 조금 수정했다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-05-18">18 May 2021</time><span class="byline-reading-time"><span class="bull">•</span>8 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:119.36170212765957%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAYCAYAAAD6S912AAAACXBIWXMAAAsTAAALEwEAmpwYAAAEHklEQVQ4y22V+VMiSRCF+bPnt40N19lxUERFhwZEZEBuh6MZlaMPDsfbMBTv+8JjvFABR/FtZEIrElsRFVXQHV+/zHyVpXt5ecH5+TkuLy9RPDvD/f09Li4ueN7e3uLh4QFnZ2f8/O7ujvf0Do2j42MYAj4IGRmCnIJZTkFHD37/vkSxWORZagBPTk5wdXWF6tMTf5BA9P/R0REeHx8ZqP6aQk8sAktGZpigpKFb3dzC/v4+yo9l/Kk+8YukikatVsPW1hYWFhawvLyMjY0NrK+vY3NzE+lsFn1iFCY5CbOSZhgrNCfGYfT70O/3wxYJw+p2o99kgmC1QozHMTk5ib29PVZXLpfx5/kZlXIZ80tL6PV5YY2EYR4T61ACCqrEkr8pKZhVCcZ4DG32QfT092NmepoVHh8f4/r6Gk9P9Qi0cV4sQoyJ8ETCMMQisGZk6LRkCo0vWPMZtAtmiJEoh7qysvIGpKJUq1WGPT8/80pK25wOhtVDbsBoJaU9P2OsTkqnIcsyJEniHN/c3GBnZwenp6cMen19Re31lffu8TGYpAQsVBRBS6iUhC2fwefvw+jr7UU2m0U8HofP58Pu7i6rKxQKvH8D1mq8/7WwgC5RC7mhjoDWvIoOxxDczu/IZDLI5XKYnp7m0Ofn59lGBG4Fbu/voyPohy2nvgMpf2RQvcOOH8EgJFnG3NwcF4WUJhIJzqMG02xFY/fgAPpQALac0qSQCpJT8cU+CMegHYqqsjoCplIphEIh9ifBtKkBC5sb6BgNwJZVWnI4mUG7w84+JODMzAyb+eDggCtNttEgzQojsoTedKIlh40qd4sRfDUYkEwkMDs7i7W1NT6GlLtKpfIWrrZWKxU4QyF0hQIwpRMfbcM+nMziU6ceXvcIlpaWsLq6yueX8kcebA6ZxkqhgMeHB7aTORioA5uL8nl4CILNhkGbjauseY+AzQppUH4PDw/fft+XSu8hU0HancMwmUxITExgYmICXq8XiqJge3ubQ6acUbujPSmn3LZaiBVaVAl9yXH809mJgM+HSDTKILINGZwm+ZCMTUWiblMqld5gzXnVaSfkX48LRqMRgUAA0WiUj93i4iKHTL2QQtYg2mgOX9vXFWYVtFkFmPsH4PP7EYvFGDg2NsZK6SyTF2kmk8kPBm8tUr3bqBL+6u6Cw26Hx+tlhQSiVRRF9uPU1BSrpXC1K6A51HegksY3JY2/v3ZgaNDOzYAgdNRoFQQB4XAYo6Oj3HFaQ2wNW0dmNv6MoV2vh8vphMViQTAYhKqqDKSculwubhBkdLqs/q8YWhp01qwCfSSEL4YujLjd6DYaMTIygnw+D4/Hw5aha4A6DV0BVPlWIFmG7pwPwI5uA9wuFwYGBuB0OhlIoZIygpDvaFAe6SPNZ7kZ+B9oK293p4hJFgAAAABJRU5ErkJggg==" alt=""/><picture><source type="image/avif" data-srcset="/static/9f6dbe328446b8507551012cda22b44a/df58a/any.avif 470w" sizes="100vw"/><source type="image/webp" data-srcset="/static/9f6dbe328446b8507551012cda22b44a/f13dc/any.webp 470w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/9f6dbe328446b8507551012cda22b44a/91919/any.png" data-srcset="/static/9f6dbe328446b8507551012cda22b44a/91919/any.png 470w" alt="블로그 탭 추가, 그리고 회고 시작"/></picture><noscript><picture><source type="image/avif" srcSet="/static/9f6dbe328446b8507551012cda22b44a/df58a/any.avif 470w" sizes="100vw"/><source type="image/webp" srcSet="/static/9f6dbe328446b8507551012cda22b44a/f13dc/any.webp 470w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/9f6dbe328446b8507551012cda22b44a/91919/any.png" srcSet="/static/9f6dbe328446b8507551012cda22b44a/91919/any.png 470w" alt="블로그 탭 추가, 그리고 회고 시작"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -109,4 +109,4 @@ <h2 id="블로그-탭-추가" style="position:relative">블로그 탭 추가<a h
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/blog/jekyll-kakao-share-button/index.html b/blog/jekyll-kakao-share-button/index.html
index 626b081f4..a72e3c7e3 100644
--- a/blog/jekyll-kakao-share-button/index.html
+++ b/blog/jekyll-kakao-share-button/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">Github Blog에 카카오톡 공유버튼 만들기</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/blog/">Blog</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">Github Blog에 카카오톡 공유버튼 만들기</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Jekyll로 만든 Github 블로그에 카톡 공유버튼을 만들어보자!</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2020-05-22">22 May 2020</time><span class="byline-reading-time"><span class="bull">•</span>15 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:48.099173553719005%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAACyUlEQVQoz23D20tUeQAH8F9o2UsT4dmHoKjGP2CpoFgw6KFeK4JejKAiKiqKgtqhraisueVtHDXopkhbZBe6WesKy7Zq7WY1F5sZNRx/gzl6bnMuP89MM3N+5xu0r37gQy77vCuutXTUNPub3T6v1x0IBP4fDLqbm665W4Ln3KGmBndra9gdCoXmHQ6HawKBwKrKyspKkonEh4ypqD2eGzcMkzFd13/UtByTlRyTtCKTZJWJ4iwTRXG+pizLpampqdHq6uqlRJHkkWQygQ+RTxgYfItINIZ4fASxkRQ0ZRLm5zC+iRmUAZTKZZTKNsq2Dc5tcLv8o+NwWJb1dVHVYheRZTmaSnzGWGLEjn0cdia+jDujo0knkRpzitNxp/BqjwM14wCYNwdsACgUinQBIS6im3OxmTyQNmBPMiBXAnSziNSEhPiYiPGMBcUsIprV8WZSwRBVQXN5oJQFSinAGeMoTiBvaZmKquUu8iGjxXY/zeHAC9WueyzD8zfD2cZX2FTXgf1ne1C7K4QrPf+BnOvFLx3/YPGFXmy5PQyIJzE7vBHRvs2cp7fCUgcyC1ffdZF3aS2y42EObe+N8vE/NH7kT5Mfr3/Ktx3u5Dd6/uUbtjfz010DnJx5zj0v43xloJ+vDQ9xKAf54KN13H++tox0LSy5n1as6XORZNZM/vaG4USfgUO9OtojBVy/9xY7j3Vjz68PsPf0fdzuT+DnjkGsbx9ATeNfOPoiCagNsDN1wMw+ONOHUNA/zVSt8LmILEmvNWbNyjpLyzqjBrOoYZhUlDUqKRqVFY2yuTkqaQadVnSaVXWqmYzmLZ3OMYkyU5rMW7msqqrvCFmwhJw8dWrZzRb/T50hr9AV8glNvnqhqTEo3O1sF37vahc6b4YFv/eq0N3WKDy71So8uRES2hp8wsUrLUK9v1u45O0SvME7gsfjqSaEVHwHDedJ52YktlAAAAAASUVORK5CYII=" alt=""/><picture><source type="image/avif" data-srcset="/static/122e747ed0f9d7367c71f42c3f5a94fa/5f09e/kakaoShare.avif 605w" sizes="100vw"/><source type="image/webp" data-srcset="/static/122e747ed0f9d7367c71f42c3f5a94fa/5fc57/kakaoShare.webp 605w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/122e747ed0f9d7367c71f42c3f5a94fa/81543/kakaoShare.png" data-srcset="/static/122e747ed0f9d7367c71f42c3f5a94fa/81543/kakaoShare.png 605w" alt="Github Blog에 카카오톡 공유버튼 만들기"/></picture><noscript><picture><source type="image/avif" srcSet="/static/122e747ed0f9d7367c71f42c3f5a94fa/5f09e/kakaoShare.avif 605w" sizes="100vw"/><source type="image/webp" srcSet="/static/122e747ed0f9d7367c71f42c3f5a94fa/5fc57/kakaoShare.webp 605w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/122e747ed0f9d7367c71f42c3f5a94fa/81543/kakaoShare.png" srcSet="/static/122e747ed0f9d7367c71f42c3f5a94fa/81543/kakaoShare.png 605w" alt="Github Blog에 카카오톡 공유버튼 만들기"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">Github Blog에 카카오톡 공유버튼 만들기</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/blog/">Blog</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">Github Blog에 카카오톡 공유버튼 만들기</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Jekyll로 만든 Github 블로그에 카톡 공유버튼을 만들어보자!</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2020-05-22">22 May 2020</time><span class="byline-reading-time"><span class="bull">•</span>15 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:48.099173553719005%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAACyUlEQVQoz23D20tUeQAH8F9o2UsT4dmHoKjGP2CpoFgw6KFeK4JejKAiKiqKgtqhraisueVtHDXopkhbZBe6WesKy7Zq7WY1F5sZNRx/gzl6bnMuP89MM3N+5xu0r37gQy77vCuutXTUNPub3T6v1x0IBP4fDLqbm665W4Ln3KGmBndra9gdCoXmHQ6HawKBwKrKyspKkonEh4ypqD2eGzcMkzFd13/UtByTlRyTtCKTZJWJ4iwTRXG+pizLpampqdHq6uqlRJHkkWQygQ+RTxgYfItINIZ4fASxkRQ0ZRLm5zC+iRmUAZTKZZTKNsq2Dc5tcLv8o+NwWJb1dVHVYheRZTmaSnzGWGLEjn0cdia+jDujo0knkRpzitNxp/BqjwM14wCYNwdsACgUinQBIS6im3OxmTyQNmBPMiBXAnSziNSEhPiYiPGMBcUsIprV8WZSwRBVQXN5oJQFSinAGeMoTiBvaZmKquUu8iGjxXY/zeHAC9WueyzD8zfD2cZX2FTXgf1ne1C7K4QrPf+BnOvFLx3/YPGFXmy5PQyIJzE7vBHRvs2cp7fCUgcyC1ffdZF3aS2y42EObe+N8vE/NH7kT5Mfr3/Ktx3u5Dd6/uUbtjfz010DnJx5zj0v43xloJ+vDQ9xKAf54KN13H++tox0LSy5n1as6XORZNZM/vaG4USfgUO9OtojBVy/9xY7j3Vjz68PsPf0fdzuT+DnjkGsbx9ATeNfOPoiCagNsDN1wMw+ONOHUNA/zVSt8LmILEmvNWbNyjpLyzqjBrOoYZhUlDUqKRqVFY2yuTkqaQadVnSaVXWqmYzmLZ3OMYkyU5rMW7msqqrvCFmwhJw8dWrZzRb/T50hr9AV8glNvnqhqTEo3O1sF37vahc6b4YFv/eq0N3WKDy71So8uRES2hp8wsUrLUK9v1u45O0SvME7gsfjqSaEVHwHDedJ52YktlAAAAAASUVORK5CYII=" alt=""/><picture><source type="image/avif" data-srcset="/static/122e747ed0f9d7367c71f42c3f5a94fa/5f09e/kakaoShare.avif 605w" sizes="100vw"/><source type="image/webp" data-srcset="/static/122e747ed0f9d7367c71f42c3f5a94fa/5fc57/kakaoShare.webp 605w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/122e747ed0f9d7367c71f42c3f5a94fa/81543/kakaoShare.png" data-srcset="/static/122e747ed0f9d7367c71f42c3f5a94fa/81543/kakaoShare.png 605w" alt="Github Blog에 카카오톡 공유버튼 만들기"/></picture><noscript><picture><source type="image/avif" srcSet="/static/122e747ed0f9d7367c71f42c3f5a94fa/5f09e/kakaoShare.avif 605w" sizes="100vw"/><source type="image/webp" srcSet="/static/122e747ed0f9d7367c71f42c3f5a94fa/5fc57/kakaoShare.webp 605w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/122e747ed0f9d7367c71f42c3f5a94fa/81543/kakaoShare.png" srcSet="/static/122e747ed0f9d7367c71f42c3f5a94fa/81543/kakaoShare.png 605w" alt="Github Blog에 카카오톡 공유버튼 만들기"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -194,4 +194,4 @@ <h3 id="PS-카카오톡-공유-버튼을-딱맞게-완성했다-" style="positio
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/css/stacking-context/index.html b/css/stacking-context/index.html
index 7c261bf88..747c78177 100644
--- a/css/stacking-context/index.html
+++ b/css/stacking-context/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">왜 내 z-index는 먹히지 않는가?</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/css/">CSS</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">왜 내 z-index는 먹히지 않는가?</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">z-index가 때로 적용이 되지 않는 문제를 해결하기 위해 stacking context에 대해 정확히 알아본다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-02-11">11 Feb 2023</time><span class="byline-reading-time"><span class="bull">•</span>11 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:50%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAACuUlEQVQozx3O209SAQCA8fPQemnFaGmty7rpZls5a5mGdlPLUEAkzcQrF+EADhASQjkCHo+mUImZzrK8YEEZqGVvrXX7v76Wb9/Tt58QmSngncgRmNoknNwhNPMVR+ITopzHP7NLMLWLP/mN6PwPlNd/kRf/IM39QH71i8TL74RT3/ArWwxIG9giKwiitIxtdBmHtI41mmEg/oHByQJOeZO+sSx9sRy9sRyGoSX0Q8t0RDK4lQIepYAt9gFXIkd4ukDixS6R6QJCuy+FI/oOn5zFK+cIJXcIJrdxjn/EM1lAVLaxJfJ0RbO0hdd4EFrFPPJ+r1sCb2hwzXJXfEabfx6DewahK5gmMv2JwGQWx9gaw0/zOOJZekc3MEcy9Ei5vVlPNIsltolb2cIzuYM9kccez2GTNjD5X3HLOkFF+2MEg0um+3EaMf6W+MI2DnkdUckwlNok/f43z1Z/MvpyF/dUjtDcDr7UZ+zyBpH5bcKzX0it/ORJagtbdI3u4SWEC0aREr2DmxYJ31SG/ugSrokM/bEVTMNzGALPMQZm6RvL4Jz4iDmawRLP4kvm6R1bpTO0SKNDod4ioXMqCNfNQers4+jd01R2BLjyMICmR6LWqnB/ME3TYBq9d5GO8Cr9I2tYRlfoCr2me3iBzuACD3yzmLwvuNoZokTvRjhSqeVwlY5Dlc0crGxCrTFyvKGHUsMgtZZxDN40bYEFGpwpLj8a4WSjlaLbnahqTBy7Y6bMIHLnv058ismTRCiu1nG0poXiWhNHalopbbZzsdVDmd5FqU7kWF0XB6r0HKo2cuKelbPNIud0bs5oB1BrWtlf0cC+S7dRX2uipN6MoCqvQ1Vej6riLkWaFor/C2+0UW7yUqYXOX3fzgWjl1ONNtQaE6oqA6rqFtTXW/eE57U2SrRWSrUWijRG/gHsVMUpv17o4gAAAABJRU5ErkJggg==" alt=""/><picture><source type="image/avif" data-srcset="/static/7c9f51a321beda33442e37b03486eee3/12925/stacking-context.avif 700w" sizes="100vw"/><source type="image/webp" data-srcset="/static/7c9f51a321beda33442e37b03486eee3/377b6/stacking-context.webp 700w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/7c9f51a321beda33442e37b03486eee3/18b2e/stacking-context.png" data-srcset="/static/7c9f51a321beda33442e37b03486eee3/18b2e/stacking-context.png 700w" alt="왜 내 z-index는 먹히지 않는가?"/></picture><noscript><picture><source type="image/avif" srcSet="/static/7c9f51a321beda33442e37b03486eee3/12925/stacking-context.avif 700w" sizes="100vw"/><source type="image/webp" srcSet="/static/7c9f51a321beda33442e37b03486eee3/377b6/stacking-context.webp 700w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/7c9f51a321beda33442e37b03486eee3/18b2e/stacking-context.png" srcSet="/static/7c9f51a321beda33442e37b03486eee3/18b2e/stacking-context.png 700w" alt="왜 내 z-index는 먹히지 않는가?"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">왜 내 z-index는 먹히지 않는가?</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/css/">CSS</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">왜 내 z-index는 먹히지 않는가?</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">z-index가 때로 적용이 되지 않는 문제를 해결하기 위해 stacking context에 대해 정확히 알아본다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-02-11">11 Feb 2023</time><span class="byline-reading-time"><span class="bull">•</span>11 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:50%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAACuUlEQVQozx3O209SAQCA8fPQemnFaGmty7rpZls5a5mGdlPLUEAkzcQrF+EADhASQjkCHo+mUImZzrK8YEEZqGVvrXX7v76Wb9/Tt58QmSngncgRmNoknNwhNPMVR+ITopzHP7NLMLWLP/mN6PwPlNd/kRf/IM39QH71i8TL74RT3/ArWwxIG9giKwiitIxtdBmHtI41mmEg/oHByQJOeZO+sSx9sRy9sRyGoSX0Q8t0RDK4lQIepYAt9gFXIkd4ukDixS6R6QJCuy+FI/oOn5zFK+cIJXcIJrdxjn/EM1lAVLaxJfJ0RbO0hdd4EFrFPPJ+r1sCb2hwzXJXfEabfx6DewahK5gmMv2JwGQWx9gaw0/zOOJZekc3MEcy9Ei5vVlPNIsltolb2cIzuYM9kccez2GTNjD5X3HLOkFF+2MEg0um+3EaMf6W+MI2DnkdUckwlNok/f43z1Z/MvpyF/dUjtDcDr7UZ+zyBpH5bcKzX0it/ORJagtbdI3u4SWEC0aREr2DmxYJ31SG/ugSrokM/bEVTMNzGALPMQZm6RvL4Jz4iDmawRLP4kvm6R1bpTO0SKNDod4ioXMqCNfNQers4+jd01R2BLjyMICmR6LWqnB/ME3TYBq9d5GO8Cr9I2tYRlfoCr2me3iBzuACD3yzmLwvuNoZokTvRjhSqeVwlY5Dlc0crGxCrTFyvKGHUsMgtZZxDN40bYEFGpwpLj8a4WSjlaLbnahqTBy7Y6bMIHLnv058ismTRCiu1nG0poXiWhNHalopbbZzsdVDmd5FqU7kWF0XB6r0HKo2cuKelbPNIud0bs5oB1BrWtlf0cC+S7dRX2uipN6MoCqvQ1Vej6riLkWaFor/C2+0UW7yUqYXOX3fzgWjl1ONNtQaE6oqA6rqFtTXW/eE57U2SrRWSrUWijRG/gHsVMUpv17o4gAAAABJRU5ErkJggg==" alt=""/><picture><source type="image/avif" data-srcset="/static/7c9f51a321beda33442e37b03486eee3/12925/stacking-context.avif 700w" sizes="100vw"/><source type="image/webp" data-srcset="/static/7c9f51a321beda33442e37b03486eee3/377b6/stacking-context.webp 700w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/7c9f51a321beda33442e37b03486eee3/18b2e/stacking-context.png" data-srcset="/static/7c9f51a321beda33442e37b03486eee3/18b2e/stacking-context.png 700w" alt="왜 내 z-index는 먹히지 않는가?"/></picture><noscript><picture><source type="image/avif" srcSet="/static/7c9f51a321beda33442e37b03486eee3/12925/stacking-context.avif 700w" sizes="100vw"/><source type="image/webp" srcSet="/static/7c9f51a321beda33442e37b03486eee3/377b6/stacking-context.webp 700w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/7c9f51a321beda33442e37b03486eee3/18b2e/stacking-context.png" srcSet="/static/7c9f51a321beda33442e37b03486eee3/18b2e/stacking-context.png 700w" alt="왜 내 z-index는 먹히지 않는가?"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -174,4 +174,4 @@ <h2 id="stacking-context-생성-조건" style="position:relative">stacking conte
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/diary/20210517/index.html b/diary/20210517/index.html
index 98038a27f..d0f1ef28d 100644
--- a/diary/20210517/index.html
+++ b/diary/20210517/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">2021년 5월 2주차 회고</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/diary/">Diary</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">2021년 5월 2주차 회고</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">2021년 5월 2주차 회고</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-05-17">17 May 2021</time><span class="byline-reading-time"><span class="bull">•</span>4 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:100%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAAUABQDASIAAhEBAxEB/8QAGgABAAIDAQAAAAAAAAAAAAAAAAUHAgMGCf/EABkBAAIDAQAAAAAAAAAAAAAAAAMFAAECBv/aAAwDAQACEAMQAAAB9o9FZT/PPLjckYBk8w+5ES//xAAcEAACAwEAAwAAAAAAAAAAAAADBAECBQYSExT/2gAIAQEAAQUCJpZ9XXnyKMRehKRyCbXRbXLYW9hY/wBIUfXWSwKJGCnlT//EACURAAICAQMCBwEAAAAAAAAAAAECAxEEAAUSE1EUISIxQYKx8P/aAAgBAwEBPwHdsHFfw6bduM8UgXCkypEgR4mkaKF8vHieeOwnV68Qk6HouJkOQA9oeS2EYCzXJOLVyIFhgGBqvcA9xofH1/NAnv8A3lr/xAAiEQACAgAFBQEAAAAAAAAAAAACAwEEAAUSEyIUISOx8BH/2gAIAQIBAT8Br5nmQ1zuHkzLAl1G3QaaU3lis9CtS4tqQxhDO6MdaImK5CdsmLPFM3sqVTtBtWjroKyqfzxvJYS5fjJi+DJIeDDHt2Mo5Y+9Y+9Y/8QAJxAAAwACAQMEAAcAAAAAAAAAAQIDBBESAAUhBhMiMRQVJDIzocH/2gAIAQEABj8Ct258k/mU4zzGxEyaK/4SralkLLSlpfHWR7PJZueI9xm11jxTDyKY1Zqb5jZSrDFUDe73YhMfwS3ucneyKTxC7YTpF9zeYZGXgQynfFtoOJ2POxsH7DEa6p6k7xRqd1xmnPtVFpac8CRc6MeLzYCysJ2l/HZd8+TN8cj0/wB6HccvAei3yUr3HKxLZTtZ7ayK4N4OcVmqZVxQVxjNhIxZNdTxr4nb8aeJ+lwYduyLUhPt0FVMRG93GjxqkxwdZqZAKpRjvqgOyCy8vP2AX0PGta4r+3R8ff3vRJ8cCD42NfLX19Mw2f60OtsSTs7Px/wAdf/EABoQAQEBAQADAAAAAAAAAAAAAAERIQAxQXH/2gAIAQEAAT8hV7uqgaGKUEulOOj6TTNwuIOizuYECCYGKitdhd8q6uq7HpWdx6IIWfZ0X8HBwNVCb4mUiNRyGuY2S2FA6zWI5bD8lDEmCaO45AFb2SFWKp5x9B3/2gAMAwEAAgADAAAAEHcIwP/EAB0RAQEAAgEFAAAAAAAAAAAAAAERADEhQVFhkbH/2gAIAQMBAT8QEaTv8ODiiShfMBxjaGj0UnOiCzEwVnk4g233erX19uf/xAAcEQEAAgEFAAAAAAAAAAAAAAABESEAMVGBkfD/2gAIAQIBAT8Qk8x1mTyk6p2BH0UNnUcCKmBakBKQRdcZAqtve3P/xAAXEAEBAQEAAAAAAAAAAAAAAAABEQAh/9oACAEBAAE/ECQZkMfeWULuVWKlf4rHSIqMkorQuBTKfyR7umQJN9s2MkZZQfvYrz/+3DvEboAj5iyrLUQIkGYIJ0twassPpVBBMDbrUgNph7EKVDlHiLAAA//Z" alt=""/><picture><source type="image/avif" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/099ee/diary.avif 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/caf3c/diary.avif 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/e65b9/diary.avif 1200w" sizes="100vw"/><source type="image/webp" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f03f/diary.webp 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f506/diary.webp 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/83805/diary.webp 1200w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/0f5ce/diary.jpg 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/b74b1/diary.jpg 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg 1200w" alt="2021년 5월 2주차 회고"/></picture><noscript><picture><source type="image/avif" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/099ee/diary.avif 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/caf3c/diary.avif 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/e65b9/diary.avif 1200w" sizes="100vw"/><source type="image/webp" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f03f/diary.webp 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f506/diary.webp 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/83805/diary.webp 1200w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/0f5ce/diary.jpg 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/b74b1/diary.jpg 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg 1200w" alt="2021년 5월 2주차 회고"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">2021년 5월 2주차 회고</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/diary/">Diary</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">2021년 5월 2주차 회고</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">2021년 5월 2주차 회고</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-05-17">17 May 2021</time><span class="byline-reading-time"><span class="bull">•</span>4 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:100%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAAUABQDASIAAhEBAxEB/8QAGgABAAIDAQAAAAAAAAAAAAAAAAUHAgMGCf/EABkBAAIDAQAAAAAAAAAAAAAAAAMFAAECBv/aAAwDAQACEAMQAAAB9o9FZT/PPLjckYBk8w+5ES//xAAcEAACAwEAAwAAAAAAAAAAAAADBAECBQYSExT/2gAIAQEAAQUCJpZ9XXnyKMRehKRyCbXRbXLYW9hY/wBIUfXWSwKJGCnlT//EACURAAICAQMCBwEAAAAAAAAAAAECAxEEAAUSE1EUISIxQYKx8P/aAAgBAwEBPwHdsHFfw6bduM8UgXCkypEgR4mkaKF8vHieeOwnV68Qk6HouJkOQA9oeS2EYCzXJOLVyIFhgGBqvcA9xofH1/NAnv8A3lr/xAAiEQACAgAFBQEAAAAAAAAAAAACAwEEAAUSEyIUISOx8BH/2gAIAQIBAT8Br5nmQ1zuHkzLAl1G3QaaU3lis9CtS4tqQxhDO6MdaImK5CdsmLPFM3sqVTtBtWjroKyqfzxvJYS5fjJi+DJIeDDHt2Mo5Y+9Y+9Y/8QAJxAAAwACAQMEAAcAAAAAAAAAAQIDBBESAAUhBhMiMRQVJDIzocH/2gAIAQEABj8Ct258k/mU4zzGxEyaK/4SralkLLSlpfHWR7PJZueI9xm11jxTDyKY1Zqb5jZSrDFUDe73YhMfwS3ucneyKTxC7YTpF9zeYZGXgQynfFtoOJ2POxsH7DEa6p6k7xRqd1xmnPtVFpac8CRc6MeLzYCysJ2l/HZd8+TN8cj0/wB6HccvAei3yUr3HKxLZTtZ7ayK4N4OcVmqZVxQVxjNhIxZNdTxr4nb8aeJ+lwYduyLUhPt0FVMRG93GjxqkxwdZqZAKpRjvqgOyCy8vP2AX0PGta4r+3R8ff3vRJ8cCD42NfLX19Mw2f60OtsSTs7Px/wAdf/EABoQAQEBAQADAAAAAAAAAAAAAAERIQAxQXH/2gAIAQEAAT8hV7uqgaGKUEulOOj6TTNwuIOizuYECCYGKitdhd8q6uq7HpWdx6IIWfZ0X8HBwNVCb4mUiNRyGuY2S2FA6zWI5bD8lDEmCaO45AFb2SFWKp5x9B3/2gAMAwEAAgADAAAAEHcIwP/EAB0RAQEAAgEFAAAAAAAAAAAAAAERADEhQVFhkbH/2gAIAQMBAT8QEaTv8ODiiShfMBxjaGj0UnOiCzEwVnk4g233erX19uf/xAAcEQEAAgEFAAAAAAAAAAAAAAABESEAMVGBkfD/2gAIAQIBAT8Qk8x1mTyk6p2BH0UNnUcCKmBakBKQRdcZAqtve3P/xAAXEAEBAQEAAAAAAAAAAAAAAAABEQAh/9oACAEBAAE/ECQZkMfeWULuVWKlf4rHSIqMkorQuBTKfyR7umQJN9s2MkZZQfvYrz/+3DvEboAj5iyrLUQIkGYIJ0twassPpVBBMDbrUgNph7EKVDlHiLAAA//Z" alt=""/><picture><source type="image/avif" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/099ee/diary.avif 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/caf3c/diary.avif 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/e65b9/diary.avif 1200w" sizes="100vw"/><source type="image/webp" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f03f/diary.webp 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f506/diary.webp 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/83805/diary.webp 1200w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/0f5ce/diary.jpg 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/b74b1/diary.jpg 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg 1200w" alt="2021년 5월 2주차 회고"/></picture><noscript><picture><source type="image/avif" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/099ee/diary.avif 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/caf3c/diary.avif 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/e65b9/diary.avif 1200w" sizes="100vw"/><source type="image/webp" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f03f/diary.webp 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f506/diary.webp 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/83805/diary.webp 1200w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/0f5ce/diary.jpg 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/b74b1/diary.jpg 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg 1200w" alt="2021년 5월 2주차 회고"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -121,4 +121,4 @@ <h2 id="다음주-할-일" style="position:relative">다음주 할 일<a href="#
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/diary/20210523/index.html b/diary/20210523/index.html
index 92aa123b0..8ea6161ee 100644
--- a/diary/20210523/index.html
+++ b/diary/20210523/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">2021년 5월 3주차 회고</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/diary/">Diary</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">2021년 5월 3주차 회고</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">2021년 5월 3주차 회고</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-05-24">24 May 2021</time><span class="byline-reading-time"><span class="bull">•</span>4 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:100%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAAUABQDASIAAhEBAxEB/8QAGgABAAIDAQAAAAAAAAAAAAAAAAUHAgMGCf/EABkBAAIDAQAAAAAAAAAAAAAAAAMFAAECBv/aAAwDAQACEAMQAAAB9o9FZT/PPLjckYBk8w+5ES//xAAcEAACAwEAAwAAAAAAAAAAAAADBAECBQYSExT/2gAIAQEAAQUCJpZ9XXnyKMRehKRyCbXRbXLYW9hY/wBIUfXWSwKJGCnlT//EACURAAICAQMCBwEAAAAAAAAAAAECAxEEAAUSE1EUISIxQYKx8P/aAAgBAwEBPwHdsHFfw6bduM8UgXCkypEgR4mkaKF8vHieeOwnV68Qk6HouJkOQA9oeS2EYCzXJOLVyIFhgGBqvcA9xofH1/NAnv8A3lr/xAAiEQACAgAFBQEAAAAAAAAAAAACAwEEAAUSEyIUISOx8BH/2gAIAQIBAT8Br5nmQ1zuHkzLAl1G3QaaU3lis9CtS4tqQxhDO6MdaImK5CdsmLPFM3sqVTtBtWjroKyqfzxvJYS5fjJi+DJIeDDHt2Mo5Y+9Y+9Y/8QAJxAAAwACAQMEAAcAAAAAAAAAAQIDBBESAAUhBhMiMRQVJDIzocH/2gAIAQEABj8Ct258k/mU4zzGxEyaK/4SralkLLSlpfHWR7PJZueI9xm11jxTDyKY1Zqb5jZSrDFUDe73YhMfwS3ucneyKTxC7YTpF9zeYZGXgQynfFtoOJ2POxsH7DEa6p6k7xRqd1xmnPtVFpac8CRc6MeLzYCysJ2l/HZd8+TN8cj0/wB6HccvAei3yUr3HKxLZTtZ7ayK4N4OcVmqZVxQVxjNhIxZNdTxr4nb8aeJ+lwYduyLUhPt0FVMRG93GjxqkxwdZqZAKpRjvqgOyCy8vP2AX0PGta4r+3R8ff3vRJ8cCD42NfLX19Mw2f60OtsSTs7Px/wAdf/EABoQAQEBAQADAAAAAAAAAAAAAAERIQAxQXH/2gAIAQEAAT8hV7uqgaGKUEulOOj6TTNwuIOizuYECCYGKitdhd8q6uq7HpWdx6IIWfZ0X8HBwNVCb4mUiNRyGuY2S2FA6zWI5bD8lDEmCaO45AFb2SFWKp5x9B3/2gAMAwEAAgADAAAAEHcIwP/EAB0RAQEAAgEFAAAAAAAAAAAAAAERADEhQVFhkbH/2gAIAQMBAT8QEaTv8ODiiShfMBxjaGj0UnOiCzEwVnk4g233erX19uf/xAAcEQEAAgEFAAAAAAAAAAAAAAABESEAMVGBkfD/2gAIAQIBAT8Qk8x1mTyk6p2BH0UNnUcCKmBakBKQRdcZAqtve3P/xAAXEAEBAQEAAAAAAAAAAAAAAAABEQAh/9oACAEBAAE/ECQZkMfeWULuVWKlf4rHSIqMkorQuBTKfyR7umQJN9s2MkZZQfvYrz/+3DvEboAj5iyrLUQIkGYIJ0twassPpVBBMDbrUgNph7EKVDlHiLAAA//Z" alt=""/><picture><source type="image/avif" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/099ee/diary.avif 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/caf3c/diary.avif 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/e65b9/diary.avif 1200w" sizes="100vw"/><source type="image/webp" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f03f/diary.webp 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f506/diary.webp 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/83805/diary.webp 1200w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/0f5ce/diary.jpg 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/b74b1/diary.jpg 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg 1200w" alt="2021년 5월 3주차 회고"/></picture><noscript><picture><source type="image/avif" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/099ee/diary.avif 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/caf3c/diary.avif 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/e65b9/diary.avif 1200w" sizes="100vw"/><source type="image/webp" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f03f/diary.webp 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f506/diary.webp 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/83805/diary.webp 1200w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/0f5ce/diary.jpg 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/b74b1/diary.jpg 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg 1200w" alt="2021년 5월 3주차 회고"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">2021년 5월 3주차 회고</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/diary/">Diary</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">2021년 5월 3주차 회고</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">2021년 5월 3주차 회고</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-05-24">24 May 2021</time><span class="byline-reading-time"><span class="bull">•</span>4 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:100%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAAUABQDASIAAhEBAxEB/8QAGgABAAIDAQAAAAAAAAAAAAAAAAUHAgMGCf/EABkBAAIDAQAAAAAAAAAAAAAAAAMFAAECBv/aAAwDAQACEAMQAAAB9o9FZT/PPLjckYBk8w+5ES//xAAcEAACAwEAAwAAAAAAAAAAAAADBAECBQYSExT/2gAIAQEAAQUCJpZ9XXnyKMRehKRyCbXRbXLYW9hY/wBIUfXWSwKJGCnlT//EACURAAICAQMCBwEAAAAAAAAAAAECAxEEAAUSE1EUISIxQYKx8P/aAAgBAwEBPwHdsHFfw6bduM8UgXCkypEgR4mkaKF8vHieeOwnV68Qk6HouJkOQA9oeS2EYCzXJOLVyIFhgGBqvcA9xofH1/NAnv8A3lr/xAAiEQACAgAFBQEAAAAAAAAAAAACAwEEAAUSEyIUISOx8BH/2gAIAQIBAT8Br5nmQ1zuHkzLAl1G3QaaU3lis9CtS4tqQxhDO6MdaImK5CdsmLPFM3sqVTtBtWjroKyqfzxvJYS5fjJi+DJIeDDHt2Mo5Y+9Y+9Y/8QAJxAAAwACAQMEAAcAAAAAAAAAAQIDBBESAAUhBhMiMRQVJDIzocH/2gAIAQEABj8Ct258k/mU4zzGxEyaK/4SralkLLSlpfHWR7PJZueI9xm11jxTDyKY1Zqb5jZSrDFUDe73YhMfwS3ucneyKTxC7YTpF9zeYZGXgQynfFtoOJ2POxsH7DEa6p6k7xRqd1xmnPtVFpac8CRc6MeLzYCysJ2l/HZd8+TN8cj0/wB6HccvAei3yUr3HKxLZTtZ7ayK4N4OcVmqZVxQVxjNhIxZNdTxr4nb8aeJ+lwYduyLUhPt0FVMRG93GjxqkxwdZqZAKpRjvqgOyCy8vP2AX0PGta4r+3R8ff3vRJ8cCD42NfLX19Mw2f60OtsSTs7Px/wAdf/EABoQAQEBAQADAAAAAAAAAAAAAAERIQAxQXH/2gAIAQEAAT8hV7uqgaGKUEulOOj6TTNwuIOizuYECCYGKitdhd8q6uq7HpWdx6IIWfZ0X8HBwNVCb4mUiNRyGuY2S2FA6zWI5bD8lDEmCaO45AFb2SFWKp5x9B3/2gAMAwEAAgADAAAAEHcIwP/EAB0RAQEAAgEFAAAAAAAAAAAAAAERADEhQVFhkbH/2gAIAQMBAT8QEaTv8ODiiShfMBxjaGj0UnOiCzEwVnk4g233erX19uf/xAAcEQEAAgEFAAAAAAAAAAAAAAABESEAMVGBkfD/2gAIAQIBAT8Qk8x1mTyk6p2BH0UNnUcCKmBakBKQRdcZAqtve3P/xAAXEAEBAQEAAAAAAAAAAAAAAAABEQAh/9oACAEBAAE/ECQZkMfeWULuVWKlf4rHSIqMkorQuBTKfyR7umQJN9s2MkZZQfvYrz/+3DvEboAj5iyrLUQIkGYIJ0twassPpVBBMDbrUgNph7EKVDlHiLAAA//Z" alt=""/><picture><source type="image/avif" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/099ee/diary.avif 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/caf3c/diary.avif 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/e65b9/diary.avif 1200w" sizes="100vw"/><source type="image/webp" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f03f/diary.webp 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f506/diary.webp 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/83805/diary.webp 1200w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/0f5ce/diary.jpg 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/b74b1/diary.jpg 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg 1200w" alt="2021년 5월 3주차 회고"/></picture><noscript><picture><source type="image/avif" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/099ee/diary.avif 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/caf3c/diary.avif 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/e65b9/diary.avif 1200w" sizes="100vw"/><source type="image/webp" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f03f/diary.webp 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f506/diary.webp 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/83805/diary.webp 1200w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/0f5ce/diary.jpg 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/b74b1/diary.jpg 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg 1200w" alt="2021년 5월 3주차 회고"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -107,4 +107,4 @@ <h2 id="다음주-할-일" style="position:relative">다음주 할 일<a href="#
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/diary/20210530/index.html b/diary/20210530/index.html
index 4839c9d08..617906b59 100644
--- a/diary/20210530/index.html
+++ b/diary/20210530/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">2021년 5월 마지막 주 회고</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/diary/">Diary</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">2021년 5월 마지막 주 회고</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">2021년 5월 마지막 주 회고</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-05-31">31 May 2021</time><span class="byline-reading-time"><span class="bull">•</span>5 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:100%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAAUABQDASIAAhEBAxEB/8QAGgABAAIDAQAAAAAAAAAAAAAAAAUHAgMGCf/EABkBAAIDAQAAAAAAAAAAAAAAAAMFAAECBv/aAAwDAQACEAMQAAAB9o9FZT/PPLjckYBk8w+5ES//xAAcEAACAwEAAwAAAAAAAAAAAAADBAECBQYSExT/2gAIAQEAAQUCJpZ9XXnyKMRehKRyCbXRbXLYW9hY/wBIUfXWSwKJGCnlT//EACURAAICAQMCBwEAAAAAAAAAAAECAxEEAAUSE1EUISIxQYKx8P/aAAgBAwEBPwHdsHFfw6bduM8UgXCkypEgR4mkaKF8vHieeOwnV68Qk6HouJkOQA9oeS2EYCzXJOLVyIFhgGBqvcA9xofH1/NAnv8A3lr/xAAiEQACAgAFBQEAAAAAAAAAAAACAwEEAAUSEyIUISOx8BH/2gAIAQIBAT8Br5nmQ1zuHkzLAl1G3QaaU3lis9CtS4tqQxhDO6MdaImK5CdsmLPFM3sqVTtBtWjroKyqfzxvJYS5fjJi+DJIeDDHt2Mo5Y+9Y+9Y/8QAJxAAAwACAQMEAAcAAAAAAAAAAQIDBBESAAUhBhMiMRQVJDIzocH/2gAIAQEABj8Ct258k/mU4zzGxEyaK/4SralkLLSlpfHWR7PJZueI9xm11jxTDyKY1Zqb5jZSrDFUDe73YhMfwS3ucneyKTxC7YTpF9zeYZGXgQynfFtoOJ2POxsH7DEa6p6k7xRqd1xmnPtVFpac8CRc6MeLzYCysJ2l/HZd8+TN8cj0/wB6HccvAei3yUr3HKxLZTtZ7ayK4N4OcVmqZVxQVxjNhIxZNdTxr4nb8aeJ+lwYduyLUhPt0FVMRG93GjxqkxwdZqZAKpRjvqgOyCy8vP2AX0PGta4r+3R8ff3vRJ8cCD42NfLX19Mw2f60OtsSTs7Px/wAdf/EABoQAQEBAQADAAAAAAAAAAAAAAERIQAxQXH/2gAIAQEAAT8hV7uqgaGKUEulOOj6TTNwuIOizuYECCYGKitdhd8q6uq7HpWdx6IIWfZ0X8HBwNVCb4mUiNRyGuY2S2FA6zWI5bD8lDEmCaO45AFb2SFWKp5x9B3/2gAMAwEAAgADAAAAEHcIwP/EAB0RAQEAAgEFAAAAAAAAAAAAAAERADEhQVFhkbH/2gAIAQMBAT8QEaTv8ODiiShfMBxjaGj0UnOiCzEwVnk4g233erX19uf/xAAcEQEAAgEFAAAAAAAAAAAAAAABESEAMVGBkfD/2gAIAQIBAT8Qk8x1mTyk6p2BH0UNnUcCKmBakBKQRdcZAqtve3P/xAAXEAEBAQEAAAAAAAAAAAAAAAABEQAh/9oACAEBAAE/ECQZkMfeWULuVWKlf4rHSIqMkorQuBTKfyR7umQJN9s2MkZZQfvYrz/+3DvEboAj5iyrLUQIkGYIJ0twassPpVBBMDbrUgNph7EKVDlHiLAAA//Z" alt=""/><picture><source type="image/avif" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/099ee/diary.avif 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/caf3c/diary.avif 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/e65b9/diary.avif 1200w" sizes="100vw"/><source type="image/webp" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f03f/diary.webp 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f506/diary.webp 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/83805/diary.webp 1200w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/0f5ce/diary.jpg 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/b74b1/diary.jpg 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg 1200w" alt="2021년 5월 마지막 주 회고"/></picture><noscript><picture><source type="image/avif" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/099ee/diary.avif 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/caf3c/diary.avif 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/e65b9/diary.avif 1200w" sizes="100vw"/><source type="image/webp" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f03f/diary.webp 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f506/diary.webp 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/83805/diary.webp 1200w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/0f5ce/diary.jpg 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/b74b1/diary.jpg 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg 1200w" alt="2021년 5월 마지막 주 회고"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">2021년 5월 마지막 주 회고</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/diary/">Diary</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">2021년 5월 마지막 주 회고</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">2021년 5월 마지막 주 회고</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-05-31">31 May 2021</time><span class="byline-reading-time"><span class="bull">•</span>5 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:100%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAAUABQDASIAAhEBAxEB/8QAGgABAAIDAQAAAAAAAAAAAAAAAAUHAgMGCf/EABkBAAIDAQAAAAAAAAAAAAAAAAMFAAECBv/aAAwDAQACEAMQAAAB9o9FZT/PPLjckYBk8w+5ES//xAAcEAACAwEAAwAAAAAAAAAAAAADBAECBQYSExT/2gAIAQEAAQUCJpZ9XXnyKMRehKRyCbXRbXLYW9hY/wBIUfXWSwKJGCnlT//EACURAAICAQMCBwEAAAAAAAAAAAECAxEEAAUSE1EUISIxQYKx8P/aAAgBAwEBPwHdsHFfw6bduM8UgXCkypEgR4mkaKF8vHieeOwnV68Qk6HouJkOQA9oeS2EYCzXJOLVyIFhgGBqvcA9xofH1/NAnv8A3lr/xAAiEQACAgAFBQEAAAAAAAAAAAACAwEEAAUSEyIUISOx8BH/2gAIAQIBAT8Br5nmQ1zuHkzLAl1G3QaaU3lis9CtS4tqQxhDO6MdaImK5CdsmLPFM3sqVTtBtWjroKyqfzxvJYS5fjJi+DJIeDDHt2Mo5Y+9Y+9Y/8QAJxAAAwACAQMEAAcAAAAAAAAAAQIDBBESAAUhBhMiMRQVJDIzocH/2gAIAQEABj8Ct258k/mU4zzGxEyaK/4SralkLLSlpfHWR7PJZueI9xm11jxTDyKY1Zqb5jZSrDFUDe73YhMfwS3ucneyKTxC7YTpF9zeYZGXgQynfFtoOJ2POxsH7DEa6p6k7xRqd1xmnPtVFpac8CRc6MeLzYCysJ2l/HZd8+TN8cj0/wB6HccvAei3yUr3HKxLZTtZ7ayK4N4OcVmqZVxQVxjNhIxZNdTxr4nb8aeJ+lwYduyLUhPt0FVMRG93GjxqkxwdZqZAKpRjvqgOyCy8vP2AX0PGta4r+3R8ff3vRJ8cCD42NfLX19Mw2f60OtsSTs7Px/wAdf/EABoQAQEBAQADAAAAAAAAAAAAAAERIQAxQXH/2gAIAQEAAT8hV7uqgaGKUEulOOj6TTNwuIOizuYECCYGKitdhd8q6uq7HpWdx6IIWfZ0X8HBwNVCb4mUiNRyGuY2S2FA6zWI5bD8lDEmCaO45AFb2SFWKp5x9B3/2gAMAwEAAgADAAAAEHcIwP/EAB0RAQEAAgEFAAAAAAAAAAAAAAERADEhQVFhkbH/2gAIAQMBAT8QEaTv8ODiiShfMBxjaGj0UnOiCzEwVnk4g233erX19uf/xAAcEQEAAgEFAAAAAAAAAAAAAAABESEAMVGBkfD/2gAIAQIBAT8Qk8x1mTyk6p2BH0UNnUcCKmBakBKQRdcZAqtve3P/xAAXEAEBAQEAAAAAAAAAAAAAAAABEQAh/9oACAEBAAE/ECQZkMfeWULuVWKlf4rHSIqMkorQuBTKfyR7umQJN9s2MkZZQfvYrz/+3DvEboAj5iyrLUQIkGYIJ0twassPpVBBMDbrUgNph7EKVDlHiLAAA//Z" alt=""/><picture><source type="image/avif" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/099ee/diary.avif 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/caf3c/diary.avif 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/e65b9/diary.avif 1200w" sizes="100vw"/><source type="image/webp" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f03f/diary.webp 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f506/diary.webp 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/83805/diary.webp 1200w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/0f5ce/diary.jpg 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/b74b1/diary.jpg 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg 1200w" alt="2021년 5월 마지막 주 회고"/></picture><noscript><picture><source type="image/avif" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/099ee/diary.avif 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/caf3c/diary.avif 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/e65b9/diary.avif 1200w" sizes="100vw"/><source type="image/webp" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f03f/diary.webp 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f506/diary.webp 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/83805/diary.webp 1200w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/0f5ce/diary.jpg 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/b74b1/diary.jpg 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg 1200w" alt="2021년 5월 마지막 주 회고"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -120,4 +120,4 @@ <h2 id="다음주-할-일" style="position:relative">다음주 할 일<a href="#
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/diary/20210606/index.html b/diary/20210606/index.html
index a62d7ad51..cdbafcfe2 100644
--- a/diary/20210606/index.html
+++ b/diary/20210606/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">2021년 6월 첫째 주 회고</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/diary/">Diary</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">2021년 6월 첫째 주 회고</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">2021년 6월 첫째 주 회고</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-06-07">07 Jun 2021</time><span class="byline-reading-time"><span class="bull">•</span>2 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:100%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAAUABQDASIAAhEBAxEB/8QAGgABAAIDAQAAAAAAAAAAAAAAAAUHAgMGCf/EABkBAAIDAQAAAAAAAAAAAAAAAAMFAAECBv/aAAwDAQACEAMQAAAB9o9FZT/PPLjckYBk8w+5ES//xAAcEAACAwEAAwAAAAAAAAAAAAADBAECBQYSExT/2gAIAQEAAQUCJpZ9XXnyKMRehKRyCbXRbXLYW9hY/wBIUfXWSwKJGCnlT//EACURAAICAQMCBwEAAAAAAAAAAAECAxEEAAUSE1EUISIxQYKx8P/aAAgBAwEBPwHdsHFfw6bduM8UgXCkypEgR4mkaKF8vHieeOwnV68Qk6HouJkOQA9oeS2EYCzXJOLVyIFhgGBqvcA9xofH1/NAnv8A3lr/xAAiEQACAgAFBQEAAAAAAAAAAAACAwEEAAUSEyIUISOx8BH/2gAIAQIBAT8Br5nmQ1zuHkzLAl1G3QaaU3lis9CtS4tqQxhDO6MdaImK5CdsmLPFM3sqVTtBtWjroKyqfzxvJYS5fjJi+DJIeDDHt2Mo5Y+9Y+9Y/8QAJxAAAwACAQMEAAcAAAAAAAAAAQIDBBESAAUhBhMiMRQVJDIzocH/2gAIAQEABj8Ct258k/mU4zzGxEyaK/4SralkLLSlpfHWR7PJZueI9xm11jxTDyKY1Zqb5jZSrDFUDe73YhMfwS3ucneyKTxC7YTpF9zeYZGXgQynfFtoOJ2POxsH7DEa6p6k7xRqd1xmnPtVFpac8CRc6MeLzYCysJ2l/HZd8+TN8cj0/wB6HccvAei3yUr3HKxLZTtZ7ayK4N4OcVmqZVxQVxjNhIxZNdTxr4nb8aeJ+lwYduyLUhPt0FVMRG93GjxqkxwdZqZAKpRjvqgOyCy8vP2AX0PGta4r+3R8ff3vRJ8cCD42NfLX19Mw2f60OtsSTs7Px/wAdf/EABoQAQEBAQADAAAAAAAAAAAAAAERIQAxQXH/2gAIAQEAAT8hV7uqgaGKUEulOOj6TTNwuIOizuYECCYGKitdhd8q6uq7HpWdx6IIWfZ0X8HBwNVCb4mUiNRyGuY2S2FA6zWI5bD8lDEmCaO45AFb2SFWKp5x9B3/2gAMAwEAAgADAAAAEHcIwP/EAB0RAQEAAgEFAAAAAAAAAAAAAAERADEhQVFhkbH/2gAIAQMBAT8QEaTv8ODiiShfMBxjaGj0UnOiCzEwVnk4g233erX19uf/xAAcEQEAAgEFAAAAAAAAAAAAAAABESEAMVGBkfD/2gAIAQIBAT8Qk8x1mTyk6p2BH0UNnUcCKmBakBKQRdcZAqtve3P/xAAXEAEBAQEAAAAAAAAAAAAAAAABEQAh/9oACAEBAAE/ECQZkMfeWULuVWKlf4rHSIqMkorQuBTKfyR7umQJN9s2MkZZQfvYrz/+3DvEboAj5iyrLUQIkGYIJ0twassPpVBBMDbrUgNph7EKVDlHiLAAA//Z" alt=""/><picture><source type="image/avif" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/099ee/diary.avif 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/caf3c/diary.avif 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/e65b9/diary.avif 1200w" sizes="100vw"/><source type="image/webp" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f03f/diary.webp 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f506/diary.webp 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/83805/diary.webp 1200w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/0f5ce/diary.jpg 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/b74b1/diary.jpg 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg 1200w" alt="2021년 6월 첫째 주 회고"/></picture><noscript><picture><source type="image/avif" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/099ee/diary.avif 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/caf3c/diary.avif 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/e65b9/diary.avif 1200w" sizes="100vw"/><source type="image/webp" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f03f/diary.webp 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f506/diary.webp 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/83805/diary.webp 1200w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/0f5ce/diary.jpg 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/b74b1/diary.jpg 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg 1200w" alt="2021년 6월 첫째 주 회고"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">2021년 6월 첫째 주 회고</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/diary/">Diary</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">2021년 6월 첫째 주 회고</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">2021년 6월 첫째 주 회고</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-06-07">07 Jun 2021</time><span class="byline-reading-time"><span class="bull">•</span>2 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:100%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAAUABQDASIAAhEBAxEB/8QAGgABAAIDAQAAAAAAAAAAAAAAAAUHAgMGCf/EABkBAAIDAQAAAAAAAAAAAAAAAAMFAAECBv/aAAwDAQACEAMQAAAB9o9FZT/PPLjckYBk8w+5ES//xAAcEAACAwEAAwAAAAAAAAAAAAADBAECBQYSExT/2gAIAQEAAQUCJpZ9XXnyKMRehKRyCbXRbXLYW9hY/wBIUfXWSwKJGCnlT//EACURAAICAQMCBwEAAAAAAAAAAAECAxEEAAUSE1EUISIxQYKx8P/aAAgBAwEBPwHdsHFfw6bduM8UgXCkypEgR4mkaKF8vHieeOwnV68Qk6HouJkOQA9oeS2EYCzXJOLVyIFhgGBqvcA9xofH1/NAnv8A3lr/xAAiEQACAgAFBQEAAAAAAAAAAAACAwEEAAUSEyIUISOx8BH/2gAIAQIBAT8Br5nmQ1zuHkzLAl1G3QaaU3lis9CtS4tqQxhDO6MdaImK5CdsmLPFM3sqVTtBtWjroKyqfzxvJYS5fjJi+DJIeDDHt2Mo5Y+9Y+9Y/8QAJxAAAwACAQMEAAcAAAAAAAAAAQIDBBESAAUhBhMiMRQVJDIzocH/2gAIAQEABj8Ct258k/mU4zzGxEyaK/4SralkLLSlpfHWR7PJZueI9xm11jxTDyKY1Zqb5jZSrDFUDe73YhMfwS3ucneyKTxC7YTpF9zeYZGXgQynfFtoOJ2POxsH7DEa6p6k7xRqd1xmnPtVFpac8CRc6MeLzYCysJ2l/HZd8+TN8cj0/wB6HccvAei3yUr3HKxLZTtZ7ayK4N4OcVmqZVxQVxjNhIxZNdTxr4nb8aeJ+lwYduyLUhPt0FVMRG93GjxqkxwdZqZAKpRjvqgOyCy8vP2AX0PGta4r+3R8ff3vRJ8cCD42NfLX19Mw2f60OtsSTs7Px/wAdf/EABoQAQEBAQADAAAAAAAAAAAAAAERIQAxQXH/2gAIAQEAAT8hV7uqgaGKUEulOOj6TTNwuIOizuYECCYGKitdhd8q6uq7HpWdx6IIWfZ0X8HBwNVCb4mUiNRyGuY2S2FA6zWI5bD8lDEmCaO45AFb2SFWKp5x9B3/2gAMAwEAAgADAAAAEHcIwP/EAB0RAQEAAgEFAAAAAAAAAAAAAAERADEhQVFhkbH/2gAIAQMBAT8QEaTv8ODiiShfMBxjaGj0UnOiCzEwVnk4g233erX19uf/xAAcEQEAAgEFAAAAAAAAAAAAAAABESEAMVGBkfD/2gAIAQIBAT8Qk8x1mTyk6p2BH0UNnUcCKmBakBKQRdcZAqtve3P/xAAXEAEBAQEAAAAAAAAAAAAAAAABEQAh/9oACAEBAAE/ECQZkMfeWULuVWKlf4rHSIqMkorQuBTKfyR7umQJN9s2MkZZQfvYrz/+3DvEboAj5iyrLUQIkGYIJ0twassPpVBBMDbrUgNph7EKVDlHiLAAA//Z" alt=""/><picture><source type="image/avif" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/099ee/diary.avif 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/caf3c/diary.avif 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/e65b9/diary.avif 1200w" sizes="100vw"/><source type="image/webp" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f03f/diary.webp 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f506/diary.webp 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/83805/diary.webp 1200w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/0f5ce/diary.jpg 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/b74b1/diary.jpg 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg 1200w" alt="2021년 6월 첫째 주 회고"/></picture><noscript><picture><source type="image/avif" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/099ee/diary.avif 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/caf3c/diary.avif 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/e65b9/diary.avif 1200w" sizes="100vw"/><source type="image/webp" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f03f/diary.webp 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f506/diary.webp 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/83805/diary.webp 1200w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/0f5ce/diary.jpg 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/b74b1/diary.jpg 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg 1200w" alt="2021년 6월 첫째 주 회고"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -80,4 +80,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/diary/20210627/index.html b/diary/20210627/index.html
index 7f9fc035b..af23ab28f 100644
--- a/diary/20210627/index.html
+++ b/diary/20210627/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">2021년 6월 마지막 주 회고</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/diary/">Diary</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">2021년 6월 마지막 주 회고</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">2021년 6월 마지막 주 회고</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-06-28">28 Jun 2021</time><span class="byline-reading-time"><span class="bull">•</span>4 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:100%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAAUABQDASIAAhEBAxEB/8QAGgABAAIDAQAAAAAAAAAAAAAAAAUHAgMGCf/EABkBAAIDAQAAAAAAAAAAAAAAAAMFAAECBv/aAAwDAQACEAMQAAAB9o9FZT/PPLjckYBk8w+5ES//xAAcEAACAwEAAwAAAAAAAAAAAAADBAECBQYSExT/2gAIAQEAAQUCJpZ9XXnyKMRehKRyCbXRbXLYW9hY/wBIUfXWSwKJGCnlT//EACURAAICAQMCBwEAAAAAAAAAAAECAxEEAAUSE1EUISIxQYKx8P/aAAgBAwEBPwHdsHFfw6bduM8UgXCkypEgR4mkaKF8vHieeOwnV68Qk6HouJkOQA9oeS2EYCzXJOLVyIFhgGBqvcA9xofH1/NAnv8A3lr/xAAiEQACAgAFBQEAAAAAAAAAAAACAwEEAAUSEyIUISOx8BH/2gAIAQIBAT8Br5nmQ1zuHkzLAl1G3QaaU3lis9CtS4tqQxhDO6MdaImK5CdsmLPFM3sqVTtBtWjroKyqfzxvJYS5fjJi+DJIeDDHt2Mo5Y+9Y+9Y/8QAJxAAAwACAQMEAAcAAAAAAAAAAQIDBBESAAUhBhMiMRQVJDIzocH/2gAIAQEABj8Ct258k/mU4zzGxEyaK/4SralkLLSlpfHWR7PJZueI9xm11jxTDyKY1Zqb5jZSrDFUDe73YhMfwS3ucneyKTxC7YTpF9zeYZGXgQynfFtoOJ2POxsH7DEa6p6k7xRqd1xmnPtVFpac8CRc6MeLzYCysJ2l/HZd8+TN8cj0/wB6HccvAei3yUr3HKxLZTtZ7ayK4N4OcVmqZVxQVxjNhIxZNdTxr4nb8aeJ+lwYduyLUhPt0FVMRG93GjxqkxwdZqZAKpRjvqgOyCy8vP2AX0PGta4r+3R8ff3vRJ8cCD42NfLX19Mw2f60OtsSTs7Px/wAdf/EABoQAQEBAQADAAAAAAAAAAAAAAERIQAxQXH/2gAIAQEAAT8hV7uqgaGKUEulOOj6TTNwuIOizuYECCYGKitdhd8q6uq7HpWdx6IIWfZ0X8HBwNVCb4mUiNRyGuY2S2FA6zWI5bD8lDEmCaO45AFb2SFWKp5x9B3/2gAMAwEAAgADAAAAEHcIwP/EAB0RAQEAAgEFAAAAAAAAAAAAAAERADEhQVFhkbH/2gAIAQMBAT8QEaTv8ODiiShfMBxjaGj0UnOiCzEwVnk4g233erX19uf/xAAcEQEAAgEFAAAAAAAAAAAAAAABESEAMVGBkfD/2gAIAQIBAT8Qk8x1mTyk6p2BH0UNnUcCKmBakBKQRdcZAqtve3P/xAAXEAEBAQEAAAAAAAAAAAAAAAABEQAh/9oACAEBAAE/ECQZkMfeWULuVWKlf4rHSIqMkorQuBTKfyR7umQJN9s2MkZZQfvYrz/+3DvEboAj5iyrLUQIkGYIJ0twassPpVBBMDbrUgNph7EKVDlHiLAAA//Z" alt=""/><picture><source type="image/avif" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/099ee/diary.avif 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/caf3c/diary.avif 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/e65b9/diary.avif 1200w" sizes="100vw"/><source type="image/webp" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f03f/diary.webp 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f506/diary.webp 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/83805/diary.webp 1200w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/0f5ce/diary.jpg 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/b74b1/diary.jpg 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg 1200w" alt="2021년 6월 마지막 주 회고"/></picture><noscript><picture><source type="image/avif" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/099ee/diary.avif 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/caf3c/diary.avif 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/e65b9/diary.avif 1200w" sizes="100vw"/><source type="image/webp" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f03f/diary.webp 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f506/diary.webp 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/83805/diary.webp 1200w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/0f5ce/diary.jpg 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/b74b1/diary.jpg 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg 1200w" alt="2021년 6월 마지막 주 회고"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">2021년 6월 마지막 주 회고</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/diary/">Diary</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">2021년 6월 마지막 주 회고</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">2021년 6월 마지막 주 회고</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-06-28">28 Jun 2021</time><span class="byline-reading-time"><span class="bull">•</span>4 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:100%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAAUABQDASIAAhEBAxEB/8QAGgABAAIDAQAAAAAAAAAAAAAAAAUHAgMGCf/EABkBAAIDAQAAAAAAAAAAAAAAAAMFAAECBv/aAAwDAQACEAMQAAAB9o9FZT/PPLjckYBk8w+5ES//xAAcEAACAwEAAwAAAAAAAAAAAAADBAECBQYSExT/2gAIAQEAAQUCJpZ9XXnyKMRehKRyCbXRbXLYW9hY/wBIUfXWSwKJGCnlT//EACURAAICAQMCBwEAAAAAAAAAAAECAxEEAAUSE1EUISIxQYKx8P/aAAgBAwEBPwHdsHFfw6bduM8UgXCkypEgR4mkaKF8vHieeOwnV68Qk6HouJkOQA9oeS2EYCzXJOLVyIFhgGBqvcA9xofH1/NAnv8A3lr/xAAiEQACAgAFBQEAAAAAAAAAAAACAwEEAAUSEyIUISOx8BH/2gAIAQIBAT8Br5nmQ1zuHkzLAl1G3QaaU3lis9CtS4tqQxhDO6MdaImK5CdsmLPFM3sqVTtBtWjroKyqfzxvJYS5fjJi+DJIeDDHt2Mo5Y+9Y+9Y/8QAJxAAAwACAQMEAAcAAAAAAAAAAQIDBBESAAUhBhMiMRQVJDIzocH/2gAIAQEABj8Ct258k/mU4zzGxEyaK/4SralkLLSlpfHWR7PJZueI9xm11jxTDyKY1Zqb5jZSrDFUDe73YhMfwS3ucneyKTxC7YTpF9zeYZGXgQynfFtoOJ2POxsH7DEa6p6k7xRqd1xmnPtVFpac8CRc6MeLzYCysJ2l/HZd8+TN8cj0/wB6HccvAei3yUr3HKxLZTtZ7ayK4N4OcVmqZVxQVxjNhIxZNdTxr4nb8aeJ+lwYduyLUhPt0FVMRG93GjxqkxwdZqZAKpRjvqgOyCy8vP2AX0PGta4r+3R8ff3vRJ8cCD42NfLX19Mw2f60OtsSTs7Px/wAdf/EABoQAQEBAQADAAAAAAAAAAAAAAERIQAxQXH/2gAIAQEAAT8hV7uqgaGKUEulOOj6TTNwuIOizuYECCYGKitdhd8q6uq7HpWdx6IIWfZ0X8HBwNVCb4mUiNRyGuY2S2FA6zWI5bD8lDEmCaO45AFb2SFWKp5x9B3/2gAMAwEAAgADAAAAEHcIwP/EAB0RAQEAAgEFAAAAAAAAAAAAAAERADEhQVFhkbH/2gAIAQMBAT8QEaTv8ODiiShfMBxjaGj0UnOiCzEwVnk4g233erX19uf/xAAcEQEAAgEFAAAAAAAAAAAAAAABESEAMVGBkfD/2gAIAQIBAT8Qk8x1mTyk6p2BH0UNnUcCKmBakBKQRdcZAqtve3P/xAAXEAEBAQEAAAAAAAAAAAAAAAABEQAh/9oACAEBAAE/ECQZkMfeWULuVWKlf4rHSIqMkorQuBTKfyR7umQJN9s2MkZZQfvYrz/+3DvEboAj5iyrLUQIkGYIJ0twassPpVBBMDbrUgNph7EKVDlHiLAAA//Z" alt=""/><picture><source type="image/avif" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/099ee/diary.avif 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/caf3c/diary.avif 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/e65b9/diary.avif 1200w" sizes="100vw"/><source type="image/webp" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f03f/diary.webp 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f506/diary.webp 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/83805/diary.webp 1200w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg" data-srcset="/static/f1e6b6ca60c5a92112657ed68cde2ec5/0f5ce/diary.jpg 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/b74b1/diary.jpg 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg 1200w" alt="2021년 6월 마지막 주 회고"/></picture><noscript><picture><source type="image/avif" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/099ee/diary.avif 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/caf3c/diary.avif 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/e65b9/diary.avif 1200w" sizes="100vw"/><source type="image/webp" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f03f/diary.webp 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/4f506/diary.webp 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/83805/diary.webp 1200w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg" srcSet="/static/f1e6b6ca60c5a92112657ed68cde2ec5/0f5ce/diary.jpg 750w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/b74b1/diary.jpg 1080w,/static/f1e6b6ca60c5a92112657ed68cde2ec5/02dff/diary.jpg 1200w" alt="2021년 6월 마지막 주 회고"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -83,4 +83,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/e0525e89-f580b5526d62ccdf5313.js b/e0525e89-f580b5526d62ccdf5313.js
new file mode 100644
index 000000000..c990d1981
--- /dev/null
+++ b/e0525e89-f580b5526d62ccdf5313.js
@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunkgatsby_casper=self.webpackChunkgatsby_casper||[]).push([[956],{3618:function(t,e,a){a.r(e),a.d(e,{NoImage:function(){return z},PostFull:function(){return $},PostFullHeader:function(){return O},PostFullTitle:function(){return F}});var r=a(4316),n=a(9348),o=a(6695),i=a(4160),m=a(3723),l=a(4967),s=a(7294),p=a(4593),g=a(917),d=a(4353),c=a(8329),f=a(3217),h=a(8374),u=a(8039),Z=a(6324),y=a(5396),x=a(3163),b=a(3325),w=a(8409),v=a(4649),k=a(2483);const N=(0,g.iv)(".site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.site-main{background:",x.O.darkmode,";}}","","",""),$={name:"1dyovxq",styles:"position:relative;z-index:50"},z={name:"1ydz6yw",styles:".post-full-content{padding-top:0;}.post-full-content:before,.post-full-content:after{display:none;}"},O=(0,r.Z)("header",{target:"ewnyor55"})({name:"7tju5o",styles:"position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;@media (max-width: 1170px){padding:60px 11vw 50px;}@media (max-width: 800px){padding-right:5vw;padding-left:5vw;}@media (max-width: 500px){padding:20px 0 35px;}"}),P=(0,r.Z)("section",{target:"ewnyor54"})("display:flex;justify-content:flex-start;align-items:center;color:",x.O.midgrey,";font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;"),U=(0,r.Z)("p",{target:"ewnyor53"})("margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;@media (max-width: 500px){font-size:1.9rem;line-height:1.5em;}@media (prefers-color-scheme: dark){color:",(0,l.$n)("0.1",x.O.midgrey),";}"),_=(0,r.Z)("div",{target:"ewnyor52"})("display:flex;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid ",(0,l.$n)("0.1",x.O.lightgrey),";.post-full-byline-content{flex-grow:1;display:flex;align-items:flex-start;}.post-full-byline-content .author-list{justify-content:flex-start;padding:0 12px 0 0;}.post-full-byline-meta{margin:2px 0 0;color:",(0,l.$n)("0.1",x.O.midgrey),";font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.post-full-byline-meta h4 a{color:",(0,l.$n)("0.1",x.O.darkgrey),";}.post-full-byline-meta h4 a:hover{color:",x.O.darkgrey,";}.post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){border-top-color:",(0,l.$n)("0.15",x.O.darkmode),";.post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.post-full-byline-meta h4 a:hover{color:#fff;}}"),F=(0,r.Z)("h1",{target:"ewnyor51"})("margin:0 0 0.2em;color:",(0,l.ph)("0.05",x.O.darkgrey),";@media (max-width: 500px){margin-top:0.2em;font-size:3.3rem;}@media (prefers-color-scheme: dark){color:rgba(255, 255, 255, 0.9);}"),L=(0,r.Z)("figure",{target:"ewnyor50"})({name:"2f6woi",styles:"margin:25px auto 50px;max-height:800px;background-size:cover;width:80%;border-radius:8px;img{border-radius:8px;}@media (max-width: 1170px){img{max-width:1170px;}}@media (max-width: 800px){width:100%;}@media (max-width: 500px){margin-bottom:4vw;}border:1px solid hsl(230deg 25% 94%);@media (prefers-color-scheme: dark){border:1px solid hsl(230deg 6% 23%);}"});e.default=function(t){var e,a;let{data:r,pageContext:l,location:x}=t;const T=r.markdownRemark;let j,A;var C,S;T.frontmatter.image&&(j=null===(C=(0,m.c)(T.frontmatter.image))||void 0===C?void 0:C.width,A=null===(S=(0,m.c)(T.frontmatter.image))||void 0===S?void 0:S.height);const q=new Date(T.frontmatter.date),I=(0,o.Z)(q,"yyyy-MM-dd"),M=(0,o.Z)(q,"dd LLL yyyy");return(0,g.tZ)(y.Z,{className:"post-template"},(0,g.tZ)(p.q,null,(0,g.tZ)("html",{lang:w.Z.lang}),(0,g.tZ)("title",null,T.frontmatter.title),(0,g.tZ)("meta",{name:"description",content:T.frontmatter.excerpt||T.excerpt}),(0,g.tZ)("meta",{property:"og:site_name",content:w.Z.title}),(0,g.tZ)("meta",{property:"og:type",content:"article"}),(0,g.tZ)("meta",{property:"og:title",content:T.frontmatter.title}),(0,g.tZ)("meta",{property:"og:description",content:T.frontmatter.excerpt||T.excerpt}),(0,g.tZ)("meta",{property:"og:url",content:w.Z.siteUrl+x.pathname}),T.frontmatter.image&&(0,g.tZ)("meta",{property:"og:image",content:`${w.Z.siteUrl}${(0,m.d)(T.frontmatter.image)}`}),(0,g.tZ)("meta",{property:"article:published_time",content:T.frontmatter.date}),T.frontmatter.tags&&(0,g.tZ)("meta",{property:"article:tag",content:T.frontmatter.tags[0]}),w.Z.instagram&&(0,g.tZ)("meta",{property:"article:publisher",content:w.Z.instagram}),w.Z.instagram&&(0,g.tZ)("meta",{property:"article:author",content:w.Z.instagram}),(0,g.tZ)("meta",{name:"github:card",content:"summary_large_image"}),(0,g.tZ)("meta",{name:"github:title",content:T.frontmatter.title}),(0,g.tZ)("meta",{name:"github:description",content:T.frontmatter.excerpt||T.excerpt}),(0,g.tZ)("meta",{name:"github:url",content:w.Z.siteUrl+x.pathname}),T.frontmatter.image&&(0,g.tZ)("meta",{name:"github:image",content:`${w.Z.siteUrl}${(0,m.d)(T.frontmatter.image)}`}),(0,g.tZ)("meta",{name:"github:label1",content:"Written by"}),(0,g.tZ)("meta",{name:"github:data1",content:T.frontmatter.author[0].name}),(0,g.tZ)("meta",{name:"github:label2",content:"Filed under"}),T.frontmatter.tags&&(0,g.tZ)("meta",{name:"github:data2",content:T.frontmatter.tags[0]}),w.Z.github&&(0,g.tZ)("meta",{name:"github:site",content:`@${w.Z.github.split("https://github.com/")[1]}`}),w.Z.github&&(0,g.tZ)("meta",{name:"github:creator",content:`@${w.Z.github.split("https://github.com/")[1]}`}),j&&(0,g.tZ)("meta",{property:"og:image:width",content:null===(e=j)||void 0===e?void 0:e.toString()}),A&&(0,g.tZ)("meta",{property:"og:image:height",content:null===(a=A)||void 0===a?void 0:a.toString()})),(0,g.tZ)(Z.i,{css:N},(0,g.tZ)("header",{className:"site-header"},(0,g.tZ)("div",{css:[b.L9,c.m,"",""]},(0,g.tZ)("div",{css:b.aN},(0,g.tZ)(c.Z,{isPost:!0,post:T.frontmatter})))),(0,g.tZ)("main",{id:"site-main",className:"site-main",css:[b.In,b.L9,"",""]},(0,g.tZ)("div",{css:b.aN},(0,g.tZ)("article",{css:[$,!T.frontmatter.image&&z,"",""]},(0,g.tZ)(O,{className:"post-full-header"},(0,g.tZ)(P,{className:"post-full-tags"},T.frontmatter.tags&&T.frontmatter.tags.length>0&&w.Z.showAllTags&&T.frontmatter.tags.map(((t,e)=>(0,g.tZ)(s.Fragment,{key:t},e>0&&(0,g.tZ)(s.Fragment,null,",  "),(0,g.tZ)(i.rU,{to:`/tags/${(0,n.Z)(t)}/`},t)))),T.frontmatter.tags&&T.frontmatter.tags.length>0&&!w.Z.showAllTags&&(0,g.tZ)(i.rU,{to:`/tags/${(0,n.Z)(T.frontmatter.tags[0])}/`},T.frontmatter.tags[0])),(0,g.tZ)(F,{className:"post-full-title"},T.frontmatter.title),(0,g.tZ)(U,{className:"post-full-custom-excerpt"},T.frontmatter.excerpt),(0,g.tZ)(_,{className:"post-full-byline"},(0,g.tZ)("section",{className:"post-full-byline-content"},(0,g.tZ)(v.p,{authors:T.frontmatter.author,tooltip:"large"}),(0,g.tZ)("section",{className:"post-full-byline-meta"},(0,g.tZ)("h4",{className:"author-name"},T.frontmatter.author.map((t=>(0,g.tZ)(i.rU,{key:t.name,to:`/author/${(0,n.Z)(t.name)}/`},t.name)))),(0,g.tZ)("div",{className:"byline-meta-content"},(0,g.tZ)("time",{className:"byline-meta-date",dateTime:I},M),(0,g.tZ)("span",{className:"byline-reading-time"},(0,g.tZ)("span",{className:"bull"},"•"),T.fields.readingTime.text)))))),T.frontmatter.image&&(0,g.tZ)(L,null,(0,g.tZ)(m.G,{image:(0,m.c)(T.frontmatter.image),style:{height:"100%"},alt:T.frontmatter.title})),(0,g.tZ)(f.Z,{htmlAst:T.htmlAst}),w.Z.showSubscribe&&(0,g.tZ)(u.x,{title:w.Z.title})),(0,g.tZ)(k.Z,{repo:"pozafly/blog-comments"}))),(0,g.tZ)(h._,{currentPageSlug:x.pathname,tags:T.frontmatter.tags,relatedPosts:r.relatedPosts,pageContext:l}),(0,g.tZ)(d.$,null)))}}}]);
+//# sourceMappingURL=e0525e89-f580b5526d62ccdf5313.js.map
\ No newline at end of file
diff --git a/e0525e89-f580b5526d62ccdf5313.js.map b/e0525e89-f580b5526d62ccdf5313.js.map
new file mode 100644
index 000000000..99e001c78
--- /dev/null
+++ b/e0525e89-f580b5526d62ccdf5313.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"e0525e89-f580b5526d62ccdf5313.js","mappings":"0dA+PA,MAAMA,GAAeC,EAAAA,EAAAA,IAAG,4HAUJC,EAAAA,EAAAA,SAAe,gBAKtBC,EAAW,CAAHC,KAAAA,UAAAC,OAAAA,gCAKRC,EAAU,CAAHF,KAAAA,UAAAC,OAAAA,uGAWPE,GAAc,iBAAAC,OAAAA,YAAA,EAAAJ,KAAAA,SAAAC,OAAAA,oRAqBrBI,GAAY,kBAAAD,OAAAA,YAAA,qEAKPN,EAAAA,EAAAA,QAAc,iFAOnBQ,GAAqB,YAAAF,OAAAA,YAAA,mMAcdG,EAAAA,EAAAA,IAAQ,MAAOT,EAAAA,EAAAA,SAAe,MAIrCU,GAAc,cAAAJ,OAAAA,YAAA,sGAMMG,EAAAA,EAAAA,IAAQ,MAAOT,EAAAA,EAAAA,WAAiB,kNAgB7CS,EAAAA,EAAAA,IAAQ,MAAOT,EAAAA,EAAAA,SAAe,sNAgB9BS,EAAAA,EAAAA,IAAQ,MAAOT,EAAAA,EAAAA,UAAgB,6CAK/BA,EAAAA,EAAAA,SAAe,uIAWJS,EAAAA,EAAAA,IAAQ,OAAQT,EAAAA,EAAAA,UAAgB,iHAY3CW,GAAa,aAAAL,OAAAA,YAAA,4BAEfM,EAAAA,EAAAA,IAAa,OAAQZ,EAAAA,EAAAA,UAAgB,sIAW1Ca,GAAa,iBAAAP,OAAAA,YAAA,EAAAJ,KAAAA,SAAAC,OAAAA,wWAuFnB,UA1ZA,SAAsB,GAAoD,YAApD,KAAEW,EAAI,YAAEC,EAAW,SAAEC,GAA6B,EACtE,MAAMC,EAAOH,EAAKI,eAClB,IAAIC,EACAC,EACwB,QAAxBH,EAAKI,YAAYC,QACnBH,EAAwC,QAAnC,GAAGI,EAAAA,EAAAA,GAASN,EAAKI,YAAYC,cAAM,aAAhCE,EAAkCL,MAC1CC,EAAyC,QAAnC,GAAGG,EAAAA,EAAAA,GAASN,EAAKI,YAAYC,cAAM,aAAhCG,EAAkCL,QAG7C,MAAMM,EAAO,IAAIC,KAAKV,EAAKI,YAAYK,MAEjCE,GAAWC,EAAAA,EAAAA,GAAOH,EAAM,cAExBI,GAAkBD,EAAAA,EAAAA,GAAOH,EAAM,eAErC,OACEK,EAAAA,EAAAA,IAACC,EAAAA,EAAW,CAACC,UAAU,kBACrBF,EAAAA,EAAAA,IAACG,EAAAA,EAAM,MACLH,EAAAA,EAAAA,IAAAA,OAAAA,CAAMI,KAAMC,EAAAA,EAAAA,QACZL,EAAAA,EAAAA,IAAAA,QAAAA,KAAQd,EAAKI,YAAYgB,QAEzBN,EAAAA,EAAAA,IAAAA,OAAAA,CAAM7B,KAAK,cAAcoC,QAASrB,EAAKI,YAAYkB,SAAWtB,EAAKsB,WACnER,EAAAA,EAAAA,IAAAA,OAAAA,CAAMS,SAAS,eAAeF,QAASF,EAAAA,EAAAA,SACvCL,EAAAA,EAAAA,IAAAA,OAAAA,CAAMS,SAAS,UAAUF,QAAQ,aACjCP,EAAAA,EAAAA,IAAAA,OAAAA,CAAMS,SAAS,WAAWF,QAASrB,EAAKI,YAAYgB,SACpDN,EAAAA,EAAAA,IAAAA,OAAAA,CAAMS,SAAS,iBAAiBF,QAASrB,EAAKI,YAAYkB,SAAWtB,EAAKsB,WAC1ER,EAAAA,EAAAA,IAAAA,OAAAA,CAAMS,SAAS,SAASF,QAASF,EAAAA,EAAAA,QAAiBpB,EAASyB,WAC1DxB,EAAKI,YAAYC,QAChBS,EAAAA,EAAAA,IAAAA,OAAAA,CACES,SAAS,WACTF,QAAU,GAAEF,EAAAA,EAAAA,WAAiBM,EAAAA,EAAAA,GAAOzB,EAAKI,YAAYC,YAGzDS,EAAAA,EAAAA,IAAAA,OAAAA,CAAMS,SAAS,yBAAyBF,QAASrB,EAAKI,YAAYK,OAGjET,EAAKI,YAAYsB,OAChBZ,EAAAA,EAAAA,IAAAA,OAAAA,CAAMS,SAAS,cAAcF,QAASrB,EAAKI,YAAYsB,KAAK,KAG7DP,EAAAA,EAAAA,YAAoBL,EAAAA,EAAAA,IAAAA,OAAAA,CAAMS,SAAS,oBAAoBF,QAASF,EAAAA,EAAAA,YAChEA,EAAAA,EAAAA,YAAoBL,EAAAA,EAAAA,IAAAA,OAAAA,CAAMS,SAAS,iBAAiBF,QAASF,EAAAA,EAAAA,aAC9DL,EAAAA,EAAAA,IAAAA,OAAAA,CAAM7B,KAAK,cAAcoC,QAAQ,yBACjCP,EAAAA,EAAAA,IAAAA,OAAAA,CAAM7B,KAAK,eAAeoC,QAASrB,EAAKI,YAAYgB,SACpDN,EAAAA,EAAAA,IAAAA,OAAAA,CAAM7B,KAAK,qBAAqBoC,QAASrB,EAAKI,YAAYkB,SAAWtB,EAAKsB,WAC1ER,EAAAA,EAAAA,IAAAA,OAAAA,CAAM7B,KAAK,aAAaoC,QAASF,EAAAA,EAAAA,QAAiBpB,EAASyB,WAC1DxB,EAAKI,YAAYC,QAChBS,EAAAA,EAAAA,IAAAA,OAAAA,CACE7B,KAAK,eACLoC,QAAU,GAAEF,EAAAA,EAAAA,WAAiBM,EAAAA,EAAAA,GAAOzB,EAAKI,YAAYC,YAGzDS,EAAAA,EAAAA,IAAAA,OAAAA,CAAM7B,KAAK,gBAAgBoC,QAAQ,gBACnCP,EAAAA,EAAAA,IAAAA,OAAAA,CAAM7B,KAAK,eAAeoC,QAASrB,EAAKI,YAAYuB,OAAO,GAAG1C,QAC9D6B,EAAAA,EAAAA,IAAAA,OAAAA,CAAM7B,KAAK,gBAAgBoC,QAAQ,gBAClCrB,EAAKI,YAAYsB,OAAQZ,EAAAA,EAAAA,IAAAA,OAAAA,CAAM7B,KAAK,eAAeoC,QAASrB,EAAKI,YAAYsB,KAAK,KAClFP,EAAAA,EAAAA,SACCL,EAAAA,EAAAA,IAAAA,OAAAA,CACE7B,KAAK,cACLoC,QAAU,IAAGF,EAAAA,EAAAA,OAAAA,MAAoB,uBAAuB,OAG3DA,EAAAA,EAAAA,SACCL,EAAAA,EAAAA,IAAAA,OAAAA,CACE7B,KAAK,iBACLoC,QAAU,IAAGF,EAAAA,EAAAA,OAAAA,MAAoB,uBAAuB,OAG3DjB,IAASY,EAAAA,EAAAA,IAAAA,OAAAA,CAAMS,SAAS,iBAAiBF,QAAc,QAAP,EAAEnB,SAAK,aAAL0B,EAAOC,aACzD1B,IAAUW,EAAAA,EAAAA,IAAAA,OAAAA,CAAMS,SAAS,kBAAkBF,QAAe,QAAR,EAAElB,SAAM,aAAN2B,EAAQD,eAE/Df,EAAAA,EAAAA,IAACiB,EAAAA,EAAO,CAACjD,IAAKD,IACZiC,EAAAA,EAAAA,IAAAA,SAAAA,CAAQE,UAAU,gBAChBF,EAAAA,EAAAA,IAAAA,MAAAA,CAAKhC,IAAG,CAAGkD,EAAAA,GAAOC,EAAAA,EAAW,SAC3BnB,EAAAA,EAAAA,IAAAA,MAAAA,CAAKhC,IAAKoD,EAAAA,KACRpB,EAAAA,EAAAA,IAACqB,EAAAA,EAAO,CAACC,QAAM,EAACpC,KAAMA,EAAKI,kBAIjCU,EAAAA,EAAAA,IAAAA,OAAAA,CAAMuB,GAAG,YAAYrB,UAAU,YAAYlC,IAAG,CAAGwD,EAAAA,GAAUN,EAAAA,GAAK,SAC9DlB,EAAAA,EAAAA,IAAAA,MAAAA,CAAKhC,IAAKoD,EAAAA,KAERpB,EAAAA,EAAAA,IAAAA,UAAAA,CAAShC,IAAG,CAAGE,GAAWgB,EAAKI,YAAYC,OAASlB,EAAO,SACzD2B,EAAAA,EAAAA,IAAC1B,EAAc,CAAC4B,UAAU,qBACxBF,EAAAA,EAAAA,IAACxB,EAAY,CAAC0B,UAAU,kBACrBhB,EAAKI,YAAYsB,MAChB1B,EAAKI,YAAYsB,KAAKa,OAAS,GAC/BpB,EAAAA,EAAAA,aACAnB,EAAKI,YAAYsB,KAAKc,KAAI,CAACC,EAAKC,KAC9B5B,EAAAA,EAAAA,IAAC6B,EAAAA,SAAc,CAACC,IAAKH,GAClBC,EAAM,IAAK5B,EAAAA,EAAAA,IAAAA,EAAAA,SAAAA,KAAE,QACdA,EAAAA,EAAAA,IAAC+B,EAAAA,GAAI,CAACC,GAAK,UAAQC,EAAAA,EAAAA,GAAUN,OAAUA,MAG5CzC,EAAKI,YAAYsB,MAChB1B,EAAKI,YAAYsB,KAAKa,OAAS,IAC9BpB,EAAAA,EAAAA,cACCL,EAAAA,EAAAA,IAAC+B,EAAAA,GAAI,CAACC,GAAK,UAAQC,EAAAA,EAAAA,GAAU/C,EAAKI,YAAYsB,KAAK,QAChD1B,EAAKI,YAAYsB,KAAK,MAI/BZ,EAAAA,EAAAA,IAACpB,EAAa,CAACsB,UAAU,mBAAmBhB,EAAKI,YAAYgB,QAC7DN,EAAAA,EAAAA,IAACvB,EAAqB,CAACyB,UAAU,4BAC9BhB,EAAKI,YAAYkB,UAEpBR,EAAAA,EAAAA,IAACrB,EAAc,CAACuB,UAAU,qBACxBF,EAAAA,EAAAA,IAAAA,UAAAA,CAASE,UAAU,6BACjBF,EAAAA,EAAAA,IAACkC,EAAAA,EAAU,CAACC,QAASjD,EAAKI,YAAYuB,OAAQuB,QAAQ,WACtDpC,EAAAA,EAAAA,IAAAA,UAAAA,CAASE,UAAU,0BACjBF,EAAAA,EAAAA,IAAAA,KAAAA,CAAIE,UAAU,eACXhB,EAAKI,YAAYuB,OAAOa,KAAIb,IAC3Bb,EAAAA,EAAAA,IAAC+B,EAAAA,GAAI,CAACD,IAAKjB,EAAO1C,KAAM6D,GAAK,YAAUC,EAAAA,EAAAA,GAAUpB,EAAO1C,UACrD0C,EAAO1C,UAId6B,EAAAA,EAAAA,IAAAA,MAAAA,CAAKE,UAAU,wBACbF,EAAAA,EAAAA,IAAAA,OAAAA,CAAME,UAAU,mBAAmBmC,SAAUxC,GAC1CE,IAEHC,EAAAA,EAAAA,IAAAA,OAAAA,CAAME,UAAU,wBACdF,EAAAA,EAAAA,IAAAA,OAAAA,CAAME,UAAU,QAAO,KACtBhB,EAAKoD,OAAOC,YAAYC,WAQpCtD,EAAKI,YAAYC,QAChBS,EAAAA,EAAAA,IAAClB,EAAa,MACZkB,EAAAA,EAAAA,IAACyC,EAAAA,EAAW,CACVlD,OAAOC,EAAAA,EAAAA,GAASN,EAAKI,YAAYC,OACjCmD,MAAO,CAAErD,OAAQ,QACjBsD,IAAKzD,EAAKI,YAAYgB,UAI5BN,EAAAA,EAAAA,IAAC4C,EAAAA,EAAW,CAACC,QAAS3D,EAAK2D,UAG1BxC,EAAAA,EAAAA,gBAAwBL,EAAAA,EAAAA,IAAC8C,EAAAA,EAAS,CAACxC,MAAOD,EAAAA,EAAAA,UAE7CL,EAAAA,EAAAA,IAAC+C,EAAAA,EAAU,CAACC,KAAK,6BAIrBhD,EAAAA,EAAAA,IAACiD,EAAAA,EAAQ,CACPC,gBAAiBjE,EAASyB,SAC1BE,KAAM1B,EAAKI,YAAYsB,KACvBuC,aAAcpE,EAAKoE,aACnBnE,YAAaA,KAGfgB,EAAAA,EAAAA,IAACoD,EAAAA,EAAM,OAIf,C","sources":["webpack://gatsby-casper/./src/templates/post.tsx"],"sourcesContent":["import { format } from 'date-fns';\nimport { graphql, Link } from 'gatsby';\nimport { GatsbyImage, getSrc, getImage } from 'gatsby-plugin-image';\nimport { kebabCase } from 'lodash-es';\nimport { lighten, setLightness } from 'polished';\nimport React from 'react';\nimport { Helmet } from 'react-helmet';\n\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\nimport { Footer } from '../components/Footer';\nimport SiteNav, { SiteNavMain } from '../components/header/SiteNav';\nimport PostContent from '../components/PostContent';\nimport { ReadNext } from '../components/ReadNext';\nimport { Subscribe } from '../components/subscribe/Subscribe';\nimport { Wrapper } from '../components/Wrapper';\nimport IndexLayout from '../layouts';\nimport { colors } from '../styles/colors';\nimport { inner, outer, SiteMain } from '../styles/shared';\nimport config from '../website-config';\nimport { AuthorList } from '../components/AuthorList';\nimport Utterances from '../components/Utterances';\n\nexport type Author = {\n  name: string;\n  bio: string;\n  avatar: any;\n};\n\ntype PageTemplateProps = {\n  location: Location;\n  data: {\n    markdownRemark: {\n      html: string;\n      htmlAst: any;\n      excerpt: string;\n      frontmatter: {\n        title: string;\n        date: string;\n        userDate: string;\n        image: any;\n        excerpt: string;\n        tags: string[];\n        author: Author[];\n      };\n      fields: {\n        readingTime: {\n          text: string;\n        };\n      };\n    };\n    relatedPosts: {\n      totalCount: number;\n      edges: Array<{\n        node: {\n          timeToRead: number;\n          frontmatter: {\n            title: string;\n            date: string;\n          };\n          fields: {\n            slug: string;\n          };\n        };\n      }>;\n    };\n  };\n  pageContext: {\n    prev: PageContext;\n    next: PageContext;\n  };\n};\n\nexport type PageContext = {\n  excerpt: string;\n  fields: {\n    slug: string;\n    readingTime: {\n      text: string;\n    };\n  };\n  frontmatter: {\n    image: any;\n    excerpt: string;\n    title: string;\n    date: string;\n    draft?: boolean;\n    tags: string[];\n    author: Author[];\n  };\n};\n\nfunction PageTemplate({ data, pageContext, location }: PageTemplateProps) {\n  const post = data.markdownRemark;\n  let width: number | undefined;\n  let height: number | undefined;\n  if (post.frontmatter.image) {\n    width = getImage(post.frontmatter.image)?.width;\n    height = getImage(post.frontmatter.image)?.height;\n  }\n\n  const date = new Date(post.frontmatter.date);\n  // 2018-08-20\n  const datetime = format(date, 'yyyy-MM-dd');\n  // 20 AUG 2018\n  const displayDatetime = format(date, 'dd LLL yyyy');\n\n  return (\n    <IndexLayout className=\"post-template\">\n      <Helmet>\n        <html lang={config.lang} />\n        <title>{post.frontmatter.title}</title>\n\n        <meta name=\"description\" content={post.frontmatter.excerpt || post.excerpt} />\n        <meta property=\"og:site_name\" content={config.title} />\n        <meta property=\"og:type\" content=\"article\" />\n        <meta property=\"og:title\" content={post.frontmatter.title} />\n        <meta property=\"og:description\" content={post.frontmatter.excerpt || post.excerpt} />\n        <meta property=\"og:url\" content={config.siteUrl + location.pathname} />\n        {post.frontmatter.image && (\n          <meta\n            property=\"og:image\"\n            content={`${config.siteUrl}${getSrc(post.frontmatter.image)}`}\n          />\n        )}\n        <meta property=\"article:published_time\" content={post.frontmatter.date} />\n        {/* not sure if modified time possible */}\n        {/* <meta property=\"article:modified_time\" content=\"2018-08-20T15:12:00.000Z\" /> */}\n        {post.frontmatter.tags && (\n          <meta property=\"article:tag\" content={post.frontmatter.tags[0]} />\n        )}\n\n        {config.instagram && <meta property=\"article:publisher\" content={config.instagram} />}\n        {config.instagram && <meta property=\"article:author\" content={config.instagram} />}\n        <meta name=\"github:card\" content=\"summary_large_image\" />\n        <meta name=\"github:title\" content={post.frontmatter.title} />\n        <meta name=\"github:description\" content={post.frontmatter.excerpt || post.excerpt} />\n        <meta name=\"github:url\" content={config.siteUrl + location.pathname} />\n        {post.frontmatter.image && (\n          <meta\n            name=\"github:image\"\n            content={`${config.siteUrl}${getSrc(post.frontmatter.image)}`}\n          />\n        )}\n        <meta name=\"github:label1\" content=\"Written by\" />\n        <meta name=\"github:data1\" content={post.frontmatter.author[0].name} />\n        <meta name=\"github:label2\" content=\"Filed under\" />\n        {post.frontmatter.tags && <meta name=\"github:data2\" content={post.frontmatter.tags[0]} />}\n        {config.github && (\n          <meta\n            name=\"github:site\"\n            content={`@${config.github.split('https://github.com/')[1]}`}\n          />\n        )}\n        {config.github && (\n          <meta\n            name=\"github:creator\"\n            content={`@${config.github.split('https://github.com/')[1]}`}\n          />\n        )}\n        {width && <meta property=\"og:image:width\" content={width?.toString()} />}\n        {height && <meta property=\"og:image:height\" content={height?.toString()} />}\n      </Helmet>\n      <Wrapper css={PostTemplate}>\n        <header className=\"site-header\">\n          <div css={[outer, SiteNavMain]}>\n            <div css={inner}>\n              <SiteNav isPost post={post.frontmatter} />\n            </div>\n          </div>\n        </header>\n        <main id=\"site-main\" className=\"site-main\" css={[SiteMain, outer]}>\n          <div css={inner}>\n            {/* TODO: no-image css tag? */}\n            <article css={[PostFull, !post.frontmatter.image && NoImage]}>\n              <PostFullHeader className=\"post-full-header\">\n                <PostFullTags className=\"post-full-tags\">\n                  {post.frontmatter.tags &&\n                    post.frontmatter.tags.length > 0 &&\n                    config.showAllTags &&\n                    post.frontmatter.tags.map((tag, idx) => (\n                      <React.Fragment key={tag}>\n                        {idx > 0 && <>, &nbsp;</>}\n                        <Link to={`/tags/${kebabCase(tag)}/`}>{tag}</Link>\n                      </React.Fragment>\n                    ))}\n                  {post.frontmatter.tags &&\n                    post.frontmatter.tags.length > 0 &&\n                    !config.showAllTags && (\n                      <Link to={`/tags/${kebabCase(post.frontmatter.tags[0])}/`}>\n                        {post.frontmatter.tags[0]}\n                      </Link>\n                    )}\n                </PostFullTags>\n                <PostFullTitle className=\"post-full-title\">{post.frontmatter.title}</PostFullTitle>\n                <PostFullCustomExcerpt className=\"post-full-custom-excerpt\">\n                  {post.frontmatter.excerpt}\n                </PostFullCustomExcerpt>\n                <PostFullByline className=\"post-full-byline\">\n                  <section className=\"post-full-byline-content\">\n                    <AuthorList authors={post.frontmatter.author} tooltip=\"large\" />\n                    <section className=\"post-full-byline-meta\">\n                      <h4 className=\"author-name\">\n                        {post.frontmatter.author.map(author => (\n                          <Link key={author.name} to={`/author/${kebabCase(author.name)}/`}>\n                            {author.name}\n                          </Link>\n                        ))}\n                      </h4>\n                      <div className=\"byline-meta-content\">\n                        <time className=\"byline-meta-date\" dateTime={datetime}>\n                          {displayDatetime}\n                        </time>\n                        <span className=\"byline-reading-time\">\n                          <span className=\"bull\">&bull;</span>\n                          {post.fields.readingTime.text}\n                        </span>\n                      </div>\n                    </section>\n                  </section>\n                </PostFullByline>\n              </PostFullHeader>\n\n              {post.frontmatter.image && (\n                <PostFullImage>\n                  <GatsbyImage\n                    image={getImage(post.frontmatter.image)!}\n                    style={{ height: '100%' }}\n                    alt={post.frontmatter.title}\n                  />\n                </PostFullImage>\n              )}\n              <PostContent htmlAst={post.htmlAst} />\n\n              {/* The big email subscribe modal content */}\n              {config.showSubscribe && <Subscribe title={config.title} />}\n            </article>\n            <Utterances repo=\"pozafly/blog-comments\" />\n          </div>\n        </main>\n\n        <ReadNext\n          currentPageSlug={location.pathname}\n          tags={post.frontmatter.tags}\n          relatedPosts={data.relatedPosts}\n          pageContext={pageContext}\n        />\n\n        <Footer />\n      </Wrapper>\n    </IndexLayout>\n  );\n}\n\nconst PostTemplate = css`\n  .site-main {\n    margin-top: 64px;\n    background: #fff;\n    padding-bottom: 4vw;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    .site-main {\n      /* background: var(--darkmode); */\n      background: ${colors.darkmode};\n    }\n  }\n`;\n\nexport const PostFull = css`\n  position: relative;\n  z-index: 50;\n`;\n\nexport const NoImage = css`\n  .post-full-content {\n    padding-top: 0;\n  }\n\n  .post-full-content:before,\n  .post-full-content:after {\n    display: none;\n  }\n`;\n\nexport const PostFullHeader = styled.header`\n  position: relative;\n  margin: 0 auto;\n  padding: 70px 100px 50px;\n  border-top-left-radius: 3px;\n  border-top-right-radius: 3px;\n\n  @media (max-width: 1170px) {\n    padding: 60px 11vw 50px;\n  }\n\n  @media (max-width: 800px) {\n    padding-right: 5vw;\n    padding-left: 5vw;\n  }\n\n  @media (max-width: 500px) {\n    padding: 20px 0 35px;\n  }\n`;\n\nconst PostFullTags = styled.section`\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  /* color: var(--midgrey); */\n  color: ${colors.midgrey};\n  font-size: 1.3rem;\n  line-height: 1.4em;\n  font-weight: 600;\n  text-transform: uppercase;\n`;\n\nconst PostFullCustomExcerpt = styled.p`\n  margin: 20px 0 0;\n  color: var(--midgrey);\n  font-size: 2rem;\n  line-height: 1.4em;\n  font-weight: 360;\n\n  @media (max-width: 500px) {\n    font-size: 1.9rem;\n    line-height: 1.5em;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    /* color: color(var(--midgrey) l(+10%)); */\n    color: ${lighten('0.1', colors.midgrey)};\n  }\n`;\n\nconst PostFullByline = styled.div`\n  display: flex;\n  justify-content: space-between;\n  margin: 35px 0 0;\n  padding-top: 15px;\n  /* border-top: 1px solid color(var(--lightgrey) l(+10%)); */\n  border-top: 1px solid ${lighten('0.1', colors.lightgrey)};\n\n  .post-full-byline-content {\n    flex-grow: 1;\n    display: flex;\n    align-items: flex-start;\n  }\n\n  .post-full-byline-content .author-list {\n    justify-content: flex-start;\n    padding: 0 12px 0 0;\n  }\n\n  .post-full-byline-meta {\n    margin: 2px 0 0;\n    /* color: color(var(--midgrey) l(+10%)); */\n    color: ${lighten('0.1', colors.midgrey)};\n    font-size: 1.2rem;\n    line-height: 1.2em;\n    letter-spacing: 0.2px;\n    text-transform: uppercase;\n  }\n\n  .post-full-byline-meta h4 {\n    margin: 0 0 3px;\n    font-size: 1.3rem;\n    line-height: 1.4em;\n    font-weight: 500;\n  }\n\n  .post-full-byline-meta h4 a {\n    /* color: color(var(--darkgrey) l(+10%)); */\n    color: ${lighten('0.1', colors.darkgrey)};\n  }\n\n  .post-full-byline-meta h4 a:hover {\n    /* color: var(--darkgrey); */\n    color: ${colors.darkgrey};\n  }\n\n  .post-full-byline-meta .bull {\n    display: inline-block;\n    margin: 0 4px;\n    opacity: 0.6;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    /* border-top-color: color(var(--darkmode) l(+15%)); */\n    border-top-color: ${lighten('0.15', colors.darkmode)};\n\n    .post-full-byline-meta h4 a {\n      color: rgba(255, 255, 255, 0.75);\n    }\n\n    .post-full-byline-meta h4 a:hover {\n      color: #fff;\n    }\n  }\n`;\n\nexport const PostFullTitle = styled.h1`\n  margin: 0 0 0.2em;\n  color: ${setLightness('0.05', colors.darkgrey)};\n  @media (max-width: 500px) {\n    margin-top: 0.2em;\n    font-size: 3.3rem;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    color: rgba(255, 255, 255, 0.9);\n  }\n`;\n\nconst PostFullImage = styled.figure`\n  margin: 25px auto 50px;\n  max-height: 800px;\n  background-size: cover;\n  width: 80%;\n  border-radius: 8px;\n  img {\n    border-radius: 8px;  \n  }\n\n  @media (max-width: 1170px) {\n    img {\n      max-width: 1170px;\n    }\n  }\n\n  @media (max-width: 800px) {\n    width: 100%;\n  }\n  @media (max-width: 500px) {\n    margin-bottom: 4vw;\n  }\n  border: 1px solid hsl(230deg 25% 94%);\n  @media (prefers-color-scheme: dark) {\n    border: 1px solid hsl(230deg 6% 23%);\n  }\n`;\n\nexport const query = graphql`\n  query ($slug: String, $primaryTag: String) {\n    markdownRemark(fields: { slug: { eq: $slug } }) {\n      html\n      htmlAst\n      excerpt\n      fields {\n        readingTime {\n          text\n        }\n      }\n      frontmatter {\n        title\n        userDate: date(formatString: \"D MMMM YYYY\")\n        date\n        tags\n        excerpt\n        image {\n          childImageSharp {\n            gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, formats: [AUTO, WEBP, AVIF])\n          }\n        }\n        author {\n          name\n          bio\n          avatar {\n            childImageSharp {\n              gatsbyImageData(layout: FULL_WIDTH, breakpoints: [40, 80, 120])\n            }\n          }\n        }\n      }\n    }\n    relatedPosts: allMarkdownRemark(\n      filter: { frontmatter: { tags: { in: [$primaryTag] }, draft: { ne: true } } }\n      limit: 5\n      sort: { frontmatter: { date: DESC } }\n    ) {\n      totalCount\n      edges {\n        node {\n          id\n          excerpt\n          frontmatter {\n            title\n            date\n          }\n          fields {\n            readingTime {\n              text\n            }\n            slug\n          }\n        }\n      }\n    }\n  }\n`;\n\nexport default PageTemplate;\n"],"names":["PostTemplate","css","colors","PostFull","name","styles","NoImage","PostFullHeader","target","PostFullTags","PostFullCustomExcerpt","lighten","PostFullByline","PostFullTitle","setLightness","PostFullImage","data","pageContext","location","post","markdownRemark","width","height","frontmatter","image","getImage","_getImage","_getImage2","date","Date","datetime","format","displayDatetime","___EmotionJSX","IndexLayout","className","Helmet","lang","config","title","content","excerpt","property","pathname","getSrc","tags","author","_width","toString","_height","Wrapper","outer","SiteNavMain","inner","SiteNav","isPost","id","SiteMain","length","map","tag","idx","React","key","Link","to","_kebabCase","AuthorList","authors","tooltip","dateTime","fields","readingTime","text","GatsbyImage","style","alt","PostContent","htmlAst","Subscribe","Utterances","repo","ReadNext","currentPageSlug","relatedPosts","Footer"],"sourceRoot":""}
\ No newline at end of file
diff --git a/environment/webpack-boilerplate/index.html b/environment/webpack-boilerplate/index.html
index 9cfcb34a4..f469a71c6 100644
--- a/environment/webpack-boilerplate/index.html
+++ b/environment/webpack-boilerplate/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">Webpack5 JavaScript 보일러플레이트 만들기</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/webpack/">Webpack</a>,  <a href="/tags/bundler/">Bundler</a>,  <a href="/tags/tool/">Tool</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">Webpack5 JavaScript 보일러플레이트 만들기</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">모던 프론트엔드 웹 개발에 필요한 세팅을 직접 해보면서 어떤 옵션과 기능이 있는지 알아보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-04-05">05 Apr 2023</time><span class="byline-reading-time"><span class="bull">•</span>63 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:52.32558139534883%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAABP0lEQVQoz2PgV83DgfLBKFdALU9ALR+rGgacOlVyBVRzBDRKuRUL+dUKhbSrYMbh1JwLRnn8KjkC6sWCeh0y9guNojZIWEzkU68Ei+di06yWz69WIKBeJKAGQoKapUKGvVpB6xPn3oycfytx7m0Nv2V8amUC2iX8SF5A1pwvatwvZjZVzGyqtNMqUbttIe2nbVpP8iRssm07FdJ+hlulWs7/gKj1VD6ldIgRSJpVckWNe8StZ4iZTZF2WSVqtyW4/ZTThPP8cRucJ14IaT/LrV4rG7hHzH4mn2I6v1oBsp9BgSEAcnmhgFqhoGaxsEG3mu+a+BnX4xfejp95U9l9IZ9aqYBmkYBGIZ7QhgRYroB6gYB2s4TlbJ3gVSIGbbzKYCmVXOQwwx1VIDJbQK2QRzEfFPhqyJFPQDPCCDyJBACIs5iXiKCg9AAAAABJRU5ErkJggg==" alt=""/><picture><source type="image/avif" data-srcset="/static/398ff7eccce15fa106b9755da8007778/885fa/main.avif 750w,/static/398ff7eccce15fa106b9755da8007778/4f36a/main.avif 1080w,/static/398ff7eccce15fa106b9755da8007778/dac68/main.avif 1366w,/static/398ff7eccce15fa106b9755da8007778/97f05/main.avif 1720w" sizes="100vw"/><source type="image/webp" data-srcset="/static/398ff7eccce15fa106b9755da8007778/77272/main.webp 750w,/static/398ff7eccce15fa106b9755da8007778/317ed/main.webp 1080w,/static/398ff7eccce15fa106b9755da8007778/b5c49/main.webp 1366w,/static/398ff7eccce15fa106b9755da8007778/e0b55/main.webp 1720w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/398ff7eccce15fa106b9755da8007778/90018/main.png" data-srcset="/static/398ff7eccce15fa106b9755da8007778/f503b/main.png 750w,/static/398ff7eccce15fa106b9755da8007778/e4953/main.png 1080w,/static/398ff7eccce15fa106b9755da8007778/c2802/main.png 1366w,/static/398ff7eccce15fa106b9755da8007778/90018/main.png 1720w" alt="Webpack5 JavaScript 보일러플레이트 만들기"/></picture><noscript><picture><source type="image/avif" srcSet="/static/398ff7eccce15fa106b9755da8007778/885fa/main.avif 750w,/static/398ff7eccce15fa106b9755da8007778/4f36a/main.avif 1080w,/static/398ff7eccce15fa106b9755da8007778/dac68/main.avif 1366w,/static/398ff7eccce15fa106b9755da8007778/97f05/main.avif 1720w" sizes="100vw"/><source type="image/webp" srcSet="/static/398ff7eccce15fa106b9755da8007778/77272/main.webp 750w,/static/398ff7eccce15fa106b9755da8007778/317ed/main.webp 1080w,/static/398ff7eccce15fa106b9755da8007778/b5c49/main.webp 1366w,/static/398ff7eccce15fa106b9755da8007778/e0b55/main.webp 1720w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/398ff7eccce15fa106b9755da8007778/90018/main.png" srcSet="/static/398ff7eccce15fa106b9755da8007778/f503b/main.png 750w,/static/398ff7eccce15fa106b9755da8007778/e4953/main.png 1080w,/static/398ff7eccce15fa106b9755da8007778/c2802/main.png 1366w,/static/398ff7eccce15fa106b9755da8007778/90018/main.png 1720w" alt="Webpack5 JavaScript 보일러플레이트 만들기"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">Webpack5 JavaScript 보일러플레이트 만들기</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/webpack/">Webpack</a>,  <a href="/tags/bundler/">Bundler</a>,  <a href="/tags/tool/">Tool</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">Webpack5 JavaScript 보일러플레이트 만들기</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">모던 프론트엔드 웹 개발에 필요한 세팅을 직접 해보면서 어떤 옵션과 기능이 있는지 알아보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-04-05">05 Apr 2023</time><span class="byline-reading-time"><span class="bull">•</span>63 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:52.32558139534883%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAABP0lEQVQoz2PgV83DgfLBKFdALU9ALR+rGgacOlVyBVRzBDRKuRUL+dUKhbSrYMbh1JwLRnn8KjkC6sWCeh0y9guNojZIWEzkU68Ei+di06yWz69WIKBeJKAGQoKapUKGvVpB6xPn3oycfytx7m0Nv2V8amUC2iX8SF5A1pwvatwvZjZVzGyqtNMqUbttIe2nbVpP8iRssm07FdJ+hlulWs7/gKj1VD6ldIgRSJpVckWNe8StZ4iZTZF2WSVqtyW4/ZTThPP8cRucJ14IaT/LrV4rG7hHzH4mn2I6v1oBsp9BgSEAcnmhgFqhoGaxsEG3mu+a+BnX4xfejp95U9l9IZ9aqYBmkYBGIZ7QhgRYroB6gYB2s4TlbJ3gVSIGbbzKYCmVXOQwwx1VIDJbQK2QRzEfFPhqyJFPQDPCCDyJBACIs5iXiKCg9AAAAABJRU5ErkJggg==" alt=""/><picture><source type="image/avif" data-srcset="/static/398ff7eccce15fa106b9755da8007778/885fa/main.avif 750w,/static/398ff7eccce15fa106b9755da8007778/4f36a/main.avif 1080w,/static/398ff7eccce15fa106b9755da8007778/dac68/main.avif 1366w,/static/398ff7eccce15fa106b9755da8007778/97f05/main.avif 1720w" sizes="100vw"/><source type="image/webp" data-srcset="/static/398ff7eccce15fa106b9755da8007778/77272/main.webp 750w,/static/398ff7eccce15fa106b9755da8007778/317ed/main.webp 1080w,/static/398ff7eccce15fa106b9755da8007778/b5c49/main.webp 1366w,/static/398ff7eccce15fa106b9755da8007778/e0b55/main.webp 1720w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/398ff7eccce15fa106b9755da8007778/90018/main.png" data-srcset="/static/398ff7eccce15fa106b9755da8007778/f503b/main.png 750w,/static/398ff7eccce15fa106b9755da8007778/e4953/main.png 1080w,/static/398ff7eccce15fa106b9755da8007778/c2802/main.png 1366w,/static/398ff7eccce15fa106b9755da8007778/90018/main.png 1720w" alt="Webpack5 JavaScript 보일러플레이트 만들기"/></picture><noscript><picture><source type="image/avif" srcSet="/static/398ff7eccce15fa106b9755da8007778/885fa/main.avif 750w,/static/398ff7eccce15fa106b9755da8007778/4f36a/main.avif 1080w,/static/398ff7eccce15fa106b9755da8007778/dac68/main.avif 1366w,/static/398ff7eccce15fa106b9755da8007778/97f05/main.avif 1720w" sizes="100vw"/><source type="image/webp" srcSet="/static/398ff7eccce15fa106b9755da8007778/77272/main.webp 750w,/static/398ff7eccce15fa106b9755da8007778/317ed/main.webp 1080w,/static/398ff7eccce15fa106b9755da8007778/b5c49/main.webp 1366w,/static/398ff7eccce15fa106b9755da8007778/e0b55/main.webp 1720w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/398ff7eccce15fa106b9755da8007778/90018/main.png" srcSet="/static/398ff7eccce15fa106b9755da8007778/f503b/main.png 750w,/static/398ff7eccce15fa106b9755da8007778/e4953/main.png 1080w,/static/398ff7eccce15fa106b9755da8007778/c2802/main.png 1366w,/static/398ff7eccce15fa106b9755da8007778/90018/main.png 1720w" alt="Webpack5 JavaScript 보일러플레이트 만들기"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -865,4 +865,4 @@ <h2 id="dependencies-vs-devDependencies" style="position:relative">dependencies
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/html/meta-tag-and-vue-meta/index.html b/html/meta-tag-and-vue-meta/index.html
index 803830ba4..067fb7036 100644
--- a/html/meta-tag-and-vue-meta/index.html
+++ b/html/meta-tag-and-vue-meta/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">vue-meta와 Meta tag</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/vue-js/">Vue.js</a>,  <a href="/tags/html/">HTML</a>,  <a href="/tags/seo/">SEO</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">vue-meta와 Meta tag</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Semantic-Tag와 함께 SEO 향상을 위해 meta tag를 프로젝트에 적용하면서 meta tag의 역할과 기능, 그리고 Vue.js에서는 meta tag를 동적으로 어떻게 변화시킬 수 있는지 알아보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-05-31">31 May 2021</time><span class="byline-reading-time"><span class="bull">•</span>11 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:100%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEtklEQVQ4y52Sa0xTBxiGm2lcNjeNTt3YNBHMdMZLHOOqa1G5iZiKMCxaLgWqlGovpz2nQInCRFuBAopmm1qxINuM88eSJYuW3pByUWDgdC5at2S2YAYFZgcuyjnnXSqiaNyW7Mfz60uevN/3vZyAgICk0NBQksfjybhcrvzf4PF48tWrVsmDwyLkoVyuPCycKw8J58qjIz+WhQWHUG/Nn7eBkysWu6traqApKIC2uBha7T9QXIyCwkKcMJ6GRr4XUqEQ+fkZUEqzsEUkhKKQxM60HQ6OZJf41hFDOdQK2aNCUkUXqomXQxI0pZTTdcaTdKEkl85P3krLJQK6hBTTm9NTHipIGbJ27rzECU5Mcwn1RqTrTjLpulPsf5G67yi7vfQ4m1pyjBUZGlnqfBuTW9Ewvn3/MSyPSjBz4opqXZquv6BsGWQI5xBehrLFC8I5CHXrMKiecRA9NKhrLKvpHYeq4z6UziFa1+0Db7fWzImlDLep1iEorW6GsPdhKkqbB4SjH5RzAMrmYUgs/Ugh9RDLtKywyAB+UQ2baWxi1Zd/p6uuDCAqV2PmRKvKf6HaR6C09TGE4x4mUdr7QDq9UJs9yD73IwRkDhLionE9fgU86xehd+27GIgNRG5yKqStf9DVVwfB8wuTK7/uJlu9/kT0pExhc6Ogw4cskw1zhSlIFS5FSfIM/LxpJR6mRcCkksJUqoU3Yz32i0QQOwbpmk4veGKNmSNqaHGoWwZA2Pvpp7IrPuTUOfBqdjziFAuhS5uFm/wIQBKPruhlqP/yK3znbIdt+wbUyqTIuXSXrukankgYp6m+7V+ZsPcxz2T2x7IEYjEOC+biDj8CXkEkWhPWACIeLIkhuBCzBvh0F0rTPkHO97/SR7pHJoSxpMHlFyqsbsYvyz7TjGmZcYhXBKI8bQ5u8cPh27EWhpAg1IYtQeeWYGBHOFC2G+cyk5B8wAiyfYQ2TN4wlqpyUW3DULcMMqIzdryeGYP0fUtwJHsurm8Kg0+4FuUfBeJE5PuoCgmCKTwIOCSFQ70L/LI6kJ1jUNn7aUPn0MQNYymDi+oYgeqih1kk2QbOqRR8tu89tH7+NhqjluO+YB3quctQHhwIU0QQUCaBdU869hovgux6AJXN7X8kXfWcsG0YZMsgk1R5FrP0WzH9WCpOHQjAxdp5aIz6AH8KuPh24wrgYD4uiLZhc6kRqqujIKzuyZq9kPBxDz1M0ZVRbDtYjzfKt2La0VSYyhei6Yt3cH7jYkDOx7msJCSWnERBtz+ZB1N6+7xQ8+TLSrsHRZ1jSC6rx6zKJHCKY3BcMRN5GUuRt44Hge40qK4Jmcpx7xnNU1aOIStvq5xeyCxuRmb1sHuafmPJNh+bqKtjVxIEu1n/DZvR2M5mXbrLKi4PsDLLXXav1cPKnme8omNg4ssJ2lrXoRs0Srt84/reMUbfM8boekaZip8YxnCNZqpdYCpujDMVvQ8Y/Q+jj+dT0fWMMYd7Hzw6cfMhovKKzZzILNUd6dlm5NU1Qdlgg+IJ8noL5A0WyE1NUNRboGiwPp29CHHWjvw6M1bzM82cGTPf/HD6nAWJ0+csiOfMnr/pfxL/yuz5W2a8NnPZ37QuzDw9K+eiAAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/6de019eb01d830ae3086d49bb091cce4/65c8c/meta-tag.avif 512w" sizes="100vw"/><source type="image/webp" data-srcset="/static/6de019eb01d830ae3086d49bb091cce4/d689f/meta-tag.webp 512w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/6de019eb01d830ae3086d49bb091cce4/ccc41/meta-tag.png" data-srcset="/static/6de019eb01d830ae3086d49bb091cce4/ccc41/meta-tag.png 512w" alt="vue-meta와 Meta tag"/></picture><noscript><picture><source type="image/avif" srcSet="/static/6de019eb01d830ae3086d49bb091cce4/65c8c/meta-tag.avif 512w" sizes="100vw"/><source type="image/webp" srcSet="/static/6de019eb01d830ae3086d49bb091cce4/d689f/meta-tag.webp 512w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/6de019eb01d830ae3086d49bb091cce4/ccc41/meta-tag.png" srcSet="/static/6de019eb01d830ae3086d49bb091cce4/ccc41/meta-tag.png 512w" alt="vue-meta와 Meta tag"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">vue-meta와 Meta tag</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/vue-js/">Vue.js</a>,  <a href="/tags/html/">HTML</a>,  <a href="/tags/seo/">SEO</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">vue-meta와 Meta tag</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Semantic-Tag와 함께 SEO 향상을 위해 meta tag를 프로젝트에 적용하면서 meta tag의 역할과 기능, 그리고 Vue.js에서는 meta tag를 동적으로 어떻게 변화시킬 수 있는지 알아보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-05-31">31 May 2021</time><span class="byline-reading-time"><span class="bull">•</span>11 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:100%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEtklEQVQ4y52Sa0xTBxiGm2lcNjeNTt3YNBHMdMZLHOOqa1G5iZiKMCxaLgWqlGovpz2nQInCRFuBAopmm1qxINuM88eSJYuW3pByUWDgdC5at2S2YAYFZgcuyjnnXSqiaNyW7Mfz60uevN/3vZyAgICk0NBQksfjybhcrvzf4PF48tWrVsmDwyLkoVyuPCycKw8J58qjIz+WhQWHUG/Nn7eBkysWu6traqApKIC2uBha7T9QXIyCwkKcMJ6GRr4XUqEQ+fkZUEqzsEUkhKKQxM60HQ6OZJf41hFDOdQK2aNCUkUXqomXQxI0pZTTdcaTdKEkl85P3krLJQK6hBTTm9NTHipIGbJ27rzECU5Mcwn1RqTrTjLpulPsf5G67yi7vfQ4m1pyjBUZGlnqfBuTW9Ewvn3/MSyPSjBz4opqXZquv6BsGWQI5xBehrLFC8I5CHXrMKiecRA9NKhrLKvpHYeq4z6UziFa1+0Db7fWzImlDLep1iEorW6GsPdhKkqbB4SjH5RzAMrmYUgs/Ugh9RDLtKywyAB+UQ2baWxi1Zd/p6uuDCAqV2PmRKvKf6HaR6C09TGE4x4mUdr7QDq9UJs9yD73IwRkDhLionE9fgU86xehd+27GIgNRG5yKqStf9DVVwfB8wuTK7/uJlu9/kT0pExhc6Ogw4cskw1zhSlIFS5FSfIM/LxpJR6mRcCkksJUqoU3Yz32i0QQOwbpmk4veGKNmSNqaHGoWwZA2Pvpp7IrPuTUOfBqdjziFAuhS5uFm/wIQBKPruhlqP/yK3znbIdt+wbUyqTIuXSXrukankgYp6m+7V+ZsPcxz2T2x7IEYjEOC+biDj8CXkEkWhPWACIeLIkhuBCzBvh0F0rTPkHO97/SR7pHJoSxpMHlFyqsbsYvyz7TjGmZcYhXBKI8bQ5u8cPh27EWhpAg1IYtQeeWYGBHOFC2G+cyk5B8wAiyfYQ2TN4wlqpyUW3DULcMMqIzdryeGYP0fUtwJHsurm8Kg0+4FuUfBeJE5PuoCgmCKTwIOCSFQ70L/LI6kJ1jUNn7aUPn0MQNYymDi+oYgeqih1kk2QbOqRR8tu89tH7+NhqjluO+YB3quctQHhwIU0QQUCaBdU869hovgux6AJXN7X8kXfWcsG0YZMsgk1R5FrP0WzH9WCpOHQjAxdp5aIz6AH8KuPh24wrgYD4uiLZhc6kRqqujIKzuyZq9kPBxDz1M0ZVRbDtYjzfKt2La0VSYyhei6Yt3cH7jYkDOx7msJCSWnERBtz+ZB1N6+7xQ8+TLSrsHRZ1jSC6rx6zKJHCKY3BcMRN5GUuRt44Hge40qK4Jmcpx7xnNU1aOIStvq5xeyCxuRmb1sHuafmPJNh+bqKtjVxIEu1n/DZvR2M5mXbrLKi4PsDLLXXav1cPKnme8omNg4ssJ2lrXoRs0Srt84/reMUbfM8boekaZip8YxnCNZqpdYCpujDMVvQ8Y/Q+jj+dT0fWMMYd7Hzw6cfMhovKKzZzILNUd6dlm5NU1Qdlgg+IJ8noL5A0WyE1NUNRboGiwPp29CHHWjvw6M1bzM82cGTPf/HD6nAWJ0+csiOfMnr/pfxL/yuz5W2a8NnPZ37QuzDw9K+eiAAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/6de019eb01d830ae3086d49bb091cce4/65c8c/meta-tag.avif 512w" sizes="100vw"/><source type="image/webp" data-srcset="/static/6de019eb01d830ae3086d49bb091cce4/d689f/meta-tag.webp 512w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/6de019eb01d830ae3086d49bb091cce4/ccc41/meta-tag.png" data-srcset="/static/6de019eb01d830ae3086d49bb091cce4/ccc41/meta-tag.png 512w" alt="vue-meta와 Meta tag"/></picture><noscript><picture><source type="image/avif" srcSet="/static/6de019eb01d830ae3086d49bb091cce4/65c8c/meta-tag.avif 512w" sizes="100vw"/><source type="image/webp" srcSet="/static/6de019eb01d830ae3086d49bb091cce4/d689f/meta-tag.webp 512w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/6de019eb01d830ae3086d49bb091cce4/ccc41/meta-tag.png" srcSet="/static/6de019eb01d830ae3086d49bb091cce4/ccc41/meta-tag.png 512w" alt="vue-meta와 Meta tag"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -295,4 +295,4 @@ <h2 id="컴포넌트에서-적용" style="position:relative">컴포넌트에서
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/html/pdf-css/index.html b/html/pdf-css/index.html
index f57ba3a30..b11a44589 100644
--- a/html/pdf-css/index.html
+++ b/html/pdf-css/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">PDF 페이지 CSS로 안전하게 작성하기</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/css/">CSS</a>,  <a href="/tags/html/">HTML</a>,  <a href="/tags/pdf/">PDF</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">PDF 페이지 CSS로 안전하게 작성하기</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">웹을 개발하다 보면, PDF로 문서를 사용자에게 제공하는 기능을 구현해야 할 때가 있다. 다른 개발자분들이 헤매지 않을 수 있도록 정리해보았다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2022-04-02">02 Apr 2022</time><span class="byline-reading-time"><span class="bull">•</span>17 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:59.70149253731343%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/webp;base64,UklGRtICAABXRUJQVlA4WAoAAAAQAAAAEwAACwAAQUxQSNAAAAANgFvbtmplPfnuhrtLZBERJTik0AE5sUc0Q0oJ7u4u358L2kNETACCX3dkLD9zq0S8eQOgVZazg+JZ2/1CdcZQQuc2CKFSunVjcPakVd18QrkIFMC15c5Sqh5IN60jvIWEB4uPKskeNgG6Sy9uS0khy3PT/kiZP3vjR58BJQ/ufJ/K3+nDQLzoc4GZ6bF/jN5DMaXGX4gHbiTpr8PevM/vj74SKa5ttQ91iWLUb9xEg6ZPggdHPc7eKEEz76tWqyPJuAJOFl6tz0/VyQY00XAAVlA4INwBAADwDACdASoUAAwAAAAAJbACdMoRwN4B+AH6wf0CnMfxraAP5ntoH9V3kDgAP0A9FX9bvgr/Yj0ObkB+AH7AcxXjxvwAz2f4gZDXojH5Aa5j+m/iTugH8Q/hX9O/KX97OUa/QA7nO51afAXxy+zG6KgAAP7/gf6F/rA+zlr3OSLmEFhnXewUhLqhg3kVP//nucqRSyx9FH/+3Ug5zMHEr8WVOoOo+Bqfuqhx3/4BQkNis+R+aL90ULvRbxGh9pov+5Ke1/nHl8/73zsuUCdViP0g+s/VM+mrYcUeH87U3zd9ajvjxD/+xiwh2H5ViPwe45Knn/8ZIJnLI16FZ+qM4D54m1CHjeRWQkdXJ37P/uDb//o4LyYp2q0/md/eTXqdmQqaZYRZBa+38cwTVZ3/9X20AaMT9lXVbEbl09HkC44r/4bm2KvLJHHG2+Nx/4wOyCni3/0UnUZgQV8UQDWTR//cyauXfHn9dYa1j/29y/jk2jq+sxQ2PF0S0vkMQp7aZ4s2d/eufo1wItXa/WHnm3aXrwWVzlD+/Q37DS0FoTk+ri/GMc/Z/xwTZf/WFdlLUsYUFNyrnBeEYug4j//P+L75Yvd2hRh9eSJVRJJ1wCkf/BZ7yDlLtqTFKIAAAA==" alt=""/><picture><source type="image/avif" data-srcset="/static/e3e257a55da3fde74b56ddb943a2943b/84a38/pdf-css.avif 670w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/e3e257a55da3fde74b56ddb943a2943b/cf91f/pdf-css.webp" data-srcset="/static/e3e257a55da3fde74b56ddb943a2943b/cf91f/pdf-css.webp 670w" alt="PDF 페이지 CSS로 안전하게 작성하기"/></picture><noscript><picture><source type="image/avif" srcSet="/static/e3e257a55da3fde74b56ddb943a2943b/84a38/pdf-css.avif 670w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/e3e257a55da3fde74b56ddb943a2943b/cf91f/pdf-css.webp" srcSet="/static/e3e257a55da3fde74b56ddb943a2943b/cf91f/pdf-css.webp 670w" alt="PDF 페이지 CSS로 안전하게 작성하기"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">PDF 페이지 CSS로 안전하게 작성하기</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/css/">CSS</a>,  <a href="/tags/html/">HTML</a>,  <a href="/tags/pdf/">PDF</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">PDF 페이지 CSS로 안전하게 작성하기</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">웹을 개발하다 보면, PDF로 문서를 사용자에게 제공하는 기능을 구현해야 할 때가 있다. 다른 개발자분들이 헤매지 않을 수 있도록 정리해보았다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2022-04-02">02 Apr 2022</time><span class="byline-reading-time"><span class="bull">•</span>17 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:59.70149253731343%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/webp;base64,UklGRtICAABXRUJQVlA4WAoAAAAQAAAAEwAACwAAQUxQSNAAAAANgFvbtmplPfnuhrtLZBERJTik0AE5sUc0Q0oJ7u4u358L2kNETACCX3dkLD9zq0S8eQOgVZazg+JZ2/1CdcZQQuc2CKFSunVjcPakVd18QrkIFMC15c5Sqh5IN60jvIWEB4uPKskeNgG6Sy9uS0khy3PT/kiZP3vjR58BJQ/ufJ/K3+nDQLzoc4GZ6bF/jN5DMaXGX4gHbiTpr8PevM/vj74SKa5ttQ91iWLUb9xEg6ZPggdHPc7eKEEz76tWqyPJuAJOFl6tz0/VyQY00XAAVlA4INwBAADwDACdASoUAAwAAAAAJbACdMoRwN4B+AH6wf0CnMfxraAP5ntoH9V3kDgAP0A9FX9bvgr/Yj0ObkB+AH7AcxXjxvwAz2f4gZDXojH5Aa5j+m/iTugH8Q/hX9O/KX97OUa/QA7nO51afAXxy+zG6KgAAP7/gf6F/rA+zlr3OSLmEFhnXewUhLqhg3kVP//nucqRSyx9FH/+3Ug5zMHEr8WVOoOo+Bqfuqhx3/4BQkNis+R+aL90ULvRbxGh9pov+5Ke1/nHl8/73zsuUCdViP0g+s/VM+mrYcUeH87U3zd9ajvjxD/+xiwh2H5ViPwe45Knn/8ZIJnLI16FZ+qM4D54m1CHjeRWQkdXJ37P/uDb//o4LyYp2q0/md/eTXqdmQqaZYRZBa+38cwTVZ3/9X20AaMT9lXVbEbl09HkC44r/4bm2KvLJHHG2+Nx/4wOyCni3/0UnUZgQV8UQDWTR//cyauXfHn9dYa1j/29y/jk2jq+sxQ2PF0S0vkMQp7aZ4s2d/eufo1wItXa/WHnm3aXrwWVzlD+/Q37DS0FoTk+ri/GMc/Z/xwTZf/WFdlLUsYUFNyrnBeEYug4j//P+L75Yvd2hRh9eSJVRJJ1wCkf/BZ7yDlLtqTFKIAAAA==" alt=""/><picture><source type="image/avif" data-srcset="/static/e3e257a55da3fde74b56ddb943a2943b/84a38/pdf-css.avif 670w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/e3e257a55da3fde74b56ddb943a2943b/cf91f/pdf-css.webp" data-srcset="/static/e3e257a55da3fde74b56ddb943a2943b/cf91f/pdf-css.webp 670w" alt="PDF 페이지 CSS로 안전하게 작성하기"/></picture><noscript><picture><source type="image/avif" srcSet="/static/e3e257a55da3fde74b56ddb943a2943b/84a38/pdf-css.avif 670w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/e3e257a55da3fde74b56ddb943a2943b/cf91f/pdf-css.webp" srcSet="/static/e3e257a55da3fde74b56ddb943a2943b/cf91f/pdf-css.webp 670w" alt="PDF 페이지 CSS로 안전하게 작성하기"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -255,4 +255,4 @@ <h3 id="display-inline-block" style="position:relative">display: inline-block<a
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/html/semantic-web/index.html b/html/semantic-web/index.html
index a24117b56..b51802ad8 100644
--- a/html/semantic-web/index.html
+++ b/html/semantic-web/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">Semantic Web에 대해 더 깊이 알아보기</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/html/">HTML</a>,  <a href="/tags/seo/">SEO</a>,  <a href="/tags/semantic-web/">Semantic Web</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">Semantic Web에 대해 더 깊이 알아보기</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Semantic Tag를 실제로 적용해보면서 고민했던 것과 팁을 함께 내용에 적어두었다. Semantic Tag에 대한 정의는 많지만 실제로 어떤 기준으로 적용해야할지 고민한다면 이 글이 도움이 될 수 있겠다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-05-29">29 May 2021</time><span class="byline-reading-time"><span class="bull">•</span>18 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:100%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAA2yAAANsgECm5pzAAAEd0lEQVQ4y22V3VMTVxjGDzr12j/A/6S96UU701u96EVnnLYXHR1nrGIrJSVQQJOcs0tSPqSxtaYiMTJoEa3WDyJkdzEULMpnUDEkCkhCkt0EUcluztM5mwRtp2fm2Xdv9jfveT+eJbpKCWZlgmm5BgDBrIushNv2ZBXmyKksklNZKqcyK6cyM6vQZV2ltwyNHdJVutvQKDE0VqNrjFRFBJA/kHbgmY8Q8jnBA1r3aozmX41R/FdvxiXkRxlyKoWhsRVdpfuNt7CaKrAG6CLApfeGfmm5ds5zAhfa3OihrmIPc1nnmYufl1y8h7l5j6uplAq7zJdRycwpNhS6yroMlRJdZbZIaVImgJ/goXwtxJwYGn68lV7fKCWSGSSfZblQIpnla2sGP3rsHK870MD1kZPYiEpWTqFmGUp9IlNDYzvEg6yP0LqtCQm9HudWfCnNUT68ou0jd/yJz05M8ZbjlK/fdSE/KnFdpZaAGhrdK2oq0tyTVWi+eF9C0OMsxRZWqzBwzmFZpW1qd9dVHKgfwKdfngGtdfDNMfvKlm7XlMYMje4SNXSIehTvS8Wgx4n52Kr9/dxMHHdujqP6fvV3FdrwJFbTBiIz65Bb/UiHW3l+VEI5SwpDpftEhpEK0Op1N/Ani2n+5vUbtDp/RSH/0gYGf7uJraKJU94+KH8tYi4DdNDTWC8DxbVNQ2UwVBYQwFQFyIMeJ19YeGFD+kNhTIzNIzaXgDryEMvP0wicHkQytYHxxGu0u23gdh11jYrrR8WVrXeBsQpQnI3CJizTst9fbb62YxHA1BrHT/IZpIe2gULQNVYQQPPfQLspWF3J4OHMEqZml/BgOo7puQSmZuIIRx+h99YCGut9yEVOonCvDKzMZEYAlyvAkgDOx1ZsoN/bhwtf/IDwt1788TXD4GGK27Uyho7Jdgx85UKgpQmFe4y/7TSLCOCtCtC0M4yt2F3u6ehHurkTCZcfC82nMN3YiZnGTvzd0IEXbj/g70HoIOVasIVvjZc3R1dpt2jKoXeAqAKDXZeRaOrA1WNexFq6sew5DaW+HZHv2nHnuA9W+1kMHfXy22eauZgQG6jRjwRwd1ahK2Kwe91Oa25u2Z7pTtd5RA+24GnDj5ivk209rm9D3OHF9HEJSq2Xdx5pwupdtykMQ1dpVBebIlYvPUz3i9ULepxmIpmpDPZTPtAX5jcGVVy/ouD6gIIbVxT09Y3wnwPDvO4wRfxGa2lzTKq6z/u22+SE22R8BNNtXSHWiIHBSWvh0aolur0YT/Mniyn+5GnKjvF4mk/MvuCXIs+5u/GUKUzC0OxNOVI2B7rT9kPgCvnkw1qinmv19csNuOxtwEXqsEKeelPEi9TBhUIeh9VHHWbIU2+NnG2u2Bc9Uhit+KFaMVjMt9UAg8Tf5CRYat9rTcqx4n0Z/6etapyQorpKPxDf50fLsLfAuJcg6SPsm+93IOklgZM/7EoN032ZCA1kFRrNKrSQVWgmG6GRTIR2r92lHwP9ZVPV2M5sRPwKqM36Bx68rz6LkbQDAAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/05b80ed36acfc48788b985fce4f216eb/65c8c/html.avif 512w" sizes="100vw"/><source type="image/webp" data-srcset="/static/05b80ed36acfc48788b985fce4f216eb/d689f/html.webp 512w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/05b80ed36acfc48788b985fce4f216eb/ccc41/html.png" data-srcset="/static/05b80ed36acfc48788b985fce4f216eb/ccc41/html.png 512w" alt="Semantic Web에 대해 더 깊이 알아보기"/></picture><noscript><picture><source type="image/avif" srcSet="/static/05b80ed36acfc48788b985fce4f216eb/65c8c/html.avif 512w" sizes="100vw"/><source type="image/webp" srcSet="/static/05b80ed36acfc48788b985fce4f216eb/d689f/html.webp 512w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/05b80ed36acfc48788b985fce4f216eb/ccc41/html.png" srcSet="/static/05b80ed36acfc48788b985fce4f216eb/ccc41/html.png 512w" alt="Semantic Web에 대해 더 깊이 알아보기"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">Semantic Web에 대해 더 깊이 알아보기</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/html/">HTML</a>,  <a href="/tags/seo/">SEO</a>,  <a href="/tags/semantic-web/">Semantic Web</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">Semantic Web에 대해 더 깊이 알아보기</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Semantic Tag를 실제로 적용해보면서 고민했던 것과 팁을 함께 내용에 적어두었다. Semantic Tag에 대한 정의는 많지만 실제로 어떤 기준으로 적용해야할지 고민한다면 이 글이 도움이 될 수 있겠다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-05-29">29 May 2021</time><span class="byline-reading-time"><span class="bull">•</span>18 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:100%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAA2yAAANsgECm5pzAAAEd0lEQVQ4y22V3VMTVxjGDzr12j/A/6S96UU701u96EVnnLYXHR1nrGIrJSVQQJOcs0tSPqSxtaYiMTJoEa3WDyJkdzEULMpnUDEkCkhCkt0EUcluztM5mwRtp2fm2Xdv9jfveT+eJbpKCWZlgmm5BgDBrIushNv2ZBXmyKksklNZKqcyK6cyM6vQZV2ltwyNHdJVutvQKDE0VqNrjFRFBJA/kHbgmY8Q8jnBA1r3aozmX41R/FdvxiXkRxlyKoWhsRVdpfuNt7CaKrAG6CLApfeGfmm5ds5zAhfa3OihrmIPc1nnmYufl1y8h7l5j6uplAq7zJdRycwpNhS6yroMlRJdZbZIaVImgJ/goXwtxJwYGn68lV7fKCWSGSSfZblQIpnla2sGP3rsHK870MD1kZPYiEpWTqFmGUp9IlNDYzvEg6yP0LqtCQm9HudWfCnNUT68ou0jd/yJz05M8ZbjlK/fdSE/KnFdpZaAGhrdK2oq0tyTVWi+eF9C0OMsxRZWqzBwzmFZpW1qd9dVHKgfwKdfngGtdfDNMfvKlm7XlMYMje4SNXSIehTvS8Wgx4n52Kr9/dxMHHdujqP6fvV3FdrwJFbTBiIz65Bb/UiHW3l+VEI5SwpDpftEhpEK0Op1N/Ani2n+5vUbtDp/RSH/0gYGf7uJraKJU94+KH8tYi4DdNDTWC8DxbVNQ2UwVBYQwFQFyIMeJ19YeGFD+kNhTIzNIzaXgDryEMvP0wicHkQytYHxxGu0u23gdh11jYrrR8WVrXeBsQpQnI3CJizTst9fbb62YxHA1BrHT/IZpIe2gULQNVYQQPPfQLspWF3J4OHMEqZml/BgOo7puQSmZuIIRx+h99YCGut9yEVOonCvDKzMZEYAlyvAkgDOx1ZsoN/bhwtf/IDwt1788TXD4GGK27Uyho7Jdgx85UKgpQmFe4y/7TSLCOCtCtC0M4yt2F3u6ehHurkTCZcfC82nMN3YiZnGTvzd0IEXbj/g70HoIOVasIVvjZc3R1dpt2jKoXeAqAKDXZeRaOrA1WNexFq6sew5DaW+HZHv2nHnuA9W+1kMHfXy22eauZgQG6jRjwRwd1ahK2Kwe91Oa25u2Z7pTtd5RA+24GnDj5ivk209rm9D3OHF9HEJSq2Xdx5pwupdtykMQ1dpVBebIlYvPUz3i9ULepxmIpmpDPZTPtAX5jcGVVy/ouD6gIIbVxT09Y3wnwPDvO4wRfxGa2lzTKq6z/u22+SE22R8BNNtXSHWiIHBSWvh0aolur0YT/Mniyn+5GnKjvF4mk/MvuCXIs+5u/GUKUzC0OxNOVI2B7rT9kPgCvnkw1qinmv19csNuOxtwEXqsEKeelPEi9TBhUIeh9VHHWbIU2+NnG2u2Bc9Uhit+KFaMVjMt9UAg8Tf5CRYat9rTcqx4n0Z/6etapyQorpKPxDf50fLsLfAuJcg6SPsm+93IOklgZM/7EoN032ZCA1kFRrNKrSQVWgmG6GRTIR2r92lHwP9ZVPV2M5sRPwKqM36Bx68rz6LkbQDAAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/05b80ed36acfc48788b985fce4f216eb/65c8c/html.avif 512w" sizes="100vw"/><source type="image/webp" data-srcset="/static/05b80ed36acfc48788b985fce4f216eb/d689f/html.webp 512w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/05b80ed36acfc48788b985fce4f216eb/ccc41/html.png" data-srcset="/static/05b80ed36acfc48788b985fce4f216eb/ccc41/html.png 512w" alt="Semantic Web에 대해 더 깊이 알아보기"/></picture><noscript><picture><source type="image/avif" srcSet="/static/05b80ed36acfc48788b985fce4f216eb/65c8c/html.avif 512w" sizes="100vw"/><source type="image/webp" srcSet="/static/05b80ed36acfc48788b985fce4f216eb/d689f/html.webp 512w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/05b80ed36acfc48788b985fce4f216eb/ccc41/html.png" srcSet="/static/05b80ed36acfc48788b985fce4f216eb/ccc41/html.png 512w" alt="Semantic Web에 대해 더 깊이 알아보기"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -234,4 +234,4 @@ <h2 id="적용" style="position:relative">적용<a href="#%EC%A0%81%EC%9A%A9" ar
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 140aa9d61..1fbcc36c8 100644
--- a/index.html
+++ b/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git "a/java/\353\213\244\355\230\225\354\240\201\353\263\200\354\210\230/index.html" "b/java/\353\213\244\355\230\225\354\240\201\353\263\200\354\210\230/index.html"
index e108390d6..c9441fc9a 100644
--- "a/java/\353\213\244\355\230\225\354\240\201\353\263\200\354\210\230/index.html"
+++ "b/java/\353\213\244\355\230\225\354\240\201\353\263\200\354\210\230/index.html"
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">Java 다형적 변수, 형변환</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/java/">Java</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">Java 다형적 변수, 형변환</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">JAVA의 다형성을 통해 다형적 변수와 형변환에 대해서 알아보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2019-07-19">19 Jul 2019</time><span class="byline-reading-time"><span class="bull">•</span>3 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:66.66666666666666%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAUGBwn/xAAWAQEBAQAAAAAAAAAAAAAAAAAGAgP/2gAMAwEAAhADEAAAAd7ou9V5WrKZDir/xAAaEAADAQEBAQAAAAAAAAAAAAAAAgQFAxIV/9oACAEBAAEFAlJb07H01Y9C58vM2L6pND//xAAgEQACAQQCAwEAAAAAAAAAAAABAgMEERIhEyIABkEy/9oACAEDAQE/ARbB+9mOICcKvkL3J5TIGiIsPyj5gkEr9p/UqipghnSpGM0aSLpR1cBhptjR+78//8QAHxEAAgICAgMBAAAAAAAAAAAAAQIDERMhBBIABkEi/9oACAECAQE/AW7ZEpLUdiXzMnU1QGERsswNnbOmMgEBr1P7RDx5pYG436ido2ssdoaO1NfPmvP/xAAoEAACAAUCBQQDAAAAAAAAAAABAgMREhMhAAQiMTJBUVJxgZGhsfD/2gAIAQEABj8Cn+fb41ujHYIq7hxCnKGbahKVUVFopMme4k0cZEukEptNwYc+B4liFcX1osSMHoJmAWVCSDwykTSe/D46g38P3qAqLFEmNDncRmdDQchndsnvy+saj7e5ctkCvpqmA2RnOZHzzkOWv//EABsQAQEBAAIDAAAAAAAAAAAAAAERIQBRMUFh/9oACAEBAAE/IZFWk7drnx3XJc4JPRwNTWtRGO8LV16foeaNPDOIpyElpojU6Awefa+U8pJ9Rl+PWDirvaoWBEUgCgxCBY//2gAMAwEAAgADAAAAEPwv/8QAGREBAAIDAAAAAAAAAAAAAAAAAREhAEFh/9oACAEDAQE/EGZEiAQw7LgAj8BwxQ9B1IA5FG7L/8QAGBEBAQEBAQAAAAAAAAAAAAAAAREhAEH/2gAIAQIBAT8QDiDtZa4ho131HJEhxa21Oq32yZP/xAAaEAEBAQEBAQEAAAAAAAAAAAABEQAhMUFR/9oACAEBAAE/ECyUSweRtASj1AFdZobnXPFOnx0mF95UIThfBEQ8r9idS3uL8EpfwcxdO3GlIcRMkW1HNKYZk64M9Dv/2Q==" alt=""/><picture><source type="image/avif" data-srcset="/static/a23f2bad7cf7c4db98e32e524cae7667/2a117/java.avif 396w" sizes="100vw"/><source type="image/webp" data-srcset="/static/a23f2bad7cf7c4db98e32e524cae7667/ed9a5/java.webp 396w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/a23f2bad7cf7c4db98e32e524cae7667/8ba2c/java.jpg" data-srcset="/static/a23f2bad7cf7c4db98e32e524cae7667/8ba2c/java.jpg 396w" alt="Java 다형적 변수, 형변환"/></picture><noscript><picture><source type="image/avif" srcSet="/static/a23f2bad7cf7c4db98e32e524cae7667/2a117/java.avif 396w" sizes="100vw"/><source type="image/webp" srcSet="/static/a23f2bad7cf7c4db98e32e524cae7667/ed9a5/java.webp 396w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/a23f2bad7cf7c4db98e32e524cae7667/8ba2c/java.jpg" srcSet="/static/a23f2bad7cf7c4db98e32e524cae7667/8ba2c/java.jpg 396w" alt="Java 다형적 변수, 형변환"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">Java 다형적 변수, 형변환</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/java/">Java</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">Java 다형적 변수, 형변환</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">JAVA의 다형성을 통해 다형적 변수와 형변환에 대해서 알아보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2019-07-19">19 Jul 2019</time><span class="byline-reading-time"><span class="bull">•</span>3 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:66.66666666666666%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAUGBwn/xAAWAQEBAQAAAAAAAAAAAAAAAAAGAgP/2gAMAwEAAhADEAAAAd7ou9V5WrKZDir/xAAaEAADAQEBAQAAAAAAAAAAAAAAAgQFAxIV/9oACAEBAAEFAlJb07H01Y9C58vM2L6pND//xAAgEQACAQQCAwEAAAAAAAAAAAABAgMEERIhEyIABkEy/9oACAEDAQE/ARbB+9mOICcKvkL3J5TIGiIsPyj5gkEr9p/UqipghnSpGM0aSLpR1cBhptjR+78//8QAHxEAAgICAgMBAAAAAAAAAAAAAQIDERMhBBIABkEi/9oACAECAQE/AW7ZEpLUdiXzMnU1QGERsswNnbOmMgEBr1P7RDx5pYG436ido2ssdoaO1NfPmvP/xAAoEAACAAUCBQQDAAAAAAAAAAABAgMREhMhAAQiMTJBUVJxgZGhsfD/2gAIAQEABj8Cn+fb41ujHYIq7hxCnKGbahKVUVFopMme4k0cZEukEptNwYc+B4liFcX1osSMHoJmAWVCSDwykTSe/D46g38P3qAqLFEmNDncRmdDQchndsnvy+saj7e5ctkCvpqmA2RnOZHzzkOWv//EABsQAQEBAAIDAAAAAAAAAAAAAAERIQBRMUFh/9oACAEBAAE/IZFWk7drnx3XJc4JPRwNTWtRGO8LV16foeaNPDOIpyElpojU6Awefa+U8pJ9Rl+PWDirvaoWBEUgCgxCBY//2gAMAwEAAgADAAAAEPwv/8QAGREBAAIDAAAAAAAAAAAAAAAAAREhAEFh/9oACAEDAQE/EGZEiAQw7LgAj8BwxQ9B1IA5FG7L/8QAGBEBAQEBAQAAAAAAAAAAAAAAAREhAEH/2gAIAQIBAT8QDiDtZa4ho131HJEhxa21Oq32yZP/xAAaEAEBAQEBAQEAAAAAAAAAAAABEQAhMUFR/9oACAEBAAE/ECyUSweRtASj1AFdZobnXPFOnx0mF95UIThfBEQ8r9idS3uL8EpfwcxdO3GlIcRMkW1HNKYZk64M9Dv/2Q==" alt=""/><picture><source type="image/avif" data-srcset="/static/a23f2bad7cf7c4db98e32e524cae7667/2a117/java.avif 396w" sizes="100vw"/><source type="image/webp" data-srcset="/static/a23f2bad7cf7c4db98e32e524cae7667/ed9a5/java.webp 396w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/a23f2bad7cf7c4db98e32e524cae7667/8ba2c/java.jpg" data-srcset="/static/a23f2bad7cf7c4db98e32e524cae7667/8ba2c/java.jpg 396w" alt="Java 다형적 변수, 형변환"/></picture><noscript><picture><source type="image/avif" srcSet="/static/a23f2bad7cf7c4db98e32e524cae7667/2a117/java.avif 396w" sizes="100vw"/><source type="image/webp" srcSet="/static/a23f2bad7cf7c4db98e32e524cae7667/ed9a5/java.webp 396w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/a23f2bad7cf7c4db98e32e524cae7667/8ba2c/java.jpg" srcSet="/static/a23f2bad7cf7c4db98e32e524cae7667/8ba2c/java.jpg 396w" alt="Java 다형적 변수, 형변환"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -104,4 +104,4 @@ <h2 id="강제-형변환Casting" style="position:relative">강제 형변환(Cast
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/javascript/array-is-object/index.html b/javascript/array-is-object/index.html
index a1731864e..0799a11bc 100644
--- a/javascript/array-is-object/index.html
+++ b/javascript/array-is-object/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">JavaScript에서 배열은 객체다</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/java-script/">JavaScript</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">JavaScript에서 배열은 객체다</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">배열이 객체인 이유와, 유사 배열 객체와의 차이점을 알아본다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-02-10">10 Feb 2023</time><span class="byline-reading-time"><span class="bull">•</span>9 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:50%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAACYUlEQVQoz22S3UuTURzHn78giGXanrdt7tmLmw7MlqAUvjQCL7KazaDCi7LRm1Be2M1gGiiGSRJ5GURh3ggipc6oyFAIY9JFKy+KQZTVXpwVmks+8TySRHjx4Xd+33P4nHPgJ4iiyL9IkrSJLMtG1tDQQGtrKw6Hw+gVRTH2tkL4P9APq6q6iZ41NjYSDofx+XyGUM/1c1sh/F2oioxFVZAkEbN5F6LZbKD3TU1BrnZ0UF1dRcEOE4oiG7ksiajGAzYcsi7cuE2lSLJSKKporlJ85X48ZeWU+nZTXrGXQ0dCXL8xQPjcRWRLMSXeMpwlZWhOL5JioUiyICsbPxIsFitOu4XDVWYOVhQycusSCzMPeDd9l4UX97jTe57+tv0M9Z1l8e0z5iduM/98hNcTA8wMRzhaW8LpOhN7vIohF6xWGy7NRl15EcH6Mj7Ex8klXxJ/cp9TwQPUVrqJtgUZ7LnM+o/PrH5LsJL9yM8vCfKLr7hw5gSVbhO+EhuqxYpgt9vRNAemnSJNzSd4n/zE46fTxpf31dRTUxfg2PGTRLu6+ZVfJ5VZJrv0na+pJdZ+Q1//TbZtL6DYrmGz2RD0UXC5XEiimZ7ubhKJN4w/ekhnZ5SpqRjt7VdoDoW41tVFPr9GOp1iaSlLJp1mdXWFWCxGsc2G/jAdQZc5nU48Hg9DQ0OMjY0xOTnJ7Owsc3Nz9Pb2EgqFiEajrK3pwjTZbNaouVyOZDKJ3+/HarUacyp4vV40TSMQCDA8PMzo6CjxeNwgkUgwODhoCCORyKYwk8kYNZVKsby8TEtLizGvbrebP1fIqqwMx418AAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/ba742c072c60d3aef770c6f7dc67375c/12925/array-is-object.avif 700w" sizes="100vw"/><source type="image/webp" data-srcset="/static/ba742c072c60d3aef770c6f7dc67375c/377b6/array-is-object.webp 700w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/ba742c072c60d3aef770c6f7dc67375c/18b2e/array-is-object.png" data-srcset="/static/ba742c072c60d3aef770c6f7dc67375c/18b2e/array-is-object.png 700w" alt="JavaScript에서 배열은 객체다"/></picture><noscript><picture><source type="image/avif" srcSet="/static/ba742c072c60d3aef770c6f7dc67375c/12925/array-is-object.avif 700w" sizes="100vw"/><source type="image/webp" srcSet="/static/ba742c072c60d3aef770c6f7dc67375c/377b6/array-is-object.webp 700w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/ba742c072c60d3aef770c6f7dc67375c/18b2e/array-is-object.png" srcSet="/static/ba742c072c60d3aef770c6f7dc67375c/18b2e/array-is-object.png 700w" alt="JavaScript에서 배열은 객체다"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">JavaScript에서 배열은 객체다</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/java-script/">JavaScript</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">JavaScript에서 배열은 객체다</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">배열이 객체인 이유와, 유사 배열 객체와의 차이점을 알아본다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-02-10">10 Feb 2023</time><span class="byline-reading-time"><span class="bull">•</span>9 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:50%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAACYUlEQVQoz22S3UuTURzHn78giGXanrdt7tmLmw7MlqAUvjQCL7KazaDCi7LRm1Be2M1gGiiGSRJ5GURh3ggipc6oyFAIY9JFKy+KQZTVXpwVmks+8TySRHjx4Xd+33P4nHPgJ4iiyL9IkrSJLMtG1tDQQGtrKw6Hw+gVRTH2tkL4P9APq6q6iZ41NjYSDofx+XyGUM/1c1sh/F2oioxFVZAkEbN5F6LZbKD3TU1BrnZ0UF1dRcEOE4oiG7ksiajGAzYcsi7cuE2lSLJSKKporlJ85X48ZeWU+nZTXrGXQ0dCXL8xQPjcRWRLMSXeMpwlZWhOL5JioUiyICsbPxIsFitOu4XDVWYOVhQycusSCzMPeDd9l4UX97jTe57+tv0M9Z1l8e0z5iduM/98hNcTA8wMRzhaW8LpOhN7vIohF6xWGy7NRl15EcH6Mj7Ex8klXxJ/cp9TwQPUVrqJtgUZ7LnM+o/PrH5LsJL9yM8vCfKLr7hw5gSVbhO+EhuqxYpgt9vRNAemnSJNzSd4n/zE46fTxpf31dRTUxfg2PGTRLu6+ZVfJ5VZJrv0na+pJdZ+Q1//TbZtL6DYrmGz2RD0UXC5XEiimZ7ubhKJN4w/ekhnZ5SpqRjt7VdoDoW41tVFPr9GOp1iaSlLJp1mdXWFWCxGsc2G/jAdQZc5nU48Hg9DQ0OMjY0xOTnJ7Owsc3Nz9Pb2EgqFiEajrK3pwjTZbNaouVyOZDKJ3+/HarUacyp4vV40TSMQCDA8PMzo6CjxeNwgkUgwODhoCCORyKYwk8kYNZVKsby8TEtLizGvbrebP1fIqqwMx418AAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/ba742c072c60d3aef770c6f7dc67375c/12925/array-is-object.avif 700w" sizes="100vw"/><source type="image/webp" data-srcset="/static/ba742c072c60d3aef770c6f7dc67375c/377b6/array-is-object.webp 700w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/ba742c072c60d3aef770c6f7dc67375c/18b2e/array-is-object.png" data-srcset="/static/ba742c072c60d3aef770c6f7dc67375c/18b2e/array-is-object.png 700w" alt="JavaScript에서 배열은 객체다"/></picture><noscript><picture><source type="image/avif" srcSet="/static/ba742c072c60d3aef770c6f7dc67375c/12925/array-is-object.avif 700w" sizes="100vw"/><source type="image/webp" srcSet="/static/ba742c072c60d3aef770c6f7dc67375c/377b6/array-is-object.webp 700w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/ba742c072c60d3aef770c6f7dc67375c/18b2e/array-is-object.png" srcSet="/static/ba742c072c60d3aef770c6f7dc67375c/18b2e/array-is-object.png 700w" alt="JavaScript에서 배열은 객체다"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -194,4 +194,4 @@ <h2 id="유사-배열-객체와-배열의-차이점" style="position:relative">
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/javascript/closure-with-currying/index.html b/javascript/closure-with-currying/index.html
index a9b8b18b9..ba846e0cc 100644
--- a/javascript/closure-with-currying/index.html
+++ b/javascript/closure-with-currying/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">클로저와 함께 알아보는 curring 함수</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/java-script/">JavaScript</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">클로저와 함께 알아보는 curring 함수</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">JavaScript의 클로저를 통해 currying 함수를 알아보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-02-14">14 Feb 2023</time><span class="byline-reading-time"><span class="bull">•</span>15 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:50%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAACjklEQVQoz23O/0/MARzH8c8/gOkod67rrAmhyZd86ciXrukauRVKHOdkZhKTQtYvli+HzZfN+NWXlStEjRhOrsLiNlw457vrOlf9ZDPD5/20O2Yzfnjsvb333uv1VvbbRlBQnEzpxtGschjZsWMm5duSOX6qhMbnnzn7VKjzfaeuWzjvE1zdf4vu6nwSuzv9RFAKskeQZzFgtRqwLBiJzaqj2qFjX9UoGh4+oyEADS+gMUb+77nQ0C3U+wQlLU1L+iQtBVYj87NHYl+so3aVltqysZysP8KVLjctXg9NL7/R5IfLfpXLfolp8gsX/cKF36LhSo5ZS+GyREyZejLm6thdpMFVOIjSfA1rVsdzzDmB1tYyrvu8NL+ClsAPmgMqzQGh+aX8mdGCS35Byc3VYbcZWb7UgL00ncMHiji4fR5VVRbKty7mkLOQK24X7W8HuBuEto8q7UGJ6ewRrr8Vrr5WufpaaAkISkXeMJbkGVlakIjNNo7KchMn1qdypCaLZcXTWW0fj6vtBp190bDveHqEjpDQGRI8QeHWB5Ub73659kZQMqfGYzbpMWfrycpKYPYcDTvzBuPcNBXzCjMWSxzVewu58yaMuwfcQRV3UP5x+6Nw872KMnpcHBPHD2PWjHgW5uhYtDyJDfYktmxKZveeydTsSmX9Gj2NrhIe9n2lvRc6wiodYaGjV2jvFTwhlbaQcCcoKMkpQ0lJiSNzVgIrcxMoyddicyRR4kik1jmDyupplK3Vcrp+C139KvcicD+icj8i3IsInVGfJFbiCQmKKXUoGRnDmTBZQ/nsIWzP0WAtNrCySMfRdQYqNk+hYusYzp2p5HE4iDfyBe8AeAeER/1CV7/woO9XePTrnzzzLdJG+gOKAAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/74ccd05b104bc8dc0a99753d14b81cc9/12925/closure-with-curring.avif 700w" sizes="100vw"/><source type="image/webp" data-srcset="/static/74ccd05b104bc8dc0a99753d14b81cc9/377b6/closure-with-curring.webp 700w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/74ccd05b104bc8dc0a99753d14b81cc9/18b2e/closure-with-curring.png" data-srcset="/static/74ccd05b104bc8dc0a99753d14b81cc9/18b2e/closure-with-curring.png 700w" alt="클로저와 함께 알아보는 curring 함수"/></picture><noscript><picture><source type="image/avif" srcSet="/static/74ccd05b104bc8dc0a99753d14b81cc9/12925/closure-with-curring.avif 700w" sizes="100vw"/><source type="image/webp" srcSet="/static/74ccd05b104bc8dc0a99753d14b81cc9/377b6/closure-with-curring.webp 700w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/74ccd05b104bc8dc0a99753d14b81cc9/18b2e/closure-with-curring.png" srcSet="/static/74ccd05b104bc8dc0a99753d14b81cc9/18b2e/closure-with-curring.png 700w" alt="클로저와 함께 알아보는 curring 함수"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">클로저와 함께 알아보는 curring 함수</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/java-script/">JavaScript</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">클로저와 함께 알아보는 curring 함수</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">JavaScript의 클로저를 통해 currying 함수를 알아보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-02-14">14 Feb 2023</time><span class="byline-reading-time"><span class="bull">•</span>15 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:50%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAACjklEQVQoz23O/0/MARzH8c8/gOkod67rrAmhyZd86ciXrukauRVKHOdkZhKTQtYvli+HzZfN+NWXlStEjRhOrsLiNlw457vrOlf9ZDPD5/20O2Yzfnjsvb333uv1VvbbRlBQnEzpxtGschjZsWMm5duSOX6qhMbnnzn7VKjzfaeuWzjvE1zdf4vu6nwSuzv9RFAKskeQZzFgtRqwLBiJzaqj2qFjX9UoGh4+oyEADS+gMUb+77nQ0C3U+wQlLU1L+iQtBVYj87NHYl+so3aVltqysZysP8KVLjctXg9NL7/R5IfLfpXLfolp8gsX/cKF36LhSo5ZS+GyREyZejLm6thdpMFVOIjSfA1rVsdzzDmB1tYyrvu8NL+ClsAPmgMqzQGh+aX8mdGCS35Byc3VYbcZWb7UgL00ncMHiji4fR5VVRbKty7mkLOQK24X7W8HuBuEto8q7UGJ6ewRrr8Vrr5WufpaaAkISkXeMJbkGVlakIjNNo7KchMn1qdypCaLZcXTWW0fj6vtBp190bDveHqEjpDQGRI8QeHWB5Ub73659kZQMqfGYzbpMWfrycpKYPYcDTvzBuPcNBXzCjMWSxzVewu58yaMuwfcQRV3UP5x+6Nw872KMnpcHBPHD2PWjHgW5uhYtDyJDfYktmxKZveeydTsSmX9Gj2NrhIe9n2lvRc6wiodYaGjV2jvFTwhlbaQcCcoKMkpQ0lJiSNzVgIrcxMoyddicyRR4kik1jmDyupplK3Vcrp+C139KvcicD+icj8i3IsInVGfJFbiCQmKKXUoGRnDmTBZQ/nsIWzP0WAtNrCySMfRdQYqNk+hYusYzp2p5HE4iDfyBe8AeAeER/1CV7/woO9XePTrnzzzLdJG+gOKAAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/74ccd05b104bc8dc0a99753d14b81cc9/12925/closure-with-curring.avif 700w" sizes="100vw"/><source type="image/webp" data-srcset="/static/74ccd05b104bc8dc0a99753d14b81cc9/377b6/closure-with-curring.webp 700w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/74ccd05b104bc8dc0a99753d14b81cc9/18b2e/closure-with-curring.png" data-srcset="/static/74ccd05b104bc8dc0a99753d14b81cc9/18b2e/closure-with-curring.png 700w" alt="클로저와 함께 알아보는 curring 함수"/></picture><noscript><picture><source type="image/avif" srcSet="/static/74ccd05b104bc8dc0a99753d14b81cc9/12925/closure-with-curring.avif 700w" sizes="100vw"/><source type="image/webp" srcSet="/static/74ccd05b104bc8dc0a99753d14b81cc9/377b6/closure-with-curring.webp 700w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/74ccd05b104bc8dc0a99753d14b81cc9/18b2e/closure-with-curring.png" srcSet="/static/74ccd05b104bc8dc0a99753d14b81cc9/18b2e/closure-with-curring.png 700w" alt="클로저와 함께 알아보는 curring 함수"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -255,4 +255,4 @@ <h2 id="커링-함수" style="position:relative">커링 함수<a href="#%EC%BB%A
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/javascript/event-loop-and-async/index.html b/javascript/event-loop-and-async/index.html
index 157446324..463b0157e 100644
--- a/javascript/event-loop-and-async/index.html
+++ b/javascript/event-loop-and-async/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">Event Loop와 비동기</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/java-script/">JavaScript</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">Event Loop와 비동기</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53"></p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-02-16">16 Feb 2023</time><span class="byline-reading-time"><span class="bull">•</span>25 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:57.14285714285714%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAgFBgn/xAAWAQEBAQAAAAAAAAAAAAAAAAAGBAf/2gAMAwEAAhADEAAAAWPWVXJRAZ0ILKZdJ//EABsQAAMAAgMAAAAAAAAAAAAAAAIDBAUGBxEW/9oACAEBAAEFAqt6dePHttmLWiZi19lRVq72e1qmnI//xAAgEQACAgEEAwEAAAAAAAAAAAACBAEDBQYREhMAFCEV/9oACAEDAQE/AWVQjCWNEuBG2mtj2bPbZhiyj5EFNwjBc5tXyB8B41Vkx2gHY0zAu4fVOAauwuP1HkfRxRQgnH7Tq+yywjVSPRUkVdUDWAjAVlIDEbD88//EACERAAICAgIBBQAAAAAAAAAAAAIEAQMFBgAREhMVISQl/9oACAECAQE/AeyHLNKQ81+ULGbW7pomoWRoWu8BqIyiBitpWvz7m0wXGoi9OijmP3DSNlSW2HKaip7lm64yj0zhsU6RNO/YuIm72KrmCIzIitsrEzKey7n55//EACMQAAICAQQCAgMAAAAAAAAAAAIDAQQTAAUREgYUByEjJTH/2gAIAQEABj8C8x2JlOatanFamy4RQtL63cPZObLJkK2WyQIrLlvZnRz2Y0q5LctjsS/bK6EFvOZNypNSCccnbb7JnZuAoIlT4dNpgMSXeAW1LY1yi3ZWt5HYjHuioBmYpInD+TgshczJx9FPM686UxjYG35ZUVYlLm1mMUt++kKpdWNToX2WspWJwBEAkUTMc6ocyJ+18fUfZyLWzP8Aqq7JzZBLJ3IByduckR1Z2GZjQL9dArrITWQpSlpUlClxjUtahAAAOeBiB+o+v5r/xAAZEAEBAQEBAQAAAAAAAAAAAAABESEAMUH/2gAIAQEAAT8hfPM0r+vo62K5tEvBiw8cTUEDNoUdQWNEspwOnKnNJYoyHcjwF6HV0y6+0ASoZSEjykGMGAP/2gAMAwEAAgADAAAAEBP/AP/EABcRAQEBAQAAAAAAAAAAAAAAAAERADH/2gAIAQMBAT8QJPJjoi7WA8dk87rhKgHAQEAB/8QAFREBAQAAAAAAAAAAAAAAAAAAARH/2gAIAQIBAT8QFirBwJQWWK0gbPTGCLi8dgqP/8QAGRABAQEAAwAAAAAAAAAAAAAAAREAECEx/9oACAEBAAE/ED83DnN6iZOHoaPki0efO2wpgqvbMmHYCvbhs72OaCsuvOKagL57Bo92mjroipTbZ7uBMz//2Q==" alt=""/><picture><source type="image/avif" data-srcset="/static/93e29bc79c4d8fe0729ab8aefff58475/a273d/blocking.avif 700w" sizes="100vw"/><source type="image/webp" data-srcset="/static/93e29bc79c4d8fe0729ab8aefff58475/dcd92/blocking.webp 700w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/93e29bc79c4d8fe0729ab8aefff58475/521da/blocking.jpg" data-srcset="/static/93e29bc79c4d8fe0729ab8aefff58475/521da/blocking.jpg 700w" alt="Event Loop와 비동기"/></picture><noscript><picture><source type="image/avif" srcSet="/static/93e29bc79c4d8fe0729ab8aefff58475/a273d/blocking.avif 700w" sizes="100vw"/><source type="image/webp" srcSet="/static/93e29bc79c4d8fe0729ab8aefff58475/dcd92/blocking.webp 700w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/93e29bc79c4d8fe0729ab8aefff58475/521da/blocking.jpg" srcSet="/static/93e29bc79c4d8fe0729ab8aefff58475/521da/blocking.jpg 700w" alt="Event Loop와 비동기"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">Event Loop와 비동기</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/java-script/">JavaScript</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">Event Loop와 비동기</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53"></p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-02-16">16 Feb 2023</time><span class="byline-reading-time"><span class="bull">•</span>25 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:57.14285714285714%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAgFBgn/xAAWAQEBAQAAAAAAAAAAAAAAAAAGBAf/2gAMAwEAAhADEAAAAWPWVXJRAZ0ILKZdJ//EABsQAAMAAgMAAAAAAAAAAAAAAAIDBAUGBxEW/9oACAEBAAEFAqt6dePHttmLWiZi19lRVq72e1qmnI//xAAgEQACAgEEAwEAAAAAAAAAAAACBAEDBQYREhMAFCEV/9oACAEDAQE/AWVQjCWNEuBG2mtj2bPbZhiyj5EFNwjBc5tXyB8B41Vkx2gHY0zAu4fVOAauwuP1HkfRxRQgnH7Tq+yywjVSPRUkVdUDWAjAVlIDEbD88//EACERAAICAgIBBQAAAAAAAAAAAAIEAQMFBgAREhMVISQl/9oACAECAQE/AeyHLNKQ81+ULGbW7pomoWRoWu8BqIyiBitpWvz7m0wXGoi9OijmP3DSNlSW2HKaip7lm64yj0zhsU6RNO/YuIm72KrmCIzIitsrEzKey7n55//EACMQAAICAQQCAgMAAAAAAAAAAAIDAQQTAAUREgYUByEjJTH/2gAIAQEABj8C8x2JlOatanFamy4RQtL63cPZObLJkK2WyQIrLlvZnRz2Y0q5LctjsS/bK6EFvOZNypNSCccnbb7JnZuAoIlT4dNpgMSXeAW1LY1yi3ZWt5HYjHuioBmYpInD+TgshczJx9FPM686UxjYG35ZUVYlLm1mMUt++kKpdWNToX2WspWJwBEAkUTMc6ocyJ+18fUfZyLWzP8Aqq7JzZBLJ3IByduckR1Z2GZjQL9dArrITWQpSlpUlClxjUtahAAAOeBiB+o+v5r/xAAZEAEBAQEBAQAAAAAAAAAAAAABESEAMUH/2gAIAQEAAT8hfPM0r+vo62K5tEvBiw8cTUEDNoUdQWNEspwOnKnNJYoyHcjwF6HV0y6+0ASoZSEjykGMGAP/2gAMAwEAAgADAAAAEBP/AP/EABcRAQEBAQAAAAAAAAAAAAAAAAERADH/2gAIAQMBAT8QJPJjoi7WA8dk87rhKgHAQEAB/8QAFREBAQAAAAAAAAAAAAAAAAAAARH/2gAIAQIBAT8QFirBwJQWWK0gbPTGCLi8dgqP/8QAGRABAQEAAwAAAAAAAAAAAAAAAREAECEx/9oACAEBAAE/ED83DnN6iZOHoaPki0efO2wpgqvbMmHYCvbhs72OaCsuvOKagL57Bo92mjroipTbZ7uBMz//2Q==" alt=""/><picture><source type="image/avif" data-srcset="/static/93e29bc79c4d8fe0729ab8aefff58475/a273d/blocking.avif 700w" sizes="100vw"/><source type="image/webp" data-srcset="/static/93e29bc79c4d8fe0729ab8aefff58475/dcd92/blocking.webp 700w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/93e29bc79c4d8fe0729ab8aefff58475/521da/blocking.jpg" data-srcset="/static/93e29bc79c4d8fe0729ab8aefff58475/521da/blocking.jpg 700w" alt="Event Loop와 비동기"/></picture><noscript><picture><source type="image/avif" srcSet="/static/93e29bc79c4d8fe0729ab8aefff58475/a273d/blocking.avif 700w" sizes="100vw"/><source type="image/webp" srcSet="/static/93e29bc79c4d8fe0729ab8aefff58475/dcd92/blocking.webp 700w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/93e29bc79c4d8fe0729ab8aefff58475/521da/blocking.jpg" srcSet="/static/93e29bc79c4d8fe0729ab8aefff58475/521da/blocking.jpg 700w" alt="Event Loop와 비동기"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -429,4 +429,4 @@ <h2 id="AsyncAwait" style="position:relative">Async/Await<a href="#AsyncAwait" a
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/javascript/getter-setter/index.html b/javascript/getter-setter/index.html
index e72cde89d..556d9962d 100644
--- a/javascript/getter-setter/index.html
+++ b/javascript/getter-setter/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">JavaScript의 Getter / Setter</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/java-script/">JavaScript</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">JavaScript의 Getter / Setter</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">객체의 접근자 프로퍼티인 Getter와 Setter에 대해 알아보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-02-09">09 Feb 2023</time><span class="byline-reading-time"><span class="bull">•</span>9 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:50%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAACxElEQVQozwXB/VOSBwDA8eePabcfrANFIPThkSdJESQQDF9BQAQZgSQTRUFTfInITMMtgzWJqTc1rVzeupS76W5d3a477rrdtrv9Ld99PoJaXc9qopd/Lw5IRH2sLSR4Pz/Ka38nMzaZoTaRsEnPA0cr06ZmstFBllM+JoZMFB8k2VqIMWLTY+0QsVkMCHXKayQDTirraQasMrupMI+8dr5pF1FqNFzVaFFotHRIOjyG63RZbxLwO0kGndxxtWIzajG2XEeUtEhtBgS9qKZZpyLg6aW8mGbJ2oLH1MLYoI2Yq53bRh0NDQpa1QrMmmsoFXU06RpZDNrxWiSuNjbwlUJBnUrJ16p6BO8tmdz4KJfHrzkrl5iwGljwWCnd7WM76eV4Y4nDlSlqLwq8KuQoTfZSGevkWdCK/4Yap9TATYMGfWsTokGN8CTYxVnSg388wpXuHrReH2IsjiM8zEAiztsPv1H9UmPnc4392l+cXp6zvzHL1HSEZMJPPBMjPRPmuxEzebeMcK+/nR+H7UxNhlH19SP5htB4h7D0OHi08i3R8RBbP+9w8PETv3z8RPVzjdqfH9g72ePh/UnyhRxrL56xN9pJMdSF8GYjSyV7F2NTPXKzmsRgB/PeNiKOG6QGzSyadWSdMil3N9XKY/443OTXnSKVp4scTbn4fXOO3afzzPUZWXdJCNVijpP1NP4eKz0WGZOoYiMd5ygTxdKoJNBtoVrO83Jtlh/yGZ6vRng552asz0LaIbIXvUUu2su4TeJepw7heGWC09wEl5uznK0mOS9k+e/8HRdbORKyisyAi/evttl5kiDldzIT7qY00sZhwMC2W6IcNLE/ZqPollnuakaoTIY4ykQ4XYpzUZjh77cH/PPuhC8H31MZMfFTyMbzxytMx25T8rez3KGm3K9n32fg0GdgN2Tm4bCdvFNk2a7jf2MRzCvc1b/7AAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/2b54ff7ec217d87afe264e9798a7a243/12925/JavaScript_Getter_Setter.avif 700w" sizes="100vw"/><source type="image/webp" data-srcset="/static/2b54ff7ec217d87afe264e9798a7a243/377b6/JavaScript_Getter_Setter.webp 700w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/2b54ff7ec217d87afe264e9798a7a243/18b2e/JavaScript_Getter_Setter.png" data-srcset="/static/2b54ff7ec217d87afe264e9798a7a243/18b2e/JavaScript_Getter_Setter.png 700w" alt="JavaScript의 Getter / Setter"/></picture><noscript><picture><source type="image/avif" srcSet="/static/2b54ff7ec217d87afe264e9798a7a243/12925/JavaScript_Getter_Setter.avif 700w" sizes="100vw"/><source type="image/webp" srcSet="/static/2b54ff7ec217d87afe264e9798a7a243/377b6/JavaScript_Getter_Setter.webp 700w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/2b54ff7ec217d87afe264e9798a7a243/18b2e/JavaScript_Getter_Setter.png" srcSet="/static/2b54ff7ec217d87afe264e9798a7a243/18b2e/JavaScript_Getter_Setter.png 700w" alt="JavaScript의 Getter / Setter"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">JavaScript의 Getter / Setter</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/java-script/">JavaScript</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">JavaScript의 Getter / Setter</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">객체의 접근자 프로퍼티인 Getter와 Setter에 대해 알아보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-02-09">09 Feb 2023</time><span class="byline-reading-time"><span class="bull">•</span>9 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:50%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAACxElEQVQozwXB/VOSBwDA8eePabcfrANFIPThkSdJESQQDF9BQAQZgSQTRUFTfInITMMtgzWJqTc1rVzeupS76W5d3a477rrdtrv9Ld99PoJaXc9qopd/Lw5IRH2sLSR4Pz/Ka38nMzaZoTaRsEnPA0cr06ZmstFBllM+JoZMFB8k2VqIMWLTY+0QsVkMCHXKayQDTirraQasMrupMI+8dr5pF1FqNFzVaFFotHRIOjyG63RZbxLwO0kGndxxtWIzajG2XEeUtEhtBgS9qKZZpyLg6aW8mGbJ2oLH1MLYoI2Yq53bRh0NDQpa1QrMmmsoFXU06RpZDNrxWiSuNjbwlUJBnUrJ16p6BO8tmdz4KJfHrzkrl5iwGljwWCnd7WM76eV4Y4nDlSlqLwq8KuQoTfZSGevkWdCK/4Yap9TATYMGfWsTokGN8CTYxVnSg388wpXuHrReH2IsjiM8zEAiztsPv1H9UmPnc4392l+cXp6zvzHL1HSEZMJPPBMjPRPmuxEzebeMcK+/nR+H7UxNhlH19SP5htB4h7D0OHi08i3R8RBbP+9w8PETv3z8RPVzjdqfH9g72ePh/UnyhRxrL56xN9pJMdSF8GYjSyV7F2NTPXKzmsRgB/PeNiKOG6QGzSyadWSdMil3N9XKY/443OTXnSKVp4scTbn4fXOO3afzzPUZWXdJCNVijpP1NP4eKz0WGZOoYiMd5ygTxdKoJNBtoVrO83Jtlh/yGZ6vRng552asz0LaIbIXvUUu2su4TeJepw7heGWC09wEl5uznK0mOS9k+e/8HRdbORKyisyAi/evttl5kiDldzIT7qY00sZhwMC2W6IcNLE/ZqPollnuakaoTIY4ykQ4XYpzUZjh77cH/PPuhC8H31MZMfFTyMbzxytMx25T8rez3KGm3K9n32fg0GdgN2Tm4bCdvFNk2a7jf2MRzCvc1b/7AAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/2b54ff7ec217d87afe264e9798a7a243/12925/JavaScript_Getter_Setter.avif 700w" sizes="100vw"/><source type="image/webp" data-srcset="/static/2b54ff7ec217d87afe264e9798a7a243/377b6/JavaScript_Getter_Setter.webp 700w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/2b54ff7ec217d87afe264e9798a7a243/18b2e/JavaScript_Getter_Setter.png" data-srcset="/static/2b54ff7ec217d87afe264e9798a7a243/18b2e/JavaScript_Getter_Setter.png 700w" alt="JavaScript의 Getter / Setter"/></picture><noscript><picture><source type="image/avif" srcSet="/static/2b54ff7ec217d87afe264e9798a7a243/12925/JavaScript_Getter_Setter.avif 700w" sizes="100vw"/><source type="image/webp" srcSet="/static/2b54ff7ec217d87afe264e9798a7a243/377b6/JavaScript_Getter_Setter.webp 700w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/2b54ff7ec217d87afe264e9798a7a243/18b2e/JavaScript_Getter_Setter.png" srcSet="/static/2b54ff7ec217d87afe264e9798a7a243/18b2e/JavaScript_Getter_Setter.png 700w" alt="JavaScript의 Getter / Setter"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -239,4 +239,4 @@ <h4 id="2-gettersetter-호출시-추가-행위" style="position:relative">2. get
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/javascript/javascript-mvc/index.html b/javascript/javascript-mvc/index.html
index eca801974..6d19607de 100644
--- a/javascript/javascript-mvc/index.html
+++ b/javascript/javascript-mvc/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">JavaScript MVC 패턴으로 만드는 SPA</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/java-script/">JavaScript</a>,  <a href="/tags/design-pattern/">Design Pattern</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">JavaScript MVC 패턴으로 만드는 SPA</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">모던 JavaScript 프레임워크 없이 MVC 패턴으로 SPA을 만들어보자</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-04-17">17 Apr 2023</time><span class="byline-reading-time"><span class="bull">•</span>26 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:56.25%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAcDBgn/xAAXAQADAQAAAAAAAAAAAAAAAAADBQYH/9oADAMBAAIQAxAAAAHSGjtNOmUtYhI7Tv/EABsQAAICAwEAAAAAAAAAAAAAAAIDBAUAARES/9oACAEBAAEFAmw9IRW2i7UgjL5MM/NeOhld3n//xAAlEQACAgABDQAAAAAAAAAAAAABAgMFIQAEBhESFBUxMkFCYdH/2gAIAQMBAT8B0Ys4eOJXyxyHNmjKSxqqHbfEo4JZSmo4HqBXxPZq6qJJ3Y8/X3L/xAAfEQACAgICAwEAAAAAAAAAAAABAgMRBAUAMSRBoeH/2gAIAQIBAT8B2GNLJrZ8iNkGQhDwuxYCNbUOKCtdgmuvnBlbKh5K9D1+c//EACQQAAEDAgUFAQAAAAAAAAAAAAECAxEAMQQSEyFhEDJRc5Gh/9oACAEBAAY/AncQ4JQy2pxV7AcAn8PO00trQUG2e3FQ1k9eo2syVXSk7x4q9EZjEGnANhMxJj5bp//EABsQAQEBAQADAQAAAAAAAAAAAAERIQAxQVGB/9oACAEBAAE/IZRgj9JY9Nc2COG/oke8mVDAgK+HDOOiooEGZH5OsfX7SvnevzgsFDv/2gAMAwEAAgADAAAAECAP/8QAGREBAQEAAwAAAAAAAAAAAAAAAREhAHGh/9oACAEDAQE/EGyRgOFkRg0BKJwJCFILUXLIs97z/8QAFxEBAQEBAAAAAAAAAAAAAAAAAREhAP/aAAgBAgEBPxAqLLCISGcg0lSKGjOiKaDz/8QAHBABAQADAAMBAAAAAAAAAAAAAREAITFBUWHw/9oACAEBAAE/EG1FqYqZFsQ+wHGwpr6dZ1XLrxANDnRAiQiXf71hFLg74bY+xF3euBJoSukbMQBSgAIBgYEcDxn/2Q==" alt=""/><picture><source type="image/avif" data-srcset="/static/5349dfe902fbdb7676264f2e7aae8a83/3d183/javascriptMvc.avif 640w" sizes="100vw"/><source type="image/webp" data-srcset="/static/5349dfe902fbdb7676264f2e7aae8a83/17574/javascriptMvc.webp 640w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/5349dfe902fbdb7676264f2e7aae8a83/3440d/javascriptMvc.jpg" data-srcset="/static/5349dfe902fbdb7676264f2e7aae8a83/3440d/javascriptMvc.jpg 640w" alt="JavaScript MVC 패턴으로 만드는 SPA"/></picture><noscript><picture><source type="image/avif" srcSet="/static/5349dfe902fbdb7676264f2e7aae8a83/3d183/javascriptMvc.avif 640w" sizes="100vw"/><source type="image/webp" srcSet="/static/5349dfe902fbdb7676264f2e7aae8a83/17574/javascriptMvc.webp 640w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/5349dfe902fbdb7676264f2e7aae8a83/3440d/javascriptMvc.jpg" srcSet="/static/5349dfe902fbdb7676264f2e7aae8a83/3440d/javascriptMvc.jpg 640w" alt="JavaScript MVC 패턴으로 만드는 SPA"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">JavaScript MVC 패턴으로 만드는 SPA</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/java-script/">JavaScript</a>,  <a href="/tags/design-pattern/">Design Pattern</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">JavaScript MVC 패턴으로 만드는 SPA</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">모던 JavaScript 프레임워크 없이 MVC 패턴으로 SPA을 만들어보자</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-04-17">17 Apr 2023</time><span class="byline-reading-time"><span class="bull">•</span>26 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:56.25%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAcDBgn/xAAXAQADAQAAAAAAAAAAAAAAAAADBQYH/9oADAMBAAIQAxAAAAHSGjtNOmUtYhI7Tv/EABsQAAICAwEAAAAAAAAAAAAAAAIDBAUAARES/9oACAEBAAEFAmw9IRW2i7UgjL5MM/NeOhld3n//xAAlEQACAgABDQAAAAAAAAAAAAABAgMFIQAEBhESFBUxMkFCYdH/2gAIAQMBAT8B0Ys4eOJXyxyHNmjKSxqqHbfEo4JZSmo4HqBXxPZq6qJJ3Y8/X3L/xAAfEQACAgICAwEAAAAAAAAAAAABAgMRBAUAMSRBoeH/2gAIAQIBAT8B2GNLJrZ8iNkGQhDwuxYCNbUOKCtdgmuvnBlbKh5K9D1+c//EACQQAAEDAgUFAQAAAAAAAAAAAAECAxEAMQQSEyFhEDJRc5Gh/9oACAEBAAY/AncQ4JQy2pxV7AcAn8PO00trQUG2e3FQ1k9eo2syVXSk7x4q9EZjEGnANhMxJj5bp//EABsQAQEBAQADAQAAAAAAAAAAAAERIQAxQVGB/9oACAEBAAE/IZRgj9JY9Nc2COG/oke8mVDAgK+HDOOiooEGZH5OsfX7SvnevzgsFDv/2gAMAwEAAgADAAAAECAP/8QAGREBAQEAAwAAAAAAAAAAAAAAAREhAHGh/9oACAEDAQE/EGyRgOFkRg0BKJwJCFILUXLIs97z/8QAFxEBAQEBAAAAAAAAAAAAAAAAAREhAP/aAAgBAgEBPxAqLLCISGcg0lSKGjOiKaDz/8QAHBABAQADAAMBAAAAAAAAAAAAAREAITFBUWHw/9oACAEBAAE/EG1FqYqZFsQ+wHGwpr6dZ1XLrxANDnRAiQiXf71hFLg74bY+xF3euBJoSukbMQBSgAIBgYEcDxn/2Q==" alt=""/><picture><source type="image/avif" data-srcset="/static/5349dfe902fbdb7676264f2e7aae8a83/3d183/javascriptMvc.avif 640w" sizes="100vw"/><source type="image/webp" data-srcset="/static/5349dfe902fbdb7676264f2e7aae8a83/17574/javascriptMvc.webp 640w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/5349dfe902fbdb7676264f2e7aae8a83/3440d/javascriptMvc.jpg" data-srcset="/static/5349dfe902fbdb7676264f2e7aae8a83/3440d/javascriptMvc.jpg 640w" alt="JavaScript MVC 패턴으로 만드는 SPA"/></picture><noscript><picture><source type="image/avif" srcSet="/static/5349dfe902fbdb7676264f2e7aae8a83/3d183/javascriptMvc.avif 640w" sizes="100vw"/><source type="image/webp" srcSet="/static/5349dfe902fbdb7676264f2e7aae8a83/17574/javascriptMvc.webp 640w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/5349dfe902fbdb7676264f2e7aae8a83/3440d/javascriptMvc.jpg" srcSet="/static/5349dfe902fbdb7676264f2e7aae8a83/3440d/javascriptMvc.jpg 640w" alt="JavaScript MVC 패턴으로 만드는 SPA"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -451,4 +451,4 @@ <h2 id="레퍼런스" style="position:relative">레퍼런스<a href="#%EB%A0%88%
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/javascript/prototype/index.html b/javascript/prototype/index.html
index 0930e201a..5739dfab3 100644
--- a/javascript/prototype/index.html
+++ b/javascript/prototype/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">객체지향 프로그래밍으로 알아보는 prototype</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/java-script/">JavaScript</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">객체지향 프로그래밍으로 알아보는 prototype</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53"></p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-02-24">24 Feb 2023</time><span class="byline-reading-time"><span class="bull">•</span>44 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:65.13409961685824%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAUCBgf/xAAWAQEBAQAAAAAAAAAAAAAAAAAGBQf/2gAMAwEAAhADEAAAAdraql7bE7qRKx3/xAAZEAACAwEAAAAAAAAAAAAAAAACBAABBQP/2gAIAQEAAQUCf0VkIV91ij+ahpTng5QiI1Q//8QAIBEAAQQCAQUAAAAAAAAAAAAAAwECBAUSExEABiGB8P/aAAgBAwEBPwGJJ7YZVPizKuxNcGz4tGzmijQ15do1w2jdvGiINZCFRSPyKgXjVo8vH3rr/8QAHxEAAgICAQUAAAAAAAAAAAAAAQIDBAUTEgARISIk/9oACAECAQE/AbVfNNfhsVcjVhx8XHdj3pbZLQ8c/q2o0Dn2ERTvGpCmVJAzAdf/xAAjEAADAAEDAwUBAAAAAAAAAAABAgMEERITACIxFCEjQVGR/9oACAEBAAY/AoresUrlV4cZK2SCu/ks9X1Eoz9uSpVtC05qr1rNGl6xcVZ2bjnfGyTWYqR2zslpY9Zb/E6gUi1NJuZO81fqYzsWOTw8vFyoH4+dOK20NqvyT7W3Kf1dGAbqE5YeNI46GeLRceHJjq4Ctxvx7+5PjO5iSpPvu7ugo8KAo8fQ0+tB/AB+Dr//xAAaEAEBAQEBAQEAAAAAAAAAAAABESEAMUFR/9oACAEBAAE/IUiVS74kI5BPsWANG6XlytQ7cRJTR0RxJ6TO+oP/AJZG/wCEQIYi7Hryo1FWnmQyQAAGEMAeaUPAzv/aAAwDAQACAAMAAAAQqA//xAAbEQEAAgIDAAAAAAAAAAAAAAABETFBUQCRof/aAAgBAwEBPxCWjNuwiJk6vEQno6aGGdHlYf/EABoRAQACAwEAAAAAAAAAAAAAAAEAMREhQVH/2gAIAQIBAT8Qw+0AvLeQkxB8h3279vc//8QAGRABAQEBAQEAAAAAAAAAAAAAASERABAx/9oACAEBAAE/EAGQCQ1zex/nstp0vELQDJdccEk0KAiUEomj9InY0AdtkgUcfed2rvHUMYnhHgqHAuyb+gQhMM//2Q==" alt=""/><picture><source type="image/avif" data-srcset="/static/043461a4a4c588ab1965da78011a1685/0cba2/platypus.avif 522w" sizes="100vw"/><source type="image/webp" data-srcset="/static/043461a4a4c588ab1965da78011a1685/a2f07/platypus.webp 522w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/043461a4a4c588ab1965da78011a1685/48ae8/platypus.jpg" data-srcset="/static/043461a4a4c588ab1965da78011a1685/48ae8/platypus.jpg 522w" alt="객체지향 프로그래밍으로 알아보는 prototype"/></picture><noscript><picture><source type="image/avif" srcSet="/static/043461a4a4c588ab1965da78011a1685/0cba2/platypus.avif 522w" sizes="100vw"/><source type="image/webp" srcSet="/static/043461a4a4c588ab1965da78011a1685/a2f07/platypus.webp 522w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/043461a4a4c588ab1965da78011a1685/48ae8/platypus.jpg" srcSet="/static/043461a4a4c588ab1965da78011a1685/48ae8/platypus.jpg 522w" alt="객체지향 프로그래밍으로 알아보는 prototype"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">객체지향 프로그래밍으로 알아보는 prototype</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/java-script/">JavaScript</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">객체지향 프로그래밍으로 알아보는 prototype</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53"></p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-02-24">24 Feb 2023</time><span class="byline-reading-time"><span class="bull">•</span>44 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:65.13409961685824%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAUCBgf/xAAWAQEBAQAAAAAAAAAAAAAAAAAGBQf/2gAMAwEAAhADEAAAAdraql7bE7qRKx3/xAAZEAACAwEAAAAAAAAAAAAAAAACBAABBQP/2gAIAQEAAQUCf0VkIV91ij+ahpTng5QiI1Q//8QAIBEAAQQCAQUAAAAAAAAAAAAAAwECBAUSExEABiGB8P/aAAgBAwEBPwGJJ7YZVPizKuxNcGz4tGzmijQ15do1w2jdvGiINZCFRSPyKgXjVo8vH3rr/8QAHxEAAgICAQUAAAAAAAAAAAAAAQIDBAUTEgARISIk/9oACAECAQE/AbVfNNfhsVcjVhx8XHdj3pbZLQ8c/q2o0Dn2ERTvGpCmVJAzAdf/xAAjEAADAAEDAwUBAAAAAAAAAAABAgMEERITACIxFCEjQVGR/9oACAEBAAY/AoresUrlV4cZK2SCu/ks9X1Eoz9uSpVtC05qr1rNGl6xcVZ2bjnfGyTWYqR2zslpY9Zb/E6gUi1NJuZO81fqYzsWOTw8vFyoH4+dOK20NqvyT7W3Kf1dGAbqE5YeNI46GeLRceHJjq4Ctxvx7+5PjO5iSpPvu7ugo8KAo8fQ0+tB/AB+Dr//xAAaEAEBAQEBAQEAAAAAAAAAAAABESEAMUFR/9oACAEBAAE/IUiVS74kI5BPsWANG6XlytQ7cRJTR0RxJ6TO+oP/AJZG/wCEQIYi7Hryo1FWnmQyQAAGEMAeaUPAzv/aAAwDAQACAAMAAAAQqA//xAAbEQEAAgIDAAAAAAAAAAAAAAABETFBUQCRof/aAAgBAwEBPxCWjNuwiJk6vEQno6aGGdHlYf/EABoRAQACAwEAAAAAAAAAAAAAAAEAMREhQVH/2gAIAQIBAT8Qw+0AvLeQkxB8h3279vc//8QAGRABAQEBAQEAAAAAAAAAAAAAASERABAx/9oACAEBAAE/EAGQCQ1zex/nstp0vELQDJdccEk0KAiUEomj9InY0AdtkgUcfed2rvHUMYnhHgqHAuyb+gQhMM//2Q==" alt=""/><picture><source type="image/avif" data-srcset="/static/043461a4a4c588ab1965da78011a1685/0cba2/platypus.avif 522w" sizes="100vw"/><source type="image/webp" data-srcset="/static/043461a4a4c588ab1965da78011a1685/a2f07/platypus.webp 522w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/043461a4a4c588ab1965da78011a1685/48ae8/platypus.jpg" data-srcset="/static/043461a4a4c588ab1965da78011a1685/48ae8/platypus.jpg 522w" alt="객체지향 프로그래밍으로 알아보는 prototype"/></picture><noscript><picture><source type="image/avif" srcSet="/static/043461a4a4c588ab1965da78011a1685/0cba2/platypus.avif 522w" sizes="100vw"/><source type="image/webp" srcSet="/static/043461a4a4c588ab1965da78011a1685/a2f07/platypus.webp 522w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/043461a4a4c588ab1965da78011a1685/48ae8/platypus.jpg" srcSet="/static/043461a4a4c588ab1965da78011a1685/48ae8/platypus.jpg 522w" alt="객체지향 프로그래밍으로 알아보는 prototype"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -446,4 +446,4 @@ <h3 id="프로토타입Prototype-기반-프로그래밍" style="position:relativ
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/javascript/shallo-copy-and-deep-copy/index.html b/javascript/shallo-copy-and-deep-copy/index.html
index 1b782d8b1..686618f87 100644
--- a/javascript/shallo-copy-and-deep-copy/index.html
+++ b/javascript/shallo-copy-and-deep-copy/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">JavaScript의 얕은 복사와 깊은 복사</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/java-script/">JavaScript</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">JavaScript의 얕은 복사와 깊은 복사</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">JavaScript의 얕은 복사와 깊은 복사로 알아보는 객체의 특성. (feat. React, Vue.js)</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-02-08">08 Feb 2023</time><span class="byline-reading-time"><span class="bull">•</span>26 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:78.9655172413793%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABYlAAAWJQFJUiTwAAACv0lEQVQ4y5WUSUxTURSG2etGF7ozgUQRJNDwHkPL0D4KZRAZBIKFBkoESYwYNi5NTNSNskEXJkQlsnChbtkQYww4BCRUpiCxJgyChDAVCpTadz/T14G2uOEkJ7nv3Hv/899z/vPiOI4JgRAisPT5EKqqfWse3I/jmCbUIODSCmJzKzoZRAOGs0cwCMXDHorNL8LmFvvbO+wu/znKUAMLZgldImItYvbE12+I5RU8A+856OlB3dvX4nFhVjEMlsbH2VxZ0dZqTK009xwgDryI/n7Euz7E3FwAMArM59OC80NDjJ05y6ii4HK5CKIGnuUHCZ4TS8uo059QVycQP39EMwzZHjBWdpmFU6dxnjjJ8P0HbKyt4/N6wb2LWN84fLbHC/NTMDMIa+uBpqjBze7uburq6rBZG7ialERLfAI3LiTSkm2gvriUDmsDnfVWbjbasFmtNDU102iz8vDWXV48n8Ax/Duaod1uR5IkCsxm9BmZFEoy5SWlmI0manQSNXlGCk0KZVl6slPTKCgsJEefjaWsGueqB1UrnXoI2N7eTmpqKga9nkydjjydDrMso0gS+pQUlAwZs5yBSZLIlNIxGAzIskxV5RX23YE6q37ZhACbm5u5lJyMuUDBWFxEQYmFfGMeGfk5JKalIGXKKCVF5OYaMBlNKIpCeno6FosFl2s7rJRwDXt7e7ne2oq9wUbFuXhqs/TYrY1UJZynPDGZ+tIKKi+mcK2qmtqaSjo6btPW1kZXVxe+UNdDwo7s9KTjC/13Whnpe8bCr+8M3Ovkc+9jZsf6GX7ziOEPT5iZHvzPmIvopvh8fwManJtidKwPx+hLRoae4nC8YnL8NbOTb3E6P7K4MI3X69XE7mfm98jhODIpftt177KzvYnb7cK9s417Z499j3qEUeSdMMOII4GRihF69J9G1aQRCxJp/wDslzSyFgcqCQAAAABJRU5ErkJggg==" alt=""/><picture><source type="image/avif" data-srcset="/static/c0455e771b38f35341c36082f8b7c15c/b57fe/deep-copy-shallow-copy.avif 750w,/static/c0455e771b38f35341c36082f8b7c15c/62df4/deep-copy-shallow-copy.avif 1080w,/static/c0455e771b38f35341c36082f8b7c15c/7aee1/deep-copy-shallow-copy.avif 1160w" sizes="100vw"/><source type="image/webp" data-srcset="/static/c0455e771b38f35341c36082f8b7c15c/5d2c1/deep-copy-shallow-copy.webp 750w,/static/c0455e771b38f35341c36082f8b7c15c/0bcd6/deep-copy-shallow-copy.webp 1080w,/static/c0455e771b38f35341c36082f8b7c15c/9ca95/deep-copy-shallow-copy.webp 1160w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/c0455e771b38f35341c36082f8b7c15c/492b5/deep-copy-shallow-copy.png" data-srcset="/static/c0455e771b38f35341c36082f8b7c15c/71312/deep-copy-shallow-copy.png 750w,/static/c0455e771b38f35341c36082f8b7c15c/5feb6/deep-copy-shallow-copy.png 1080w,/static/c0455e771b38f35341c36082f8b7c15c/492b5/deep-copy-shallow-copy.png 1160w" alt="JavaScript의 얕은 복사와 깊은 복사"/></picture><noscript><picture><source type="image/avif" srcSet="/static/c0455e771b38f35341c36082f8b7c15c/b57fe/deep-copy-shallow-copy.avif 750w,/static/c0455e771b38f35341c36082f8b7c15c/62df4/deep-copy-shallow-copy.avif 1080w,/static/c0455e771b38f35341c36082f8b7c15c/7aee1/deep-copy-shallow-copy.avif 1160w" sizes="100vw"/><source type="image/webp" srcSet="/static/c0455e771b38f35341c36082f8b7c15c/5d2c1/deep-copy-shallow-copy.webp 750w,/static/c0455e771b38f35341c36082f8b7c15c/0bcd6/deep-copy-shallow-copy.webp 1080w,/static/c0455e771b38f35341c36082f8b7c15c/9ca95/deep-copy-shallow-copy.webp 1160w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/c0455e771b38f35341c36082f8b7c15c/492b5/deep-copy-shallow-copy.png" srcSet="/static/c0455e771b38f35341c36082f8b7c15c/71312/deep-copy-shallow-copy.png 750w,/static/c0455e771b38f35341c36082f8b7c15c/5feb6/deep-copy-shallow-copy.png 1080w,/static/c0455e771b38f35341c36082f8b7c15c/492b5/deep-copy-shallow-copy.png 1160w" alt="JavaScript의 얕은 복사와 깊은 복사"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">JavaScript의 얕은 복사와 깊은 복사</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/java-script/">JavaScript</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">JavaScript의 얕은 복사와 깊은 복사</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">JavaScript의 얕은 복사와 깊은 복사로 알아보는 객체의 특성. (feat. React, Vue.js)</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-02-08">08 Feb 2023</time><span class="byline-reading-time"><span class="bull">•</span>26 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:78.9655172413793%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABYlAAAWJQFJUiTwAAACv0lEQVQ4y5WUSUxTURSG2etGF7ozgUQRJNDwHkPL0D4KZRAZBIKFBkoESYwYNi5NTNSNskEXJkQlsnChbtkQYww4BCRUpiCxJgyChDAVCpTadz/T14G2uOEkJ7nv3Hv/899z/vPiOI4JgRAisPT5EKqqfWse3I/jmCbUIODSCmJzKzoZRAOGs0cwCMXDHorNL8LmFvvbO+wu/znKUAMLZgldImItYvbE12+I5RU8A+856OlB3dvX4nFhVjEMlsbH2VxZ0dZqTK009xwgDryI/n7Euz7E3FwAMArM59OC80NDjJ05y6ii4HK5CKIGnuUHCZ4TS8uo059QVycQP39EMwzZHjBWdpmFU6dxnjjJ8P0HbKyt4/N6wb2LWN84fLbHC/NTMDMIa+uBpqjBze7uburq6rBZG7ialERLfAI3LiTSkm2gvriUDmsDnfVWbjbasFmtNDU102iz8vDWXV48n8Ax/Duaod1uR5IkCsxm9BmZFEoy5SWlmI0manQSNXlGCk0KZVl6slPTKCgsJEefjaWsGueqB1UrnXoI2N7eTmpqKga9nkydjjydDrMso0gS+pQUlAwZs5yBSZLIlNIxGAzIskxV5RX23YE6q37ZhACbm5u5lJyMuUDBWFxEQYmFfGMeGfk5JKalIGXKKCVF5OYaMBlNKIpCeno6FosFl2s7rJRwDXt7e7ne2oq9wUbFuXhqs/TYrY1UJZynPDGZ+tIKKi+mcK2qmtqaSjo6btPW1kZXVxe+UNdDwo7s9KTjC/13Whnpe8bCr+8M3Ovkc+9jZsf6GX7ziOEPT5iZHvzPmIvopvh8fwManJtidKwPx+hLRoae4nC8YnL8NbOTb3E6P7K4MI3X69XE7mfm98jhODIpftt177KzvYnb7cK9s417Z499j3qEUeSdMMOII4GRihF69J9G1aQRCxJp/wDslzSyFgcqCQAAAABJRU5ErkJggg==" alt=""/><picture><source type="image/avif" data-srcset="/static/c0455e771b38f35341c36082f8b7c15c/b57fe/deep-copy-shallow-copy.avif 750w,/static/c0455e771b38f35341c36082f8b7c15c/62df4/deep-copy-shallow-copy.avif 1080w,/static/c0455e771b38f35341c36082f8b7c15c/7aee1/deep-copy-shallow-copy.avif 1160w" sizes="100vw"/><source type="image/webp" data-srcset="/static/c0455e771b38f35341c36082f8b7c15c/5d2c1/deep-copy-shallow-copy.webp 750w,/static/c0455e771b38f35341c36082f8b7c15c/0bcd6/deep-copy-shallow-copy.webp 1080w,/static/c0455e771b38f35341c36082f8b7c15c/9ca95/deep-copy-shallow-copy.webp 1160w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/c0455e771b38f35341c36082f8b7c15c/492b5/deep-copy-shallow-copy.png" data-srcset="/static/c0455e771b38f35341c36082f8b7c15c/71312/deep-copy-shallow-copy.png 750w,/static/c0455e771b38f35341c36082f8b7c15c/5feb6/deep-copy-shallow-copy.png 1080w,/static/c0455e771b38f35341c36082f8b7c15c/492b5/deep-copy-shallow-copy.png 1160w" alt="JavaScript의 얕은 복사와 깊은 복사"/></picture><noscript><picture><source type="image/avif" srcSet="/static/c0455e771b38f35341c36082f8b7c15c/b57fe/deep-copy-shallow-copy.avif 750w,/static/c0455e771b38f35341c36082f8b7c15c/62df4/deep-copy-shallow-copy.avif 1080w,/static/c0455e771b38f35341c36082f8b7c15c/7aee1/deep-copy-shallow-copy.avif 1160w" sizes="100vw"/><source type="image/webp" srcSet="/static/c0455e771b38f35341c36082f8b7c15c/5d2c1/deep-copy-shallow-copy.webp 750w,/static/c0455e771b38f35341c36082f8b7c15c/0bcd6/deep-copy-shallow-copy.webp 1080w,/static/c0455e771b38f35341c36082f8b7c15c/9ca95/deep-copy-shallow-copy.webp 1160w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/c0455e771b38f35341c36082f8b7c15c/492b5/deep-copy-shallow-copy.png" srcSet="/static/c0455e771b38f35341c36082f8b7c15c/71312/deep-copy-shallow-copy.png 750w,/static/c0455e771b38f35341c36082f8b7c15c/5feb6/deep-copy-shallow-copy.png 1080w,/static/c0455e771b38f35341c36082f8b7c15c/492b5/deep-copy-shallow-copy.png 1160w" alt="JavaScript의 얕은 복사와 깊은 복사"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -365,4 +365,4 @@ <h3 id="Vue의-경우" style="position:relative">Vue의 경우<a href="#Vue%EC%9
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/javascript/symbol/index.html b/javascript/symbol/index.html
index 50adb74c6..2d57e1c9c 100644
--- a/javascript/symbol/index.html
+++ b/javascript/symbol/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">JavaScript의 Symbol에 대해서.</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/java-script/">JavaScript</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">JavaScript의 Symbol에 대해서.</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Symbol은 도대체 뭘까? 어디에 사용되고 있을까? 조금 더 깊게 들어가서 알아보자. 나중에 라이브러리를 만들 수도 있으니..</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-02-15">15 Feb 2023</time><span class="byline-reading-time"><span class="bull">•</span>27 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:62.55707762557078%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAAsTAAALEwEAmpwYAAACNElEQVQoz12S207bQBCG/QgkXnu9uzO7PjtO7Bwgp1qGBhICSVGSugYqoUZcQymi99zQJ6FPWiGjCPVuNQfNp+9fDVEJgYSYUtoAsl4nABJRWRYXAqW0CTF13ai6jAlEhagoZQBS4xySpH19/d2yuON42+1tFMWcQ5blrVZCKdtsiqIoOQffDweDIeeolDOZnNi2q1kW73b37+9/6roRho3X17+93j6lrCi+HRwMLIs/Pz+/vPxhTAwGo7u7e0qZ5wVPT7+jKNaktBkTtZoupY2oTNPaYQNIKe16nVRdAMk57LAR1Tv2bDYHkAByMjnxvABADodjx/Esi/f7wyzLTdOKovj4eCoEOo53drZQyn1fnk5POQchcLXaRFEMIFerTauVmqY1Gn1arzeEmP3+sCwvARSiLMvLIGi8Y+/t1T9qlNLWdUMIRFSEUEJMRMU51Gp6NUaICYBvl5vNZLu9VcpRynl8fIqi2DSt6fQ0y3IAOZ+fL5cXtu2maefq6lopRwi8uFg1m8mb7fE4K8vLKqqHh19h2OAcFosvcdxUylmvvxZF6bp+FMXn50sA6XnBbDZXyvnf9g6bELNyq+tGhS0EGgZFVADSMKgQqAmBYdjI8yPOQUp7sVgGQUQpz/PDViullH20nedHlLJ2u3tz8yOOEw1AOo7X6x1U8Y5GY9f1GRNp2vH9kDGRJO007TAmfD/sdvc5hzCMDg8/h2FDqzB26TMmKmzOoXoIgRVUNVZVqp//DycregAjF+qxAAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/561bcd4a1b332dc70475a85d77d3c82c/c0126/symbol.avif 750w,/static/561bcd4a1b332dc70475a85d77d3c82c/42e5c/symbol.avif 876w" sizes="100vw"/><source type="image/webp" data-srcset="/static/561bcd4a1b332dc70475a85d77d3c82c/59596/symbol.webp 750w,/static/561bcd4a1b332dc70475a85d77d3c82c/d99ef/symbol.webp 876w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/561bcd4a1b332dc70475a85d77d3c82c/cabd0/symbol.png" data-srcset="/static/561bcd4a1b332dc70475a85d77d3c82c/d734b/symbol.png 750w,/static/561bcd4a1b332dc70475a85d77d3c82c/cabd0/symbol.png 876w" alt="JavaScript의 Symbol에 대해서."/></picture><noscript><picture><source type="image/avif" srcSet="/static/561bcd4a1b332dc70475a85d77d3c82c/c0126/symbol.avif 750w,/static/561bcd4a1b332dc70475a85d77d3c82c/42e5c/symbol.avif 876w" sizes="100vw"/><source type="image/webp" srcSet="/static/561bcd4a1b332dc70475a85d77d3c82c/59596/symbol.webp 750w,/static/561bcd4a1b332dc70475a85d77d3c82c/d99ef/symbol.webp 876w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/561bcd4a1b332dc70475a85d77d3c82c/cabd0/symbol.png" srcSet="/static/561bcd4a1b332dc70475a85d77d3c82c/d734b/symbol.png 750w,/static/561bcd4a1b332dc70475a85d77d3c82c/cabd0/symbol.png 876w" alt="JavaScript의 Symbol에 대해서."/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">JavaScript의 Symbol에 대해서.</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/java-script/">JavaScript</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">JavaScript의 Symbol에 대해서.</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Symbol은 도대체 뭘까? 어디에 사용되고 있을까? 조금 더 깊게 들어가서 알아보자. 나중에 라이브러리를 만들 수도 있으니..</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-02-15">15 Feb 2023</time><span class="byline-reading-time"><span class="bull">•</span>27 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:62.55707762557078%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAAsTAAALEwEAmpwYAAACNElEQVQoz12S207bQBCG/QgkXnu9uzO7PjtO7Bwgp1qGBhICSVGSugYqoUZcQymi99zQJ6FPWiGjCPVuNQfNp+9fDVEJgYSYUtoAsl4nABJRWRYXAqW0CTF13ai6jAlEhagoZQBS4xySpH19/d2yuON42+1tFMWcQ5blrVZCKdtsiqIoOQffDweDIeeolDOZnNi2q1kW73b37+9/6roRho3X17+93j6lrCi+HRwMLIs/Pz+/vPxhTAwGo7u7e0qZ5wVPT7+jKNaktBkTtZoupY2oTNPaYQNIKe16nVRdAMk57LAR1Tv2bDYHkAByMjnxvABADodjx/Esi/f7wyzLTdOKovj4eCoEOo53drZQyn1fnk5POQchcLXaRFEMIFerTauVmqY1Gn1arzeEmP3+sCwvARSiLMvLIGi8Y+/t1T9qlNLWdUMIRFSEUEJMRMU51Gp6NUaICYBvl5vNZLu9VcpRynl8fIqi2DSt6fQ0y3IAOZ+fL5cXtu2maefq6lopRwi8uFg1m8mb7fE4K8vLKqqHh19h2OAcFosvcdxUylmvvxZF6bp+FMXn50sA6XnBbDZXyvnf9g6bELNyq+tGhS0EGgZFVADSMKgQqAmBYdjI8yPOQUp7sVgGQUQpz/PDViullH20nedHlLJ2u3tz8yOOEw1AOo7X6x1U8Y5GY9f1GRNp2vH9kDGRJO007TAmfD/sdvc5hzCMDg8/h2FDqzB26TMmKmzOoXoIgRVUNVZVqp//DycregAjF+qxAAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/561bcd4a1b332dc70475a85d77d3c82c/c0126/symbol.avif 750w,/static/561bcd4a1b332dc70475a85d77d3c82c/42e5c/symbol.avif 876w" sizes="100vw"/><source type="image/webp" data-srcset="/static/561bcd4a1b332dc70475a85d77d3c82c/59596/symbol.webp 750w,/static/561bcd4a1b332dc70475a85d77d3c82c/d99ef/symbol.webp 876w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/561bcd4a1b332dc70475a85d77d3c82c/cabd0/symbol.png" data-srcset="/static/561bcd4a1b332dc70475a85d77d3c82c/d734b/symbol.png 750w,/static/561bcd4a1b332dc70475a85d77d3c82c/cabd0/symbol.png 876w" alt="JavaScript의 Symbol에 대해서."/></picture><noscript><picture><source type="image/avif" srcSet="/static/561bcd4a1b332dc70475a85d77d3c82c/c0126/symbol.avif 750w,/static/561bcd4a1b332dc70475a85d77d3c82c/42e5c/symbol.avif 876w" sizes="100vw"/><source type="image/webp" srcSet="/static/561bcd4a1b332dc70475a85d77d3c82c/59596/symbol.webp 750w,/static/561bcd4a1b332dc70475a85d77d3c82c/d99ef/symbol.webp 876w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/561bcd4a1b332dc70475a85d77d3c82c/cabd0/symbol.png" srcSet="/static/561bcd4a1b332dc70475a85d77d3c82c/d734b/symbol.png 750w,/static/561bcd4a1b332dc70475a85d77d3c82c/cabd0/symbol.png 876w" alt="JavaScript의 Symbol에 대해서."/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -395,4 +395,4 @@ <h2 id="7-react에서-Symbol을-활용하는-방법" style="position:relative">7
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/network/uri-structure/index.html b/network/uri-structure/index.html
index d486efa7e..1c73eba76 100644
--- a/network/uri-structure/index.html
+++ b/network/uri-structure/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">다시 보기 위해 적어두는 URI 구조</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/network/">Network</a>,  <a href="/tags/uri/">URI</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">다시 보기 위해 적어두는 URI 구조</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">하나의 주소 안에도 여러가지 용어가 나온다. Host, Domain, Site, Origin등이 그것이다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-03-16">16 Mar 2023</time><span class="byline-reading-time"><span class="bull">•</span>21 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:56.25%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAYHAgX/xAAVAQEBAAAAAAAAAAAAAAAAAAAEBv/aAAwDAQACEAMQAAABsDHjlXwXEnxWB//EABoQAQEAAgMAAAAAAAAAAAAAAAMEAAIBBRP/2gAIAQEAAQUCewLZh69WPzfQ4pZ6oFTcs5Zc/8QAHxEAAQQBBQEAAAAAAAAAAAAAAQIDERIEAAUUIkFD/9oACAEDAQE/AdxbfxuDQsspfwGMiGklVrEwtZX9TUXr1mI9mCfdf//EAB8RAAICAwACAwAAAAAAAAAAAAIDAQQFERIABhQxQf/aAAgBAgEBPwFFJHst3MlWfZWzFZ12KsfNEGL5QIPcunCGAUK1aAa5ukiDTO1EJAIhiRAACXlMgABuBjU8CI7+/wB535//xAAqEAABAgUBBQkAAAAAAAAAAAADAQIEERITIQAiIzFRYQUVMjNBUnGRsf/aAAgBAQAGPwIN6KIKN7wMAcGlK3hjr3isk17aWpWwiOpyjZbWLguzox461HcWLxclwWqU+clx10AbRu3Q7TuGHMIRFRcymmOGNR54gTSmhilsEd4xSe1NhUlLCyX3es9Ig1pTkn789deY771//8QAHBABAQADAAMBAAAAAAAAAAAAAREAITFBUbHB/9oACAEBAAE/IYMtyHymg9KpSXFOIViXXqykAtHWWULibz1IAdGJFMntrzp0UisPAocWJbbCLDiTw9tdxb+s+Z//2gAMAwEAAgADAAAAENs//8QAGxEBAQACAwEAAAAAAAAAAAAAAREhMQBRYYH/2gAIAQMBAT8QFNpHogUQWaodrjGUqxWbWVyO2v3zP//EABcRAQEBAQAAAAAAAAAAAAAAAAERADH/2gAIAQIBAT8QBC7OL0I9oPqFF08JZ4WnQKxe7//EABgQAQEBAQEAAAAAAAAAAAAAAAERIQAx/9oACAEBAAE/EA1KtrB00mR0oH6LRQSZaSFELPCSBcR3rgAMsY9FfIgA6xG5RHkHfTQ0VJJTw8nQSwbpcFVVYg1Vc1V7/9k=" alt=""/><picture><source type="image/avif" data-srcset="/static/21721eaabf44189cfa73825ec2531d1a/3d183/uri-structure.avif 640w" sizes="100vw"/><source type="image/webp" data-srcset="/static/21721eaabf44189cfa73825ec2531d1a/17574/uri-structure.webp 640w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/21721eaabf44189cfa73825ec2531d1a/3440d/uri-structure.jpg" data-srcset="/static/21721eaabf44189cfa73825ec2531d1a/3440d/uri-structure.jpg 640w" alt="다시 보기 위해 적어두는 URI 구조"/></picture><noscript><picture><source type="image/avif" srcSet="/static/21721eaabf44189cfa73825ec2531d1a/3d183/uri-structure.avif 640w" sizes="100vw"/><source type="image/webp" srcSet="/static/21721eaabf44189cfa73825ec2531d1a/17574/uri-structure.webp 640w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/21721eaabf44189cfa73825ec2531d1a/3440d/uri-structure.jpg" srcSet="/static/21721eaabf44189cfa73825ec2531d1a/3440d/uri-structure.jpg 640w" alt="다시 보기 위해 적어두는 URI 구조"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">다시 보기 위해 적어두는 URI 구조</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/network/">Network</a>,  <a href="/tags/uri/">URI</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">다시 보기 위해 적어두는 URI 구조</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">하나의 주소 안에도 여러가지 용어가 나온다. Host, Domain, Site, Origin등이 그것이다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-03-16">16 Mar 2023</time><span class="byline-reading-time"><span class="bull">•</span>21 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:56.25%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAYHAgX/xAAVAQEBAAAAAAAAAAAAAAAAAAAEBv/aAAwDAQACEAMQAAABsDHjlXwXEnxWB//EABoQAQEAAgMAAAAAAAAAAAAAAAMEAAIBBRP/2gAIAQEAAQUCewLZh69WPzfQ4pZ6oFTcs5Zc/8QAHxEAAQQBBQEAAAAAAAAAAAAAAQIDERIEAAUUIkFD/9oACAEDAQE/AdxbfxuDQsspfwGMiGklVrEwtZX9TUXr1mI9mCfdf//EAB8RAAICAwACAwAAAAAAAAAAAAIDAQQFERIABhQxQf/aAAgBAgEBPwFFJHst3MlWfZWzFZ12KsfNEGL5QIPcunCGAUK1aAa5ukiDTO1EJAIhiRAACXlMgABuBjU8CI7+/wB535//xAAqEAABAgUBBQkAAAAAAAAAAAADAQIEERITIQAiIzFRYQUVMjNBUnGRsf/aAAgBAQAGPwIN6KIKN7wMAcGlK3hjr3isk17aWpWwiOpyjZbWLguzox461HcWLxclwWqU+clx10AbRu3Q7TuGHMIRFRcymmOGNR54gTSmhilsEd4xSe1NhUlLCyX3es9Ig1pTkn789deY771//8QAHBABAQADAAMBAAAAAAAAAAAAAREAITFBUbHB/9oACAEBAAE/IYMtyHymg9KpSXFOIViXXqykAtHWWULibz1IAdGJFMntrzp0UisPAocWJbbCLDiTw9tdxb+s+Z//2gAMAwEAAgADAAAAENs//8QAGxEBAQACAwEAAAAAAAAAAAAAAREhMQBRYYH/2gAIAQMBAT8QFNpHogUQWaodrjGUqxWbWVyO2v3zP//EABcRAQEBAQAAAAAAAAAAAAAAAAERADH/2gAIAQIBAT8QBC7OL0I9oPqFF08JZ4WnQKxe7//EABgQAQEBAQEAAAAAAAAAAAAAAAERIQAx/9oACAEBAAE/EA1KtrB00mR0oH6LRQSZaSFELPCSBcR3rgAMsY9FfIgA6xG5RHkHfTQ0VJJTw8nQSwbpcFVVYg1Vc1V7/9k=" alt=""/><picture><source type="image/avif" data-srcset="/static/21721eaabf44189cfa73825ec2531d1a/3d183/uri-structure.avif 640w" sizes="100vw"/><source type="image/webp" data-srcset="/static/21721eaabf44189cfa73825ec2531d1a/17574/uri-structure.webp 640w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/21721eaabf44189cfa73825ec2531d1a/3440d/uri-structure.jpg" data-srcset="/static/21721eaabf44189cfa73825ec2531d1a/3440d/uri-structure.jpg 640w" alt="다시 보기 위해 적어두는 URI 구조"/></picture><noscript><picture><source type="image/avif" srcSet="/static/21721eaabf44189cfa73825ec2531d1a/3d183/uri-structure.avif 640w" sizes="100vw"/><source type="image/webp" srcSet="/static/21721eaabf44189cfa73825ec2531d1a/17574/uri-structure.webp 640w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/21721eaabf44189cfa73825ec2531d1a/3440d/uri-structure.jpg" srcSet="/static/21721eaabf44189cfa73825ec2531d1a/3440d/uri-structure.jpg 640w" alt="다시 보기 위해 적어두는 URI 구조"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -313,4 +313,4 @@ <h3 id="Site사이트" style="position:relative">Site(사이트)<a href="#Site%E
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/node/node-version-manager/index.html b/node/node-version-manager/index.html
index 2b53ab3a8..95614fa68 100644
--- a/node/node-version-manager/index.html
+++ b/node/node-version-manager/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">노드 버전 매니저 툴 비교기(nvm &amp; fnm &amp; Volta)</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tool/">Tool</a>,  <a href="/tags/node-js/">Node.js</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">노드 버전 매니저 툴 비교기(nvm &amp; fnm &amp; Volta)</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">nvm을 시작으로 Node.js 버전을 관리하다 fnm을 알게되었고, 추가로 Volta를 알게되어 세가지 툴의 속도 및 방식에 대해서 간략하게 알아본 정보를 정리해본다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-03-28">28 Mar 2023</time><span class="byline-reading-time"><span class="bull">•</span>18 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:56.25%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAYIB//EABYBAQEBAAAAAAAAAAAAAAAAAAgBBP/aAAwDAQACEAMQAAABylcf2Z3nOaymTVf/xAAdEAABBAIDAAAAAAAAAAAAAAADAQQFBgACExUi/9oACAEBAAEFAoifR7aIntWlmPSec7HVBSe3ouf/xAAfEQACAgEEAwAAAAAAAAAAAAABAgMREgAiQVNhYqL/2gAIAQMBAT8BdlmgYJYYzMGMltSgIQExZF5JGUZO6iWwVjUvfJ8+PXX/xAAfEQACAgEEAwAAAAAAAAAAAAABAgMEEQAFBhMSIlH/2gAIAQIBAT8Ba1DTnkSGnH02dqgryq8hfymDEyWAoROtpDgYDtgRqw9nfS8r3hFVVsMFUBQPgGABr//EACQQAAIBAwMEAwEAAAAAAAAAAAECAwQREgAhMQUTIkEQI1KB/9oACAEBAAY/ApugVDUvb7k0MMkZlSSObxFMszN4SiRmxbtDxLKb4htdUqDAyUsyVUaWqnuzSyxHORGugwxYBY1X88E6mmerrGMkrvvIDbNi2IuhsovsOBomMYGVvsZdmfHi5G/vTO12c8sxLMfW5O5/vx//xAAaEAEBAQEBAQEAAAAAAAAAAAABESEAMVGx/9oACAEBAAE/IQolDkqYJtZRrEROGczCAbU9WBWI3B6DUoNhgcEy9tgVxWV4n5yXqreEwvUgFS5wHzv/2gAMAwEAAgADAAAAEBgP/8QAGBEBAQEBAQAAAAAAAAAAAAAAAREhADH/2gAIAQMBAT8QJB6ivgyFCA3uLSx2wQGqB4Me/8QAGhEBAAIDAQAAAAAAAAAAAAAAAQARITFhgf/aAAgBAgEBPxApe9JP8MB3UT4QUNIAwCtAIedn/8QAGhABAAMBAQEAAAAAAAAAAAAAAQARIVExQf/aAAgBAQABPxBHzqEKJoBm2GMJQCMNv6QWUVRN9u+ChRBYNtodgfYIwoKldWqMvWcNAJ7jQFrUeOPeVzk//9k=" alt=""/><picture><source type="image/avif" data-srcset="/static/fa6657a7573785fcabeb321f5d546e59/3d183/node-version-manager.avif 640w" sizes="100vw"/><source type="image/webp" data-srcset="/static/fa6657a7573785fcabeb321f5d546e59/17574/node-version-manager.webp 640w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/fa6657a7573785fcabeb321f5d546e59/3440d/node-version-manager.jpg" data-srcset="/static/fa6657a7573785fcabeb321f5d546e59/3440d/node-version-manager.jpg 640w" alt="노드 버전 매니저 툴 비교기(nvm &amp; fnm &amp; Volta)"/></picture><noscript><picture><source type="image/avif" srcSet="/static/fa6657a7573785fcabeb321f5d546e59/3d183/node-version-manager.avif 640w" sizes="100vw"/><source type="image/webp" srcSet="/static/fa6657a7573785fcabeb321f5d546e59/17574/node-version-manager.webp 640w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/fa6657a7573785fcabeb321f5d546e59/3440d/node-version-manager.jpg" srcSet="/static/fa6657a7573785fcabeb321f5d546e59/3440d/node-version-manager.jpg 640w" alt="노드 버전 매니저 툴 비교기(nvm &amp; fnm &amp; Volta)"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">노드 버전 매니저 툴 비교기(nvm &amp; fnm &amp; Volta)</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tool/">Tool</a>,  <a href="/tags/node-js/">Node.js</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">노드 버전 매니저 툴 비교기(nvm &amp; fnm &amp; Volta)</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">nvm을 시작으로 Node.js 버전을 관리하다 fnm을 알게되었고, 추가로 Volta를 알게되어 세가지 툴의 속도 및 방식에 대해서 간략하게 알아본 정보를 정리해본다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-03-28">28 Mar 2023</time><span class="byline-reading-time"><span class="bull">•</span>18 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:56.25%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAYIB//EABYBAQEBAAAAAAAAAAAAAAAAAAgBBP/aAAwDAQACEAMQAAABylcf2Z3nOaymTVf/xAAdEAABBAIDAAAAAAAAAAAAAAADAQQFBgACExUi/9oACAEBAAEFAoifR7aIntWlmPSec7HVBSe3ouf/xAAfEQACAgEEAwAAAAAAAAAAAAABAgMREgAiQVNhYqL/2gAIAQMBAT8BdlmgYJYYzMGMltSgIQExZF5JGUZO6iWwVjUvfJ8+PXX/xAAfEQACAgEEAwAAAAAAAAAAAAABAgMEEQAFBhMSIlH/2gAIAQIBAT8Ba1DTnkSGnH02dqgryq8hfymDEyWAoROtpDgYDtgRqw9nfS8r3hFVVsMFUBQPgGABr//EACQQAAIBAwMEAwEAAAAAAAAAAAECAwQREgAhMQUTIkEQI1KB/9oACAEBAAY/ApugVDUvb7k0MMkZlSSObxFMszN4SiRmxbtDxLKb4htdUqDAyUsyVUaWqnuzSyxHORGugwxYBY1X88E6mmerrGMkrvvIDbNi2IuhsovsOBomMYGVvsZdmfHi5G/vTO12c8sxLMfW5O5/vx//xAAaEAEBAQEBAQEAAAAAAAAAAAABESEAMVGx/9oACAEBAAE/IQolDkqYJtZRrEROGczCAbU9WBWI3B6DUoNhgcEy9tgVxWV4n5yXqreEwvUgFS5wHzv/2gAMAwEAAgADAAAAEBgP/8QAGBEBAQEBAQAAAAAAAAAAAAAAAREhADH/2gAIAQMBAT8QJB6ivgyFCA3uLSx2wQGqB4Me/8QAGhEBAAIDAQAAAAAAAAAAAAAAAQARITFhgf/aAAgBAgEBPxApe9JP8MB3UT4QUNIAwCtAIedn/8QAGhABAAMBAQEAAAAAAAAAAAAAAQARIVExQf/aAAgBAQABPxBHzqEKJoBm2GMJQCMNv6QWUVRN9u+ChRBYNtodgfYIwoKldWqMvWcNAJ7jQFrUeOPeVzk//9k=" alt=""/><picture><source type="image/avif" data-srcset="/static/fa6657a7573785fcabeb321f5d546e59/3d183/node-version-manager.avif 640w" sizes="100vw"/><source type="image/webp" data-srcset="/static/fa6657a7573785fcabeb321f5d546e59/17574/node-version-manager.webp 640w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/fa6657a7573785fcabeb321f5d546e59/3440d/node-version-manager.jpg" data-srcset="/static/fa6657a7573785fcabeb321f5d546e59/3440d/node-version-manager.jpg 640w" alt="노드 버전 매니저 툴 비교기(nvm &amp; fnm &amp; Volta)"/></picture><noscript><picture><source type="image/avif" srcSet="/static/fa6657a7573785fcabeb321f5d546e59/3d183/node-version-manager.avif 640w" sizes="100vw"/><source type="image/webp" srcSet="/static/fa6657a7573785fcabeb321f5d546e59/17574/node-version-manager.webp 640w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/fa6657a7573785fcabeb321f5d546e59/3440d/node-version-manager.jpg" srcSet="/static/fa6657a7573785fcabeb321f5d546e59/3440d/node-version-manager.jpg 640w" alt="노드 버전 매니저 툴 비교기(nvm &amp; fnm &amp; Volta)"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -283,4 +283,4 @@ <h2 id="속도-비교" style="position:relative">속도 비교<a href="#%EC%86%8
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/node/setting-npm-differently-for-each-project/index.html b/node/setting-npm-differently-for-each-project/index.html
index cafeac4d1..9664718f4 100644
--- a/node/setting-npm-differently-for-each-project/index.html
+++ b/node/setting-npm-differently-for-each-project/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">nvm을 사용해 프로젝트별로 Node.js 버전 다르게 사용하기</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tool/">Tool</a>,  <a href="/tags/node-js/">Node.js</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">nvm을 사용해 프로젝트별로 Node.js 버전 다르게 사용하기</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">NVM을 사용해 프로젝트 별로 Node.js 버전 지정을 자동화 해보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2022-04-10">10 Apr 2022</time><span class="byline-reading-time"><span class="bull">•</span>9 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:42%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/webp;base64,UklGRtoAAABXRUJQVlA4IM4AAAAwBACdASoUAAgAAAAAJQBdjkAZwBtIGUAeSN/YOv/IoH/w5p6lHd0QTgAA/v//ZyH/66zx//x72KQuDXwT2QKTf+n//27H/yNP9///xPj8F+htBKaI2xLn7VJOy4231//L7+x6//nQeaq/6pm9zGTvi2eFIsIOMc4unw/WW6Ya5c6qf2Fhmnnq5/FdtKP2oZwEj/9vf+9Z/2HRLOBl8///w8/irP1GbK8l4BudWc8HcamhbFwmnr5597nw534+O8mwMHmNv324Jg7PcoAAAA==" alt=""/><picture><source type="image/avif" data-srcset="/static/c7934c26406e2c570808f63f8ceaa552/7c2eb/setting-npm-differently-for-each-project.avif 750w,/static/c7934c26406e2c570808f63f8ceaa552/588e1/setting-npm-differently-for-each-project.avif 1000w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/c7934c26406e2c570808f63f8ceaa552/7592a/setting-npm-differently-for-each-project.webp" data-srcset="/static/c7934c26406e2c570808f63f8ceaa552/1e0c8/setting-npm-differently-for-each-project.webp 750w,/static/c7934c26406e2c570808f63f8ceaa552/7592a/setting-npm-differently-for-each-project.webp 1000w" alt="nvm을 사용해 프로젝트별로 Node.js 버전 다르게 사용하기"/></picture><noscript><picture><source type="image/avif" srcSet="/static/c7934c26406e2c570808f63f8ceaa552/7c2eb/setting-npm-differently-for-each-project.avif 750w,/static/c7934c26406e2c570808f63f8ceaa552/588e1/setting-npm-differently-for-each-project.avif 1000w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/c7934c26406e2c570808f63f8ceaa552/7592a/setting-npm-differently-for-each-project.webp" srcSet="/static/c7934c26406e2c570808f63f8ceaa552/1e0c8/setting-npm-differently-for-each-project.webp 750w,/static/c7934c26406e2c570808f63f8ceaa552/7592a/setting-npm-differently-for-each-project.webp 1000w" alt="nvm을 사용해 프로젝트별로 Node.js 버전 다르게 사용하기"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">nvm을 사용해 프로젝트별로 Node.js 버전 다르게 사용하기</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tool/">Tool</a>,  <a href="/tags/node-js/">Node.js</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">nvm을 사용해 프로젝트별로 Node.js 버전 다르게 사용하기</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">NVM을 사용해 프로젝트 별로 Node.js 버전 지정을 자동화 해보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2022-04-10">10 Apr 2022</time><span class="byline-reading-time"><span class="bull">•</span>9 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:42%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/webp;base64,UklGRtoAAABXRUJQVlA4IM4AAAAwBACdASoUAAgAAAAAJQBdjkAZwBtIGUAeSN/YOv/IoH/w5p6lHd0QTgAA/v//ZyH/66zx//x72KQuDXwT2QKTf+n//27H/yNP9///xPj8F+htBKaI2xLn7VJOy4231//L7+x6//nQeaq/6pm9zGTvi2eFIsIOMc4unw/WW6Ya5c6qf2Fhmnnq5/FdtKP2oZwEj/9vf+9Z/2HRLOBl8///w8/irP1GbK8l4BudWc8HcamhbFwmnr5597nw534+O8mwMHmNv324Jg7PcoAAAA==" alt=""/><picture><source type="image/avif" data-srcset="/static/c7934c26406e2c570808f63f8ceaa552/7c2eb/setting-npm-differently-for-each-project.avif 750w,/static/c7934c26406e2c570808f63f8ceaa552/588e1/setting-npm-differently-for-each-project.avif 1000w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/c7934c26406e2c570808f63f8ceaa552/7592a/setting-npm-differently-for-each-project.webp" data-srcset="/static/c7934c26406e2c570808f63f8ceaa552/1e0c8/setting-npm-differently-for-each-project.webp 750w,/static/c7934c26406e2c570808f63f8ceaa552/7592a/setting-npm-differently-for-each-project.webp 1000w" alt="nvm을 사용해 프로젝트별로 Node.js 버전 다르게 사용하기"/></picture><noscript><picture><source type="image/avif" srcSet="/static/c7934c26406e2c570808f63f8ceaa552/7c2eb/setting-npm-differently-for-each-project.avif 750w,/static/c7934c26406e2c570808f63f8ceaa552/588e1/setting-npm-differently-for-each-project.avif 1000w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/c7934c26406e2c570808f63f8ceaa552/7592a/setting-npm-differently-for-each-project.webp" srcSet="/static/c7934c26406e2c570808f63f8ceaa552/1e0c8/setting-npm-differently-for-each-project.webp 750w,/static/c7934c26406e2c570808f63f8ceaa552/7592a/setting-npm-differently-for-each-project.webp 1000w" alt="nvm을 사용해 프로젝트별로 Node.js 버전 다르게 사용하기"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -150,4 +150,4 @@ <h2 id="프로젝트-별-Nodejs-버전-강제하기" style="position:relative">
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/oracle/CHR-ASCII/index.html b/oracle/CHR-ASCII/index.html
index 6dfcfd463..17d4b73f8 100644
--- a/oracle/CHR-ASCII/index.html
+++ b/oracle/CHR-ASCII/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">오라클 CHR, ASCII 함수 사용법</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/oracle/">Oracle</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">오라클 CHR, ASCII 함수 사용법</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">CHR(), ASCII() 함수 사용법.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2020-06-12">12 Jun 2020</time><span class="byline-reading-time"><span class="bull">•</span>3 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:66.66666666666666%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAkFBgj/xAAXAQADAQAAAAAAAAAAAAAAAAADBAcI/9oADAMBAAIQAxAAAAHLMCvOqT7ZbHxfIRH/xAAaEAABBQEAAAAAAAAAAAAAAAADAQIEBQYR/9oACAEBAAEFAh3uCRlnosiGwuNTiI8thCEF1euOr1//xAAgEQACAgIBBQEAAAAAAAAAAAADBAECBRITAAYIESEU/9oACAEDAQE/Acp5UdyBVWlPHtAMQ+KZozXON8cBXnGu5BGyjVHREq4G10eT0KQCLz05DSSOi+VHftSkhOMNCvJf88NgybTUB29jg7FnokxIr8sTWm0/dKROsf/EACARAAIDAAIBBQAAAAAAAAAAAAECAxESABMGBAUUInH/2gAIAQIBAT8Bi8G9GXbskidcSrn4kYOpFkSKQOhjYGNqkr7aZcmlzweDe00NtNuhvr6UTVC8p1HK3dCz+nn/xAAnEAACAgECBAYDAAAAAAAAAAABAwIEEQASBRMhMRQiI1FxgUFhkf/aAAgBAQAGPwJap+LM7NeLqrllkIRQ/dXrynJliS22jc2CW3lQ2CQ8LE5MeF0KK38viU7aLVl9iLbHDbS4LXVCk1nFdhLLGecHxUyEpkRZshjQTTN0hSorfvVN0xahKcHCc1tC92QPKsbR851V9SUSpbhCQJ6BUw2IHt55ZHseo66z+e+f33z/AHW6Ucn5+z9kkknuScnX/8QAHBABAAMBAAMBAAAAAAAAAAAAAQARITFBUWFx/9oACAEBAAE/IXDLUOJ1WOyBCMpuMsc0qLGBnGL0CuxjkBoEA23QCdiwo3bkiuNy7v7a6dvr9lSSBtvOj7SS0EVWf//aAAwDAQACAAMAAAAQWw//xAAXEQEBAQEAAAAAAAAAAAAAAAABEQAh/9oACAEDAQE/EERyHjOUU98WWZx0+Th39ZFOj//EABcRAQEBAQAAAAAAAAAAAAAAAAERIQD/2gAIAQIBAT8QAxrmqi2KWwxiQx2q6vplYCqBije//8QAGRABAQEBAQEAAAAAAAAAAAAAAREAITFh/9oACAEBAAE/ECsj0GHPUO/om6yn+gHZPAZp7Xc54mCifYGCCmMfK5QCZFZDJoL3+g8KqnVuJ0VQK0hK0umjH//Z" alt=""/><picture><source type="image/avif" data-srcset="/static/81d8014c53e209d05ed5596eb1b93203/b0356/oracle.avif 750w,/static/81d8014c53e209d05ed5596eb1b93203/f1c79/oracle.avif 768w" sizes="100vw"/><source type="image/webp" data-srcset="/static/81d8014c53e209d05ed5596eb1b93203/57584/oracle.webp 750w,/static/81d8014c53e209d05ed5596eb1b93203/588ff/oracle.webp 768w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/81d8014c53e209d05ed5596eb1b93203/39611/oracle.jpg" data-srcset="/static/81d8014c53e209d05ed5596eb1b93203/7284f/oracle.jpg 750w,/static/81d8014c53e209d05ed5596eb1b93203/39611/oracle.jpg 768w" alt="오라클 CHR, ASCII 함수 사용법"/></picture><noscript><picture><source type="image/avif" srcSet="/static/81d8014c53e209d05ed5596eb1b93203/b0356/oracle.avif 750w,/static/81d8014c53e209d05ed5596eb1b93203/f1c79/oracle.avif 768w" sizes="100vw"/><source type="image/webp" srcSet="/static/81d8014c53e209d05ed5596eb1b93203/57584/oracle.webp 750w,/static/81d8014c53e209d05ed5596eb1b93203/588ff/oracle.webp 768w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/81d8014c53e209d05ed5596eb1b93203/39611/oracle.jpg" srcSet="/static/81d8014c53e209d05ed5596eb1b93203/7284f/oracle.jpg 750w,/static/81d8014c53e209d05ed5596eb1b93203/39611/oracle.jpg 768w" alt="오라클 CHR, ASCII 함수 사용법"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">오라클 CHR, ASCII 함수 사용법</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/oracle/">Oracle</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">오라클 CHR, ASCII 함수 사용법</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">CHR(), ASCII() 함수 사용법.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2020-06-12">12 Jun 2020</time><span class="byline-reading-time"><span class="bull">•</span>3 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:66.66666666666666%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAkFBgj/xAAXAQADAQAAAAAAAAAAAAAAAAADBAcI/9oADAMBAAIQAxAAAAHLMCvOqT7ZbHxfIRH/xAAaEAABBQEAAAAAAAAAAAAAAAADAQIEBQYR/9oACAEBAAEFAh3uCRlnosiGwuNTiI8thCEF1euOr1//xAAgEQACAgIBBQEAAAAAAAAAAAADBAECBRITAAYIESEU/9oACAEDAQE/Acp5UdyBVWlPHtAMQ+KZozXON8cBXnGu5BGyjVHREq4G10eT0KQCLz05DSSOi+VHftSkhOMNCvJf88NgybTUB29jg7FnokxIr8sTWm0/dKROsf/EACARAAIDAAIBBQAAAAAAAAAAAAECAxESABMGBAUUInH/2gAIAQIBAT8Bi8G9GXbskidcSrn4kYOpFkSKQOhjYGNqkr7aZcmlzweDe00NtNuhvr6UTVC8p1HK3dCz+nn/xAAnEAACAgECBAYDAAAAAAAAAAABAwIEEQASBRMhMRQiI1FxgUFhkf/aAAgBAQAGPwJap+LM7NeLqrllkIRQ/dXrynJliS22jc2CW3lQ2CQ8LE5MeF0KK38viU7aLVl9iLbHDbS4LXVCk1nFdhLLGecHxUyEpkRZshjQTTN0hSorfvVN0xahKcHCc1tC92QPKsbR851V9SUSpbhCQJ6BUw2IHt55ZHseo66z+e+f33z/AHW6Ucn5+z9kkknuScnX/8QAHBABAAMBAAMBAAAAAAAAAAAAAQARITFBUWFx/9oACAEBAAE/IXDLUOJ1WOyBCMpuMsc0qLGBnGL0CuxjkBoEA23QCdiwo3bkiuNy7v7a6dvr9lSSBtvOj7SS0EVWf//aAAwDAQACAAMAAAAQWw//xAAXEQEBAQEAAAAAAAAAAAAAAAABEQAh/9oACAEDAQE/EERyHjOUU98WWZx0+Th39ZFOj//EABcRAQEBAQAAAAAAAAAAAAAAAAERIQD/2gAIAQIBAT8QAxrmqi2KWwxiQx2q6vplYCqBije//8QAGRABAQEBAQEAAAAAAAAAAAAAAREAITFh/9oACAEBAAE/ECsj0GHPUO/om6yn+gHZPAZp7Xc54mCifYGCCmMfK5QCZFZDJoL3+g8KqnVuJ0VQK0hK0umjH//Z" alt=""/><picture><source type="image/avif" data-srcset="/static/81d8014c53e209d05ed5596eb1b93203/b0356/oracle.avif 750w,/static/81d8014c53e209d05ed5596eb1b93203/f1c79/oracle.avif 768w" sizes="100vw"/><source type="image/webp" data-srcset="/static/81d8014c53e209d05ed5596eb1b93203/57584/oracle.webp 750w,/static/81d8014c53e209d05ed5596eb1b93203/588ff/oracle.webp 768w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/81d8014c53e209d05ed5596eb1b93203/39611/oracle.jpg" data-srcset="/static/81d8014c53e209d05ed5596eb1b93203/7284f/oracle.jpg 750w,/static/81d8014c53e209d05ed5596eb1b93203/39611/oracle.jpg 768w" alt="오라클 CHR, ASCII 함수 사용법"/></picture><noscript><picture><source type="image/avif" srcSet="/static/81d8014c53e209d05ed5596eb1b93203/b0356/oracle.avif 750w,/static/81d8014c53e209d05ed5596eb1b93203/f1c79/oracle.avif 768w" sizes="100vw"/><source type="image/webp" srcSet="/static/81d8014c53e209d05ed5596eb1b93203/57584/oracle.webp 750w,/static/81d8014c53e209d05ed5596eb1b93203/588ff/oracle.webp 768w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/81d8014c53e209d05ed5596eb1b93203/39611/oracle.jpg" srcSet="/static/81d8014c53e209d05ed5596eb1b93203/7284f/oracle.jpg 750w,/static/81d8014c53e209d05ed5596eb1b93203/39611/oracle.jpg 768w" alt="오라클 CHR, ASCII 함수 사용법"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -143,4 +143,4 @@ <h2 id="CHR10-CHR13" style="position:relative">CHR(10), CHR(13)<a href="#CHR10-C
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git "a/oracle/\352\263\204\354\240\225\352\264\200\353\240\250-\353\252\205\353\240\271\354\226\264/index.html" "b/oracle/\352\263\204\354\240\225\352\264\200\353\240\250-\353\252\205\353\240\271\354\226\264/index.html"
index 3ee606fc5..a4c123700 100644
--- "a/oracle/\352\263\204\354\240\225\352\264\200\353\240\250-\353\252\205\353\240\271\354\226\264/index.html"
+++ "b/oracle/\352\263\204\354\240\225\352\264\200\353\240\250-\353\252\205\353\240\271\354\226\264/index.html"
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">ORACLE 계정관련 명령어</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/oracle/">Oracle</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">ORACLE 계정관련 명령어</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">ORACLE 계정관련 명령어로 테이블 조작을 해보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2020-06-10">10 Jun 2020</time><span class="byline-reading-time"><span class="bull">•</span>2 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:66.66666666666666%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAkFBgj/xAAXAQADAQAAAAAAAAAAAAAAAAADBAcI/9oADAMBAAIQAxAAAAHLMCvOqT7ZbHxfIRH/xAAaEAABBQEAAAAAAAAAAAAAAAADAQIEBQYR/9oACAEBAAEFAh3uCRlnosiGwuNTiI8thCEF1euOr1//xAAgEQACAgIBBQEAAAAAAAAAAAADBAECBRITAAYIESEU/9oACAEDAQE/Acp5UdyBVWlPHtAMQ+KZozXON8cBXnGu5BGyjVHREq4G10eT0KQCLz05DSSOi+VHftSkhOMNCvJf88NgybTUB29jg7FnokxIr8sTWm0/dKROsf/EACARAAIDAAIBBQAAAAAAAAAAAAECAxESABMGBAUUInH/2gAIAQIBAT8Bi8G9GXbskidcSrn4kYOpFkSKQOhjYGNqkr7aZcmlzweDe00NtNuhvr6UTVC8p1HK3dCz+nn/xAAnEAACAgECBAYDAAAAAAAAAAABAwIEEQASBRMhMRQiI1FxgUFhkf/aAAgBAQAGPwJap+LM7NeLqrllkIRQ/dXrynJliS22jc2CW3lQ2CQ8LE5MeF0KK38viU7aLVl9iLbHDbS4LXVCk1nFdhLLGecHxUyEpkRZshjQTTN0hSorfvVN0xahKcHCc1tC92QPKsbR851V9SUSpbhCQJ6BUw2IHt55ZHseo66z+e+f33z/AHW6Ucn5+z9kkknuScnX/8QAHBABAAMBAAMBAAAAAAAAAAAAAQARITFBUWFx/9oACAEBAAE/IXDLUOJ1WOyBCMpuMsc0qLGBnGL0CuxjkBoEA23QCdiwo3bkiuNy7v7a6dvr9lSSBtvOj7SS0EVWf//aAAwDAQACAAMAAAAQWw//xAAXEQEBAQEAAAAAAAAAAAAAAAABEQAh/9oACAEDAQE/EERyHjOUU98WWZx0+Th39ZFOj//EABcRAQEBAQAAAAAAAAAAAAAAAAERIQD/2gAIAQIBAT8QAxrmqi2KWwxiQx2q6vplYCqBije//8QAGRABAQEBAQEAAAAAAAAAAAAAAREAITFh/9oACAEBAAE/ECsj0GHPUO/om6yn+gHZPAZp7Xc54mCifYGCCmMfK5QCZFZDJoL3+g8KqnVuJ0VQK0hK0umjH//Z" alt=""/><picture><source type="image/avif" data-srcset="/static/81d8014c53e209d05ed5596eb1b93203/b0356/oracle.avif 750w,/static/81d8014c53e209d05ed5596eb1b93203/f1c79/oracle.avif 768w" sizes="100vw"/><source type="image/webp" data-srcset="/static/81d8014c53e209d05ed5596eb1b93203/57584/oracle.webp 750w,/static/81d8014c53e209d05ed5596eb1b93203/588ff/oracle.webp 768w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/81d8014c53e209d05ed5596eb1b93203/39611/oracle.jpg" data-srcset="/static/81d8014c53e209d05ed5596eb1b93203/7284f/oracle.jpg 750w,/static/81d8014c53e209d05ed5596eb1b93203/39611/oracle.jpg 768w" alt="ORACLE 계정관련 명령어"/></picture><noscript><picture><source type="image/avif" srcSet="/static/81d8014c53e209d05ed5596eb1b93203/b0356/oracle.avif 750w,/static/81d8014c53e209d05ed5596eb1b93203/f1c79/oracle.avif 768w" sizes="100vw"/><source type="image/webp" srcSet="/static/81d8014c53e209d05ed5596eb1b93203/57584/oracle.webp 750w,/static/81d8014c53e209d05ed5596eb1b93203/588ff/oracle.webp 768w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/81d8014c53e209d05ed5596eb1b93203/39611/oracle.jpg" srcSet="/static/81d8014c53e209d05ed5596eb1b93203/7284f/oracle.jpg 750w,/static/81d8014c53e209d05ed5596eb1b93203/39611/oracle.jpg 768w" alt="ORACLE 계정관련 명령어"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">ORACLE 계정관련 명령어</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/oracle/">Oracle</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">ORACLE 계정관련 명령어</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">ORACLE 계정관련 명령어로 테이블 조작을 해보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2020-06-10">10 Jun 2020</time><span class="byline-reading-time"><span class="bull">•</span>2 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:66.66666666666666%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAkFBgj/xAAXAQADAQAAAAAAAAAAAAAAAAADBAcI/9oADAMBAAIQAxAAAAHLMCvOqT7ZbHxfIRH/xAAaEAABBQEAAAAAAAAAAAAAAAADAQIEBQYR/9oACAEBAAEFAh3uCRlnosiGwuNTiI8thCEF1euOr1//xAAgEQACAgIBBQEAAAAAAAAAAAADBAECBRITAAYIESEU/9oACAEDAQE/Acp5UdyBVWlPHtAMQ+KZozXON8cBXnGu5BGyjVHREq4G10eT0KQCLz05DSSOi+VHftSkhOMNCvJf88NgybTUB29jg7FnokxIr8sTWm0/dKROsf/EACARAAIDAAIBBQAAAAAAAAAAAAECAxESABMGBAUUInH/2gAIAQIBAT8Bi8G9GXbskidcSrn4kYOpFkSKQOhjYGNqkr7aZcmlzweDe00NtNuhvr6UTVC8p1HK3dCz+nn/xAAnEAACAgECBAYDAAAAAAAAAAABAwIEEQASBRMhMRQiI1FxgUFhkf/aAAgBAQAGPwJap+LM7NeLqrllkIRQ/dXrynJliS22jc2CW3lQ2CQ8LE5MeF0KK38viU7aLVl9iLbHDbS4LXVCk1nFdhLLGecHxUyEpkRZshjQTTN0hSorfvVN0xahKcHCc1tC92QPKsbR851V9SUSpbhCQJ6BUw2IHt55ZHseo66z+e+f33z/AHW6Ucn5+z9kkknuScnX/8QAHBABAAMBAAMBAAAAAAAAAAAAAQARITFBUWFx/9oACAEBAAE/IXDLUOJ1WOyBCMpuMsc0qLGBnGL0CuxjkBoEA23QCdiwo3bkiuNy7v7a6dvr9lSSBtvOj7SS0EVWf//aAAwDAQACAAMAAAAQWw//xAAXEQEBAQEAAAAAAAAAAAAAAAABEQAh/9oACAEDAQE/EERyHjOUU98WWZx0+Th39ZFOj//EABcRAQEBAQAAAAAAAAAAAAAAAAERIQD/2gAIAQIBAT8QAxrmqi2KWwxiQx2q6vplYCqBije//8QAGRABAQEBAQEAAAAAAAAAAAAAAREAITFh/9oACAEBAAE/ECsj0GHPUO/om6yn+gHZPAZp7Xc54mCifYGCCmMfK5QCZFZDJoL3+g8KqnVuJ0VQK0hK0umjH//Z" alt=""/><picture><source type="image/avif" data-srcset="/static/81d8014c53e209d05ed5596eb1b93203/b0356/oracle.avif 750w,/static/81d8014c53e209d05ed5596eb1b93203/f1c79/oracle.avif 768w" sizes="100vw"/><source type="image/webp" data-srcset="/static/81d8014c53e209d05ed5596eb1b93203/57584/oracle.webp 750w,/static/81d8014c53e209d05ed5596eb1b93203/588ff/oracle.webp 768w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/81d8014c53e209d05ed5596eb1b93203/39611/oracle.jpg" data-srcset="/static/81d8014c53e209d05ed5596eb1b93203/7284f/oracle.jpg 750w,/static/81d8014c53e209d05ed5596eb1b93203/39611/oracle.jpg 768w" alt="ORACLE 계정관련 명령어"/></picture><noscript><picture><source type="image/avif" srcSet="/static/81d8014c53e209d05ed5596eb1b93203/b0356/oracle.avif 750w,/static/81d8014c53e209d05ed5596eb1b93203/f1c79/oracle.avif 768w" sizes="100vw"/><source type="image/webp" srcSet="/static/81d8014c53e209d05ed5596eb1b93203/57584/oracle.webp 750w,/static/81d8014c53e209d05ed5596eb1b93203/588ff/oracle.webp 768w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/81d8014c53e209d05ed5596eb1b93203/39611/oracle.jpg" srcSet="/static/81d8014c53e209d05ed5596eb1b93203/7284f/oracle.jpg 750w,/static/81d8014c53e209d05ed5596eb1b93203/39611/oracle.jpg 768w" alt="ORACLE 계정관련 명령어"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -107,4 +107,4 @@ <h2 id="4-덤프" style="position:relative">4. 덤프<a href="#4-%EB%8D%A4%ED%94
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git "a/oracle/\355\205\214\354\235\264\353\270\224\354\212\244\355\216\230\354\235\264\354\212\244/index.html" "b/oracle/\355\205\214\354\235\264\353\270\224\354\212\244\355\216\230\354\235\264\354\212\244/index.html"
index 13a80d0ae..595eef746 100644
--- "a/oracle/\355\205\214\354\235\264\353\270\224\354\212\244\355\216\230\354\235\264\354\212\244/index.html"
+++ "b/oracle/\355\205\214\354\235\264\353\270\224\354\212\244\355\216\230\354\235\264\354\212\244/index.html"
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">오라클 테이블 스페이스 조작</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/oracle/">Oracle</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">오라클 테이블 스페이스 조작</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Local Oracle 사용시 용량에 문제가 생기면 이 방법을 사용하자..</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2020-06-11">11 Jun 2020</time><span class="byline-reading-time"><span class="bull">•</span>9 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:66.66666666666666%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAkFBgj/xAAXAQADAQAAAAAAAAAAAAAAAAADBAcI/9oADAMBAAIQAxAAAAHLMCvOqT7ZbHxfIRH/xAAaEAABBQEAAAAAAAAAAAAAAAADAQIEBQYR/9oACAEBAAEFAh3uCRlnosiGwuNTiI8thCEF1euOr1//xAAgEQACAgIBBQEAAAAAAAAAAAADBAECBRITAAYIESEU/9oACAEDAQE/Acp5UdyBVWlPHtAMQ+KZozXON8cBXnGu5BGyjVHREq4G10eT0KQCLz05DSSOi+VHftSkhOMNCvJf88NgybTUB29jg7FnokxIr8sTWm0/dKROsf/EACARAAIDAAIBBQAAAAAAAAAAAAECAxESABMGBAUUInH/2gAIAQIBAT8Bi8G9GXbskidcSrn4kYOpFkSKQOhjYGNqkr7aZcmlzweDe00NtNuhvr6UTVC8p1HK3dCz+nn/xAAnEAACAgECBAYDAAAAAAAAAAABAwIEEQASBRMhMRQiI1FxgUFhkf/aAAgBAQAGPwJap+LM7NeLqrllkIRQ/dXrynJliS22jc2CW3lQ2CQ8LE5MeF0KK38viU7aLVl9iLbHDbS4LXVCk1nFdhLLGecHxUyEpkRZshjQTTN0hSorfvVN0xahKcHCc1tC92QPKsbR851V9SUSpbhCQJ6BUw2IHt55ZHseo66z+e+f33z/AHW6Ucn5+z9kkknuScnX/8QAHBABAAMBAAMBAAAAAAAAAAAAAQARITFBUWFx/9oACAEBAAE/IXDLUOJ1WOyBCMpuMsc0qLGBnGL0CuxjkBoEA23QCdiwo3bkiuNy7v7a6dvr9lSSBtvOj7SS0EVWf//aAAwDAQACAAMAAAAQWw//xAAXEQEBAQEAAAAAAAAAAAAAAAABEQAh/9oACAEDAQE/EERyHjOUU98WWZx0+Th39ZFOj//EABcRAQEBAQAAAAAAAAAAAAAAAAERIQD/2gAIAQIBAT8QAxrmqi2KWwxiQx2q6vplYCqBije//8QAGRABAQEBAQEAAAAAAAAAAAAAAREAITFh/9oACAEBAAE/ECsj0GHPUO/om6yn+gHZPAZp7Xc54mCifYGCCmMfK5QCZFZDJoL3+g8KqnVuJ0VQK0hK0umjH//Z" alt=""/><picture><source type="image/avif" data-srcset="/static/81d8014c53e209d05ed5596eb1b93203/b0356/oracle.avif 750w,/static/81d8014c53e209d05ed5596eb1b93203/f1c79/oracle.avif 768w" sizes="100vw"/><source type="image/webp" data-srcset="/static/81d8014c53e209d05ed5596eb1b93203/57584/oracle.webp 750w,/static/81d8014c53e209d05ed5596eb1b93203/588ff/oracle.webp 768w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/81d8014c53e209d05ed5596eb1b93203/39611/oracle.jpg" data-srcset="/static/81d8014c53e209d05ed5596eb1b93203/7284f/oracle.jpg 750w,/static/81d8014c53e209d05ed5596eb1b93203/39611/oracle.jpg 768w" alt="오라클 테이블 스페이스 조작"/></picture><noscript><picture><source type="image/avif" srcSet="/static/81d8014c53e209d05ed5596eb1b93203/b0356/oracle.avif 750w,/static/81d8014c53e209d05ed5596eb1b93203/f1c79/oracle.avif 768w" sizes="100vw"/><source type="image/webp" srcSet="/static/81d8014c53e209d05ed5596eb1b93203/57584/oracle.webp 750w,/static/81d8014c53e209d05ed5596eb1b93203/588ff/oracle.webp 768w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/81d8014c53e209d05ed5596eb1b93203/39611/oracle.jpg" srcSet="/static/81d8014c53e209d05ed5596eb1b93203/7284f/oracle.jpg 750w,/static/81d8014c53e209d05ed5596eb1b93203/39611/oracle.jpg 768w" alt="오라클 테이블 스페이스 조작"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">오라클 테이블 스페이스 조작</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/oracle/">Oracle</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">오라클 테이블 스페이스 조작</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Local Oracle 사용시 용량에 문제가 생기면 이 방법을 사용하자..</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2020-06-11">11 Jun 2020</time><span class="byline-reading-time"><span class="bull">•</span>9 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:66.66666666666666%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAkFBgj/xAAXAQADAQAAAAAAAAAAAAAAAAADBAcI/9oADAMBAAIQAxAAAAHLMCvOqT7ZbHxfIRH/xAAaEAABBQEAAAAAAAAAAAAAAAADAQIEBQYR/9oACAEBAAEFAh3uCRlnosiGwuNTiI8thCEF1euOr1//xAAgEQACAgIBBQEAAAAAAAAAAAADBAECBRITAAYIESEU/9oACAEDAQE/Acp5UdyBVWlPHtAMQ+KZozXON8cBXnGu5BGyjVHREq4G10eT0KQCLz05DSSOi+VHftSkhOMNCvJf88NgybTUB29jg7FnokxIr8sTWm0/dKROsf/EACARAAIDAAIBBQAAAAAAAAAAAAECAxESABMGBAUUInH/2gAIAQIBAT8Bi8G9GXbskidcSrn4kYOpFkSKQOhjYGNqkr7aZcmlzweDe00NtNuhvr6UTVC8p1HK3dCz+nn/xAAnEAACAgECBAYDAAAAAAAAAAABAwIEEQASBRMhMRQiI1FxgUFhkf/aAAgBAQAGPwJap+LM7NeLqrllkIRQ/dXrynJliS22jc2CW3lQ2CQ8LE5MeF0KK38viU7aLVl9iLbHDbS4LXVCk1nFdhLLGecHxUyEpkRZshjQTTN0hSorfvVN0xahKcHCc1tC92QPKsbR851V9SUSpbhCQJ6BUw2IHt55ZHseo66z+e+f33z/AHW6Ucn5+z9kkknuScnX/8QAHBABAAMBAAMBAAAAAAAAAAAAAQARITFBUWFx/9oACAEBAAE/IXDLUOJ1WOyBCMpuMsc0qLGBnGL0CuxjkBoEA23QCdiwo3bkiuNy7v7a6dvr9lSSBtvOj7SS0EVWf//aAAwDAQACAAMAAAAQWw//xAAXEQEBAQEAAAAAAAAAAAAAAAABEQAh/9oACAEDAQE/EERyHjOUU98WWZx0+Th39ZFOj//EABcRAQEBAQAAAAAAAAAAAAAAAAERIQD/2gAIAQIBAT8QAxrmqi2KWwxiQx2q6vplYCqBije//8QAGRABAQEBAQEAAAAAAAAAAAAAAREAITFh/9oACAEBAAE/ECsj0GHPUO/om6yn+gHZPAZp7Xc54mCifYGCCmMfK5QCZFZDJoL3+g8KqnVuJ0VQK0hK0umjH//Z" alt=""/><picture><source type="image/avif" data-srcset="/static/81d8014c53e209d05ed5596eb1b93203/b0356/oracle.avif 750w,/static/81d8014c53e209d05ed5596eb1b93203/f1c79/oracle.avif 768w" sizes="100vw"/><source type="image/webp" data-srcset="/static/81d8014c53e209d05ed5596eb1b93203/57584/oracle.webp 750w,/static/81d8014c53e209d05ed5596eb1b93203/588ff/oracle.webp 768w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/81d8014c53e209d05ed5596eb1b93203/39611/oracle.jpg" data-srcset="/static/81d8014c53e209d05ed5596eb1b93203/7284f/oracle.jpg 750w,/static/81d8014c53e209d05ed5596eb1b93203/39611/oracle.jpg 768w" alt="오라클 테이블 스페이스 조작"/></picture><noscript><picture><source type="image/avif" srcSet="/static/81d8014c53e209d05ed5596eb1b93203/b0356/oracle.avif 750w,/static/81d8014c53e209d05ed5596eb1b93203/f1c79/oracle.avif 768w" sizes="100vw"/><source type="image/webp" srcSet="/static/81d8014c53e209d05ed5596eb1b93203/57584/oracle.webp 750w,/static/81d8014c53e209d05ed5596eb1b93203/588ff/oracle.webp 768w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/81d8014c53e209d05ed5596eb1b93203/39611/oracle.jpg" srcSet="/static/81d8014c53e209d05ed5596eb1b93203/7284f/oracle.jpg 750w,/static/81d8014c53e209d05ed5596eb1b93203/39611/oracle.jpg 768w" alt="오라클 테이블 스페이스 조작"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -168,4 +168,4 @@ <h4 id="TEMP-늘리기" style="position:relative">TEMP 늘리기<a href="#TEMP-%
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/page-data/app-data.json b/page-data/app-data.json
index 480f0d1e3..b2218987f 100644
--- a/page-data/app-data.json
+++ b/page-data/app-data.json
@@ -1 +1 @@
-{"webpackCompilationHash":"8e5c4f2454d8fb1fc3a6"}
+{"webpackCompilationHash":"bae96ce9da441646d979"}
diff --git a/react/class-functional-component-difference/index.html b/react/class-functional-component-difference/index.html
index 67ebd6549..e5714dd1c 100644
--- a/react/class-functional-component-difference/index.html
+++ b/react/class-functional-component-difference/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">React의 클래스형, 함수형 컴포넌트 차이</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/react/">React</a>,  <a href="/tags/java-script/">JavaScript</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">React의 클래스형, 함수형 컴포넌트 차이</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53"></p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-03-05">05 Mar 2023</time><span class="byline-reading-time"><span class="bull">•</span>12 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:50%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsSAAALEgHS3X78AAACf0lEQVQozyWTS09aURSF+QcddN5Bf0KnnXfSdNK0cdC06ayjJg6bmJimadOYWJT4QAUpvhCkrVR84FW45SGCwOUCIoja+qoTtSqoicC9X3OPs7POTtbZa+/vmBpZK3p5Eq3kommcc0NQccOmC00dQM/bYMsD5Qk0o16ww5YXSuNo2X6a+WH0TQ9acYRGpg+TIRp5O7pqpZ4d5Ep1cp0eoLpippYa4Fp1cpnqp5awcJWxcak4qMYtVGNfqK5ZaRiGeRt1xYpWmsCklV3ouUFOo11EonME4hF8S3OEkhHCalroGcmPX/ITiEeJ5BRxH8qmCZfKhGPznIY7Yd0hOjXVM/1QdJCUJ0k3wGf7jOPZfUJbB2w2IaQUCO6dENo7QVY3yNU0Vv4c4p/9js89xPSSRCLyHcqjIqGpqdpo5uxkM8sEdv9heXKPaMsdutrfIqkFgjtHzJ7DzBkEd/4yJv1i2Otl6N0LPrU8oLf1KdKiBwp2EdtkDLi+ZiGTnGMqtcF4+yucbS8JFsvEfh+wWNln9gJ+Gobbh0yForz+2Mndx8952NZBq3WUdOwHN0kz+qYbU7M0AUoPKdmFb32f5b1TxsJrxI4uRORgtoi8d0xw9xg5V6JQbfDBu8Cj9128+SbTsaSwJjkgP4gmZpjuhfI454qTsDyNT5ojsBImkssgp1dZiMn4gwH8ywvMR4NiIfFijmgmgZyIIEtuzlIGSu7byE11UDBocHeT7OYy0cO1+lUgcxEzU0v2cp0f4UqxU4t3U121UMvYRf18xUw93Sc4ba47aRiGesUjlmJ0qm+Mw7YXvTAsoDZgFjpvF1Abj7I9JbgT9cokVDzUlQFuP4iL/9EIkwWNGFMAAAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/eaa081aa6f5f962aab7f962d4692e442/f1cd5/class-functional.avif 600w" sizes="100vw"/><source type="image/webp" data-srcset="/static/eaa081aa6f5f962aab7f962d4692e442/2fa07/class-functional.webp 600w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/eaa081aa6f5f962aab7f962d4692e442/62ea7/class-functional.png" data-srcset="/static/eaa081aa6f5f962aab7f962d4692e442/62ea7/class-functional.png 600w" alt="React의 클래스형, 함수형 컴포넌트 차이"/></picture><noscript><picture><source type="image/avif" srcSet="/static/eaa081aa6f5f962aab7f962d4692e442/f1cd5/class-functional.avif 600w" sizes="100vw"/><source type="image/webp" srcSet="/static/eaa081aa6f5f962aab7f962d4692e442/2fa07/class-functional.webp 600w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/eaa081aa6f5f962aab7f962d4692e442/62ea7/class-functional.png" srcSet="/static/eaa081aa6f5f962aab7f962d4692e442/62ea7/class-functional.png 600w" alt="React의 클래스형, 함수형 컴포넌트 차이"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">React의 클래스형, 함수형 컴포넌트 차이</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/react/">React</a>,  <a href="/tags/java-script/">JavaScript</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">React의 클래스형, 함수형 컴포넌트 차이</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53"></p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-03-05">05 Mar 2023</time><span class="byline-reading-time"><span class="bull">•</span>12 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:50%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsSAAALEgHS3X78AAACf0lEQVQozyWTS09aURSF+QcddN5Bf0KnnXfSdNK0cdC06ayjJg6bmJimadOYWJT4QAUpvhCkrVR84FW45SGCwOUCIoja+qoTtSqoicC9X3OPs7POTtbZa+/vmBpZK3p5Eq3kommcc0NQccOmC00dQM/bYMsD5Qk0o16ww5YXSuNo2X6a+WH0TQ9acYRGpg+TIRp5O7pqpZ4d5Ep1cp0eoLpippYa4Fp1cpnqp5awcJWxcak4qMYtVGNfqK5ZaRiGeRt1xYpWmsCklV3ouUFOo11EonME4hF8S3OEkhHCalroGcmPX/ITiEeJ5BRxH8qmCZfKhGPznIY7Yd0hOjXVM/1QdJCUJ0k3wGf7jOPZfUJbB2w2IaQUCO6dENo7QVY3yNU0Vv4c4p/9js89xPSSRCLyHcqjIqGpqdpo5uxkM8sEdv9heXKPaMsdutrfIqkFgjtHzJ7DzBkEd/4yJv1i2Otl6N0LPrU8oLf1KdKiBwp2EdtkDLi+ZiGTnGMqtcF4+yucbS8JFsvEfh+wWNln9gJ+Gobbh0yForz+2Mndx8952NZBq3WUdOwHN0kz+qYbU7M0AUoPKdmFb32f5b1TxsJrxI4uRORgtoi8d0xw9xg5V6JQbfDBu8Cj9128+SbTsaSwJjkgP4gmZpjuhfI454qTsDyNT5ojsBImkssgp1dZiMn4gwH8ywvMR4NiIfFijmgmgZyIIEtuzlIGSu7byE11UDBocHeT7OYy0cO1+lUgcxEzU0v2cp0f4UqxU4t3U121UMvYRf18xUw93Sc4ba47aRiGesUjlmJ0qm+Mw7YXvTAsoDZgFjpvF1Abj7I9JbgT9cokVDzUlQFuP4iL/9EIkwWNGFMAAAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/eaa081aa6f5f962aab7f962d4692e442/f1cd5/class-functional.avif 600w" sizes="100vw"/><source type="image/webp" data-srcset="/static/eaa081aa6f5f962aab7f962d4692e442/2fa07/class-functional.webp 600w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/eaa081aa6f5f962aab7f962d4692e442/62ea7/class-functional.png" data-srcset="/static/eaa081aa6f5f962aab7f962d4692e442/62ea7/class-functional.png 600w" alt="React의 클래스형, 함수형 컴포넌트 차이"/></picture><noscript><picture><source type="image/avif" srcSet="/static/eaa081aa6f5f962aab7f962d4692e442/f1cd5/class-functional.avif 600w" sizes="100vw"/><source type="image/webp" srcSet="/static/eaa081aa6f5f962aab7f962d4692e442/2fa07/class-functional.webp 600w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/eaa081aa6f5f962aab7f962d4692e442/62ea7/class-functional.png" srcSet="/static/eaa081aa6f5f962aab7f962d4692e442/62ea7/class-functional.png 600w" alt="React의 클래스형, 함수형 컴포넌트 차이"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -316,4 +316,4 @@ <h2 id="클래스-인스턴스-프로토타입-프로퍼티메서드-정리" sty
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/rss.xml b/rss.xml
index 2759e774a..ca3b8c67f 100644
--- a/rss.xml
+++ b/rss.xml
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Pozafly's 블로그]]></title><description><![CDATA[pozafly의 기술 블로그]]></description><link>https://pozafly.github.io</link><generator>GatsbyJS</generator><lastBuildDate>Fri, 05 May 2023 14:13:42 GMT</lastBuildDate><item><title><![CDATA[TypeScript의 기본개념과 환경설정]]></title><description><![CDATA[TypeScript를 사용해 개발 하는 단계는 크게 3가지로 나눌 수 있다. Lint stage Compile stage Runtime stage Lint stage는 개발자가 코드를 작성하는 시점이다. Compile stage…]]></description><link>https://pozafly.github.io/typescript/typescript-env/</link><guid isPermaLink="false">https://pozafly.github.io/typescript/typescript-env/</guid><pubDate>Fri, 05 May 2023 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;TypeScript를 사용해 개발 하는 단계는 크게 3가지로 나눌 수 있다.&lt;/p&gt;
+<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Pozafly's 블로그]]></title><description><![CDATA[pozafly의 기술 블로그]]></description><link>https://pozafly.github.io</link><generator>GatsbyJS</generator><lastBuildDate>Fri, 05 May 2023 14:28:59 GMT</lastBuildDate><item><title><![CDATA[TypeScript의 기본개념과 환경설정]]></title><description><![CDATA[TypeScript를 사용해 개발 하는 단계는 크게 3가지로 나눌 수 있다. Lint stage Compile stage Runtime stage Lint stage는 개발자가 코드를 작성하는 시점이다. Compile stage…]]></description><link>https://pozafly.github.io/typescript/typescript-env/</link><guid isPermaLink="false">https://pozafly.github.io/typescript/typescript-env/</guid><pubDate>Fri, 05 May 2023 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;TypeScript를 사용해 개발 하는 단계는 크게 3가지로 나눌 수 있다.&lt;/p&gt;
 &lt;ol&gt;
 &lt;li&gt;Lint stage&lt;/li&gt;
 &lt;li&gt;Compile stage&lt;/li&gt;
diff --git a/spring/JUnit(1)motive/index.html b/spring/JUnit(1)motive/index.html
index 946735f26..3aff6c7f8 100644
--- a/spring/JUnit(1)motive/index.html
+++ b/spring/JUnit(1)motive/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">JUnit(1) - 개념</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/spring-boot/">SpringBoot</a>,  <a href="/tags/j-unit/">JUnit</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">JUnit(1) - 개념</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">SpringBoot에서 JUnit의 개념짚기</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2020-05-21">21 May 2020</time><span class="byline-reading-time"><span class="bull">•</span>8 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:52.5%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB3ElEQVQoz12Ty6tPURTHzzkh8kh5R3mUgZT4B74rjwEjIzOKpJTvGihykeIyIHldj0xMLroDlL7rlpSUmYlHBsaiDEhSxIz2/q0fJ7tWZ5211/nstb5rn8bDGpe1FBrK0qrfMpD+P/PI3MB0D5uSsb/7NcEHkNmUzadsAYUZBewD4JzBXolhYX48jQIoLKUwN2NTKSwakrdQ+ErhI2WfKbynsMwDqyjcorCbwmUKxymMUhincITCdQpjFI5ROErhfDPyeGsBvqXwgcIEhfsUvlN4QKFUe4nCbQonKWyg8I6BXR52gMJzCisoPKNwhsLaJumfKJymcI7CtfR/UdhPYS+FCwzcozBCYSeF9RSMwkEPW0xhB4WbFN4U4CsKryncoPCFwjcKJyj8KK3VoUXVbGUOo9ogbg2HT2FTOaxJ+m8Kh7PlK6nXz1Kdh52lsISB1Yw6iHkMbGZgIwOnEtz2p1ycJx5WoJNVj6gHlLbXedgjCncZGGfgKgN3GLjIwAQDY3lDCrArNpzyGgpPKXtB2UsKDynM9LDlVYrAHg/bR+GQh20vlTGwrXTlslnD9uuqF1iWmvS0yQvr6r2Xano5/+/XNSjZWg/rfBJttbCuB2xTozb/qC5hXR/KrPAPFINmy3qE2ZIAAAAASUVORK5CYII=" alt=""/><picture><source type="image/avif" data-srcset="/static/8315cb308b890c7087edfc088043f572/1260c/springboot.avif 600w" sizes="100vw"/><source type="image/webp" data-srcset="/static/8315cb308b890c7087edfc088043f572/22c65/springboot.webp 600w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8315cb308b890c7087edfc088043f572/86184/springboot.png" data-srcset="/static/8315cb308b890c7087edfc088043f572/86184/springboot.png 600w" alt="JUnit(1) - 개념"/></picture><noscript><picture><source type="image/avif" srcSet="/static/8315cb308b890c7087edfc088043f572/1260c/springboot.avif 600w" sizes="100vw"/><source type="image/webp" srcSet="/static/8315cb308b890c7087edfc088043f572/22c65/springboot.webp 600w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8315cb308b890c7087edfc088043f572/86184/springboot.png" srcSet="/static/8315cb308b890c7087edfc088043f572/86184/springboot.png 600w" alt="JUnit(1) - 개념"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">JUnit(1) - 개념</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/spring-boot/">SpringBoot</a>,  <a href="/tags/j-unit/">JUnit</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">JUnit(1) - 개념</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">SpringBoot에서 JUnit의 개념짚기</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2020-05-21">21 May 2020</time><span class="byline-reading-time"><span class="bull">•</span>8 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:52.5%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB3ElEQVQoz12Ty6tPURTHzzkh8kh5R3mUgZT4B74rjwEjIzOKpJTvGihykeIyIHldj0xMLroDlL7rlpSUmYlHBsaiDEhSxIz2/q0fJ7tWZ5211/nstb5rn8bDGpe1FBrK0qrfMpD+P/PI3MB0D5uSsb/7NcEHkNmUzadsAYUZBewD4JzBXolhYX48jQIoLKUwN2NTKSwakrdQ+ErhI2WfKbynsMwDqyjcorCbwmUKxymMUhincITCdQpjFI5ROErhfDPyeGsBvqXwgcIEhfsUvlN4QKFUe4nCbQonKWyg8I6BXR52gMJzCisoPKNwhsLaJumfKJymcI7CtfR/UdhPYS+FCwzcozBCYSeF9RSMwkEPW0xhB4WbFN4U4CsKryncoPCFwjcKJyj8KK3VoUXVbGUOo9ogbg2HT2FTOaxJ+m8Kh7PlK6nXz1Kdh52lsISB1Yw6iHkMbGZgIwOnEtz2p1ycJx5WoJNVj6gHlLbXedgjCncZGGfgKgN3GLjIwAQDY3lDCrArNpzyGgpPKXtB2UsKDynM9LDlVYrAHg/bR+GQh20vlTGwrXTlslnD9uuqF1iWmvS0yQvr6r2Xano5/+/XNSjZWg/rfBJttbCuB2xTozb/qC5hXR/KrPAPFINmy3qE2ZIAAAAASUVORK5CYII=" alt=""/><picture><source type="image/avif" data-srcset="/static/8315cb308b890c7087edfc088043f572/1260c/springboot.avif 600w" sizes="100vw"/><source type="image/webp" data-srcset="/static/8315cb308b890c7087edfc088043f572/22c65/springboot.webp 600w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8315cb308b890c7087edfc088043f572/86184/springboot.png" data-srcset="/static/8315cb308b890c7087edfc088043f572/86184/springboot.png 600w" alt="JUnit(1) - 개념"/></picture><noscript><picture><source type="image/avif" srcSet="/static/8315cb308b890c7087edfc088043f572/1260c/springboot.avif 600w" sizes="100vw"/><source type="image/webp" srcSet="/static/8315cb308b890c7087edfc088043f572/22c65/springboot.webp 600w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8315cb308b890c7087edfc088043f572/86184/springboot.png" srcSet="/static/8315cb308b890c7087edfc088043f572/86184/springboot.png 600w" alt="JUnit(1) - 개념"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -223,4 +223,4 @@ <h2 id="4-Assert-단위테스트" style="position:relative">4. Assert 단위테
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/spring/JUnit(2)Mockito/index.html b/spring/JUnit(2)Mockito/index.html
index 42cc8348a..c539500b2 100644
--- a/spring/JUnit(2)Mockito/index.html
+++ b/spring/JUnit(2)Mockito/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">JUnit(2) - Mockito</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/spring-boot/">SpringBoot</a>,  <a href="/tags/j-unit/">JUnit</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">JUnit(2) - Mockito</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Mockito 프레임워크를 통해 Mock 테스트를 알아보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2020-05-25">25 May 2020</time><span class="byline-reading-time"><span class="bull">•</span>10 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:52.5%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB3ElEQVQoz12Ty6tPURTHzzkh8kh5R3mUgZT4B74rjwEjIzOKpJTvGihykeIyIHldj0xMLroDlL7rlpSUmYlHBsaiDEhSxIz2/q0fJ7tWZ5211/nstb5rn8bDGpe1FBrK0qrfMpD+P/PI3MB0D5uSsb/7NcEHkNmUzadsAYUZBewD4JzBXolhYX48jQIoLKUwN2NTKSwakrdQ+ErhI2WfKbynsMwDqyjcorCbwmUKxymMUhincITCdQpjFI5ROErhfDPyeGsBvqXwgcIEhfsUvlN4QKFUe4nCbQonKWyg8I6BXR52gMJzCisoPKNwhsLaJumfKJymcI7CtfR/UdhPYS+FCwzcozBCYSeF9RSMwkEPW0xhB4WbFN4U4CsKryncoPCFwjcKJyj8KK3VoUXVbGUOo9ogbg2HT2FTOaxJ+m8Kh7PlK6nXz1Kdh52lsISB1Yw6iHkMbGZgIwOnEtz2p1ycJx5WoJNVj6gHlLbXedgjCncZGGfgKgN3GLjIwAQDY3lDCrArNpzyGgpPKXtB2UsKDynM9LDlVYrAHg/bR+GQh20vlTGwrXTlslnD9uuqF1iWmvS0yQvr6r2Xano5/+/XNSjZWg/rfBJttbCuB2xTozb/qC5hXR/KrPAPFINmy3qE2ZIAAAAASUVORK5CYII=" alt=""/><picture><source type="image/avif" data-srcset="/static/8315cb308b890c7087edfc088043f572/1260c/springboot.avif 600w" sizes="100vw"/><source type="image/webp" data-srcset="/static/8315cb308b890c7087edfc088043f572/22c65/springboot.webp 600w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8315cb308b890c7087edfc088043f572/86184/springboot.png" data-srcset="/static/8315cb308b890c7087edfc088043f572/86184/springboot.png 600w" alt="JUnit(2) - Mockito"/></picture><noscript><picture><source type="image/avif" srcSet="/static/8315cb308b890c7087edfc088043f572/1260c/springboot.avif 600w" sizes="100vw"/><source type="image/webp" srcSet="/static/8315cb308b890c7087edfc088043f572/22c65/springboot.webp 600w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8315cb308b890c7087edfc088043f572/86184/springboot.png" srcSet="/static/8315cb308b890c7087edfc088043f572/86184/springboot.png 600w" alt="JUnit(2) - Mockito"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">JUnit(2) - Mockito</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/spring-boot/">SpringBoot</a>,  <a href="/tags/j-unit/">JUnit</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">JUnit(2) - Mockito</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Mockito 프레임워크를 통해 Mock 테스트를 알아보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2020-05-25">25 May 2020</time><span class="byline-reading-time"><span class="bull">•</span>10 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:52.5%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB3ElEQVQoz12Ty6tPURTHzzkh8kh5R3mUgZT4B74rjwEjIzOKpJTvGihykeIyIHldj0xMLroDlL7rlpSUmYlHBsaiDEhSxIz2/q0fJ7tWZ5211/nstb5rn8bDGpe1FBrK0qrfMpD+P/PI3MB0D5uSsb/7NcEHkNmUzadsAYUZBewD4JzBXolhYX48jQIoLKUwN2NTKSwakrdQ+ErhI2WfKbynsMwDqyjcorCbwmUKxymMUhincITCdQpjFI5ROErhfDPyeGsBvqXwgcIEhfsUvlN4QKFUe4nCbQonKWyg8I6BXR52gMJzCisoPKNwhsLaJumfKJymcI7CtfR/UdhPYS+FCwzcozBCYSeF9RSMwkEPW0xhB4WbFN4U4CsKryncoPCFwjcKJyj8KK3VoUXVbGUOo9ogbg2HT2FTOaxJ+m8Kh7PlK6nXz1Kdh52lsISB1Yw6iHkMbGZgIwOnEtz2p1ycJx5WoJNVj6gHlLbXedgjCncZGGfgKgN3GLjIwAQDY3lDCrArNpzyGgpPKXtB2UsKDynM9LDlVYrAHg/bR+GQh20vlTGwrXTlslnD9uuqF1iWmvS0yQvr6r2Xano5/+/XNSjZWg/rfBJttbCuB2xTozb/qC5hXR/KrPAPFINmy3qE2ZIAAAAASUVORK5CYII=" alt=""/><picture><source type="image/avif" data-srcset="/static/8315cb308b890c7087edfc088043f572/1260c/springboot.avif 600w" sizes="100vw"/><source type="image/webp" data-srcset="/static/8315cb308b890c7087edfc088043f572/22c65/springboot.webp 600w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8315cb308b890c7087edfc088043f572/86184/springboot.png" data-srcset="/static/8315cb308b890c7087edfc088043f572/86184/springboot.png 600w" alt="JUnit(2) - Mockito"/></picture><noscript><picture><source type="image/avif" srcSet="/static/8315cb308b890c7087edfc088043f572/1260c/springboot.avif 600w" sizes="100vw"/><source type="image/webp" srcSet="/static/8315cb308b890c7087edfc088043f572/22c65/springboot.webp 600w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8315cb308b890c7087edfc088043f572/86184/springboot.png" srcSet="/static/8315cb308b890c7087edfc088043f572/86184/springboot.png 600w" alt="JUnit(2) - Mockito"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -269,4 +269,4 @@ <h3 id="verify" style="position:relative">verify()<a href="#verify" aria-label="
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/spring/MediaType/index.html b/spring/MediaType/index.html
index 8d1ae148d..d0d59072f 100644
--- a/spring/MediaType/index.html
+++ b/spring/MediaType/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">Spring에서의 MediaType</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/spring-boot/">SpringBoot</a>,  <a href="/tags/media-type/">MediaType</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">Spring에서의 MediaType</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Spring MVC에서 MediaType 매핑에 대해서 알아보고 테스트 해보자</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2020-05-27">27 May 2020</time><span class="byline-reading-time"><span class="bull">•</span>6 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:52.5%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB3ElEQVQoz12Ty6tPURTHzzkh8kh5R3mUgZT4B74rjwEjIzOKpJTvGihykeIyIHldj0xMLroDlL7rlpSUmYlHBsaiDEhSxIz2/q0fJ7tWZ5211/nstb5rn8bDGpe1FBrK0qrfMpD+P/PI3MB0D5uSsb/7NcEHkNmUzadsAYUZBewD4JzBXolhYX48jQIoLKUwN2NTKSwakrdQ+ErhI2WfKbynsMwDqyjcorCbwmUKxymMUhincITCdQpjFI5ROErhfDPyeGsBvqXwgcIEhfsUvlN4QKFUe4nCbQonKWyg8I6BXR52gMJzCisoPKNwhsLaJumfKJymcI7CtfR/UdhPYS+FCwzcozBCYSeF9RSMwkEPW0xhB4WbFN4U4CsKryncoPCFwjcKJyj8KK3VoUXVbGUOo9ogbg2HT2FTOaxJ+m8Kh7PlK6nXz1Kdh52lsISB1Yw6iHkMbGZgIwOnEtz2p1ycJx5WoJNVj6gHlLbXedgjCncZGGfgKgN3GLjIwAQDY3lDCrArNpzyGgpPKXtB2UsKDynM9LDlVYrAHg/bR+GQh20vlTGwrXTlslnD9uuqF1iWmvS0yQvr6r2Xano5/+/XNSjZWg/rfBJttbCuB2xTozb/qC5hXR/KrPAPFINmy3qE2ZIAAAAASUVORK5CYII=" alt=""/><picture><source type="image/avif" data-srcset="/static/8315cb308b890c7087edfc088043f572/1260c/springboot.avif 600w" sizes="100vw"/><source type="image/webp" data-srcset="/static/8315cb308b890c7087edfc088043f572/22c65/springboot.webp 600w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8315cb308b890c7087edfc088043f572/86184/springboot.png" data-srcset="/static/8315cb308b890c7087edfc088043f572/86184/springboot.png 600w" alt="Spring에서의 MediaType"/></picture><noscript><picture><source type="image/avif" srcSet="/static/8315cb308b890c7087edfc088043f572/1260c/springboot.avif 600w" sizes="100vw"/><source type="image/webp" srcSet="/static/8315cb308b890c7087edfc088043f572/22c65/springboot.webp 600w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8315cb308b890c7087edfc088043f572/86184/springboot.png" srcSet="/static/8315cb308b890c7087edfc088043f572/86184/springboot.png 600w" alt="Spring에서의 MediaType"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">Spring에서의 MediaType</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/spring-boot/">SpringBoot</a>,  <a href="/tags/media-type/">MediaType</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">Spring에서의 MediaType</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Spring MVC에서 MediaType 매핑에 대해서 알아보고 테스트 해보자</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2020-05-27">27 May 2020</time><span class="byline-reading-time"><span class="bull">•</span>6 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:52.5%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB3ElEQVQoz12Ty6tPURTHzzkh8kh5R3mUgZT4B74rjwEjIzOKpJTvGihykeIyIHldj0xMLroDlL7rlpSUmYlHBsaiDEhSxIz2/q0fJ7tWZ5211/nstb5rn8bDGpe1FBrK0qrfMpD+P/PI3MB0D5uSsb/7NcEHkNmUzadsAYUZBewD4JzBXolhYX48jQIoLKUwN2NTKSwakrdQ+ErhI2WfKbynsMwDqyjcorCbwmUKxymMUhincITCdQpjFI5ROErhfDPyeGsBvqXwgcIEhfsUvlN4QKFUe4nCbQonKWyg8I6BXR52gMJzCisoPKNwhsLaJumfKJymcI7CtfR/UdhPYS+FCwzcozBCYSeF9RSMwkEPW0xhB4WbFN4U4CsKryncoPCFwjcKJyj8KK3VoUXVbGUOo9ogbg2HT2FTOaxJ+m8Kh7PlK6nXz1Kdh52lsISB1Yw6iHkMbGZgIwOnEtz2p1ycJx5WoJNVj6gHlLbXedgjCncZGGfgKgN3GLjIwAQDY3lDCrArNpzyGgpPKXtB2UsKDynM9LDlVYrAHg/bR+GQh20vlTGwrXTlslnD9uuqF1iWmvS0yQvr6r2Xano5/+/XNSjZWg/rfBJttbCuB2xTozb/qC5hXR/KrPAPFINmy3qE2ZIAAAAASUVORK5CYII=" alt=""/><picture><source type="image/avif" data-srcset="/static/8315cb308b890c7087edfc088043f572/1260c/springboot.avif 600w" sizes="100vw"/><source type="image/webp" data-srcset="/static/8315cb308b890c7087edfc088043f572/22c65/springboot.webp 600w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8315cb308b890c7087edfc088043f572/86184/springboot.png" data-srcset="/static/8315cb308b890c7087edfc088043f572/86184/springboot.png 600w" alt="Spring에서의 MediaType"/></picture><noscript><picture><source type="image/avif" srcSet="/static/8315cb308b890c7087edfc088043f572/1260c/springboot.avif 600w" sizes="100vw"/><source type="image/webp" srcSet="/static/8315cb308b890c7087edfc088043f572/22c65/springboot.webp 600w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8315cb308b890c7087edfc088043f572/86184/springboot.png" srcSet="/static/8315cb308b890c7087edfc088043f572/86184/springboot.png 600w" alt="Spring에서의 MediaType"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -198,4 +198,4 @@ <h4 id="produces" style="position:relative">produces<a href="#produces" aria-lab
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/auto-mation/index.html b/tags/auto-mation/index.html
index 2aa0b2a7d..a94b90b68 100644
--- a/tags/auto-mation/index.html
+++ b/tags/auto-mation/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/blog/index.html b/tags/blog/index.html
index eee421c44..2c8b31225 100644
--- a/tags/blog/index.html
+++ b/tags/blog/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/bundler/index.html b/tags/bundler/index.html
index 0b40a997d..17141b486 100644
--- a/tags/bundler/index.html
+++ b/tags/bundler/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/css/index.html b/tags/css/index.html
index 200338e5c..dbf8aa294 100644
--- a/tags/css/index.html
+++ b/tags/css/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/design-pattern/index.html b/tags/design-pattern/index.html
index dfb80f0fd..c24844d0a 100644
--- a/tags/design-pattern/index.html
+++ b/tags/design-pattern/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/diary/index.html b/tags/diary/index.html
index bae96f1a3..46b56aa90 100644
--- a/tags/diary/index.html
+++ b/tags/diary/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/gatsby/index.html b/tags/gatsby/index.html
index 5dce98acc..237d22e63 100644
--- a/tags/gatsby/index.html
+++ b/tags/gatsby/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/html/index.html b/tags/html/index.html
index 8834526be..8a72ce25d 100644
--- a/tags/html/index.html
+++ b/tags/html/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/index.html b/tags/index.html
index d0ac982e5..68ace4734 100644
--- a/tags/index.html
+++ b/tags/index.html
@@ -72,4 +72,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/j-unit/index.html b/tags/j-unit/index.html
index e34d83ace..ea6809246 100644
--- a/tags/j-unit/index.html
+++ b/tags/j-unit/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/java-script/index.html b/tags/java-script/index.html
index 39bf86577..d83298921 100644
--- a/tags/java-script/index.html
+++ b/tags/java-script/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/java/index.html b/tags/java/index.html
index 0924ed92a..ef45271c2 100644
--- a/tags/java/index.html
+++ b/tags/java/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/jwt/index.html b/tags/jwt/index.html
index 87c75813e..3c133a798 100644
--- a/tags/jwt/index.html
+++ b/tags/jwt/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/lets-encrypt/index.html b/tags/lets-encrypt/index.html
index 2b3f163bb..04139aa15 100644
--- a/tags/lets-encrypt/index.html
+++ b/tags/lets-encrypt/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/media-type/index.html b/tags/media-type/index.html
index 8b75cce63..5638046df 100644
--- a/tags/media-type/index.html
+++ b/tags/media-type/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/my-sql/index.html b/tags/my-sql/index.html
index 25234f07b..debb7b3b4 100644
--- a/tags/my-sql/index.html
+++ b/tags/my-sql/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/network/index.html b/tags/network/index.html
index cec6f7862..e0751ccac 100644
--- a/tags/network/index.html
+++ b/tags/network/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/node-js/index.html b/tags/node-js/index.html
index 4ddec5695..9dd7ce661 100644
--- a/tags/node-js/index.html
+++ b/tags/node-js/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/oracle/index.html b/tags/oracle/index.html
index 63a0b52ac..9488112d6 100644
--- a/tags/oracle/index.html
+++ b/tags/oracle/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/pdf/index.html b/tags/pdf/index.html
index f80d22b52..f3af9ecf8 100644
--- a/tags/pdf/index.html
+++ b/tags/pdf/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/react/index.html b/tags/react/index.html
index 6a1407063..3e7246916 100644
--- a/tags/react/index.html
+++ b/tags/react/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/semantic-web/index.html b/tags/semantic-web/index.html
index c5a40d6da..71acefc42 100644
--- a/tags/semantic-web/index.html
+++ b/tags/semantic-web/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/sentry/index.html b/tags/sentry/index.html
index b776b371a..23dba295f 100644
--- a/tags/sentry/index.html
+++ b/tags/sentry/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/seo/index.html b/tags/seo/index.html
index 7565b112f..7d9461bf6 100644
--- a/tags/seo/index.html
+++ b/tags/seo/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/spring-boot/index.html b/tags/spring-boot/index.html
index 43088e176..a58797c67 100644
--- a/tags/spring-boot/index.html
+++ b/tags/spring-boot/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/spring-security/index.html b/tags/spring-security/index.html
index 0151e277f..9aa9afef1 100644
--- a/tags/spring-security/index.html
+++ b/tags/spring-security/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/tool/index.html b/tags/tool/index.html
index a2d35b673..b518af83f 100644
--- a/tags/tool/index.html
+++ b/tags/tool/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/travis-ci/index.html b/tags/travis-ci/index.html
index f35ac9636..b78a1306f 100644
--- a/tags/travis-ci/index.html
+++ b/tags/travis-ci/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git "a/tags/tripllo-\354\240\234\354\236\221\352\270\260/index.html" "b/tags/tripllo-\354\240\234\354\236\221\352\270\260/index.html"
index 19155d5c9..2f49aead7 100644
--- "a/tags/tripllo-\354\240\234\354\236\221\352\270\260/index.html"
+++ "b/tags/tripllo-\354\240\234\354\236\221\352\270\260/index.html"
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/type-script/index.html b/tags/type-script/index.html
index 9201cd346..6a8f3bbaf 100644
--- a/tags/type-script/index.html
+++ b/tags/type-script/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/uri/index.html b/tags/uri/index.html
index cf3afd0ee..7160012d0 100644
--- a/tags/uri/index.html
+++ b/tags/uri/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/vue-js/index.html b/tags/vue-js/index.html
index 72770fd83..0d7560e5f 100644
--- a/tags/vue-js/index.html
+++ b/tags/vue-js/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tags/webpack/index.html b/tags/webpack/index.html
index 6249759c5..49db672f5 100644
--- a/tags/webpack/index.html
+++ b/tags/webpack/index.html
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git "a/tags/\353\246\254\355\214\251\355\206\240\353\247\201/index.html" "b/tags/\353\246\254\355\214\251\355\206\240\353\247\201/index.html"
index 10149f938..99242ae76 100644
--- "a/tags/\353\246\254\355\214\251\355\206\240\353\247\201/index.html"
+++ "b/tags/\353\246\254\355\214\251\355\206\240\353\247\201/index.html"
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git "a/tags/\354\227\220\353\237\254-\353\252\250\353\213\210\355\204\260\353\247\201/index.html" "b/tags/\354\227\220\353\237\254-\353\252\250\353\213\210\355\204\260\353\247\201/index.html"
index 71e284217..4bf584a95 100644
--- "a/tags/\354\227\220\353\237\254-\353\252\250\353\213\210\355\204\260\353\247\201/index.html"
+++ "b/tags/\354\227\220\353\237\254-\353\252\250\353\213\210\355\204\260\353\247\201/index.html"
@@ -64,4 +64,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tripllo/(1)production-motive/index.html b/tripllo/(1)production-motive/index.html
index 0e93869b8..dea957243 100644
--- a/tripllo/(1)production-motive/index.html
+++ b/tripllo/(1)production-motive/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(1) 제작동기</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(1) 제작동기</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Trello 어플리케이션을 만들기 시작한 지 벌써 2달이 조금 안 되었다. 하루에 10시간씩 꼬박 시간을 들여가며 만드는 시간이 조급하면서도 즐거웠다. 현재 어플 상태는 3/4 정도 만들어진 상태로 배포되어 있다. 어플을 만들면서 다음번에 같은 문제를 만났을 때 참고할 만한 자료를 남겨두어야지 생각만 하다가 지금부터라도 남겨두어야겠다 싶어 제작기를 적으려고 한다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-02-03">03 Feb 2021</time><span class="byline-reading-time"><span class="bull">•</span>6 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:72.62872628726286%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAACI0lEQVQ4y42UPWgUQRiG06udjSKCICIKGrESoxbplGinVbAVtFMLQVBBsBSbtBbWdnY2go1NAoman4uXy/3kspdk/3d2Z3Zm75EZTbhgEm/hZVlmvmffd75vdyQSGQvtFr8aHRp+D6U0stR0PZ/llQ69rQhRKJKsoJB2zSCVRg3cBzVSGsPzTx+48fIxs36LSlUobYgS4aBplpOkgijOUKpEa1uo94Q5YF/1mdtqM/XjM1SQigJt+vhhykrLI5WGONckhSYSJaEoKQ5ymInCxbTKC+XiaVMRRCnfF1epdXx6icKLpdN6LF30fYF5IRG5QhYVFr69yRbFiXBxjalcVPNX+8H+nKGqEDLFi1tUBufSLjTbPeZrTRd9GzCo/R3KnI8/3zH17Qm1zRlMCVKVzvVq22Oh1sTbCAjj7B/gng5FkfF++gVvvtxntvuVvoZCKUpdEUYZyytrrlH2+SBnuyJvpuss9WbcOdnIdtZKbQgssLGGtxG6Zv0P5oB2gz07+uwUWDd2Dmv1Dht+7BzmshwOmGQ5m0HEVhDih8lOQSYkcZpjqr7TYOQDgQ+evuLo2aucGB3nzJWbzC/VsVd9tesaYufRvsjCh3J4e/Ihx86Pcf3WPY6cuszM3IIDWpAF+kHi3Ga5HA44MfmIQ8dPc/7SRQ6fvMD03KID2jFptDz3U7BfzjAwB3z2+i3nrt1hdPwuYxOT1OrNHYfdXrBrqIdx+Bsz92FGC5zB8gAAAABJRU5ErkJggg==" alt=""/><picture><source type="image/avif" data-srcset="/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/676a5/tripllo1.avif 750w,/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/e198f/tripllo1.avif 1080w,/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/e7002/tripllo1.avif 1107w" sizes="100vw"/><source type="image/webp" data-srcset="/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/3c28e/tripllo1.webp 750w,/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/d475f/tripllo1.webp 1080w,/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/b6a06/tripllo1.webp 1107w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/e4152/tripllo1.png" data-srcset="/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/17a2a/tripllo1.png 750w,/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/55283/tripllo1.png 1080w,/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/e4152/tripllo1.png 1107w" alt="(1) 제작동기"/></picture><noscript><picture><source type="image/avif" srcSet="/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/676a5/tripllo1.avif 750w,/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/e198f/tripllo1.avif 1080w,/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/e7002/tripllo1.avif 1107w" sizes="100vw"/><source type="image/webp" srcSet="/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/3c28e/tripllo1.webp 750w,/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/d475f/tripllo1.webp 1080w,/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/b6a06/tripllo1.webp 1107w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/e4152/tripllo1.png" srcSet="/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/17a2a/tripllo1.png 750w,/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/55283/tripllo1.png 1080w,/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/e4152/tripllo1.png 1107w" alt="(1) 제작동기"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(1) 제작동기</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(1) 제작동기</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Trello 어플리케이션을 만들기 시작한 지 벌써 2달이 조금 안 되었다. 하루에 10시간씩 꼬박 시간을 들여가며 만드는 시간이 조급하면서도 즐거웠다. 현재 어플 상태는 3/4 정도 만들어진 상태로 배포되어 있다. 어플을 만들면서 다음번에 같은 문제를 만났을 때 참고할 만한 자료를 남겨두어야지 생각만 하다가 지금부터라도 남겨두어야겠다 싶어 제작기를 적으려고 한다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-02-03">03 Feb 2021</time><span class="byline-reading-time"><span class="bull">•</span>6 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:72.62872628726286%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAACI0lEQVQ4y42UPWgUQRiG06udjSKCICIKGrESoxbplGinVbAVtFMLQVBBsBSbtBbWdnY2go1NAoman4uXy/3kspdk/3d2Z3Zm75EZTbhgEm/hZVlmvmffd75vdyQSGQvtFr8aHRp+D6U0stR0PZ/llQ69rQhRKJKsoJB2zSCVRg3cBzVSGsPzTx+48fIxs36LSlUobYgS4aBplpOkgijOUKpEa1uo94Q5YF/1mdtqM/XjM1SQigJt+vhhykrLI5WGONckhSYSJaEoKQ5ymInCxbTKC+XiaVMRRCnfF1epdXx6icKLpdN6LF30fYF5IRG5QhYVFr69yRbFiXBxjalcVPNX+8H+nKGqEDLFi1tUBufSLjTbPeZrTRd9GzCo/R3KnI8/3zH17Qm1zRlMCVKVzvVq22Oh1sTbCAjj7B/gng5FkfF++gVvvtxntvuVvoZCKUpdEUYZyytrrlH2+SBnuyJvpuss9WbcOdnIdtZKbQgssLGGtxG6Zv0P5oB2gz07+uwUWDd2Dmv1Dht+7BzmshwOmGQ5m0HEVhDih8lOQSYkcZpjqr7TYOQDgQ+evuLo2aucGB3nzJWbzC/VsVd9tesaYufRvsjCh3J4e/Ihx86Pcf3WPY6cuszM3IIDWpAF+kHi3Ga5HA44MfmIQ8dPc/7SRQ6fvMD03KID2jFptDz3U7BfzjAwB3z2+i3nrt1hdPwuYxOT1OrNHYfdXrBrqIdx+Bsz92FGC5zB8gAAAABJRU5ErkJggg==" alt=""/><picture><source type="image/avif" data-srcset="/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/676a5/tripllo1.avif 750w,/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/e198f/tripllo1.avif 1080w,/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/e7002/tripllo1.avif 1107w" sizes="100vw"/><source type="image/webp" data-srcset="/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/3c28e/tripllo1.webp 750w,/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/d475f/tripllo1.webp 1080w,/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/b6a06/tripllo1.webp 1107w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/e4152/tripllo1.png" data-srcset="/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/17a2a/tripllo1.png 750w,/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/55283/tripllo1.png 1080w,/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/e4152/tripllo1.png 1107w" alt="(1) 제작동기"/></picture><noscript><picture><source type="image/avif" srcSet="/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/676a5/tripllo1.avif 750w,/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/e198f/tripllo1.avif 1080w,/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/e7002/tripllo1.avif 1107w" sizes="100vw"/><source type="image/webp" srcSet="/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/3c28e/tripllo1.webp 750w,/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/d475f/tripllo1.webp 1080w,/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/b6a06/tripllo1.webp 1107w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/e4152/tripllo1.png" srcSet="/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/17a2a/tripllo1.png 750w,/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/55283/tripllo1.png 1080w,/static/bf24ba2ee5132b0ee0bdfdda2b735e7d/e4152/tripllo1.png 1107w" alt="(1) 제작동기"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -90,4 +90,4 @@ <h2 id="마음가짐" style="position:relative">마음가짐<a href="#%EB%A7%88%
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tripllo/(10)vue-travis-automation/index.html b/tripllo/(10)vue-travis-automation/index.html
index 61480b091..a4baf0bfc 100644
--- a/tripllo/(10)vue-travis-automation/index.html
+++ b/tripllo/(10)vue-travis-automation/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(10) Frontend -travis 배포 자동화</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/travis-ci/">Travis CI</a>,  <a href="/tags/auto-mation/">AutoMation</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(10) Frontend -travis 배포 자동화</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Vue프로젝트를 aws의 S3와 CloudFront에 Travis CI를 통해 배포 자동화를 해보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-04-07">07 Apr 2021</time><span class="byline-reading-time"><span class="bull">•</span>17 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:100.664767331434%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFzUlEQVQ4yyWMeUyb9xnHn9B0/aOT0ims3dJClUFCCIkN2Ly8ry+MjTEGXnyf+AAb4wsbMDYmJCOEq02WQVIirpy9pHbVDm1qoh1/ZFPWtVmTRalUbZpULdsUdetW9Vo1Cv59J7NH+vzz/Xz0EBFRiucpwPGklzWX0aFGQthEKhnnWlAK13+kER6+qRG239QIW2+ohQcnFcIP6xqa2r8waIgqJHSkgSvTy5rJ0dRMO9cicKQ/0kz6+uayxyqbiCQN5RMK/vpNrRL3W5V416jFH0x63DPp8fv2FtxrVeKXWiWSPH+N6moeo70yqq3jymqqOZI2cES7KpvoyEFuFz0lJ9ojK5/jhPf/rFPjLwbl1qqK38pOzRXPLl9gp8+9wMa+O1Nc4eVb/zCqt+9pVSjIhV8RHX6USEJPPMPtIpIRUbmcsKwqw290dLKLv/5OQIF/5hSbNwc5tuaR41pcy86fGmeLk2n2UlzLVpyNeDvFs4cjis1bfgVGOppX78cV9Ouo8AhRPdExO7/bKG8knZp3vpUTcGdS2PrglMAuBZvYKy4J+3TyMNam0tiYHMBnx2qxYpGw16IcezDDs7uTQvHnwzwqpDxXVdVAfe3cbmpTckRU/c1Zi/zunSyH79ll2+u+Bgx2NLCXYlLcmZNh7YUlrC0usLvzjVgJS1labGQXgzJc8Mq3bo9wyHXIbhDt/tq3q2REimZO8eKQ+pOHVzvx1qWu4o83RHx4L8wWZzRYmpfgyoocmWE/Rkd9uLoqY2emj+LiOT0+fG+A/fSyiNsvmot/vdKJCzHVg4pD8u+Q06oZ/+OtEP7zUfKrGz8xY2XZzF5/xcUur4hYXTLh8gURa0sGrJ0zsKsrItbPd7Jr62b2xqturC2L7Bc/s2Hz4+TW2zd6odMq7GS1ayM/eNWLjeXU9nPTBTY3PcFmp/JYWszjxGQEfcMWhAp2BCI9LBruwYkTEbb4/Rybns7h1KkCm58tsCtr6eLqsgPNSr6VKp99strndHwxNjOF7uM+Zghb0X3SB4fVjb7QIDKjeaSHx5BJjyGTybF4NIWwN4B4IMBivX6YnY7i8MQkLFbnR0S0h6hmT4U55vl38tgQVBZVsdWlh9ljhKfHjH5bNwYcZvitPSVYxGFGwmVhQaedhW0ixgIu1m8xsVQqwXqibjwrO+yho+38y9qIiPxwfjvU3YXRXjciVguaNG0IWEQk/B4UJiYxcew4En7vziZXl1wP8v0+xJwWls/lmdLbhWpZfYhqRY2rsVuFfDbPkpH+YsLZg7jLwuzteubvNiI7OoZMtB/pSAhj2RyCYgdKLu40s7hDRKK/rzgyloOkW/np4R5dOdX0KlvkoQ6kPDaWGy8gk86wZHQA6cEoy2bHkB5KY2rAvcNQamjnacmVmlI7Pl5Ar8UESaB9q66LP0B1aqOywn8G6i7vl106zeepcACpWJQNxWMs1R9gWb8V+T4nsgE7hn0WpPr9/3elJhxkOrXqvwfENCr8Zz7nqp+qpBqhXfGtxMt40n/+fXVDXTYXsGE64tg60W/HfNzD5hI+lnCbUWI+2ctKW8lNRxzF8aANQmP98+WJ1z7eN7C+KX368X3Uouyw+Qcm0emO5j/43S1yi6b3nhsK4nQmtJkP2qB3J1nb8OIOBleMFUI2nM70fbWQCsAldt4HQD3BkUvB6HEcPSBpIqsxfzNmX4Goj+ZMrYNUVcdJ+6xdny0k/ZiJezd99oFtr3OBeZzzrNce3p5LeDfnk354xY4vK2uaZN7OWbIahjYSzosw6qLXSDSkzw4619HWEhq2m2Zof+3TVHFQInWY2v5UCNkxG/NgPBhEIRjEXNyD8ZAdlnbd3545KOH3VDxOZ9N/p25DZi3m3IBO44uRQhB5Y2vknVqJZK+0sYlaVJrdVbVSIvrG11WCcNzdafhtxGb8V9hm/MRparut5IU5emL/3v2HpKRWtj6qVTtJrbQeaW8Nv1tXL9v3P3pg31CCEke/AAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/49f04b06d4009a791ea88d198934da29/2139a/travis.avif 750w,/static/49f04b06d4009a791ea88d198934da29/5dcc9/travis.avif 1053w" sizes="100vw"/><source type="image/webp" data-srcset="/static/49f04b06d4009a791ea88d198934da29/ffebb/travis.webp 750w,/static/49f04b06d4009a791ea88d198934da29/76746/travis.webp 1053w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/49f04b06d4009a791ea88d198934da29/2b5bd/travis.png" data-srcset="/static/49f04b06d4009a791ea88d198934da29/343d5/travis.png 750w,/static/49f04b06d4009a791ea88d198934da29/2b5bd/travis.png 1053w" alt="(10) Frontend -travis 배포 자동화"/></picture><noscript><picture><source type="image/avif" srcSet="/static/49f04b06d4009a791ea88d198934da29/2139a/travis.avif 750w,/static/49f04b06d4009a791ea88d198934da29/5dcc9/travis.avif 1053w" sizes="100vw"/><source type="image/webp" srcSet="/static/49f04b06d4009a791ea88d198934da29/ffebb/travis.webp 750w,/static/49f04b06d4009a791ea88d198934da29/76746/travis.webp 1053w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/49f04b06d4009a791ea88d198934da29/2b5bd/travis.png" srcSet="/static/49f04b06d4009a791ea88d198934da29/343d5/travis.png 750w,/static/49f04b06d4009a791ea88d198934da29/2b5bd/travis.png 1053w" alt="(10) Frontend -travis 배포 자동화"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(10) Frontend -travis 배포 자동화</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/travis-ci/">Travis CI</a>,  <a href="/tags/auto-mation/">AutoMation</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(10) Frontend -travis 배포 자동화</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Vue프로젝트를 aws의 S3와 CloudFront에 Travis CI를 통해 배포 자동화를 해보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-04-07">07 Apr 2021</time><span class="byline-reading-time"><span class="bull">•</span>17 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:100.664767331434%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFzUlEQVQ4yyWMeUyb9xnHn9B0/aOT0ims3dJClUFCCIkN2Ly8ry+MjTEGXnyf+AAb4wsbMDYmJCOEq02WQVIirpy9pHbVDm1qoh1/ZFPWtVmTRalUbZpULdsUdetW9Vo1Cv59J7NH+vzz/Xz0EBFRiucpwPGklzWX0aFGQthEKhnnWlAK13+kER6+qRG239QIW2+ohQcnFcIP6xqa2r8waIgqJHSkgSvTy5rJ0dRMO9cicKQ/0kz6+uayxyqbiCQN5RMK/vpNrRL3W5V416jFH0x63DPp8fv2FtxrVeKXWiWSPH+N6moeo70yqq3jymqqOZI2cES7KpvoyEFuFz0lJ9ojK5/jhPf/rFPjLwbl1qqK38pOzRXPLl9gp8+9wMa+O1Nc4eVb/zCqt+9pVSjIhV8RHX6USEJPPMPtIpIRUbmcsKwqw290dLKLv/5OQIF/5hSbNwc5tuaR41pcy86fGmeLk2n2UlzLVpyNeDvFs4cjis1bfgVGOppX78cV9Ouo8AhRPdExO7/bKG8knZp3vpUTcGdS2PrglMAuBZvYKy4J+3TyMNam0tiYHMBnx2qxYpGw16IcezDDs7uTQvHnwzwqpDxXVdVAfe3cbmpTckRU/c1Zi/zunSyH79ll2+u+Bgx2NLCXYlLcmZNh7YUlrC0usLvzjVgJS1labGQXgzJc8Mq3bo9wyHXIbhDt/tq3q2REimZO8eKQ+pOHVzvx1qWu4o83RHx4L8wWZzRYmpfgyoocmWE/Rkd9uLoqY2emj+LiOT0+fG+A/fSyiNsvmot/vdKJCzHVg4pD8u+Q06oZ/+OtEP7zUfKrGz8xY2XZzF5/xcUur4hYXTLh8gURa0sGrJ0zsKsrItbPd7Jr62b2xqturC2L7Bc/s2Hz4+TW2zd6odMq7GS1ayM/eNWLjeXU9nPTBTY3PcFmp/JYWszjxGQEfcMWhAp2BCI9LBruwYkTEbb4/Rybns7h1KkCm58tsCtr6eLqsgPNSr6VKp99strndHwxNjOF7uM+Zghb0X3SB4fVjb7QIDKjeaSHx5BJjyGTybF4NIWwN4B4IMBivX6YnY7i8MQkLFbnR0S0h6hmT4U55vl38tgQVBZVsdWlh9ljhKfHjH5bNwYcZvitPSVYxGFGwmVhQaedhW0ixgIu1m8xsVQqwXqibjwrO+yho+38y9qIiPxwfjvU3YXRXjciVguaNG0IWEQk/B4UJiYxcew4En7vziZXl1wP8v0+xJwWls/lmdLbhWpZfYhqRY2rsVuFfDbPkpH+YsLZg7jLwuzteubvNiI7OoZMtB/pSAhj2RyCYgdKLu40s7hDRKK/rzgyloOkW/np4R5dOdX0KlvkoQ6kPDaWGy8gk86wZHQA6cEoy2bHkB5KY2rAvcNQamjnacmVmlI7Pl5Ar8UESaB9q66LP0B1aqOywn8G6i7vl106zeepcACpWJQNxWMs1R9gWb8V+T4nsgE7hn0WpPr9/3elJhxkOrXqvwfENCr8Zz7nqp+qpBqhXfGtxMt40n/+fXVDXTYXsGE64tg60W/HfNzD5hI+lnCbUWI+2ctKW8lNRxzF8aANQmP98+WJ1z7eN7C+KX368X3Uouyw+Qcm0emO5j/43S1yi6b3nhsK4nQmtJkP2qB3J1nb8OIOBleMFUI2nM70fbWQCsAldt4HQD3BkUvB6HEcPSBpIqsxfzNmX4Goj+ZMrYNUVcdJ+6xdny0k/ZiJezd99oFtr3OBeZzzrNce3p5LeDfnk354xY4vK2uaZN7OWbIahjYSzosw6qLXSDSkzw4619HWEhq2m2Zof+3TVHFQInWY2v5UCNkxG/NgPBhEIRjEXNyD8ZAdlnbd3545KOH3VDxOZ9N/p25DZi3m3IBO44uRQhB5Y2vknVqJZK+0sYlaVJrdVbVSIvrG11WCcNzdafhtxGb8V9hm/MRparut5IU5emL/3v2HpKRWtj6qVTtJrbQeaW8Nv1tXL9v3P3pg31CCEke/AAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/49f04b06d4009a791ea88d198934da29/2139a/travis.avif 750w,/static/49f04b06d4009a791ea88d198934da29/5dcc9/travis.avif 1053w" sizes="100vw"/><source type="image/webp" data-srcset="/static/49f04b06d4009a791ea88d198934da29/ffebb/travis.webp 750w,/static/49f04b06d4009a791ea88d198934da29/76746/travis.webp 1053w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/49f04b06d4009a791ea88d198934da29/2b5bd/travis.png" data-srcset="/static/49f04b06d4009a791ea88d198934da29/343d5/travis.png 750w,/static/49f04b06d4009a791ea88d198934da29/2b5bd/travis.png 1053w" alt="(10) Frontend -travis 배포 자동화"/></picture><noscript><picture><source type="image/avif" srcSet="/static/49f04b06d4009a791ea88d198934da29/2139a/travis.avif 750w,/static/49f04b06d4009a791ea88d198934da29/5dcc9/travis.avif 1053w" sizes="100vw"/><source type="image/webp" srcSet="/static/49f04b06d4009a791ea88d198934da29/ffebb/travis.webp 750w,/static/49f04b06d4009a791ea88d198934da29/76746/travis.webp 1053w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/49f04b06d4009a791ea88d198934da29/2b5bd/travis.png" srcSet="/static/49f04b06d4009a791ea88d198934da29/343d5/travis.png 750w,/static/49f04b06d4009a791ea88d198934da29/2b5bd/travis.png 1053w" alt="(10) Frontend -travis 배포 자동화"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -318,4 +318,4 @@ <h2 id="CloudFront-배포-설정" style="position:relative">CloudFront 배포 
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tripllo/(11)vue-sentry-error-monitoring-system/index.html b/tripllo/(11)vue-sentry-error-monitoring-system/index.html
index 0fa10b66f..a411b6efa 100644
--- a/tripllo/(11)vue-sentry-error-monitoring-system/index.html
+++ b/tripllo/(11)vue-sentry-error-monitoring-system/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(11) Sentry 에러 로깅 시스템 도입</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/sentry/">Sentry</a>,  <a href="/tags/에러-모니터링/">에러 모니터링</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(11) Sentry 에러 로깅 시스템 도입</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Sentry를 통해 프론트엔드 에러 로깅 시스템을 도입해보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-04-10">10 Apr 2021</time><span class="byline-reading-time"><span class="bull">•</span>17 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:55.55555555555556%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABRElEQVQoz6VS207CQBDt/z/44oMmagBFJXKTtqyUCFJuAQrl3hYSLKKChBifGsouO2ugkXJ5MXqyyU7m7JndPTMc+wc4Z6OUAsAOA2w7AeCuHfFG5gTbVeAHexkK1L1ZQoWebjrccrlcLDClYFlzSsF5F8aEYIIxsW3sHKOUrsSj4cR3wSfiecuaM8aioVRN0SRUKBdbwn2mofaUcidy94iEHB/NxPlsQsy36v2ebnKEkGtv3O8TQ4FkpdRmjOVkVYzJx0c3pUIT8VnfeSzgf1AVraEaVx7h0iPUFP38NGzbmGs1+36veHYSDt4mo8HUbPbVbQ+SqIj4bEoq1WvG2+tUTldHL5OhOTZ0U+sMxu8zQ3te/bla6fKRJzldlVBRKXemH58Hnu13aO05uIYd0LBxfu0NbGNTnXNput+V3w7J3ybsGxUVZVdbkFoQAAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/bf7a9491463863772f181d36c58051fa/4bc47/sentry.avif 750w,/static/bf7a9491463863772f181d36c58051fa/80d3b/sentry.avif 900w" sizes="100vw"/><source type="image/webp" data-srcset="/static/bf7a9491463863772f181d36c58051fa/fdac4/sentry.webp 750w,/static/bf7a9491463863772f181d36c58051fa/ff899/sentry.webp 900w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/bf7a9491463863772f181d36c58051fa/245fe/sentry.png" data-srcset="/static/bf7a9491463863772f181d36c58051fa/6f128/sentry.png 750w,/static/bf7a9491463863772f181d36c58051fa/245fe/sentry.png 900w" alt="(11) Sentry 에러 로깅 시스템 도입"/></picture><noscript><picture><source type="image/avif" srcSet="/static/bf7a9491463863772f181d36c58051fa/4bc47/sentry.avif 750w,/static/bf7a9491463863772f181d36c58051fa/80d3b/sentry.avif 900w" sizes="100vw"/><source type="image/webp" srcSet="/static/bf7a9491463863772f181d36c58051fa/fdac4/sentry.webp 750w,/static/bf7a9491463863772f181d36c58051fa/ff899/sentry.webp 900w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/bf7a9491463863772f181d36c58051fa/245fe/sentry.png" srcSet="/static/bf7a9491463863772f181d36c58051fa/6f128/sentry.png 750w,/static/bf7a9491463863772f181d36c58051fa/245fe/sentry.png 900w" alt="(11) Sentry 에러 로깅 시스템 도입"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(11) Sentry 에러 로깅 시스템 도입</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/sentry/">Sentry</a>,  <a href="/tags/에러-모니터링/">에러 모니터링</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(11) Sentry 에러 로깅 시스템 도입</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Sentry를 통해 프론트엔드 에러 로깅 시스템을 도입해보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-04-10">10 Apr 2021</time><span class="byline-reading-time"><span class="bull">•</span>17 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:55.55555555555556%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABRElEQVQoz6VS207CQBDt/z/44oMmagBFJXKTtqyUCFJuAQrl3hYSLKKChBifGsouO2ugkXJ5MXqyyU7m7JndPTMc+wc4Z6OUAsAOA2w7AeCuHfFG5gTbVeAHexkK1L1ZQoWebjrccrlcLDClYFlzSsF5F8aEYIIxsW3sHKOUrsSj4cR3wSfiecuaM8aioVRN0SRUKBdbwn2mofaUcidy94iEHB/NxPlsQsy36v2ebnKEkGtv3O8TQ4FkpdRmjOVkVYzJx0c3pUIT8VnfeSzgf1AVraEaVx7h0iPUFP38NGzbmGs1+36veHYSDt4mo8HUbPbVbQ+SqIj4bEoq1WvG2+tUTldHL5OhOTZ0U+sMxu8zQ3te/bla6fKRJzldlVBRKXemH58Hnu13aO05uIYd0LBxfu0NbGNTnXNput+V3w7J3ybsGxUVZVdbkFoQAAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/bf7a9491463863772f181d36c58051fa/4bc47/sentry.avif 750w,/static/bf7a9491463863772f181d36c58051fa/80d3b/sentry.avif 900w" sizes="100vw"/><source type="image/webp" data-srcset="/static/bf7a9491463863772f181d36c58051fa/fdac4/sentry.webp 750w,/static/bf7a9491463863772f181d36c58051fa/ff899/sentry.webp 900w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/bf7a9491463863772f181d36c58051fa/245fe/sentry.png" data-srcset="/static/bf7a9491463863772f181d36c58051fa/6f128/sentry.png 750w,/static/bf7a9491463863772f181d36c58051fa/245fe/sentry.png 900w" alt="(11) Sentry 에러 로깅 시스템 도입"/></picture><noscript><picture><source type="image/avif" srcSet="/static/bf7a9491463863772f181d36c58051fa/4bc47/sentry.avif 750w,/static/bf7a9491463863772f181d36c58051fa/80d3b/sentry.avif 900w" sizes="100vw"/><source type="image/webp" srcSet="/static/bf7a9491463863772f181d36c58051fa/fdac4/sentry.webp 750w,/static/bf7a9491463863772f181d36c58051fa/ff899/sentry.webp 900w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/bf7a9491463863772f181d36c58051fa/245fe/sentry.png" srcSet="/static/bf7a9491463863772f181d36c58051fa/6f128/sentry.png 750w,/static/bf7a9491463863772f181d36c58051fa/245fe/sentry.png 900w" alt="(11) Sentry 에러 로깅 시스템 도입"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -261,4 +261,4 @@ <h3 id="development-환경-막기" style="position:relative">development 환경
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tripllo/(12)aws-lets-encrypt-renewal-automation/index.html b/tripllo/(12)aws-lets-encrypt-renewal-automation/index.html
index 00d133eb5..cc8df5726 100644
--- a/tripllo/(12)aws-lets-encrypt-renewal-automation/index.html
+++ b/tripllo/(12)aws-lets-encrypt-renewal-automation/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(12) Let&#x27;s Encrypt 갱신 자동화</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/lets-encrypt/">Let&#x27;s Encrypt</a>,  <a href="/tags/auto-mation/">AutoMation</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(12) Let&#x27;s Encrypt 갱신 자동화</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">AWS EC2 환경에서 Nginx와 Let&#x27;s Encrypt로 HTTPS SSL 인증서 갱신 자동화를 해보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-04-12">12 Apr 2021</time><span class="byline-reading-time"><span class="bull">•</span>10 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:82.5%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAA3XAAAN1wFCKJt4AAACuklEQVQ4y42T30sUURTHvzO7hm8Z/RAhiLB6CCN6Ee/ZDTJJyozKxMIHoxLMZD2nQqk0IdEU/IWIkJG0OtsPKx8EIyN6yZdKEKSf4Fv2LyQF6o2ZubO72oMNfJkzc+587vmeOwdY59IOsOL4d+3A1glYOgEYWe67tPz61xogVnxQVCeQnwT/L3DN4izt4JKBlOgEClccr9pqnUBmAAeIVyv9HRbwtnM7FkdCWHaApVGr6tfDcPTPiF31e8Q+vRgPHVkatc66ucV4yPKBSiwj+HJh4so6f6HYrdPd2V52UKrfYIt+gTt6DDN6DHN6HNf0JHKWHBybH9xoLCdBYoHYckEGCOxpQ1FFGcZbczfox6ia7so5OdO77Wur5JcNN+2t/dCT/XG2b+sZ/QTnzMaevXIQV/o2JVAmSPZBSQmIT2Qduoyhm3nA/ls3UHBVQ8myJzfOa6lprIsgIxoLB8DbUNzsAZU0gKQPJC0gmXdhUDII4p5vA5vC4UisFcQaxEMgTrhxRjTWgF0d7rdJYDMU34fi3SBZAMlrkHSC5KXXCuJ6KP4E4s0gbjPA7yD+6cVKWkzLwv5BkhwGySRIaqGYobgbxDtAMgDincb2IyjOAnEFFL+D4jcgngLxNIiLzV8RCoClUPIUJHXGNlJ3sf85/eA5GfMBEOd6ecWWm7gOks8gLoHiGih5BeIYyIvv+RtJHMTtXoUkTSDpB8kDkNSD+D2I+9OB7kHMgbgIiuMg6QbJFJTMQslBkHR4PVWuff4B4rtQ8gyKG6F4AsTPQVxtbNsusBAkw1B8BUoqTU/dXpVDSS9ILkJJxFj+AuIIiB2QTEDJKZAc9YsKpivoV9C7QOm98nUcxF0mbgdJdmpt2j9spiOUmpRAYpupsc1opg6oIDlZtp/3vgkqDCrg1RWpNTsH45nuZtXs+8C/7RNh/RVd2LEAAAAASUVORK5CYII=" alt=""/><picture><source type="image/avif" data-srcset="/static/58a4a7e8eb69b8bdbea5d60e52f4155d/daee1/lets-encrypt.avif 640w" sizes="100vw"/><source type="image/webp" data-srcset="/static/58a4a7e8eb69b8bdbea5d60e52f4155d/b659a/lets-encrypt.webp 640w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/58a4a7e8eb69b8bdbea5d60e52f4155d/abc1a/lets-encrypt.png" data-srcset="/static/58a4a7e8eb69b8bdbea5d60e52f4155d/abc1a/lets-encrypt.png 640w" alt="(12) Let&#x27;s Encrypt 갱신 자동화"/></picture><noscript><picture><source type="image/avif" srcSet="/static/58a4a7e8eb69b8bdbea5d60e52f4155d/daee1/lets-encrypt.avif 640w" sizes="100vw"/><source type="image/webp" srcSet="/static/58a4a7e8eb69b8bdbea5d60e52f4155d/b659a/lets-encrypt.webp 640w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/58a4a7e8eb69b8bdbea5d60e52f4155d/abc1a/lets-encrypt.png" srcSet="/static/58a4a7e8eb69b8bdbea5d60e52f4155d/abc1a/lets-encrypt.png 640w" alt="(12) Let&#x27;s Encrypt 갱신 자동화"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(12) Let&#x27;s Encrypt 갱신 자동화</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/lets-encrypt/">Let&#x27;s Encrypt</a>,  <a href="/tags/auto-mation/">AutoMation</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(12) Let&#x27;s Encrypt 갱신 자동화</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">AWS EC2 환경에서 Nginx와 Let&#x27;s Encrypt로 HTTPS SSL 인증서 갱신 자동화를 해보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-04-12">12 Apr 2021</time><span class="byline-reading-time"><span class="bull">•</span>10 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:82.5%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAA3XAAAN1wFCKJt4AAACuklEQVQ4y42T30sUURTHvzO7hm8Z/RAhiLB6CCN6Ee/ZDTJJyozKxMIHoxLMZD2nQqk0IdEU/IWIkJG0OtsPKx8EIyN6yZdKEKSf4Fv2LyQF6o2ZubO72oMNfJkzc+587vmeOwdY59IOsOL4d+3A1glYOgEYWe67tPz61xogVnxQVCeQnwT/L3DN4izt4JKBlOgEClccr9pqnUBmAAeIVyv9HRbwtnM7FkdCWHaApVGr6tfDcPTPiF31e8Q+vRgPHVkatc66ucV4yPKBSiwj+HJh4so6f6HYrdPd2V52UKrfYIt+gTt6DDN6DHN6HNf0JHKWHBybH9xoLCdBYoHYckEGCOxpQ1FFGcZbczfox6ia7so5OdO77Wur5JcNN+2t/dCT/XG2b+sZ/QTnzMaevXIQV/o2JVAmSPZBSQmIT2Qduoyhm3nA/ls3UHBVQ8myJzfOa6lprIsgIxoLB8DbUNzsAZU0gKQPJC0gmXdhUDII4p5vA5vC4UisFcQaxEMgTrhxRjTWgF0d7rdJYDMU34fi3SBZAMlrkHSC5KXXCuJ6KP4E4s0gbjPA7yD+6cVKWkzLwv5BkhwGySRIaqGYobgbxDtAMgDincb2IyjOAnEFFL+D4jcgngLxNIiLzV8RCoClUPIUJHXGNlJ3sf85/eA5GfMBEOd6ecWWm7gOks8gLoHiGih5BeIYyIvv+RtJHMTtXoUkTSDpB8kDkNSD+D2I+9OB7kHMgbgIiuMg6QbJFJTMQslBkHR4PVWuff4B4rtQ8gyKG6F4AsTPQVxtbNsusBAkw1B8BUoqTU/dXpVDSS9ILkJJxFj+AuIIiB2QTEDJKZAc9YsKpivoV9C7QOm98nUcxF0mbgdJdmpt2j9spiOUmpRAYpupsc1opg6oIDlZtp/3vgkqDCrg1RWpNTsH45nuZtXs+8C/7RNh/RVd2LEAAAAASUVORK5CYII=" alt=""/><picture><source type="image/avif" data-srcset="/static/58a4a7e8eb69b8bdbea5d60e52f4155d/daee1/lets-encrypt.avif 640w" sizes="100vw"/><source type="image/webp" data-srcset="/static/58a4a7e8eb69b8bdbea5d60e52f4155d/b659a/lets-encrypt.webp 640w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/58a4a7e8eb69b8bdbea5d60e52f4155d/abc1a/lets-encrypt.png" data-srcset="/static/58a4a7e8eb69b8bdbea5d60e52f4155d/abc1a/lets-encrypt.png 640w" alt="(12) Let&#x27;s Encrypt 갱신 자동화"/></picture><noscript><picture><source type="image/avif" srcSet="/static/58a4a7e8eb69b8bdbea5d60e52f4155d/daee1/lets-encrypt.avif 640w" sizes="100vw"/><source type="image/webp" srcSet="/static/58a4a7e8eb69b8bdbea5d60e52f4155d/b659a/lets-encrypt.webp 640w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/58a4a7e8eb69b8bdbea5d60e52f4155d/abc1a/lets-encrypt.png" srcSet="/static/58a4a7e8eb69b8bdbea5d60e52f4155d/abc1a/lets-encrypt.png 640w" alt="(12) Let&#x27;s Encrypt 갱신 자동화"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -189,4 +189,4 @@ <h3 id="3개월에-한번-갱신되도록-수정" style="position:relative">3개
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tripllo/(13)Vuex-and-eventBus/index.html b/tripllo/(13)Vuex-and-eventBus/index.html
index 4c67c07aa..e59da2e16 100644
--- a/tripllo/(13)Vuex-and-eventBus/index.html
+++ b/tripllo/(13)Vuex-and-eventBus/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(13) Vuex-store와 EventBus에 대한 고찰</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/vue-js/">Vue.js</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(13) Vuex-store와 EventBus에 대한 고찰</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">데이터를 Vuex store에 저장시키지 말고 로컬 컴포넌트에서 불러와 EventBus로 통신을 하면 어떻게 될까? 라는 물음에서 시작된 삽질기.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-04-17">17 Apr 2021</time><span class="byline-reading-time"><span class="bull">•</span>12 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:49.08854166666667%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA/UlEQVQoz6WSz2qDQBDG80S+hj5FL4E8QQ/+yVG8eVAQ3EtK8gYJkSB4EKyechDBvRdK4qVgQKNsdjaBbDRpkbTQ32kYmO8b5pvR+R+M+goAKD2xjr7PGKOUnjqGhx+5Ct0AgGfO3Ge//9xu36uqAgDuwPtt26ZpGsdxFEVJkhBCBpwX87ep9rpcrhzH8X0/DEPP84IgME3TsixJkgRBEEWxKIpe9+48X8zGk5fNZo0Qcl1X13VZlhFCqqratq0oiqZphmGUZfltmFMevnbFR9Mcm6YlhAAA37Cua4xxlmV5nmOMh9f+Add+PPuzqBgDAGBD8Kj48X+P6o9PcgF1KCp/fhR+JgAAAABJRU5ErkJggg==" alt=""/><picture><source type="image/avif" data-srcset="/static/85c56d21ae8553ca810facc54736204f/66eaa/eventBus.avif 750w,/static/85c56d21ae8553ca810facc54736204f/4da01/eventBus.avif 768w" sizes="100vw"/><source type="image/webp" data-srcset="/static/85c56d21ae8553ca810facc54736204f/bcdb5/eventBus.webp 750w,/static/85c56d21ae8553ca810facc54736204f/b3cd2/eventBus.webp 768w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/85c56d21ae8553ca810facc54736204f/2ebcf/eventBus.png" data-srcset="/static/85c56d21ae8553ca810facc54736204f/da04c/eventBus.png 750w,/static/85c56d21ae8553ca810facc54736204f/2ebcf/eventBus.png 768w" alt="(13) Vuex-store와 EventBus에 대한 고찰"/></picture><noscript><picture><source type="image/avif" srcSet="/static/85c56d21ae8553ca810facc54736204f/66eaa/eventBus.avif 750w,/static/85c56d21ae8553ca810facc54736204f/4da01/eventBus.avif 768w" sizes="100vw"/><source type="image/webp" srcSet="/static/85c56d21ae8553ca810facc54736204f/bcdb5/eventBus.webp 750w,/static/85c56d21ae8553ca810facc54736204f/b3cd2/eventBus.webp 768w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/85c56d21ae8553ca810facc54736204f/2ebcf/eventBus.png" srcSet="/static/85c56d21ae8553ca810facc54736204f/da04c/eventBus.png 750w,/static/85c56d21ae8553ca810facc54736204f/2ebcf/eventBus.png 768w" alt="(13) Vuex-store와 EventBus에 대한 고찰"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(13) Vuex-store와 EventBus에 대한 고찰</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/vue-js/">Vue.js</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(13) Vuex-store와 EventBus에 대한 고찰</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">데이터를 Vuex store에 저장시키지 말고 로컬 컴포넌트에서 불러와 EventBus로 통신을 하면 어떻게 될까? 라는 물음에서 시작된 삽질기.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-04-17">17 Apr 2021</time><span class="byline-reading-time"><span class="bull">•</span>12 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:49.08854166666667%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA/UlEQVQoz6WSz2qDQBDG80S+hj5FL4E8QQ/+yVG8eVAQ3EtK8gYJkSB4EKyechDBvRdK4qVgQKNsdjaBbDRpkbTQ32kYmO8b5pvR+R+M+goAKD2xjr7PGKOUnjqGhx+5Ct0AgGfO3Ge//9xu36uqAgDuwPtt26ZpGsdxFEVJkhBCBpwX87ep9rpcrhzH8X0/DEPP84IgME3TsixJkgRBEEWxKIpe9+48X8zGk5fNZo0Qcl1X13VZlhFCqqratq0oiqZphmGUZfltmFMevnbFR9Mcm6YlhAAA37Cua4xxlmV5nmOMh9f+Add+PPuzqBgDAGBD8Kj48X+P6o9PcgF1KCp/fhR+JgAAAABJRU5ErkJggg==" alt=""/><picture><source type="image/avif" data-srcset="/static/85c56d21ae8553ca810facc54736204f/66eaa/eventBus.avif 750w,/static/85c56d21ae8553ca810facc54736204f/4da01/eventBus.avif 768w" sizes="100vw"/><source type="image/webp" data-srcset="/static/85c56d21ae8553ca810facc54736204f/bcdb5/eventBus.webp 750w,/static/85c56d21ae8553ca810facc54736204f/b3cd2/eventBus.webp 768w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/85c56d21ae8553ca810facc54736204f/2ebcf/eventBus.png" data-srcset="/static/85c56d21ae8553ca810facc54736204f/da04c/eventBus.png 750w,/static/85c56d21ae8553ca810facc54736204f/2ebcf/eventBus.png 768w" alt="(13) Vuex-store와 EventBus에 대한 고찰"/></picture><noscript><picture><source type="image/avif" srcSet="/static/85c56d21ae8553ca810facc54736204f/66eaa/eventBus.avif 750w,/static/85c56d21ae8553ca810facc54736204f/4da01/eventBus.avif 768w" sizes="100vw"/><source type="image/webp" srcSet="/static/85c56d21ae8553ca810facc54736204f/bcdb5/eventBus.webp 750w,/static/85c56d21ae8553ca810facc54736204f/b3cd2/eventBus.webp 768w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/85c56d21ae8553ca810facc54736204f/2ebcf/eventBus.png" srcSet="/static/85c56d21ae8553ca810facc54736204f/da04c/eventBus.png 750w,/static/85c56d21ae8553ca810facc54736204f/2ebcf/eventBus.png 768w" alt="(13) Vuex-store와 EventBus에 대한 고찰"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -226,4 +226,4 @@ <h2 id="더미-데이터로-속도-측정하기" style="position:relative">더
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tripllo/(14)Closure-Currying/index.html b/tripllo/(14)Closure-Currying/index.html
index 2ac50f721..4522ac396 100644
--- a/tripllo/(14)Closure-Currying/index.html
+++ b/tripllo/(14)Closure-Currying/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(14) Closure &amp; Currying 적용기</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/java-script/">JavaScript</a>,  <a href="/tags/vue-js/">Vue.js</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(14) Closure &amp; Currying 적용기</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">함수형 프로그래밍에 대해서 공부하다가 Tripllo에 적용한 클로저와 커링.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-05-01">01 May 2021</time><span class="byline-reading-time"><span class="bull">•</span>7 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:47.28571428571428%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAIAAAC9o5sfAAAACXBIWXMAAAsTAAALEwEAmpwYAAABZElEQVQoz02R266iMBRAz///kpoYo5FUQTKKYCKISIRiQewlbWltJ2OJc9bDfurqSvb+sdYKIRhjQghrrTHGTUIIY0xKyRgzxiilpJRKKfuLn/f7/eeD7/uMsa8fRdF2u02SJAxDYwxCyPO8/X4PISSEjLIxBmP8er2apnEpJwsh3KcIIWvtMAwQwrZtm6bhnI+ytRZjfLvdIIRFUex2u67rvv1hGNw7rTVCSEpZlmUcxy7+r3y5XGazmed5aZoeDoeqqqy1bdvWdZ3neZqmWuu+78MwRAgBAJbLZdM0Y5lzvl6v+77PsmwymUgpKaV5nicf5vN5EARa68ViQSmt6/p4PGqtR1kptdlsuq6L4zhJksfjQQiJ4xgAEAQBAKD6sFqtTqdTFEXT6RRC+F8uyxJj7M7jdv58PouiyLLMreB+v/u+jxC6Xq/n85lSOsrGGK3198Lf+RulFOf8/YFzXlWVMeYvTvPzh1dree4AAAAASUVORK5CYII=" alt=""/><picture><source type="image/avif" data-srcset="/static/4865f93e60f5dd1f48a86f3ec467e982/d6890/currying2.avif 700w" sizes="100vw"/><source type="image/webp" data-srcset="/static/4865f93e60f5dd1f48a86f3ec467e982/2f35d/currying2.webp 700w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/4865f93e60f5dd1f48a86f3ec467e982/51395/currying2.png" data-srcset="/static/4865f93e60f5dd1f48a86f3ec467e982/51395/currying2.png 700w" alt="(14) Closure &amp; Currying 적용기"/></picture><noscript><picture><source type="image/avif" srcSet="/static/4865f93e60f5dd1f48a86f3ec467e982/d6890/currying2.avif 700w" sizes="100vw"/><source type="image/webp" srcSet="/static/4865f93e60f5dd1f48a86f3ec467e982/2f35d/currying2.webp 700w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/4865f93e60f5dd1f48a86f3ec467e982/51395/currying2.png" srcSet="/static/4865f93e60f5dd1f48a86f3ec467e982/51395/currying2.png 700w" alt="(14) Closure &amp; Currying 적용기"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(14) Closure &amp; Currying 적용기</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/java-script/">JavaScript</a>,  <a href="/tags/vue-js/">Vue.js</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(14) Closure &amp; Currying 적용기</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">함수형 프로그래밍에 대해서 공부하다가 Tripllo에 적용한 클로저와 커링.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-05-01">01 May 2021</time><span class="byline-reading-time"><span class="bull">•</span>7 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:47.28571428571428%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAIAAAC9o5sfAAAACXBIWXMAAAsTAAALEwEAmpwYAAABZElEQVQoz02R266iMBRAz///kpoYo5FUQTKKYCKISIRiQewlbWltJ2OJc9bDfurqSvb+sdYKIRhjQghrrTHGTUIIY0xKyRgzxiilpJRKKfuLn/f7/eeD7/uMsa8fRdF2u02SJAxDYwxCyPO8/X4PISSEjLIxBmP8er2apnEpJwsh3KcIIWvtMAwQwrZtm6bhnI+ytRZjfLvdIIRFUex2u67rvv1hGNw7rTVCSEpZlmUcxy7+r3y5XGazmed5aZoeDoeqqqy1bdvWdZ3neZqmWuu+78MwRAgBAJbLZdM0Y5lzvl6v+77PsmwymUgpKaV5nicf5vN5EARa68ViQSmt6/p4PGqtR1kptdlsuq6L4zhJksfjQQiJ4xgAEAQBAKD6sFqtTqdTFEXT6RRC+F8uyxJj7M7jdv58PouiyLLMreB+v/u+jxC6Xq/n85lSOsrGGK3198Lf+RulFOf8/YFzXlWVMeYvTvPzh1dree4AAAAASUVORK5CYII=" alt=""/><picture><source type="image/avif" data-srcset="/static/4865f93e60f5dd1f48a86f3ec467e982/d6890/currying2.avif 700w" sizes="100vw"/><source type="image/webp" data-srcset="/static/4865f93e60f5dd1f48a86f3ec467e982/2f35d/currying2.webp 700w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/4865f93e60f5dd1f48a86f3ec467e982/51395/currying2.png" data-srcset="/static/4865f93e60f5dd1f48a86f3ec467e982/51395/currying2.png 700w" alt="(14) Closure &amp; Currying 적용기"/></picture><noscript><picture><source type="image/avif" srcSet="/static/4865f93e60f5dd1f48a86f3ec467e982/d6890/currying2.avif 700w" sizes="100vw"/><source type="image/webp" srcSet="/static/4865f93e60f5dd1f48a86f3ec467e982/2f35d/currying2.webp 700w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/4865f93e60f5dd1f48a86f3ec467e982/51395/currying2.png" srcSet="/static/4865f93e60f5dd1f48a86f3ec467e982/51395/currying2.png 700w" alt="(14) Closure &amp; Currying 적용기"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -203,4 +203,4 @@ <h2 id="고차-함수로-변환" style="position:relative">고차 함수로 변
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tripllo/(2)mysql-design-spring-boot/index.html b/tripllo/(2)mysql-design-spring-boot/index.html
index 673fecdf3..aea5deb2e 100644
--- a/tripllo/(2)mysql-design-spring-boot/index.html
+++ b/tripllo/(2)mysql-design-spring-boot/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(2) MySQL 설계 &amp; SpringBoot init</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/my-sql/">MySQL</a>,  <a href="/tags/spring-boot/">SpringBoot</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(2) MySQL 설계 &amp; SpringBoot init</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Tripllo 백엔드 세팅을 해보자. Workbench로 DB를 설계하고 MySQL, MyBatis와 SpringBoot를 연동한다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-02-03">03 Feb 2021</time><span class="byline-reading-time"><span class="bull">•</span>11 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:80.23715415019763%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAADBElEQVQ4y52TS2/rRBiGfbhICAn+ABsWoLJlcQL/rvs2UtsNi/6E7hBi1wKtACVOcKL0JGlPG2rHca722E5sz8XjedGM26OeIrFg8egbW55nvovHAmD9+fOP3/zSvvje+ct53el0GqPRqDEej01stVqNq6urxsXFReP8/LzhOI6h2+022u12w7bt17Ztf2fb9rdnZ2cfW5Zlvbobj/7wfBdTb8p93y9Ho1E5HA5NHAwGZa/XK29vb8v7+/vS8zyD/i4IgnI2m4kgCOB53ub09PRLLfxofHPTmdxP4Pt+FUURhsMhBoOB4fr62jCdTrHZbLBcLjGfzxHHMYQQYIwpHZMkSZrN5tda+OH1mze23jSZTEpCiMoLqgrGVbyjKsmoygqquJCqrJQSUqlKQUEppapKIwEgTdP44PDwKyN8+/bOfnhw4bquJISAixIFl0hpiR0rwRmHoAxlWaKqKoPSKKVj9U54cFAL7yZ/2/5iDX++lOswAhMCtKAgW4r1tgDZUURpjlIIoE4OeETn+S/hg+vaXrDEYrmSwXINygXKIsd2E2JFtliQ1IgzKuospXxOpQ9IkyQ+fCp56nm2v1hhsVpJ3WwmStDdDvE8wCJKMdvECKIt4m0ORhk4e4+KMYrVahUfHx8/Cqe18MadSUJicCGQ5gzLNUGcZigoQ86E6avuHZ6VDD2jqjLCo6OjWuh5nh1GkSk5jIgRZlwizijidAfBOaTpH+q+PQ2llle69PeEruva+v8LNxszZd1DyjhIFCEKQ2y3WyPV6M3Ppf8p3DwKhaywyyn86RT6FugfeblY1GKd6ZNQPQpfluy6bisMQ6zXa0EIkdluJ8Mw1AOSMSH6EMkolYJzyRgzaxNrSs45oiiKms1mLfR9/zpJEujs0jTF07ooCnPFdPZZloFSat7pqMnz/N1zHMf85OSkvnqtVuuHfr/fchznV8dxLnu93mW/3798uX5Ju92+7Ha7v3U6nd9t2/5pf3//C2tvb++VZVmfWJb1uWVZn/1P9N5PLcv64B8qWP4/OWZAxwAAAABJRU5ErkJggg==" alt=""/><picture><source type="image/avif" data-srcset="/static/b92b834fea823ff58fb62fb32c1d3cc7/cd2e3/tripllo2.avif 750w,/static/b92b834fea823ff58fb62fb32c1d3cc7/2c052/tripllo2.avif 1012w" sizes="100vw"/><source type="image/webp" data-srcset="/static/b92b834fea823ff58fb62fb32c1d3cc7/1ec5d/tripllo2.webp 750w,/static/b92b834fea823ff58fb62fb32c1d3cc7/927ba/tripllo2.webp 1012w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/b92b834fea823ff58fb62fb32c1d3cc7/79916/tripllo2.png" data-srcset="/static/b92b834fea823ff58fb62fb32c1d3cc7/7c622/tripllo2.png 750w,/static/b92b834fea823ff58fb62fb32c1d3cc7/79916/tripllo2.png 1012w" alt="(2) MySQL 설계 &amp; SpringBoot init"/></picture><noscript><picture><source type="image/avif" srcSet="/static/b92b834fea823ff58fb62fb32c1d3cc7/cd2e3/tripllo2.avif 750w,/static/b92b834fea823ff58fb62fb32c1d3cc7/2c052/tripllo2.avif 1012w" sizes="100vw"/><source type="image/webp" srcSet="/static/b92b834fea823ff58fb62fb32c1d3cc7/1ec5d/tripllo2.webp 750w,/static/b92b834fea823ff58fb62fb32c1d3cc7/927ba/tripllo2.webp 1012w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/b92b834fea823ff58fb62fb32c1d3cc7/79916/tripllo2.png" srcSet="/static/b92b834fea823ff58fb62fb32c1d3cc7/7c622/tripllo2.png 750w,/static/b92b834fea823ff58fb62fb32c1d3cc7/79916/tripllo2.png 1012w" alt="(2) MySQL 설계 &amp; SpringBoot init"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(2) MySQL 설계 &amp; SpringBoot init</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/my-sql/">MySQL</a>,  <a href="/tags/spring-boot/">SpringBoot</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(2) MySQL 설계 &amp; SpringBoot init</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Tripllo 백엔드 세팅을 해보자. Workbench로 DB를 설계하고 MySQL, MyBatis와 SpringBoot를 연동한다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-02-03">03 Feb 2021</time><span class="byline-reading-time"><span class="bull">•</span>11 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:80.23715415019763%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAADBElEQVQ4y52TS2/rRBiGfbhICAn+ABsWoLJlcQL/rvs2UtsNi/6E7hBi1wKtACVOcKL0JGlPG2rHca722E5sz8XjedGM26OeIrFg8egbW55nvovHAmD9+fOP3/zSvvje+ct53el0GqPRqDEej01stVqNq6urxsXFReP8/LzhOI6h2+022u12w7bt17Ztf2fb9rdnZ2cfW5Zlvbobj/7wfBdTb8p93y9Ho1E5HA5NHAwGZa/XK29vb8v7+/vS8zyD/i4IgnI2m4kgCOB53ub09PRLLfxofHPTmdxP4Pt+FUURhsMhBoOB4fr62jCdTrHZbLBcLjGfzxHHMYQQYIwpHZMkSZrN5tda+OH1mze23jSZTEpCiMoLqgrGVbyjKsmoygqquJCqrJQSUqlKQUEppapKIwEgTdP44PDwKyN8+/bOfnhw4bquJISAixIFl0hpiR0rwRmHoAxlWaKqKoPSKKVj9U54cFAL7yZ/2/5iDX++lOswAhMCtKAgW4r1tgDZUURpjlIIoE4OeETn+S/hg+vaXrDEYrmSwXINygXKIsd2E2JFtliQ1IgzKuospXxOpQ9IkyQ+fCp56nm2v1hhsVpJ3WwmStDdDvE8wCJKMdvECKIt4m0ORhk4e4+KMYrVahUfHx8/Cqe18MadSUJicCGQ5gzLNUGcZigoQ86E6avuHZ6VDD2jqjLCo6OjWuh5nh1GkSk5jIgRZlwizijidAfBOaTpH+q+PQ2llle69PeEruva+v8LNxszZd1DyjhIFCEKQ2y3WyPV6M3Ppf8p3DwKhaywyyn86RT6FugfeblY1GKd6ZNQPQpfluy6bisMQ6zXa0EIkdluJ8Mw1AOSMSH6EMkolYJzyRgzaxNrSs45oiiKms1mLfR9/zpJEujs0jTF07ooCnPFdPZZloFSat7pqMnz/N1zHMf85OSkvnqtVuuHfr/fchznV8dxLnu93mW/3798uX5Ju92+7Ha7v3U6nd9t2/5pf3//C2tvb++VZVmfWJb1uWVZn/1P9N5PLcv64B8qWP4/OWZAxwAAAABJRU5ErkJggg==" alt=""/><picture><source type="image/avif" data-srcset="/static/b92b834fea823ff58fb62fb32c1d3cc7/cd2e3/tripllo2.avif 750w,/static/b92b834fea823ff58fb62fb32c1d3cc7/2c052/tripllo2.avif 1012w" sizes="100vw"/><source type="image/webp" data-srcset="/static/b92b834fea823ff58fb62fb32c1d3cc7/1ec5d/tripllo2.webp 750w,/static/b92b834fea823ff58fb62fb32c1d3cc7/927ba/tripllo2.webp 1012w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/b92b834fea823ff58fb62fb32c1d3cc7/79916/tripllo2.png" data-srcset="/static/b92b834fea823ff58fb62fb32c1d3cc7/7c622/tripllo2.png 750w,/static/b92b834fea823ff58fb62fb32c1d3cc7/79916/tripllo2.png 1012w" alt="(2) MySQL 설계 &amp; SpringBoot init"/></picture><noscript><picture><source type="image/avif" srcSet="/static/b92b834fea823ff58fb62fb32c1d3cc7/cd2e3/tripllo2.avif 750w,/static/b92b834fea823ff58fb62fb32c1d3cc7/2c052/tripllo2.avif 1012w" sizes="100vw"/><source type="image/webp" srcSet="/static/b92b834fea823ff58fb62fb32c1d3cc7/1ec5d/tripllo2.webp 750w,/static/b92b834fea823ff58fb62fb32c1d3cc7/927ba/tripllo2.webp 1012w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/b92b834fea823ff58fb62fb32c1d3cc7/79916/tripllo2.png" srcSet="/static/b92b834fea823ff58fb62fb32c1d3cc7/7c622/tripllo2.png 750w,/static/b92b834fea823ff58fb62fb32c1d3cc7/79916/tripllo2.png 1012w" alt="(2) MySQL 설계 &amp; SpringBoot init"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -192,4 +192,4 @@ <h3 id="연동테스트" style="position:relative">연동테스트<a href="#%EC%
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tripllo/(3)vue-esLint-prettier-setting/index.html b/tripllo/(3)vue-esLint-prettier-setting/index.html
index 54c462b92..05ddf964c 100644
--- a/tripllo/(3)vue-esLint-prettier-setting/index.html
+++ b/tripllo/(3)vue-esLint-prettier-setting/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(3) Vue init &amp; ESLint, Prettier 설정</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/vue-js/">Vue.js</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(3) Vue init &amp; ESLint, Prettier 설정</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">백엔드 Setting은 끝났으니 이제 프론트엔드 Setting이 필요하다. npm 으로 Vue를 생성하고, 코드 포맷터인 ESLint, Prettier 설정을 해보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-02-04">04 Feb 2021</time><span class="byline-reading-time"><span class="bull">•</span>12 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:63.944530046224955%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAACtUlEQVQ4y3VSXVPaQBTNT7EF87GbDyTZ3SQQGgICoiClCoqtCjjVWutb/7DZTTbgW2eaJ5lOImrtx8Odc87du2fm7F2hY5EHt0lWwKyujJK3khS0kgHOUdXdFSLBysLBitjNh4xrRuVl5lU99oSSv38PKu2F4u4sZRQsCtIWL8gmLwKLb6qIyxBzGRKu6DZXNMIliLkEEJfAEz5yESAONDsRQLlCba/F7FqL4WozR6/RjTCuM7TlM832GHCqTC7ZVFRxKAJ0J0EcihCFYo44zDVAd1B3QkHWCW2238e9wZA32p14b7/PxyeHi067y7drvbg/miQkaMWihqmkYirBf5cIEIWGQwVJJ7QATFoAFn0jl59xQzHpW9XKdREgWtQwFTVCC5IZbsrlsCiVw6JshpkuylauFZVQod0/4PP518XRZJYcjE6TT6efF0cn8+RgdrPYOTxPOqPzpDueJv3JRRIMTni13o1K7jYz/b2oTOrM9VqRSQKmkwZDToMJ7clJMr35ft8bnSfH0+vF5OLb8sPxLBkfz5LO7kHc7Y14b3DMjybzJLtgYp8ZJGCG22KG6TFkB2wL+QyWa7SMfSbUDofJx8vbpdcaxAZpMI00mKw7dFOx8igZPnLzBbOSyq/6WU/RbCoE2/348up22R8ccT/YjarvOlGt3o38Zi+uN3txdp4NigCF/1vIeikh1B0qtLrD+Gz2ZWmSOjPzN2lH2lY1H5BVQhWN/LXNZ51x8IdhYzjk04vr5eH4LDmdXi3Hk+nCInWWRckuvzJ4Mn0yBmvTtQZZ5Cze3v443t0fx/XtfrRRLN0VFStcR8xRzPRvJT2drT93xjcV684wPSoQ0/sBIU4VgH5CSFLdcFNdd1LNcFKzEqQG9lNYclNYqqRqqZJzVXdTGeBUAiiVAH7kCkqh5qS/ACwQlYfwT2ZIAAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/4a082b86b3f9e7cdce0817b9bd40b7d2/265ea/tripllo3.avif 649w" sizes="100vw"/><source type="image/webp" data-srcset="/static/4a082b86b3f9e7cdce0817b9bd40b7d2/2a2cd/tripllo3.webp 649w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/4a082b86b3f9e7cdce0817b9bd40b7d2/a1afa/tripllo3.png" data-srcset="/static/4a082b86b3f9e7cdce0817b9bd40b7d2/a1afa/tripllo3.png 649w" alt="(3) Vue init &amp; ESLint, Prettier 설정"/></picture><noscript><picture><source type="image/avif" srcSet="/static/4a082b86b3f9e7cdce0817b9bd40b7d2/265ea/tripllo3.avif 649w" sizes="100vw"/><source type="image/webp" srcSet="/static/4a082b86b3f9e7cdce0817b9bd40b7d2/2a2cd/tripllo3.webp 649w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/4a082b86b3f9e7cdce0817b9bd40b7d2/a1afa/tripllo3.png" srcSet="/static/4a082b86b3f9e7cdce0817b9bd40b7d2/a1afa/tripllo3.png 649w" alt="(3) Vue init &amp; ESLint, Prettier 설정"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(3) Vue init &amp; ESLint, Prettier 설정</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/vue-js/">Vue.js</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(3) Vue init &amp; ESLint, Prettier 설정</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">백엔드 Setting은 끝났으니 이제 프론트엔드 Setting이 필요하다. npm 으로 Vue를 생성하고, 코드 포맷터인 ESLint, Prettier 설정을 해보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-02-04">04 Feb 2021</time><span class="byline-reading-time"><span class="bull">•</span>12 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:63.944530046224955%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAACtUlEQVQ4y3VSXVPaQBTNT7EF87GbDyTZ3SQQGgICoiClCoqtCjjVWutb/7DZTTbgW2eaJ5lOImrtx8Odc87du2fm7F2hY5EHt0lWwKyujJK3khS0kgHOUdXdFSLBysLBitjNh4xrRuVl5lU99oSSv38PKu2F4u4sZRQsCtIWL8gmLwKLb6qIyxBzGRKu6DZXNMIliLkEEJfAEz5yESAONDsRQLlCba/F7FqL4WozR6/RjTCuM7TlM832GHCqTC7ZVFRxKAJ0J0EcihCFYo44zDVAd1B3QkHWCW2238e9wZA32p14b7/PxyeHi067y7drvbg/miQkaMWihqmkYirBf5cIEIWGQwVJJ7QATFoAFn0jl59xQzHpW9XKdREgWtQwFTVCC5IZbsrlsCiVw6JshpkuylauFZVQod0/4PP518XRZJYcjE6TT6efF0cn8+RgdrPYOTxPOqPzpDueJv3JRRIMTni13o1K7jYz/b2oTOrM9VqRSQKmkwZDToMJ7clJMr35ft8bnSfH0+vF5OLb8sPxLBkfz5LO7kHc7Y14b3DMjybzJLtgYp8ZJGCG22KG6TFkB2wL+QyWa7SMfSbUDofJx8vbpdcaxAZpMI00mKw7dFOx8igZPnLzBbOSyq/6WU/RbCoE2/348up22R8ccT/YjarvOlGt3o38Zi+uN3txdp4NigCF/1vIeikh1B0qtLrD+Gz2ZWmSOjPzN2lH2lY1H5BVQhWN/LXNZ51x8IdhYzjk04vr5eH4LDmdXi3Hk+nCInWWRckuvzJ4Mn0yBmvTtQZZ5Cze3v443t0fx/XtfrRRLN0VFStcR8xRzPRvJT2drT93xjcV684wPSoQ0/sBIU4VgH5CSFLdcFNdd1LNcFKzEqQG9lNYclNYqqRqqZJzVXdTGeBUAiiVAH7kCkqh5qS/ACwQlYfwT2ZIAAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/4a082b86b3f9e7cdce0817b9bd40b7d2/265ea/tripllo3.avif 649w" sizes="100vw"/><source type="image/webp" data-srcset="/static/4a082b86b3f9e7cdce0817b9bd40b7d2/2a2cd/tripllo3.webp 649w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/4a082b86b3f9e7cdce0817b9bd40b7d2/a1afa/tripllo3.png" data-srcset="/static/4a082b86b3f9e7cdce0817b9bd40b7d2/a1afa/tripllo3.png 649w" alt="(3) Vue init &amp; ESLint, Prettier 설정"/></picture><noscript><picture><source type="image/avif" srcSet="/static/4a082b86b3f9e7cdce0817b9bd40b7d2/265ea/tripllo3.avif 649w" sizes="100vw"/><source type="image/webp" srcSet="/static/4a082b86b3f9e7cdce0817b9bd40b7d2/2a2cd/tripllo3.webp 649w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/4a082b86b3f9e7cdce0817b9bd40b7d2/a1afa/tripllo3.png" srcSet="/static/4a082b86b3f9e7cdce0817b9bd40b7d2/a1afa/tripllo3.png 649w" alt="(3) Vue init &amp; ESLint, Prettier 설정"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -233,4 +233,4 @@ <h3 id="vue-파일-내-경로-가독성-좋게-설정하기" style="position:rel
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tripllo/(4)spring-security-jwt/index.html b/tripllo/(4)spring-security-jwt/index.html
index 7fb6272fa..7d8324801 100644
--- a/tripllo/(4)spring-security-jwt/index.html
+++ b/tripllo/(4)spring-security-jwt/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(4) 로그인1 -SpringSecurity &amp; JWT 개념</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/spring-security/">SpringSecurity</a>,  <a href="/tags/jwt/">JWT</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(4) 로그인1 -SpringSecurity &amp; JWT 개념</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Spring Security와 JWT를 사용해서 로그인 기능을 구현했다. Spring Security와 JWT의 개념을 알아보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-02-04">04 Feb 2021</time><span class="byline-reading-time"><span class="bull">•</span>12 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:43.527918781725894%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAIAAAC9o5sfAAAACXBIWXMAAAsTAAALEwEAmpwYAAABeklEQVQoz5WQy07CYBCFeSrXPoQb486NOza6My7UGDcsFKMxAQ0QAaOiKCCEchFRLoJcCxTaQNECUq4Vyq30/40pWogrTyaZyWS+M8mRwFkBCL5L0M882QNxLxxLhNbq0Q32Q3SYFcXgfY6ddhfhbO11y7W06VxMVLzsiLHmVLGyx05oEUIXLT8Y08dP5K0d15owRboa9JJGU0ZRaKYncLTsPgqsKkLr/jdLu1/TJ2QXyT1rVo3XYxvIgpc02nKafZ80Q4d2Pcv+oiVEIe785QSmGEJqnl+5mSMacXb0eZ891UR31JFtJ6E3Y0qKwcMlhymjqLNlM6Y0oAeHgbUwhXzDQh7hkvO5eAchHPPcgOvR3fcM/TIaDwDgxzzH8aMxz0EI+1zXjp+ZMGV3yIiBTUcl2DV6FQMqt+U01qzKU7i+SsrP4zILduLAdbacptIhRRgAHgD+N08IYWfYjpRcaTqYqvrzTRSt+uOVR7TqI5upfBPtDFt/P/9PX4zv38RNe7B1AAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/f0634ae38a1872124e048bd0df954052/8372e/tripllo4.avif 750w,/static/f0634ae38a1872124e048bd0df954052/1f499/tripllo4.avif 788w" sizes="100vw"/><source type="image/webp" data-srcset="/static/f0634ae38a1872124e048bd0df954052/1cb46/tripllo4.webp 750w,/static/f0634ae38a1872124e048bd0df954052/0c535/tripllo4.webp 788w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/f0634ae38a1872124e048bd0df954052/f6dfe/tripllo4.png" data-srcset="/static/f0634ae38a1872124e048bd0df954052/21457/tripllo4.png 750w,/static/f0634ae38a1872124e048bd0df954052/f6dfe/tripllo4.png 788w" alt="(4) 로그인1 -SpringSecurity &amp; JWT 개념"/></picture><noscript><picture><source type="image/avif" srcSet="/static/f0634ae38a1872124e048bd0df954052/8372e/tripllo4.avif 750w,/static/f0634ae38a1872124e048bd0df954052/1f499/tripllo4.avif 788w" sizes="100vw"/><source type="image/webp" srcSet="/static/f0634ae38a1872124e048bd0df954052/1cb46/tripllo4.webp 750w,/static/f0634ae38a1872124e048bd0df954052/0c535/tripllo4.webp 788w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/f0634ae38a1872124e048bd0df954052/f6dfe/tripllo4.png" srcSet="/static/f0634ae38a1872124e048bd0df954052/21457/tripllo4.png 750w,/static/f0634ae38a1872124e048bd0df954052/f6dfe/tripllo4.png 788w" alt="(4) 로그인1 -SpringSecurity &amp; JWT 개념"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(4) 로그인1 -SpringSecurity &amp; JWT 개념</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/spring-security/">SpringSecurity</a>,  <a href="/tags/jwt/">JWT</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(4) 로그인1 -SpringSecurity &amp; JWT 개념</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Spring Security와 JWT를 사용해서 로그인 기능을 구현했다. Spring Security와 JWT의 개념을 알아보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-02-04">04 Feb 2021</time><span class="byline-reading-time"><span class="bull">•</span>12 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:43.527918781725894%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAIAAAC9o5sfAAAACXBIWXMAAAsTAAALEwEAmpwYAAABeklEQVQoz5WQy07CYBCFeSrXPoQb486NOza6My7UGDcsFKMxAQ0QAaOiKCCEchFRLoJcCxTaQNECUq4Vyq30/40pWogrTyaZyWS+M8mRwFkBCL5L0M882QNxLxxLhNbq0Q32Q3SYFcXgfY6ddhfhbO11y7W06VxMVLzsiLHmVLGyx05oEUIXLT8Y08dP5K0d15owRboa9JJGU0ZRaKYncLTsPgqsKkLr/jdLu1/TJ2QXyT1rVo3XYxvIgpc02nKafZ80Q4d2Pcv+oiVEIe785QSmGEJqnl+5mSMacXb0eZ891UR31JFtJ6E3Y0qKwcMlhymjqLNlM6Y0oAeHgbUwhXzDQh7hkvO5eAchHPPcgOvR3fcM/TIaDwDgxzzH8aMxz0EI+1zXjp+ZMGV3yIiBTUcl2DV6FQMqt+U01qzKU7i+SsrP4zILduLAdbacptIhRRgAHgD+N08IYWfYjpRcaTqYqvrzTRSt+uOVR7TqI5upfBPtDFt/P/9PX4zv38RNe7B1AAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/f0634ae38a1872124e048bd0df954052/8372e/tripllo4.avif 750w,/static/f0634ae38a1872124e048bd0df954052/1f499/tripllo4.avif 788w" sizes="100vw"/><source type="image/webp" data-srcset="/static/f0634ae38a1872124e048bd0df954052/1cb46/tripllo4.webp 750w,/static/f0634ae38a1872124e048bd0df954052/0c535/tripllo4.webp 788w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/f0634ae38a1872124e048bd0df954052/f6dfe/tripllo4.png" data-srcset="/static/f0634ae38a1872124e048bd0df954052/21457/tripllo4.png 750w,/static/f0634ae38a1872124e048bd0df954052/f6dfe/tripllo4.png 788w" alt="(4) 로그인1 -SpringSecurity &amp; JWT 개념"/></picture><noscript><picture><source type="image/avif" srcSet="/static/f0634ae38a1872124e048bd0df954052/8372e/tripllo4.avif 750w,/static/f0634ae38a1872124e048bd0df954052/1f499/tripllo4.avif 788w" sizes="100vw"/><source type="image/webp" srcSet="/static/f0634ae38a1872124e048bd0df954052/1cb46/tripllo4.webp 750w,/static/f0634ae38a1872124e048bd0df954052/0c535/tripllo4.webp 788w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/f0634ae38a1872124e048bd0df954052/f6dfe/tripllo4.png" srcSet="/static/f0634ae38a1872124e048bd0df954052/21457/tripllo4.png 750w,/static/f0634ae38a1872124e048bd0df954052/f6dfe/tripllo4.png 788w" alt="(4) 로그인1 -SpringSecurity &amp; JWT 개념"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -155,4 +155,4 @@ <h3 id="구조" style="position:relative">구조<a href="#%EA%B5%AC%EC%A1%B0" ar
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tripllo/(5)login2-SpringBoot/index.html b/tripllo/(5)login2-SpringBoot/index.html
index fcf114078..b3b08dd17 100644
--- a/tripllo/(5)login2-SpringBoot/index.html
+++ b/tripllo/(5)login2-SpringBoot/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(5) 로그인2 -SpringBoot 구현</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/spring-security/">SpringSecurity</a>,  <a href="/tags/jwt/">JWT</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(5) 로그인2 -SpringBoot 구현</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Spring Security와 JWT를 사용해서 로그인 기능을 구현했다. Spring Security의 구현된 소스와 login의 Service 단 내부 로직을 개념에 맞춰서 알아보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-02-05">05 Feb 2021</time><span class="byline-reading-time"><span class="bull">•</span>21 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:75%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAD2ElEQVQ4y31TS2wbVRS9YyeoTZxQyY1jYZIGBZFilQYhVBbZIKRAsyBCCmLPColFF0VILLqqIFkgFNEsQCJJUyBJa1LHsT0z/s3Yjj0z9ng8H3vs8Sf2NBWx01TBhdKiNqUPjasgJChHejpP912dd8+79wH8A4F0EcMZBQguf4ySanO0rC/RUn2BkuqLlFRfoGX9e0qsfeVP5i1+Jg9BvgT/grWvv82z86sQFirmEK8CzuasbirzrTehLPkSucveTeXKRlxe8jP5ZT+Tn3XTgiUk1IDkVHMoo5mCfNFkMMmpGFiP29qC8y4CSK4IzUcIEEIg6C34KZyC9WgWrlM8XI/w4KYFILgCnPvsIsxf80KILwIlViCSLUMkW4FAugBgsz/XCQCd05e+6w8L5bfddOasm+YnV/D4AACYl/2x11fJxPurZOLdZTw+5U3IbxrxrxdX7AQrT5CcMk5wyjjJKWf9SXkArH02w/PQzNziJCXVt0OZSj0i1lrehDJlVBoWqrNkSttf9sdrvmTuVrLY8AIANu/yTRCsivxM7gHOqn8QbAERrPoNfPjx+baVIF9uWzWSdx6iw735LkJApp6cHcaGhkdMp0Zf7aDlG4OX3ZGTnpg8vLROOQlO6wdXKN1JS/orOKOe9jPq6NyVtTcIrjDKlHad9xDCSK54JMiXvyS4woovobg9MfEtN51pi/O1VruAw4sajxDAWoR3sKXd+75EDnli4uONuHQQy22jVGVvdz2a7ceZvJlgC9M4oy4E0tpSWNgaY7QGkKkSBNLa+SBfbhFccYuW9GY8f/Md+GGDcqS3bv/OaM3H4Wz1gJb1h4J+B3HlWzvehGIPpEvgiYngCnHtDoeFCtxFyGRUNe8inDirToaF6jgt6xMRccsGq0TiebbUNARQVNZRVNFRurqHGK15D2eLDk9cgrVIemwFj3/qZ/KfuGn+BUNseMTZbTDOqhBTtmFT/RliuW2AawHWypaaPkbbCbGlZoDRGiSjNSKM1ry6HhOPezdl8CVzH10lk5J3U5Y8sexY4wAdNgkjU5qZlnRTPH/TFFV0gEz9DqjNB5DVW1DZ/xPUxn0gOQ248m1Yo0T40RfHcLYI730w1QUAxohZLsxcwoyf8p/o6j7S0W05etrS23XS0nPU2Wez2l8ccfYOv/Ryj2NwCPsNISxV3TPGapOW9BnjLQNpzeQK8fAUHOsEsJwB6D0D2LOvYVjPKQwzDWAYZscwrMPI2EcIImLtRDBTsW39iiCUqcL/4AszwEUHwOcnAKYHAS7Yn8Sf+Tuj8gsCSqy3l9GAqHzjqXJ/AaR/W/9Pzcd6AAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/cf052c2134f0abd114c107d149d0dd49/2b382/tripllo5.avif 750w,/static/cf052c2134f0abd114c107d149d0dd49/a6808/tripllo5.avif 820w" sizes="100vw"/><source type="image/webp" data-srcset="/static/cf052c2134f0abd114c107d149d0dd49/66907/tripllo5.webp 750w,/static/cf052c2134f0abd114c107d149d0dd49/898ce/tripllo5.webp 820w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/cf052c2134f0abd114c107d149d0dd49/0022d/tripllo5.png" data-srcset="/static/cf052c2134f0abd114c107d149d0dd49/76a4f/tripllo5.png 750w,/static/cf052c2134f0abd114c107d149d0dd49/0022d/tripllo5.png 820w" alt="(5) 로그인2 -SpringBoot 구현"/></picture><noscript><picture><source type="image/avif" srcSet="/static/cf052c2134f0abd114c107d149d0dd49/2b382/tripllo5.avif 750w,/static/cf052c2134f0abd114c107d149d0dd49/a6808/tripllo5.avif 820w" sizes="100vw"/><source type="image/webp" srcSet="/static/cf052c2134f0abd114c107d149d0dd49/66907/tripllo5.webp 750w,/static/cf052c2134f0abd114c107d149d0dd49/898ce/tripllo5.webp 820w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/cf052c2134f0abd114c107d149d0dd49/0022d/tripllo5.png" srcSet="/static/cf052c2134f0abd114c107d149d0dd49/76a4f/tripllo5.png 750w,/static/cf052c2134f0abd114c107d149d0dd49/0022d/tripllo5.png 820w" alt="(5) 로그인2 -SpringBoot 구현"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(5) 로그인2 -SpringBoot 구현</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/spring-security/">SpringSecurity</a>,  <a href="/tags/jwt/">JWT</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(5) 로그인2 -SpringBoot 구현</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Spring Security와 JWT를 사용해서 로그인 기능을 구현했다. Spring Security의 구현된 소스와 login의 Service 단 내부 로직을 개념에 맞춰서 알아보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-02-05">05 Feb 2021</time><span class="byline-reading-time"><span class="bull">•</span>21 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:75%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAD2ElEQVQ4y31TS2wbVRS9YyeoTZxQyY1jYZIGBZFilQYhVBbZIKRAsyBCCmLPColFF0VILLqqIFkgFNEsQCJJUyBJa1LHsT0z/s3Yjj0z9ng8H3vs8Sf2NBWx01TBhdKiNqUPjasgJChHejpP912dd8+79wH8A4F0EcMZBQguf4ySanO0rC/RUn2BkuqLlFRfoGX9e0qsfeVP5i1+Jg9BvgT/grWvv82z86sQFirmEK8CzuasbirzrTehLPkSucveTeXKRlxe8jP5ZT+Tn3XTgiUk1IDkVHMoo5mCfNFkMMmpGFiP29qC8y4CSK4IzUcIEEIg6C34KZyC9WgWrlM8XI/w4KYFILgCnPvsIsxf80KILwIlViCSLUMkW4FAugBgsz/XCQCd05e+6w8L5bfddOasm+YnV/D4AACYl/2x11fJxPurZOLdZTw+5U3IbxrxrxdX7AQrT5CcMk5wyjjJKWf9SXkArH02w/PQzNziJCXVt0OZSj0i1lrehDJlVBoWqrNkSttf9sdrvmTuVrLY8AIANu/yTRCsivxM7gHOqn8QbAERrPoNfPjx+baVIF9uWzWSdx6iw735LkJApp6cHcaGhkdMp0Zf7aDlG4OX3ZGTnpg8vLROOQlO6wdXKN1JS/orOKOe9jPq6NyVtTcIrjDKlHad9xDCSK54JMiXvyS4woovobg9MfEtN51pi/O1VruAw4sajxDAWoR3sKXd+75EDnli4uONuHQQy22jVGVvdz2a7ceZvJlgC9M4oy4E0tpSWNgaY7QGkKkSBNLa+SBfbhFccYuW9GY8f/Md+GGDcqS3bv/OaM3H4Wz1gJb1h4J+B3HlWzvehGIPpEvgiYngCnHtDoeFCtxFyGRUNe8inDirToaF6jgt6xMRccsGq0TiebbUNARQVNZRVNFRurqHGK15D2eLDk9cgrVIemwFj3/qZ/KfuGn+BUNseMTZbTDOqhBTtmFT/RliuW2AawHWypaaPkbbCbGlZoDRGiSjNSKM1ry6HhOPezdl8CVzH10lk5J3U5Y8sexY4wAdNgkjU5qZlnRTPH/TFFV0gEz9DqjNB5DVW1DZ/xPUxn0gOQ248m1Yo0T40RfHcLYI730w1QUAxohZLsxcwoyf8p/o6j7S0W05etrS23XS0nPU2Wez2l8ccfYOv/Ryj2NwCPsNISxV3TPGapOW9BnjLQNpzeQK8fAUHOsEsJwB6D0D2LOvYVjPKQwzDWAYZscwrMPI2EcIImLtRDBTsW39iiCUqcL/4AszwEUHwOcnAKYHAS7Yn8Sf+Tuj8gsCSqy3l9GAqHzjqXJ/AaR/W/9Pzcd6AAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/cf052c2134f0abd114c107d149d0dd49/2b382/tripllo5.avif 750w,/static/cf052c2134f0abd114c107d149d0dd49/a6808/tripllo5.avif 820w" sizes="100vw"/><source type="image/webp" data-srcset="/static/cf052c2134f0abd114c107d149d0dd49/66907/tripllo5.webp 750w,/static/cf052c2134f0abd114c107d149d0dd49/898ce/tripllo5.webp 820w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/cf052c2134f0abd114c107d149d0dd49/0022d/tripllo5.png" data-srcset="/static/cf052c2134f0abd114c107d149d0dd49/76a4f/tripllo5.png 750w,/static/cf052c2134f0abd114c107d149d0dd49/0022d/tripllo5.png 820w" alt="(5) 로그인2 -SpringBoot 구현"/></picture><noscript><picture><source type="image/avif" srcSet="/static/cf052c2134f0abd114c107d149d0dd49/2b382/tripllo5.avif 750w,/static/cf052c2134f0abd114c107d149d0dd49/a6808/tripllo5.avif 820w" sizes="100vw"/><source type="image/webp" srcSet="/static/cf052c2134f0abd114c107d149d0dd49/66907/tripllo5.webp 750w,/static/cf052c2134f0abd114c107d149d0dd49/898ce/tripllo5.webp 820w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/cf052c2134f0abd114c107d149d0dd49/0022d/tripllo5.png" srcSet="/static/cf052c2134f0abd114c107d149d0dd49/76a4f/tripllo5.png 750w,/static/cf052c2134f0abd114c107d149d0dd49/0022d/tripllo5.png 820w" alt="(5) 로그인2 -SpringBoot 구현"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -584,4 +584,4 @@ <h3 id="로그인" style="position:relative">로그인<a href="#%EB%A1%9C%EA%B7%
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tripllo/(6)login3-vue/index.html b/tripllo/(6)login3-vue/index.html
index 76456c257..f56e60984 100644
--- a/tripllo/(6)login3-vue/index.html
+++ b/tripllo/(6)login3-vue/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(6) 로그인3 -vue 구현</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/vue-js/">Vue.js</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(6) 로그인3 -vue 구현</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">SpringBoot 쪽 서비스 로직이 만들어졌으므로 이번엔 vue에서 화면을 만들고 회원가입과 로그인을 진행해보자. 우리는 vue의 기능을 최대한 살려서 뼈대가 되는 페이지 하나에 login과 signup 2개의 컴포넌트를 붙이고 watch를 활용해 데이터를 검증할 것이다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-02-05">05 Feb 2021</time><span class="byline-reading-time"><span class="bull">•</span>11 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:134.65346534653463%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAbCAYAAAB836/YAAAACXBIWXMAAAsTAAALEwEAmpwYAAADEklEQVRIx5WVy04UQRSGeShXPo1LE4lRdiYYdeFKJCZsVIK8gVtfQBYEwmYgSCIRoWf6Pj19q3v1b051TztAj0gnX6aq5tRf/6muOr0ilYGQ+hZKGXw5irF7FMPLOCguyAUupxzWDM+hmJV5Yw71tTZIK4kH26d4uPMDX49TbHz3sfbtEpt7PhpjW5GFeVK1oiutyO0VudD4lTJcpAxWG4wmFU7DGrNagQ+4I43eIRcSTEgXuIgxxsGorTWMUpAUxyXYDbhQrUNqkF00DazgsJy1CA7DGAznsKyG1Rq2adAMQI+UyomuMCagaOBgD+naI2RvniN7uYrsxWNkr54iW3+CbH0V2etnaJRyk9GJtM0lgvrsGPnWW5Q7H1B8fo/i4zsU25soPm207G45l00nstwhpSwV7vM0vcMhQU57qNo9NKbDAtZiPIkQhimiaIokyeD5McJ42osOO5wLDjyzWYG8KFGUFTgXrl1VbDBW/BWU0Fojqy3OvRRnFwEuwxxxoZBWuicp6dcgLTWiXPYEM4lZbaCUApnrBaPCYPRzjKOTcyeclAZBJhDMbhPOZM9kKhDldLsWBJXSMNYiryUqrpFXAmleoaglSqbuxFrrtq1PmTrWNkjTFGEYwg8CBEEALoS717TgchSMsYsvpXVIq9DGLkJXkqCbRBOGoDjnUA44DKMYEz+AN570RFEMpQ0EiQ5AgnTfBxw2fRD1KVVtzJ0pUzydxUGHUZzA9wOMJz6qmnX1UQ06+w+H7T5QesR8f+QdLN/DpkGcpG4f/SAE4wLa2H6BZVAWg2+ZbJdlhaIsURQlasbAOAdj3LVdn/HrdP+7lBfPIR3qJEmwv7+Pw8NDx8HBgYPaJyfHGI1GOOzGFqE50+nUZUNa3dUzYIzh6srDeDx2eAv4vo+J718b7+M8D5xzl2V39ZZXm/s8g+WLjg4VTa4MzhOOi6nAJRWIQsKbSfzOBCa5dGNS27aG/qsezoulsQ1KYVBLg0oaMGVRS4taWXBt3dhc6FaBnX9Gefd5dAgJJSXkEKL9vRlP0Gf0Dxz6HIqb0rgiAAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/091b93c48a5a6d44022278f6ff3b1035/eec93/tripllo6.avif 505w" sizes="100vw"/><source type="image/webp" data-srcset="/static/091b93c48a5a6d44022278f6ff3b1035/1988c/tripllo6.webp 505w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/091b93c48a5a6d44022278f6ff3b1035/4ba33/tripllo6.png" data-srcset="/static/091b93c48a5a6d44022278f6ff3b1035/4ba33/tripllo6.png 505w" alt="(6) 로그인3 -vue 구현"/></picture><noscript><picture><source type="image/avif" srcSet="/static/091b93c48a5a6d44022278f6ff3b1035/eec93/tripllo6.avif 505w" sizes="100vw"/><source type="image/webp" srcSet="/static/091b93c48a5a6d44022278f6ff3b1035/1988c/tripllo6.webp 505w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/091b93c48a5a6d44022278f6ff3b1035/4ba33/tripllo6.png" srcSet="/static/091b93c48a5a6d44022278f6ff3b1035/4ba33/tripllo6.png 505w" alt="(6) 로그인3 -vue 구현"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(6) 로그인3 -vue 구현</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/vue-js/">Vue.js</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(6) 로그인3 -vue 구현</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">SpringBoot 쪽 서비스 로직이 만들어졌으므로 이번엔 vue에서 화면을 만들고 회원가입과 로그인을 진행해보자. 우리는 vue의 기능을 최대한 살려서 뼈대가 되는 페이지 하나에 login과 signup 2개의 컴포넌트를 붙이고 watch를 활용해 데이터를 검증할 것이다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-02-05">05 Feb 2021</time><span class="byline-reading-time"><span class="bull">•</span>11 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:134.65346534653463%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAbCAYAAAB836/YAAAACXBIWXMAAAsTAAALEwEAmpwYAAADEklEQVRIx5WVy04UQRSGeShXPo1LE4lRdiYYdeFKJCZsVIK8gVtfQBYEwmYgSCIRoWf6Pj19q3v1b051TztAj0gnX6aq5tRf/6muOr0ilYGQ+hZKGXw5irF7FMPLOCguyAUupxzWDM+hmJV5Yw71tTZIK4kH26d4uPMDX49TbHz3sfbtEpt7PhpjW5GFeVK1oiutyO0VudD4lTJcpAxWG4wmFU7DGrNagQ+4I43eIRcSTEgXuIgxxsGorTWMUpAUxyXYDbhQrUNqkF00DazgsJy1CA7DGAznsKyG1Rq2adAMQI+UyomuMCagaOBgD+naI2RvniN7uYrsxWNkr54iW3+CbH0V2etnaJRyk9GJtM0lgvrsGPnWW5Q7H1B8fo/i4zsU25soPm207G45l00nstwhpSwV7vM0vcMhQU57qNo9NKbDAtZiPIkQhimiaIokyeD5McJ42osOO5wLDjyzWYG8KFGUFTgXrl1VbDBW/BWU0Fojqy3OvRRnFwEuwxxxoZBWuicp6dcgLTWiXPYEM4lZbaCUApnrBaPCYPRzjKOTcyeclAZBJhDMbhPOZM9kKhDldLsWBJXSMNYiryUqrpFXAmleoaglSqbuxFrrtq1PmTrWNkjTFGEYwg8CBEEALoS717TgchSMsYsvpXVIq9DGLkJXkqCbRBOGoDjnUA44DKMYEz+AN570RFEMpQ0EiQ5AgnTfBxw2fRD1KVVtzJ0pUzydxUGHUZzA9wOMJz6qmnX1UQ06+w+H7T5QesR8f+QdLN/DpkGcpG4f/SAE4wLa2H6BZVAWg2+ZbJdlhaIsURQlasbAOAdj3LVdn/HrdP+7lBfPIR3qJEmwv7+Pw8NDx8HBgYPaJyfHGI1GOOzGFqE50+nUZUNa3dUzYIzh6srDeDx2eAv4vo+J718b7+M8D5xzl2V39ZZXm/s8g+WLjg4VTa4MzhOOi6nAJRWIQsKbSfzOBCa5dGNS27aG/qsezoulsQ1KYVBLg0oaMGVRS4taWXBt3dhc6FaBnX9Gefd5dAgJJSXkEKL9vRlP0Gf0Dxz6HIqb0rgiAAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/091b93c48a5a6d44022278f6ff3b1035/eec93/tripllo6.avif 505w" sizes="100vw"/><source type="image/webp" data-srcset="/static/091b93c48a5a6d44022278f6ff3b1035/1988c/tripllo6.webp 505w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/091b93c48a5a6d44022278f6ff3b1035/4ba33/tripllo6.png" data-srcset="/static/091b93c48a5a6d44022278f6ff3b1035/4ba33/tripllo6.png 505w" alt="(6) 로그인3 -vue 구현"/></picture><noscript><picture><source type="image/avif" srcSet="/static/091b93c48a5a6d44022278f6ff3b1035/eec93/tripllo6.avif 505w" sizes="100vw"/><source type="image/webp" srcSet="/static/091b93c48a5a6d44022278f6ff3b1035/1988c/tripllo6.webp 505w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/091b93c48a5a6d44022278f6ff3b1035/4ba33/tripllo6.png" srcSet="/static/091b93c48a5a6d44022278f6ff3b1035/4ba33/tripllo6.png 505w" alt="(6) 로그인3 -vue 구현"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -373,4 +373,4 @@ <h4 id="Button-활성화" style="position:relative">Button 활성화<a href="#Bu
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tripllo/(7)login4-vue-social-login/index.html b/tripllo/(7)login4-vue-social-login/index.html
index bdfd3f997..bdb8fa608 100644
--- a/tripllo/(7)login4-vue-social-login/index.html
+++ b/tripllo/(7)login4-vue-social-login/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(7) 로그인4 -vue 소셜로그인</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/vue-js/">Vue.js</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(7) 로그인4 -vue 소셜로그인</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">vue에서 소셜 로그인 기능을 만들어보자. 보통 요즘 서비스들은 다 소셜 로그인으로 가입, 로그인이 되므로 앞으로 서비스 개발할 때 거의 필수적으로 들어갈 기능이라고 생각했다. 또 backend보다는 frontend 개발자로 지원하고 싶기 때문에 백엔드의 OAuth2.0 을 사용하는 것 보다는 Javascript단에서 로그인 기능을 넣고 싶었다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-02-05">05 Feb 2021</time><span class="byline-reading-time"><span class="bull">•</span>21 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:56.25%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAALABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAgCAwUJ/8QAFAEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAAB7s368xXgYgT/xAAcEAADAAEFAAAAAAAAAAAAAAABAgMFAAQGEBT/2gAIAQEAAQUCfd116bBb85yMciUViAB1/8QAGREBAQADAQAAAAAAAAAAAAAAEQEQUWGB/9oACAEDAQE/AYab1DyzH//EABoRAQACAwEAAAAAAAAAAAAAABEhUQEQMYH/2gAIAQIBAT8Bm4ox20fE1//EACcQAAIBAwEGBwAAAAAAAAAAAAECAwQREhMABQYhIzEQFCRBQlFS/9oACAEBAAY/AosYzFqQyPpTKuqrAHFWCy4Xv7atj+xtH6Z5S0WbGPEBWCBsCM3szHkgDuL8svkd7UA4G4smTdtctHHXRUaNSbxQ0NHV+aonv1KcPVPS5C/Xppl7qQBdVPfuAdrAAD6Hh//EABwQAQACAwADAAAAAAAAAAAAAAERMQAhQRBRcf/aAAgBAQABPyFKpUVHaA+iT6D1MbT7ysNJuIMjFSVi4XFi1YyyYNodAC4DYKKD0L7gIAUAB8DR4//aAAwDAQACAAMAAAAQk8//xAAYEQADAQEAAAAAAAAAAAAAAAABEUEhEP/aAAgBAwEBPxAg0wIrJqdTVIzn/8QAGREAAwEBAQAAAAAAAAAAAAAAAREhMRBx/9oACAECAQE/ECDMVcNoakinoTvP/8QAHRABAAIBBQEAAAAAAAAAAAAAAQARIUFRYXGR0f/aAAgBAQABPxBKETIdLqCUTSkA8n3CYtlAKBsSAfFMP5JilMQRvO7mMw5gaDBpLRL7AA4AJXfr9n//2Q==" alt=""/><picture><source type="image/avif" data-srcset="/static/1d06556ee3cbf97a8da8c382a82e32ce/ba386/tripllo7.avif 750w,/static/1d06556ee3cbf97a8da8c382a82e32ce/8adb1/tripllo7.avif 1080w,/static/1d06556ee3cbf97a8da8c382a82e32ce/dc6b3/tripllo7.avif 1366w,/static/1d06556ee3cbf97a8da8c382a82e32ce/031aa/tripllo7.avif 1920w" sizes="100vw"/><source type="image/webp" data-srcset="/static/1d06556ee3cbf97a8da8c382a82e32ce/a66aa/tripllo7.webp 750w,/static/1d06556ee3cbf97a8da8c382a82e32ce/65dd5/tripllo7.webp 1080w,/static/1d06556ee3cbf97a8da8c382a82e32ce/4fad6/tripllo7.webp 1366w,/static/1d06556ee3cbf97a8da8c382a82e32ce/c512e/tripllo7.webp 1920w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/1d06556ee3cbf97a8da8c382a82e32ce/a764f/tripllo7.jpg" data-srcset="/static/1d06556ee3cbf97a8da8c382a82e32ce/37bba/tripllo7.jpg 750w,/static/1d06556ee3cbf97a8da8c382a82e32ce/61c72/tripllo7.jpg 1080w,/static/1d06556ee3cbf97a8da8c382a82e32ce/d61e8/tripllo7.jpg 1366w,/static/1d06556ee3cbf97a8da8c382a82e32ce/a764f/tripllo7.jpg 1920w" alt="(7) 로그인4 -vue 소셜로그인"/></picture><noscript><picture><source type="image/avif" srcSet="/static/1d06556ee3cbf97a8da8c382a82e32ce/ba386/tripllo7.avif 750w,/static/1d06556ee3cbf97a8da8c382a82e32ce/8adb1/tripllo7.avif 1080w,/static/1d06556ee3cbf97a8da8c382a82e32ce/dc6b3/tripllo7.avif 1366w,/static/1d06556ee3cbf97a8da8c382a82e32ce/031aa/tripllo7.avif 1920w" sizes="100vw"/><source type="image/webp" srcSet="/static/1d06556ee3cbf97a8da8c382a82e32ce/a66aa/tripllo7.webp 750w,/static/1d06556ee3cbf97a8da8c382a82e32ce/65dd5/tripllo7.webp 1080w,/static/1d06556ee3cbf97a8da8c382a82e32ce/4fad6/tripllo7.webp 1366w,/static/1d06556ee3cbf97a8da8c382a82e32ce/c512e/tripllo7.webp 1920w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/1d06556ee3cbf97a8da8c382a82e32ce/a764f/tripllo7.jpg" srcSet="/static/1d06556ee3cbf97a8da8c382a82e32ce/37bba/tripllo7.jpg 750w,/static/1d06556ee3cbf97a8da8c382a82e32ce/61c72/tripllo7.jpg 1080w,/static/1d06556ee3cbf97a8da8c382a82e32ce/d61e8/tripllo7.jpg 1366w,/static/1d06556ee3cbf97a8da8c382a82e32ce/a764f/tripllo7.jpg 1920w" alt="(7) 로그인4 -vue 소셜로그인"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(7) 로그인4 -vue 소셜로그인</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/vue-js/">Vue.js</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(7) 로그인4 -vue 소셜로그인</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">vue에서 소셜 로그인 기능을 만들어보자. 보통 요즘 서비스들은 다 소셜 로그인으로 가입, 로그인이 되므로 앞으로 서비스 개발할 때 거의 필수적으로 들어갈 기능이라고 생각했다. 또 backend보다는 frontend 개발자로 지원하고 싶기 때문에 백엔드의 OAuth2.0 을 사용하는 것 보다는 Javascript단에서 로그인 기능을 넣고 싶었다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-02-05">05 Feb 2021</time><span class="byline-reading-time"><span class="bull">•</span>21 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:56.25%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAALABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAgCAwUJ/8QAFAEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAAB7s368xXgYgT/xAAcEAADAAEFAAAAAAAAAAAAAAABAgMFAAQGEBT/2gAIAQEAAQUCfd116bBb85yMciUViAB1/8QAGREBAQADAQAAAAAAAAAAAAAAEQEQUWGB/9oACAEDAQE/AYab1DyzH//EABoRAQACAwEAAAAAAAAAAAAAABEhUQEQMYH/2gAIAQIBAT8Bm4ox20fE1//EACcQAAIBAwEGBwAAAAAAAAAAAAECAwQREhMABQYhIzEQFCRBQlFS/9oACAEBAAY/AosYzFqQyPpTKuqrAHFWCy4Xv7atj+xtH6Z5S0WbGPEBWCBsCM3szHkgDuL8svkd7UA4G4smTdtctHHXRUaNSbxQ0NHV+aonv1KcPVPS5C/Xppl7qQBdVPfuAdrAAD6Hh//EABwQAQACAwADAAAAAAAAAAAAAAERMQAhQRBRcf/aAAgBAQABPyFKpUVHaA+iT6D1MbT7ysNJuIMjFSVi4XFi1YyyYNodAC4DYKKD0L7gIAUAB8DR4//aAAwDAQACAAMAAAAQk8//xAAYEQADAQEAAAAAAAAAAAAAAAABEUEhEP/aAAgBAwEBPxAg0wIrJqdTVIzn/8QAGREAAwEBAQAAAAAAAAAAAAAAAREhMRBx/9oACAECAQE/ECDMVcNoakinoTvP/8QAHRABAAIBBQEAAAAAAAAAAAAAAQARIUFRYXGR0f/aAAgBAQABPxBKETIdLqCUTSkA8n3CYtlAKBsSAfFMP5JilMQRvO7mMw5gaDBpLRL7AA4AJXfr9n//2Q==" alt=""/><picture><source type="image/avif" data-srcset="/static/1d06556ee3cbf97a8da8c382a82e32ce/ba386/tripllo7.avif 750w,/static/1d06556ee3cbf97a8da8c382a82e32ce/8adb1/tripllo7.avif 1080w,/static/1d06556ee3cbf97a8da8c382a82e32ce/dc6b3/tripllo7.avif 1366w,/static/1d06556ee3cbf97a8da8c382a82e32ce/031aa/tripllo7.avif 1920w" sizes="100vw"/><source type="image/webp" data-srcset="/static/1d06556ee3cbf97a8da8c382a82e32ce/a66aa/tripllo7.webp 750w,/static/1d06556ee3cbf97a8da8c382a82e32ce/65dd5/tripllo7.webp 1080w,/static/1d06556ee3cbf97a8da8c382a82e32ce/4fad6/tripllo7.webp 1366w,/static/1d06556ee3cbf97a8da8c382a82e32ce/c512e/tripllo7.webp 1920w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/1d06556ee3cbf97a8da8c382a82e32ce/a764f/tripllo7.jpg" data-srcset="/static/1d06556ee3cbf97a8da8c382a82e32ce/37bba/tripllo7.jpg 750w,/static/1d06556ee3cbf97a8da8c382a82e32ce/61c72/tripllo7.jpg 1080w,/static/1d06556ee3cbf97a8da8c382a82e32ce/d61e8/tripllo7.jpg 1366w,/static/1d06556ee3cbf97a8da8c382a82e32ce/a764f/tripllo7.jpg 1920w" alt="(7) 로그인4 -vue 소셜로그인"/></picture><noscript><picture><source type="image/avif" srcSet="/static/1d06556ee3cbf97a8da8c382a82e32ce/ba386/tripllo7.avif 750w,/static/1d06556ee3cbf97a8da8c382a82e32ce/8adb1/tripllo7.avif 1080w,/static/1d06556ee3cbf97a8da8c382a82e32ce/dc6b3/tripllo7.avif 1366w,/static/1d06556ee3cbf97a8da8c382a82e32ce/031aa/tripllo7.avif 1920w" sizes="100vw"/><source type="image/webp" srcSet="/static/1d06556ee3cbf97a8da8c382a82e32ce/a66aa/tripllo7.webp 750w,/static/1d06556ee3cbf97a8da8c382a82e32ce/65dd5/tripllo7.webp 1080w,/static/1d06556ee3cbf97a8da8c382a82e32ce/4fad6/tripllo7.webp 1366w,/static/1d06556ee3cbf97a8da8c382a82e32ce/c512e/tripllo7.webp 1920w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/1d06556ee3cbf97a8da8c382a82e32ce/a764f/tripllo7.jpg" srcSet="/static/1d06556ee3cbf97a8da8c382a82e32ce/37bba/tripllo7.jpg 750w,/static/1d06556ee3cbf97a8da8c382a82e32ce/61c72/tripllo7.jpg 1080w,/static/1d06556ee3cbf97a8da8c382a82e32ce/d61e8/tripllo7.jpg 1366w,/static/1d06556ee3cbf97a8da8c382a82e32ce/a764f/tripllo7.jpg 1920w" alt="(7) 로그인4 -vue 소셜로그인"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -468,4 +468,4 @@ <h4 id="Googlejs" style="position:relative">Google.js<a href="#Googlejs" aria-la
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tripllo/(8)vue-refactor1/index.html b/tripllo/(8)vue-refactor1/index.html
index 2715fc5f9..57c8d3aa8 100644
--- a/tripllo/(8)vue-refactor1/index.html
+++ b/tripllo/(8)vue-refactor1/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(8) vue 리팩토링1</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/리팩토링/">리팩토링</a>,  <a href="/tags/vue-js/">Vue.js</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(8) vue 리팩토링1</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">멘토링 후 Tripllo에 꽤 많은 것을 손봐야한다는 것을 알게 되었다. 하나하나 고쳐보면서 정리한 것을 기록해보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-04-04">04 Apr 2021</time><span class="byline-reading-time"><span class="bull">•</span>21 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:75%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAAPABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAUGCf/EABcBAAMBAAAAAAAAAAAAAAAAAAAEBQj/2gAMAwEAAhADEAAAAcramPdbCrzIvHT/xAAaEAACAwEBAAAAAAAAAAAAAAAEBQACAwYx/9oACAEBAAEFAl6spppXknF7EjaiEBMTF19ugaETyf/EABcRAAMBAAAAAAAAAAAAAAAAAAEQEUH/2gAIAQMBAT8BNyL/xAAgEQEBAAEEAQUAAAAAAAAAAAABEQIDEhMxIQQFQUJh/9oACAECAQE/AdQ9x5MuLP0nF9N+lq8h+ZTV25eaU2eIzsSwqLCoQX5QuUF6Kzqvb//EACcQAAIBAwMCBgMAAAAAAAAAAAECAwQREgATIQUxBhQiMjNBUVKR/9oACAEBAAY/AjHSmjDKjyHzVfR0KhY8L+urmhUsc/QgJeTGTBTttp0Vuj5R+4HxD0NBz2s714jfLuMHbi/bFrTUs23vQOY5NqaKePIfpNCzxSLz7o3ZT+dNJRyiJ3wyJiil+Nsk+VHAsf79340plkpyVaRgRRUim8sUcL3xiFwY4kFj93buzE21/8QAGhABAQADAQEAAAAAAAAAAAAAAREAIUExYf/aAAgBAQABPyH5zyWCUklBgQ1oYlAiyIGoENw+fJkcLr+E5Eo4SiB6kMDh10TjEOQVuIJEMAOjXMAABAIBwM//2gAMAwEAAgADAAAAEFMf/8QAHBEAAwADAAMAAAAAAAAAAAAAAREhMVFxYZGh/9oACAEDAQE/EKiAVbJbzAIonsvAF2PXPPfmr//EABgRAQEBAQEAAAAAAAAAAAAAAAERADEh/9oACAECAQE/EOvdVJGCCXqrp6ZgSBEGSQotYVcInHH/xAAZEAEBAQEBAQAAAAAAAAAAAAABEQAxIfD/2gAIAQEAAT8QSOm9/Uckf7J2VFWMNeJQguLDXIl7R4STeiOg4pUQ80yH9QBuIJibLogR432BmhhAAQAPD57v/9k=" alt=""/><picture><source type="image/avif" data-srcset="/static/f1082d81f2807d3a4e13b865bcd8c9f7/2b382/refactor1.avif 750w,/static/f1082d81f2807d3a4e13b865bcd8c9f7/6ee87/refactor1.avif 800w" sizes="100vw"/><source type="image/webp" data-srcset="/static/f1082d81f2807d3a4e13b865bcd8c9f7/66907/refactor1.webp 750w,/static/f1082d81f2807d3a4e13b865bcd8c9f7/0d27e/refactor1.webp 800w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/f1082d81f2807d3a4e13b865bcd8c9f7/d0b9c/refactor1.jpg" data-srcset="/static/f1082d81f2807d3a4e13b865bcd8c9f7/6c918/refactor1.jpg 750w,/static/f1082d81f2807d3a4e13b865bcd8c9f7/d0b9c/refactor1.jpg 800w" alt="(8) vue 리팩토링1"/></picture><noscript><picture><source type="image/avif" srcSet="/static/f1082d81f2807d3a4e13b865bcd8c9f7/2b382/refactor1.avif 750w,/static/f1082d81f2807d3a4e13b865bcd8c9f7/6ee87/refactor1.avif 800w" sizes="100vw"/><source type="image/webp" srcSet="/static/f1082d81f2807d3a4e13b865bcd8c9f7/66907/refactor1.webp 750w,/static/f1082d81f2807d3a4e13b865bcd8c9f7/0d27e/refactor1.webp 800w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/f1082d81f2807d3a4e13b865bcd8c9f7/d0b9c/refactor1.jpg" srcSet="/static/f1082d81f2807d3a4e13b865bcd8c9f7/6c918/refactor1.jpg 750w,/static/f1082d81f2807d3a4e13b865bcd8c9f7/d0b9c/refactor1.jpg 800w" alt="(8) vue 리팩토링1"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(8) vue 리팩토링1</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/리팩토링/">리팩토링</a>,  <a href="/tags/vue-js/">Vue.js</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(8) vue 리팩토링1</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">멘토링 후 Tripllo에 꽤 많은 것을 손봐야한다는 것을 알게 되었다. 하나하나 고쳐보면서 정리한 것을 기록해보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-04-04">04 Apr 2021</time><span class="byline-reading-time"><span class="bull">•</span>21 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:75%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAAPABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAUGCf/EABcBAAMBAAAAAAAAAAAAAAAAAAAEBQj/2gAMAwEAAhADEAAAAcramPdbCrzIvHT/xAAaEAACAwEBAAAAAAAAAAAAAAAEBQACAwYx/9oACAEBAAEFAl6spppXknF7EjaiEBMTF19ugaETyf/EABcRAAMBAAAAAAAAAAAAAAAAAAEQEUH/2gAIAQMBAT8BNyL/xAAgEQEBAAEEAQUAAAAAAAAAAAABEQIDEhMxIQQFQUJh/9oACAECAQE/AdQ9x5MuLP0nF9N+lq8h+ZTV25eaU2eIzsSwqLCoQX5QuUF6Kzqvb//EACcQAAIBAwMCBgMAAAAAAAAAAAECAwQREgATIQUxBhQiMjNBUVKR/9oACAEBAAY/AjHSmjDKjyHzVfR0KhY8L+urmhUsc/QgJeTGTBTttp0Vuj5R+4HxD0NBz2s714jfLuMHbi/bFrTUs23vQOY5NqaKePIfpNCzxSLz7o3ZT+dNJRyiJ3wyJiil+Nsk+VHAsf79340plkpyVaRgRRUim8sUcL3xiFwY4kFj93buzE21/8QAGhABAQADAQEAAAAAAAAAAAAAAREAIUExYf/aAAgBAQABPyH5zyWCUklBgQ1oYlAiyIGoENw+fJkcLr+E5Eo4SiB6kMDh10TjEOQVuIJEMAOjXMAABAIBwM//2gAMAwEAAgADAAAAEFMf/8QAHBEAAwADAAMAAAAAAAAAAAAAAREhMVFxYZGh/9oACAEDAQE/EKiAVbJbzAIonsvAF2PXPPfmr//EABgRAQEBAQEAAAAAAAAAAAAAAAERADEh/9oACAECAQE/EOvdVJGCCXqrp6ZgSBEGSQotYVcInHH/xAAZEAEBAQEBAQAAAAAAAAAAAAABEQAxIfD/2gAIAQEAAT8QSOm9/Uckf7J2VFWMNeJQguLDXIl7R4STeiOg4pUQ80yH9QBuIJibLogR432BmhhAAQAPD57v/9k=" alt=""/><picture><source type="image/avif" data-srcset="/static/f1082d81f2807d3a4e13b865bcd8c9f7/2b382/refactor1.avif 750w,/static/f1082d81f2807d3a4e13b865bcd8c9f7/6ee87/refactor1.avif 800w" sizes="100vw"/><source type="image/webp" data-srcset="/static/f1082d81f2807d3a4e13b865bcd8c9f7/66907/refactor1.webp 750w,/static/f1082d81f2807d3a4e13b865bcd8c9f7/0d27e/refactor1.webp 800w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/f1082d81f2807d3a4e13b865bcd8c9f7/d0b9c/refactor1.jpg" data-srcset="/static/f1082d81f2807d3a4e13b865bcd8c9f7/6c918/refactor1.jpg 750w,/static/f1082d81f2807d3a4e13b865bcd8c9f7/d0b9c/refactor1.jpg 800w" alt="(8) vue 리팩토링1"/></picture><noscript><picture><source type="image/avif" srcSet="/static/f1082d81f2807d3a4e13b865bcd8c9f7/2b382/refactor1.avif 750w,/static/f1082d81f2807d3a4e13b865bcd8c9f7/6ee87/refactor1.avif 800w" sizes="100vw"/><source type="image/webp" srcSet="/static/f1082d81f2807d3a4e13b865bcd8c9f7/66907/refactor1.webp 750w,/static/f1082d81f2807d3a4e13b865bcd8c9f7/0d27e/refactor1.webp 800w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/f1082d81f2807d3a4e13b865bcd8c9f7/d0b9c/refactor1.jpg" srcSet="/static/f1082d81f2807d3a4e13b865bcd8c9f7/6c918/refactor1.jpg 750w,/static/f1082d81f2807d3a4e13b865bcd8c9f7/d0b9c/refactor1.jpg 800w" alt="(8) vue 리팩토링1"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -483,4 +483,4 @@ <h2 id="9-webStorage-변경-userData-encoding-작업" style="position:relative">
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tripllo/(9)vue-refactor2/index.html b/tripllo/(9)vue-refactor2/index.html
index dac3908d1..fd256dec1 100644
--- a/tripllo/(9)vue-refactor2/index.html
+++ b/tripllo/(9)vue-refactor2/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(9) vue 리팩토링2</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/리팩토링/">리팩토링</a>,  <a href="/tags/vue-js/">Vue.js</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(9) vue 리팩토링2</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">멘토링 후 Tripllo에 꽤 많은 것을 손봐야한다는 것을 알게 되었다. 하나하나 고쳐보면서 정리한 것을 기록해보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-04-05">05 Apr 2021</time><span class="byline-reading-time"><span class="bull">•</span>28 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:75%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAYEBQn/xAAXAQADAQAAAAAAAAAAAAAAAAAABAUI/9oADAMBAAIQAxAAAAHK1pT7zYVdXIA6f//EABkQAAMBAQEAAAAAAAAAAAAAAAIEBQMGAP/aAAgBAQABBQKfLaqaDyVgyZW1UYSouTj16KpsXv/EABcRAAMBAAAAAAAAAAAAAAAAAAEQEUH/2gAIAQMBAT8BNyL/xAAgEQEAAQQCAgMAAAAAAAAAAAABEQIDEhMhMQQFQUJh/9oACAECAQE/Abh7HZVqr8TV9M7V3YflcXcaueJMeIcexJgyRYJQgX5QmqBZgljqXt//xAAoEAACAQMCBQMFAAAAAAAAAAACAwEEERIAIQUTIjEyBhQzQUJRUpH/2gAIAQEABj8CldLNHBCBsn3VfR0IwK8L9dW5IyU59ARMmzFmAzyy0YCXB8l+UT6h4GEb9rGdfCzy7xgZbX7YlZ1K7l85BytnKcp68o/RySNTB38lmQz+dEyjbCjPDKZUpvxlkHygcRaf79b7aAmMpyJZmwZ9jSDORrWovFUX6FBa/wB1y3kivr//xAAbEAEBAQEBAAMAAAAAAAAAAAABESEAQTFhkf/aAAgBAQABPyH655LBKSSgwIZoYlAiyIGoIbx+fJkcLn8J5Eo8SiB8pDA4dcJ4xEI0DBeYTjBgWpz8NWABrWBA3wzv/9oADAMBAAIAAwAAABBTH//EABwRAAMAAwADAAAAAAAAAAAAAAERITFRcWGRof/aAAgBAwEBPxCogFWyW8wCKJ7LwBdj1zz35q//xAAZEQEBAQADAAAAAAAAAAAAAAABEQAhMUH/2gAIAQIBAT8Q7e9WnhEAgpvfpGBJgQbJCy1grhE44//EABgQAQEBAQEAAAAAAAAAAAAAAAERACEx/9oACAEBAAE/EEjpvv6jkj/ZOysojDShKYD+LTXIl2jwkm9EdBxSoh80yH9QBuCmswPzCY62ZrlUKQJKQY6UAFgBzf/Z" alt=""/><picture><source type="image/avif" data-srcset="/static/55cb55c1713d209ce0e78d1522e0f7bf/2b382/refactor2.avif 750w,/static/55cb55c1713d209ce0e78d1522e0f7bf/6ee87/refactor2.avif 800w" sizes="100vw"/><source type="image/webp" data-srcset="/static/55cb55c1713d209ce0e78d1522e0f7bf/66907/refactor2.webp 750w,/static/55cb55c1713d209ce0e78d1522e0f7bf/0d27e/refactor2.webp 800w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/55cb55c1713d209ce0e78d1522e0f7bf/d0b9c/refactor2.jpg" data-srcset="/static/55cb55c1713d209ce0e78d1522e0f7bf/6c918/refactor2.jpg 750w,/static/55cb55c1713d209ce0e78d1522e0f7bf/d0b9c/refactor2.jpg 800w" alt="(9) vue 리팩토링2"/></picture><noscript><picture><source type="image/avif" srcSet="/static/55cb55c1713d209ce0e78d1522e0f7bf/2b382/refactor2.avif 750w,/static/55cb55c1713d209ce0e78d1522e0f7bf/6ee87/refactor2.avif 800w" sizes="100vw"/><source type="image/webp" srcSet="/static/55cb55c1713d209ce0e78d1522e0f7bf/66907/refactor2.webp 750w,/static/55cb55c1713d209ce0e78d1522e0f7bf/0d27e/refactor2.webp 800w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/55cb55c1713d209ce0e78d1522e0f7bf/d0b9c/refactor2.jpg" srcSet="/static/55cb55c1713d209ce0e78d1522e0f7bf/6c918/refactor2.jpg 750w,/static/55cb55c1713d209ce0e78d1522e0f7bf/d0b9c/refactor2.jpg 800w" alt="(9) vue 리팩토링2"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">(9) vue 리팩토링2</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a>,  <a href="/tags/리팩토링/">리팩토링</a>,  <a href="/tags/vue-js/">Vue.js</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">(9) vue 리팩토링2</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">멘토링 후 Tripllo에 꽤 많은 것을 손봐야한다는 것을 알게 되었다. 하나하나 고쳐보면서 정리한 것을 기록해보자.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-04-05">05 Apr 2021</time><span class="byline-reading-time"><span class="bull">•</span>28 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:75%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAYEBQn/xAAXAQADAQAAAAAAAAAAAAAAAAAABAUI/9oADAMBAAIQAxAAAAHK1pT7zYVdXIA6f//EABkQAAMBAQEAAAAAAAAAAAAAAAIEBQMGAP/aAAgBAQABBQKfLaqaDyVgyZW1UYSouTj16KpsXv/EABcRAAMBAAAAAAAAAAAAAAAAAAEQEUH/2gAIAQMBAT8BNyL/xAAgEQEAAQQCAgMAAAAAAAAAAAABEQIDEhMhMQQFQUJh/9oACAECAQE/Abh7HZVqr8TV9M7V3YflcXcaueJMeIcexJgyRYJQgX5QmqBZgljqXt//xAAoEAACAQMCBQMFAAAAAAAAAAACAwEEERIAIQUTIjEyBhQzQUJRUpH/2gAIAQEABj8CldLNHBCBsn3VfR0IwK8L9dW5IyU59ARMmzFmAzyy0YCXB8l+UT6h4GEb9rGdfCzy7xgZbX7YlZ1K7l85BytnKcp68o/RySNTB38lmQz+dEyjbCjPDKZUpvxlkHygcRaf79b7aAmMpyJZmwZ9jSDORrWovFUX6FBa/wB1y3kivr//xAAbEAEBAQEBAAMAAAAAAAAAAAABESEAQTFhkf/aAAgBAQABPyH655LBKSSgwIZoYlAiyIGoIbx+fJkcLn8J5Eo8SiB8pDA4dcJ4xEI0DBeYTjBgWpz8NWABrWBA3wzv/9oADAMBAAIAAwAAABBTH//EABwRAAMAAwADAAAAAAAAAAAAAAERITFRcWGRof/aAAgBAwEBPxCogFWyW8wCKJ7LwBdj1zz35q//xAAZEQEBAQADAAAAAAAAAAAAAAABEQAhMUH/2gAIAQIBAT8Q7e9WnhEAgpvfpGBJgQbJCy1grhE44//EABgQAQEBAQEAAAAAAAAAAAAAAAERACEx/9oACAEBAAE/EEjpvv6jkj/ZOysojDShKYD+LTXIl2jwkm9EdBxSoh80yH9QBuCmswPzCY62ZrlUKQJKQY6UAFgBzf/Z" alt=""/><picture><source type="image/avif" data-srcset="/static/55cb55c1713d209ce0e78d1522e0f7bf/2b382/refactor2.avif 750w,/static/55cb55c1713d209ce0e78d1522e0f7bf/6ee87/refactor2.avif 800w" sizes="100vw"/><source type="image/webp" data-srcset="/static/55cb55c1713d209ce0e78d1522e0f7bf/66907/refactor2.webp 750w,/static/55cb55c1713d209ce0e78d1522e0f7bf/0d27e/refactor2.webp 800w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/55cb55c1713d209ce0e78d1522e0f7bf/d0b9c/refactor2.jpg" data-srcset="/static/55cb55c1713d209ce0e78d1522e0f7bf/6c918/refactor2.jpg 750w,/static/55cb55c1713d209ce0e78d1522e0f7bf/d0b9c/refactor2.jpg 800w" alt="(9) vue 리팩토링2"/></picture><noscript><picture><source type="image/avif" srcSet="/static/55cb55c1713d209ce0e78d1522e0f7bf/2b382/refactor2.avif 750w,/static/55cb55c1713d209ce0e78d1522e0f7bf/6ee87/refactor2.avif 800w" sizes="100vw"/><source type="image/webp" srcSet="/static/55cb55c1713d209ce0e78d1522e0f7bf/66907/refactor2.webp 750w,/static/55cb55c1713d209ce0e78d1522e0f7bf/0d27e/refactor2.webp 800w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/55cb55c1713d209ce0e78d1522e0f7bf/d0b9c/refactor2.jpg" srcSet="/static/55cb55c1713d209ce0e78d1522e0f7bf/6c918/refactor2.jpg 750w,/static/55cb55c1713d209ce0e78d1522e0f7bf/d0b9c/refactor2.jpg 800w" alt="(9) vue 리팩토링2"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -542,4 +542,4 @@ <h2 id="배운점" style="position:relative">배운점<a href="#%EB%B0%B0%EC%9A%
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tripllo/tripllo-delete/index.html b/tripllo/tripllo-delete/index.html
index fa6562a30..6a064cd8e 100644
--- a/tripllo/tripllo-delete/index.html
+++ b/tripllo/tripllo-delete/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">Tripllo 삭제 및 일상 회고</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">Tripllo 삭제 및 일상 회고</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">정들었던 Tripllo 어플리케이션을 삭제했다. AWS EC2, S3, RDB를 내렸다. 배포되어있는 도메인도. 씁쓸하면서 이상한 기분이었다. RDB 생성 script를 백업하고, 소개 페이지에 올려둔 gif 파일도 모두 백업해두었다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-12-05">05 Dec 2021</time><span class="byline-reading-time"><span class="bull">•</span>5 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:62.59977194982896%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAABoklEQVQ4y5XSW2+iQBjG8X7/T7LXe9mu3R6yiVWLh3qgDCCDKCCg1iN44N8wria9w0kmMyEzvzy8894B5HleLJxOOQ2rw8tHh39twWtL5114NIwRtYGjZl2XvA0cPuzJ9V5+2UB+9xM88bv2yN92i65u0jNMurrA8Xxmqy2z5QYnSHho6FT7Thkw57U9pGP5ZOmONN2x3azJspTLWKxTKtonNV2WS/jcFmiGi+/7jMcTptOp+n7KIU9+EQdVKk1JbTAsl/C5baKJEVE0JQgC5vM5h8PhfHzbJUmGVDRL1bM02BQj9vs9m81Gocvl8orOVhl/3nVqA3lbwt1uSxRF6LqO67p43pjddk38tTrXsFzCEy8FaLgIIZhMJgot6hiGIbMkYTpf3gZeEhbJimmaJrZtYxgCV8rbwUvCfq+HpmlYlqVAx3GQzhAvjHlsGqq5y4GdMyilVEgBFvtPw1AJw2ShwJJ9mPPUEtdXPhyPBEGIZdukWcbxeCRerLiv96n2S/ZhcbBleuo1i8t+PFe/GS1WJF9rZBBz/9ahPrD5z/0AvwE64dgHSejEwAAAAABJRU5ErkJggg==" alt=""/><picture><source type="image/avif" data-srcset="/static/688b437d9037a2279635c487fefa0aad/c0126/delete1.avif 750w,/static/688b437d9037a2279635c487fefa0aad/fd774/delete1.avif 877w" sizes="100vw"/><source type="image/webp" data-srcset="/static/688b437d9037a2279635c487fefa0aad/59596/delete1.webp 750w,/static/688b437d9037a2279635c487fefa0aad/8026f/delete1.webp 877w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/688b437d9037a2279635c487fefa0aad/a030c/delete1.png" data-srcset="/static/688b437d9037a2279635c487fefa0aad/d734b/delete1.png 750w,/static/688b437d9037a2279635c487fefa0aad/a030c/delete1.png 877w" alt="Tripllo 삭제 및 일상 회고"/></picture><noscript><picture><source type="image/avif" srcSet="/static/688b437d9037a2279635c487fefa0aad/c0126/delete1.avif 750w,/static/688b437d9037a2279635c487fefa0aad/fd774/delete1.avif 877w" sizes="100vw"/><source type="image/webp" srcSet="/static/688b437d9037a2279635c487fefa0aad/59596/delete1.webp 750w,/static/688b437d9037a2279635c487fefa0aad/8026f/delete1.webp 877w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/688b437d9037a2279635c487fefa0aad/a030c/delete1.png" srcSet="/static/688b437d9037a2279635c487fefa0aad/d734b/delete1.png 750w,/static/688b437d9037a2279635c487fefa0aad/a030c/delete1.png 877w" alt="Tripllo 삭제 및 일상 회고"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">Tripllo 삭제 및 일상 회고</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">Tripllo 삭제 및 일상 회고</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">정들었던 Tripllo 어플리케이션을 삭제했다. AWS EC2, S3, RDB를 내렸다. 배포되어있는 도메인도. 씁쓸하면서 이상한 기분이었다. RDB 생성 script를 백업하고, 소개 페이지에 올려둔 gif 파일도 모두 백업해두었다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-12-05">05 Dec 2021</time><span class="byline-reading-time"><span class="bull">•</span>5 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:62.59977194982896%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAABoklEQVQ4y5XSW2+iQBjG8X7/T7LXe9mu3R6yiVWLh3qgDCCDKCCg1iN44N8wria9w0kmMyEzvzy8894B5HleLJxOOQ2rw8tHh39twWtL5114NIwRtYGjZl2XvA0cPuzJ9V5+2UB+9xM88bv2yN92i65u0jNMurrA8Xxmqy2z5QYnSHho6FT7Thkw57U9pGP5ZOmONN2x3azJspTLWKxTKtonNV2WS/jcFmiGi+/7jMcTptOp+n7KIU9+EQdVKk1JbTAsl/C5baKJEVE0JQgC5vM5h8PhfHzbJUmGVDRL1bM02BQj9vs9m81Gocvl8orOVhl/3nVqA3lbwt1uSxRF6LqO67p43pjddk38tTrXsFzCEy8FaLgIIZhMJgot6hiGIbMkYTpf3gZeEhbJimmaJrZtYxgCV8rbwUvCfq+HpmlYlqVAx3GQzhAvjHlsGqq5y4GdMyilVEgBFvtPw1AJw2ShwJJ9mPPUEtdXPhyPBEGIZdukWcbxeCRerLiv96n2S/ZhcbBleuo1i8t+PFe/GS1WJF9rZBBz/9ahPrD5z/0AvwE64dgHSejEwAAAAABJRU5ErkJggg==" alt=""/><picture><source type="image/avif" data-srcset="/static/688b437d9037a2279635c487fefa0aad/c0126/delete1.avif 750w,/static/688b437d9037a2279635c487fefa0aad/fd774/delete1.avif 877w" sizes="100vw"/><source type="image/webp" data-srcset="/static/688b437d9037a2279635c487fefa0aad/59596/delete1.webp 750w,/static/688b437d9037a2279635c487fefa0aad/8026f/delete1.webp 877w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/688b437d9037a2279635c487fefa0aad/a030c/delete1.png" data-srcset="/static/688b437d9037a2279635c487fefa0aad/d734b/delete1.png 750w,/static/688b437d9037a2279635c487fefa0aad/a030c/delete1.png 877w" alt="Tripllo 삭제 및 일상 회고"/></picture><noscript><picture><source type="image/avif" srcSet="/static/688b437d9037a2279635c487fefa0aad/c0126/delete1.avif 750w,/static/688b437d9037a2279635c487fefa0aad/fd774/delete1.avif 877w" sizes="100vw"/><source type="image/webp" srcSet="/static/688b437d9037a2279635c487fefa0aad/59596/delete1.webp 750w,/static/688b437d9037a2279635c487fefa0aad/8026f/delete1.webp 877w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/688b437d9037a2279635c487fefa0aad/a030c/delete1.png" srcSet="/static/688b437d9037a2279635c487fefa0aad/d734b/delete1.png 750w,/static/688b437d9037a2279635c487fefa0aad/a030c/delete1.png 877w" alt="Tripllo 삭제 및 일상 회고"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -82,4 +82,4 @@
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/tripllo/tripllo-epilogue/index.html b/tripllo/tripllo-epilogue/index.html
index b2e1263aa..97dd0b205 100644
--- a/tripllo/tripllo-epilogue/index.html
+++ b/tripllo/tripllo-epilogue/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">Tripllo 후기</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">Tripllo 후기</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">프로젝트를 마무리했다. 두달 반 조금 안 되게 시간이 걸린 듯 하다. 프로젝트를 진행하면서 느꼈던 점을 조금 적어보려고 한다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-02-19">19 Feb 2021</time><span class="byline-reading-time"><span class="bull">•</span>12 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:70.13452914798206%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsTAAALEwEAmpwYAAAC3ElEQVQ4y42Sy28VZRjG5y+ruBAJaGhtIhtjQpCyEdkYUMBaN2qqxYUmBBISjVSKBmkIhBYWGF2YWC8BijRKT3s4l86cmfmuc58z8zNn2niJ8bJ48uR9Fr883/e+Tnz+JOadg8hTk3SO7EdOP4956wCD4+O0Du1FHx1DHX0C/cquRqqZxzCnJ4hmDqCP7UK+PPZ77qhbC3grd9Dff03n2m3sylfIb66zsbRIe/Em8fI80Y2PCa+cxb1ynmhpHrv8GfbaBfzLH+EvXiAezUvzmJsXcdbur3F3NSRyAxIgilN6m21a/QEijjEVREnG6obHd2ub6LQkKkdZTqfv0RooZF5jK9AlOPL+j1idQFlSVRXDLMOs30OHHqEfElnL0Gr6fY/NgWSgLHFRkqY5yu0jhSAymqosKfMcx9xbQQmJ1BotJIU1iH6XQEhEKMiKksJqosVz6IvvYRY+IP7iQ+KFM4h2C6EtYRCSZTlFUeKo9YcEyhD4PkobyiTGf9ymt+U2mY3iBli/+yK8+iS8vgeOP9W4/eFbrDZIEZLGMWVR4MhfVglHwCAgzXOGWYrodvBDSZ5llFXdAIdnjlCfeoZ6ZpJ6egJmJgk2HtEOLVtCE1eQ1PwBNMYwHP1hkuD2N/BEQCgUaVGSaUk1NwUn9zWw+o39MD2O+fIswY1PEdc/wS5fauToRz+jbIwQAhNFDNOUfmcdGVm0UihjyIzYAe7dbjc9vg19bQ+c2A0nnt7x3Tim9ZBQW5SUZGlKmSbIbpctd0Cv291eitEM5w7/rWH95sSf9FwjR/36gEBqRBiijaGII8JeB88PcLdchDKkavTkw39p+E9ygrW7hNqglGpOJRr5400Ct0diDGmaUiixA9z330D/wU/0tjy80ZkEAjXw8VyPIK0Ik4IYSPOy2fL/aljOHiSffYl89hDl+1MM56YwV8/h3/ocsXQJc+cq0e3LVG+/AKefpf4X2Aj4G2Aur2+a0xgkAAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/6b653001f64019c0b04254a40de8af38/94de5/%ED%9B%84%EA%B8%B0.avif 750w,/static/6b653001f64019c0b04254a40de8af38/54da0/%ED%9B%84%EA%B8%B0.avif 1080w,/static/6b653001f64019c0b04254a40de8af38/62e45/%ED%9B%84%EA%B8%B0.avif 1115w" sizes="100vw"/><source type="image/webp" data-srcset="/static/6b653001f64019c0b04254a40de8af38/96ac1/%ED%9B%84%EA%B8%B0.webp 750w,/static/6b653001f64019c0b04254a40de8af38/24cc5/%ED%9B%84%EA%B8%B0.webp 1080w,/static/6b653001f64019c0b04254a40de8af38/45d29/%ED%9B%84%EA%B8%B0.webp 1115w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/6b653001f64019c0b04254a40de8af38/ffe25/%ED%9B%84%EA%B8%B0.png" data-srcset="/static/6b653001f64019c0b04254a40de8af38/1d01f/%ED%9B%84%EA%B8%B0.png 750w,/static/6b653001f64019c0b04254a40de8af38/38074/%ED%9B%84%EA%B8%B0.png 1080w,/static/6b653001f64019c0b04254a40de8af38/ffe25/%ED%9B%84%EA%B8%B0.png 1115w" alt="Tripllo 후기"/></picture><noscript><picture><source type="image/avif" srcSet="/static/6b653001f64019c0b04254a40de8af38/94de5/%ED%9B%84%EA%B8%B0.avif 750w,/static/6b653001f64019c0b04254a40de8af38/54da0/%ED%9B%84%EA%B8%B0.avif 1080w,/static/6b653001f64019c0b04254a40de8af38/62e45/%ED%9B%84%EA%B8%B0.avif 1115w" sizes="100vw"/><source type="image/webp" srcSet="/static/6b653001f64019c0b04254a40de8af38/96ac1/%ED%9B%84%EA%B8%B0.webp 750w,/static/6b653001f64019c0b04254a40de8af38/24cc5/%ED%9B%84%EA%B8%B0.webp 1080w,/static/6b653001f64019c0b04254a40de8af38/45d29/%ED%9B%84%EA%B8%B0.webp 1115w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/6b653001f64019c0b04254a40de8af38/ffe25/%ED%9B%84%EA%B8%B0.png" srcSet="/static/6b653001f64019c0b04254a40de8af38/1d01f/%ED%9B%84%EA%B8%B0.png 750w,/static/6b653001f64019c0b04254a40de8af38/38074/%ED%9B%84%EA%B8%B0.png 1080w,/static/6b653001f64019c0b04254a40de8af38/ffe25/%ED%9B%84%EA%B8%B0.png 1115w" alt="Tripllo 후기"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">Tripllo 후기</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/tripllo-제작기/">Tripllo 제작기</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">Tripllo 후기</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">프로젝트를 마무리했다. 두달 반 조금 안 되게 시간이 걸린 듯 하다. 프로젝트를 진행하면서 느꼈던 점을 조금 적어보려고 한다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-02-19">19 Feb 2021</time><span class="byline-reading-time"><span class="bull">•</span>12 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:70.13452914798206%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsTAAALEwEAmpwYAAAC3ElEQVQ4y42Sy28VZRjG5y+ruBAJaGhtIhtjQpCyEdkYUMBaN2qqxYUmBBISjVSKBmkIhBYWGF2YWC8BijRKT3s4l86cmfmuc58z8zNn2niJ8bJ48uR9Fr883/e+Tnz+JOadg8hTk3SO7EdOP4956wCD4+O0Du1FHx1DHX0C/cquRqqZxzCnJ4hmDqCP7UK+PPZ77qhbC3grd9Dff03n2m3sylfIb66zsbRIe/Em8fI80Y2PCa+cxb1ynmhpHrv8GfbaBfzLH+EvXiAezUvzmJsXcdbur3F3NSRyAxIgilN6m21a/QEijjEVREnG6obHd2ub6LQkKkdZTqfv0RooZF5jK9AlOPL+j1idQFlSVRXDLMOs30OHHqEfElnL0Gr6fY/NgWSgLHFRkqY5yu0jhSAymqosKfMcx9xbQQmJ1BotJIU1iH6XQEhEKMiKksJqosVz6IvvYRY+IP7iQ+KFM4h2C6EtYRCSZTlFUeKo9YcEyhD4PkobyiTGf9ymt+U2mY3iBli/+yK8+iS8vgeOP9W4/eFbrDZIEZLGMWVR4MhfVglHwCAgzXOGWYrodvBDSZ5llFXdAIdnjlCfeoZ6ZpJ6egJmJgk2HtEOLVtCE1eQ1PwBNMYwHP1hkuD2N/BEQCgUaVGSaUk1NwUn9zWw+o39MD2O+fIswY1PEdc/wS5fauToRz+jbIwQAhNFDNOUfmcdGVm0UihjyIzYAe7dbjc9vg19bQ+c2A0nnt7x3Tim9ZBQW5SUZGlKmSbIbpctd0Cv291eitEM5w7/rWH95sSf9FwjR/36gEBqRBiijaGII8JeB88PcLdchDKkavTkw39p+E9ygrW7hNqglGpOJRr5400Ct0diDGmaUiixA9z330D/wU/0tjy80ZkEAjXw8VyPIK0Ik4IYSPOy2fL/aljOHiSffYl89hDl+1MM56YwV8/h3/ocsXQJc+cq0e3LVG+/AKefpf4X2Aj4G2Aur2+a0xgkAAAAAElFTkSuQmCC" alt=""/><picture><source type="image/avif" data-srcset="/static/6b653001f64019c0b04254a40de8af38/94de5/%ED%9B%84%EA%B8%B0.avif 750w,/static/6b653001f64019c0b04254a40de8af38/54da0/%ED%9B%84%EA%B8%B0.avif 1080w,/static/6b653001f64019c0b04254a40de8af38/62e45/%ED%9B%84%EA%B8%B0.avif 1115w" sizes="100vw"/><source type="image/webp" data-srcset="/static/6b653001f64019c0b04254a40de8af38/96ac1/%ED%9B%84%EA%B8%B0.webp 750w,/static/6b653001f64019c0b04254a40de8af38/24cc5/%ED%9B%84%EA%B8%B0.webp 1080w,/static/6b653001f64019c0b04254a40de8af38/45d29/%ED%9B%84%EA%B8%B0.webp 1115w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/6b653001f64019c0b04254a40de8af38/ffe25/%ED%9B%84%EA%B8%B0.png" data-srcset="/static/6b653001f64019c0b04254a40de8af38/1d01f/%ED%9B%84%EA%B8%B0.png 750w,/static/6b653001f64019c0b04254a40de8af38/38074/%ED%9B%84%EA%B8%B0.png 1080w,/static/6b653001f64019c0b04254a40de8af38/ffe25/%ED%9B%84%EA%B8%B0.png 1115w" alt="Tripllo 후기"/></picture><noscript><picture><source type="image/avif" srcSet="/static/6b653001f64019c0b04254a40de8af38/94de5/%ED%9B%84%EA%B8%B0.avif 750w,/static/6b653001f64019c0b04254a40de8af38/54da0/%ED%9B%84%EA%B8%B0.avif 1080w,/static/6b653001f64019c0b04254a40de8af38/62e45/%ED%9B%84%EA%B8%B0.avif 1115w" sizes="100vw"/><source type="image/webp" srcSet="/static/6b653001f64019c0b04254a40de8af38/96ac1/%ED%9B%84%EA%B8%B0.webp 750w,/static/6b653001f64019c0b04254a40de8af38/24cc5/%ED%9B%84%EA%B8%B0.webp 1080w,/static/6b653001f64019c0b04254a40de8af38/45d29/%ED%9B%84%EA%B8%B0.webp 1115w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/6b653001f64019c0b04254a40de8af38/ffe25/%ED%9B%84%EA%B8%B0.png" srcSet="/static/6b653001f64019c0b04254a40de8af38/1d01f/%ED%9B%84%EA%B8%B0.png 750w,/static/6b653001f64019c0b04254a40de8af38/38074/%ED%9B%84%EA%B8%B0.png 1080w,/static/6b653001f64019c0b04254a40de8af38/ffe25/%ED%9B%84%EA%B8%B0.png 1115w" alt="Tripllo 후기"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -118,4 +118,4 @@ <h2 id="6-마무리" style="position:relative">6. 마무리<a href="#6-%EB%A7%88
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/typescript/typescript-env/index.html b/typescript/typescript-env/index.html
index e8f930387..16684bc4b 100644
--- a/typescript/typescript-env/index.html
+++ b/typescript/typescript-env/index.html
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">TypeScript의 기본개념과 환경설정</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/type-script/">TypeScript</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">TypeScript의 기본개념과 환경설정</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">TypeScript 환경설정을 통해 웹 환경 추세를 알아보자. (feat. allowImportingTsExtensions)</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-05-05">05 May 2023</time><span class="byline-reading-time"><span class="bull">•</span>30 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:54.75%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABOUlEQVQoz2P4TwFg+P///z9URJpmTPD33z9ULtRQKPkPSXP93udm02+5zb/rMu+u9cxb5559+////5+/YIf8gyqFspF0QjUHL77PkHWKpfgsU9EZhrzTW298evX1988/UFW///578OHX998g7q+///78+/ft1z+EZp9F9zQnXE/b8Mhn8T29STdWXHq/8eaHnXc+rbjyfuHFd4suvpt08tWyy+833/o47fTrlVffL770DuJ4kGavRfcUe64Vb3+WtO5R2Y5nW25+/P7778EHX7be/nT44Zdjj79eevn96KMvt97+OProy667n26//YGw2X/xffbai7azbtvNup216fG+u5////8PcScaQIsOkOb773+effrt3LNvF198P/H468cff+FB+vcfOKiREVpoYwX//pEbz0QmEgAHWWJV93HGngAAAABJRU5ErkJggg==" alt=""/><picture><source type="image/avif" data-srcset="/static/e092969a3269e232f50e03e941f3d22f/2f802/main.avif 750w,/static/e092969a3269e232f50e03e941f3d22f/820f8/main.avif 800w" sizes="100vw"/><source type="image/webp" data-srcset="/static/e092969a3269e232f50e03e941f3d22f/24bb5/main.webp 750w,/static/e092969a3269e232f50e03e941f3d22f/a78a0/main.webp 800w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/e092969a3269e232f50e03e941f3d22f/c02d0/main.png" data-srcset="/static/e092969a3269e232f50e03e941f3d22f/38824/main.png 750w,/static/e092969a3269e232f50e03e941f3d22f/c02d0/main.png 800w" alt="TypeScript의 기본개념과 환경설정"/></picture><noscript><picture><source type="image/avif" srcSet="/static/e092969a3269e232f50e03e941f3d22f/2f802/main.avif 750w,/static/e092969a3269e232f50e03e941f3d22f/820f8/main.avif 800w" sizes="100vw"/><source type="image/webp" srcSet="/static/e092969a3269e232f50e03e941f3d22f/24bb5/main.webp 750w,/static/e092969a3269e232f50e03e941f3d22f/a78a0/main.webp 800w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/e092969a3269e232f50e03e941f3d22f/c02d0/main.png" srcSet="/static/e092969a3269e232f50e03e941f3d22f/38824/main.png 750w,/static/e092969a3269e232f50e03e941f3d22f/c02d0/main.png 800w" alt="TypeScript의 기본개념과 환경설정"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">TypeScript의 기본개념과 환경설정</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/type-script/">TypeScript</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">TypeScript의 기본개념과 환경설정</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">TypeScript 환경설정을 통해 웹 환경 추세를 알아보자. (feat. allowImportingTsExtensions)</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2023-05-05">05 May 2023</time><span class="byline-reading-time"><span class="bull">•</span>30 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:54.75%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABOUlEQVQoz2P4TwFg+P///z9URJpmTPD33z9ULtRQKPkPSXP93udm02+5zb/rMu+u9cxb5559+////5+/YIf8gyqFspF0QjUHL77PkHWKpfgsU9EZhrzTW298evX1988/UFW///578OHX998g7q+///78+/ft1z+EZp9F9zQnXE/b8Mhn8T29STdWXHq/8eaHnXc+rbjyfuHFd4suvpt08tWyy+833/o47fTrlVffL770DuJ4kGavRfcUe64Vb3+WtO5R2Y5nW25+/P7778EHX7be/nT44Zdjj79eevn96KMvt97+OProy667n26//YGw2X/xffbai7azbtvNup216fG+u5////8PcScaQIsOkOb773+effrt3LNvF198P/H468cff+FB+vcfOKiREVpoYwX//pEbz0QmEgAHWWJV93HGngAAAABJRU5ErkJggg==" alt=""/><picture><source type="image/avif" data-srcset="/static/e092969a3269e232f50e03e941f3d22f/2f802/main.avif 750w,/static/e092969a3269e232f50e03e941f3d22f/820f8/main.avif 800w" sizes="100vw"/><source type="image/webp" data-srcset="/static/e092969a3269e232f50e03e941f3d22f/24bb5/main.webp 750w,/static/e092969a3269e232f50e03e941f3d22f/a78a0/main.webp 800w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/e092969a3269e232f50e03e941f3d22f/c02d0/main.png" data-srcset="/static/e092969a3269e232f50e03e941f3d22f/38824/main.png 750w,/static/e092969a3269e232f50e03e941f3d22f/c02d0/main.png 800w" alt="TypeScript의 기본개념과 환경설정"/></picture><noscript><picture><source type="image/avif" srcSet="/static/e092969a3269e232f50e03e941f3d22f/2f802/main.avif 750w,/static/e092969a3269e232f50e03e941f3d22f/820f8/main.avif 800w" sizes="100vw"/><source type="image/webp" srcSet="/static/e092969a3269e232f50e03e941f3d22f/24bb5/main.webp 750w,/static/e092969a3269e232f50e03e941f3d22f/a78a0/main.webp 800w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/e092969a3269e232f50e03e941f3d22f/c02d0/main.png" srcSet="/static/e092969a3269e232f50e03e941f3d22f/38824/main.png 750w,/static/e092969a3269e232f50e03e941f3d22f/c02d0/main.png 800w" alt="TypeScript의 기본개념과 환경설정"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -357,4 +357,4 @@ <h2 id="webpack-환경에서-babelpreset-typescript-환경-설정" style="positi
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git "a/vue/Vue2-\353\260\230\354\235\221\354\204\261\354\227\220-\353\214\200\355\225\264\354\204\234/index.html" "b/vue/Vue2-\353\260\230\354\235\221\354\204\261\354\227\220-\353\214\200\355\225\264\354\204\234/index.html"
index 63e0f3bb8..1da23599d 100644
--- "a/vue/Vue2-\353\260\230\354\235\221\354\204\261\354\227\220-\353\214\200\355\225\264\354\204\234/index.html"
+++ "b/vue/Vue2-\353\260\230\354\235\221\354\204\261\354\227\220-\353\214\200\355\225\264\354\204\234/index.html"
@@ -58,7 +58,7 @@
 
         gtag('config', 'G-SLQNH3ND3J', {"anonymize_ip":true,"cookie_expires":0,"send_page_view":false});
       }
-      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">Vue2 반응성에 대해 깊이 알아보기</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/vue-js/">Vue.js</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">Vue2 반응성에 대해 깊이 알아보기</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Vue 2.x 버전의 반응성에 대해 깊이 알아보자. Vue의 반응성을 제대로 알지 못한다면 UI 컴포넌트를 다룰 때, 혹은 data 객체를 다룰 때 문제가 생길 수 있다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-04-14">14 Apr 2021</time><span class="byline-reading-time"><span class="bull">•</span>15 min read</span></div></section></section></div></header><style data-emotion="css 1j14aub">.css-1j14aub{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;}.css-1j14aub img{border-radius:8px;}@media (max-width: 1170px){.css-1j14aub img{max-width:1170px;}}@media (max-width: 800px){.css-1j14aub{width:100%;height:400px;}}@media (max-width: 500px){.css-1j14aub{margin-bottom:4vw;height:350px;}}</style><figure class="css-1j14aub ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:52.5%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAYIBAn/xAAVAQEBAAAAAAAAAAAAAAAAAAACA//aAAwDAQACEAMQAAAB7jxLUrU4KBjBT//EABkQAAMBAQEAAAAAAAAAAAAAAAMFBgEEB//aAAgBAQABBQJ1QqJ8Dt30UEf5+3avJ3nQJXLLJWbwZwYsP//EAB4RAQEAAQQDAQAAAAAAAAAAAAECEQMSITEAQbHh/9oACAEDAQE/AU1LRKDSSio28o4xW71Uo4OZZuihdrIoB3g7z+Hw8//EAB8RAAEDAwUAAAAAAAAAAAAAAAEAETECIWEiUXGBof/aAAgBAgEBPwHSJBNU44bZpXmBHT3X/8QAIhAAAgICAgICAwAAAAAAAAAAAgMBBAUSERMGFBUhACIy/9oACAEBAAY/Aoflbqq0MNa0q+2WHsayFLBNdUG5mzCiJIQ0COSYQjEzGboF5IzxqzmMtZGzG5rzFKuyYMvGR7XduPizTr9RZvHquB6dllrG1D7BeKcjlq5Je57ZRPrelUfSkVnVdjENIr/xuh9Vd2UFOQs9R2W10rclcFmcpjKl/KUJCpTuWVQxteuBxbBa+f1jWyRNgtdokijnUpiWq+DxnW7+wmmkh+uZCBghnrFUkUpBeookilMBJFy6pSddTWAgkFfIXmCGyVzMB22DkR5+4AZgI5niI5/P/8QAGBABAAMBAAAAAAAAAAAAAAAAAQARITH/2gAIAQEAAT8hS4BLndjQ3En3BlMiFkMlkfCEtvWJR5q3ZzHmGhLAwm0i6XHl2F42JVaKZmo2LqPt6/6kOmX/AP/aAAwDAQACAAMAAAAQUy//xAAYEQEBAQEBAAAAAAAAAAAAAAABESEAUf/aAAgBAwEBPxBP+Mo0hWDQGD9kRUAqlYVUJbd08LD/xAAZEQEBAQEBAQAAAAAAAAAAAAABESExAGH/2gAIAQIBAT8QJwAAaLbRQNLVWmS3zqsKboizEmOyq/eT/8QAFxABAQEBAAAAAAAAAAAAAAAAAQARIf/aAAgBAQABPxDaSzlYZQaVL1o+WEfxIllhGH68TZ2tSx/dDpBAZq5Ab7cQdV3lNI1sn4B1vaZEn+sJl1//2Q==" alt=""/><picture><source type="image/avif" data-srcset="/static/10ee2b8fdfcd49d0c97068e1a1049ccb/1260c/vue-jet.avif 600w" sizes="100vw"/><source type="image/webp" data-srcset="/static/10ee2b8fdfcd49d0c97068e1a1049ccb/22c65/vue-jet.webp 600w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/10ee2b8fdfcd49d0c97068e1a1049ccb/550ca/vue-jet.jpg" data-srcset="/static/10ee2b8fdfcd49d0c97068e1a1049ccb/550ca/vue-jet.jpg 600w" alt="Vue2 반응성에 대해 깊이 알아보기"/></picture><noscript><picture><source type="image/avif" srcSet="/static/10ee2b8fdfcd49d0c97068e1a1049ccb/1260c/vue-jet.avif 600w" sizes="100vw"/><source type="image/webp" srcSet="/static/10ee2b8fdfcd49d0c97068e1a1049ccb/22c65/vue-jet.webp 600w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/10ee2b8fdfcd49d0c97068e1a1049ccb/550ca/vue-jet.jpg" srcSet="/static/10ee2b8fdfcd49d0c97068e1a1049ccb/550ca/vue-jet.jpg 600w" alt="Vue2 반응성에 대해 깊이 알아보기"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
+      </script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="post-template"><style data-emotion="css-global 1iamagw">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:93%;vertical-align:baseline;}html .copyright,body .copyright,div .copyright,span .copyright,applet .copyright,object .copyright,iframe .copyright,h1 .copyright,h2 .copyright,h3 .copyright,h4 .copyright,h5 .copyright,h6 .copyright,p .copyright,blockquote .copyright,pre .copyright,a .copyright,abbr .copyright,acronym .copyright,address .copyright,big .copyright,cite .copyright,code .copyright,del .copyright,dfn .copyright,em .copyright,img .copyright,ins .copyright,kbd .copyright,q .copyright,s .copyright,samp .copyright,small .copyright,strike .copyright,strong .copyright,sub .copyright,sup .copyright,tt .copyright,var .copyright,dl .copyright,dt .copyright,dd .copyright,ol .copyright,fieldset .copyright,form .copyright,label .copyright,legend .copyright,article .copyright,aside .copyright,canvas .copyright,details .copyright,embed .copyright,figure .copyright,figcaption .copyright,footer .copyright,header .copyright,hgroup .copyright,menu .copyright,nav .copyright,output .copyright,ruby .copyright,section .copyright,summary .copyright,time .copyright,mark .copyright,audio .copyright,video .copyright{font-size:1.4rem;}html .error-front-page,body .error-front-page,div .error-front-page,span .error-front-page,applet .error-front-page,object .error-front-page,iframe .error-front-page,h1 .error-front-page,h2 .error-front-page,h3 .error-front-page,h4 .error-front-page,h5 .error-front-page,h6 .error-front-page,p .error-front-page,blockquote .error-front-page,pre .error-front-page,a .error-front-page,abbr .error-front-page,acronym .error-front-page,address .error-front-page,big .error-front-page,cite .error-front-page,code .error-front-page,del .error-front-page,dfn .error-front-page,em .error-front-page,img .error-front-page,ins .error-front-page,kbd .error-front-page,q .error-front-page,s .error-front-page,samp .error-front-page,small .error-front-page,strike .error-front-page,strong .error-front-page,sub .error-front-page,sup .error-front-page,tt .error-front-page,var .error-front-page,dl .error-front-page,dt .error-front-page,dd .error-front-page,ol .error-front-page,fieldset .error-front-page,form .error-front-page,label .error-front-page,legend .error-front-page,article .error-front-page,aside .error-front-page,canvas .error-front-page,details .error-front-page,embed .error-front-page,figure .error-front-page,figcaption .error-front-page,footer .error-front-page,header .error-front-page,hgroup .error-front-page,menu .error-front-page,nav .error-front-page,output .error-front-page,ruby .error-front-page,section .error-front-page,summary .error-front-page,time .error-front-page,mark .error-front-page,audio .error-front-page,video .error-front-page{font-size:1.6rem;}body{line-height:1;word-break:keep-all;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-spacing:0;border-collapse:collapse;}img{max-width:100%;}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,*:before,*:after{box-sizing:inherit;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:bold;}i,em,dfn{font-style:italic;}h1{margin:0.67em 0;font-size:2em;}small{font-size:80%;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}mark{background-color:#fdffb6;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;border:none;}button,select{text-transform:none;}button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input:focus{outline:none;}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto;}input[type='search']{box-sizing:content-box;-webkit-appearance:textfield;}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;}legend{padding:0;border:0;}textarea{overflow:auto;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}html{overflow-x:hidden;overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}body{overflow-x:hidden;color:#303a3e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:'liga' on;}body::-webkit-scrollbar{background-color:transparent;width:6px;}body::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}::selection{text-shadow:none;background:#3498db;}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed;}audio,canvas,iframe,img,svg,video{vertical-align:middle;}fieldset{margin:0;padding:0;border:0;}textarea{resize:vertical;}p,ul,ol,dl,blockquote{margin:0 0 1.5em 0;}ol,ul{padding-left:1.3em;}ol ol,ul ul,ul ol,ol ul{margin:0.5em 0 1em;}ul{list-style:disc;}ol{list-style:decimal;}ul,ol{max-width:100%;}li{margin:0.5em 0;padding-left:0.3em;line-height:1.6em;}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171A;font-weight:500;text-align:right;}dd{margin:0 0 5px 0;text-align:left;}blockquote{margin:1.5em 0;padding:0 1.6em 0 1.6em;border-left:#e5eff5 0.5em solid;}blockquote p{margin:0.8em 0;font-size:1.2em;font-weight:400;}blockquote small{display:inline-block;margin:0.8em 0 0.8em 1.5em;font-size:0.9em;opacity:0.8;}blockquote cite{font-weight:bold;}blockquote cite a{font-weight:normal;}a{color:#26a6ed;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:underline;text-decoration:underline;}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;}h1{margin:0 0 0.5em 0;font-size:5.5rem;font-weight:600;}@media (max-width: 500px){h1{font-size:2.2rem;}}h2{margin:1.5em 0 0.5em 0;font-size:2.2rem;}@media (max-width: 500px){h2{font-size:1.8rem;}}h3{margin:1.5em 0 0.5em 0;font-size:1.8rem;font-weight:500;}@media (max-width: 500px){h3{font-size:1.7rem;}}h4{margin:1.5em 0 0.5em 0;font-size:1.6rem;font-weight:500;}h5{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}h6{margin:1.5em 0 0.5em 0;font-size:1.4rem;font-weight:500;}body{background:#fff;}h1 a.auto-link svg,h2 a.auto-link svg,h3 a.auto-link svg,h4 a.auto-link svg,h5 a.auto-link svg,h6 a.auto-link svg{opacity:0;-webkit-transition:0.25s ease;transition:0.25s ease;}h1:hover a.auto-link svg,h2:hover a.auto-link svg,h3:hover a.auto-link svg,h4:hover a.auto-link svg,h5:hover a.auto-link svg,h6:hover a.auto-link svg{opacity:1;}a.auto-link{box-shadow:none!important;}a.auto-link svg{fill:#0a0b0c!important;}a.auto-link:hover{box-shadow:none!important;}@media (prefers-color-scheme: dark){body{color:rgba(255, 255, 255, 0.75);background:#191b1f;}img{opacity:0.9;}a.auto-link svg{fill:rgba(255, 255, 255, 0.9)!important;}}</style><style data-emotion="css wv5on3">.css-wv5on3 .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-wv5on3 .site-main{background:#191b1f;}}</style><style data-emotion="css 1qvd43r">.css-1qvd43r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}.css-1qvd43r .site-main{margin-top:64px;background:#fff;padding-bottom:4vw;}@media (prefers-color-scheme: dark){.css-1qvd43r .site-main{background:#191b1f;}}</style><div class="css-1qvd43r esvym2d0"><header class="site-header"><style data-emotion="css wuurd5">.css-wuurd5{position:relative;padding:0 5vw;position:fixed;top:0;right:0;left:0;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:transparent;}</style><div class="css-wuurd5"><style data-emotion="css y521qa">.css-y521qa{margin:0 auto;max-width:1040px;width:100%;}</style><div class="css-y521qa"><style data-emotion="css lcmrfl">.css-lcmrfl{position:relative;z-index:100;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;overflow-y:hidden;height:64px;font-size:1.3rem;}</style><nav class="css-lcmrfl"><style data-emotion="css axoi21">.css-axoi21{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-right:10px;padding:10px 0 80px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;white-space:nowrap;-ms-overflow-scrolling:touch;}@media (max-width: 700px){.css-axoi21{margin-right:0;}}</style><div class="site-nav-left  css-axoi21 e1sju8vj5"><style data-emotion="css vdmvgr">.css-vdmvgr{position:relative;z-index:100;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;margin-right:32px;padding:12px 0;color:#fff;font-size:1.7rem;line-height:1.8rem;font-weight:bold;letter-spacing:-0.5px;text-transform:none;}@media (max-width: 700px){.css-vdmvgr{margin-right:18px;}}.css-vdmvgr:hover{-webkit-text-decoration:none;text-decoration:none;}.css-vdmvgr img{display:block;width:auto;height:21px;}</style><a class="site-nav-logo css-vdmvgr" href="/"><img src="/static/a62d45ddbe29cf42da820a576d9375e1/aef42/alien.png" alt="Pozafly&#x27;s 블로그"/></a><style data-emotion="css 1xdepn">.css-1xdepn{position:relative;-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}</style><div class="css-1xdepn e1sju8vj4"><style data-emotion="css 17u0f19">.css-17u0f19{position:absolute;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);}.css-17u0f19 li{display:block;margin:0;padding:0;}.css-17u0f19 li a{font-size:1.2rem;position:relative;display:block;padding:14px 12px;color:#000;opacity:0.8;-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a{color:#fff;}}@media (max-width: 700px){.css-17u0f19 li a{padding:14px 8px;}}.css-17u0f19 li a:hover{-webkit-text-decoration:none;text-decoration:none;opacity:1;}.css-17u0f19 li a:before{content:'';position:absolute;right:100%;bottom:8px;left:12px;height:1px;background:#000;opacity:0.25;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}@media (prefers-color-scheme: dark){.css-17u0f19 li a:before{background:#fff;}}.css-17u0f19 li a:hover:before{right:12px;opacity:0.5;}.css-17u0f19 li a.is-home{color:#fff;}.css-17u0f19 li a.is-home:before{background:#fff;}.css-17u0f19 .nav-current{opacity:1;}</style><ul role="menu" class="css-17u0f19"><li role="menuitem"><a class="" href="/">Home</a></li><li role="menuitem"><a class="" href="/about/">About</a></li><li role="menuitem"><a class="" href="/tags/">Tags</a></li><li role="menuitem"><a class="" href="/tags/diary/">Diary</a></li></ul><style data-emotion="css pfwux1">.css-pfwux1{visibility:hidden;position:absolute;top:9px;color:#000;font-size:1.7rem;font-weight:400;text-transform:none;opacity:0;-webkit-transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);-webkit-transform:translateY(175%);-moz-transform:translateY(175%);-ms-transform:translateY(175%);transform:translateY(175%);}@media (prefers-color-scheme: dark){.css-pfwux1{color:#fff;}}@media (max-width: 700px){.css-pfwux1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 172px);}}.css-pfwux1 .dash{left:-25px;}.css-pfwux1 .dash:before{content:'– ';opacity:0.5;}</style><span class="nav-post-title css-pfwux1 e1sju8vj0">Vue2 반응성에 대해 깊이 알아보기</span></div></div><style data-emotion="css 3i3mo1">.css-3i3mo1{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding:10px 0;height:64px;}</style><div class="css-3i3mo1 e1sju8vj3"><style data-emotion="css 1z0rm8f">.css-1z0rm8f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1z0rm8f e1sju8vj2"><style data-emotion="css yvx7r3">.css-yvx7r3{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-yvx7r3:hover{opacity:1;}.css-yvx7r3 svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-yvx7r3 svg{fill:#fff;}}.css-yvx7r3.is-home svg{fill:#fff;}.css-yvx7r3 svg{height:1.6rem;}</style><a class=" css-yvx7r3" href="https://www.instagram.com/pozafly_/" target="_blank" title="Instagram" rel="noopener noreferrer"><svg height="511pt" viewBox="0 0 511 511.9" width="13pt" xmlns="http://www.w3.org/2000/svg"><path d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"></path><path d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"></path><path d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"></path></svg></a><style data-emotion="css 1rnjd3v">.css-1rnjd3v{display:inline-block;margin:0;padding:10px;opacity:0.8;}.css-1rnjd3v:hover{opacity:1;}.css-1rnjd3v svg{height:1.8rem;fill:#000;}@media (prefers-color-scheme: dark){.css-1rnjd3v svg{fill:#fff;}}.css-1rnjd3v.is-home svg{fill:#fff;}</style><a class=" css-1rnjd3v" href="https://github.com/pozafly" title="Github" target="_blank" rel="noopener noreferrer"><svg width="21px" height="21px" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)"></path></svg></a></div></div></nav></div></div></header><style data-emotion="css 12lzzeq">.css-12lzzeq{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;padding:0 5vw;}@media (prefers-color-scheme: dark){.css-12lzzeq{background:#191b1f;}}</style><main id="site-main" class="site-main css-12lzzeq"><div class="css-y521qa"><style data-emotion="css 1wcdnkk">.css-1wcdnkk{position:relative;z-index:50;}</style><article class="css-1wcdnkk"><style data-emotion="css 7tju5o">.css-7tju5o{position:relative;margin:0 auto;padding:70px 100px 50px;border-top-left-radius:3px;border-top-right-radius:3px;}@media (max-width: 1170px){.css-7tju5o{padding:60px 11vw 50px;}}@media (max-width: 800px){.css-7tju5o{padding-right:5vw;padding-left:5vw;}}@media (max-width: 500px){.css-7tju5o{padding:20px 0 35px;}}</style><header class="post-full-header css-7tju5o ewnyor55"><style data-emotion="css a12yu7">.css-a12yu7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.3rem;line-height:1.4em;font-weight:600;text-transform:uppercase;}</style><section class="post-full-tags css-a12yu7 ewnyor54"><a href="/tags/vue-js/">Vue.js</a></section><style data-emotion="css qia1z6">.css-qia1z6{margin:0 0 0.2em;color:#0b0c0e;}@media (max-width: 500px){.css-qia1z6{margin-top:0.2em;font-size:3.3rem;}}@media (prefers-color-scheme: dark){.css-qia1z6{color:rgba(255, 255, 255, 0.9);}}</style><h1 class="post-full-title css-qia1z6 ewnyor51">Vue2 반응성에 대해 깊이 알아보기</h1><style data-emotion="css cak2h8">.css-cak2h8{margin:20px 0 0;color:var(--midgrey);font-size:2rem;line-height:1.4em;font-weight:360;}@media (max-width: 500px){.css-cak2h8{font-size:1.9rem;line-height:1.5em;}}@media (prefers-color-scheme: dark){.css-cak2h8{color:#90a2aa;}}</style><p class="post-full-custom-excerpt css-cak2h8 ewnyor53">Vue 2.x 버전의 반응성에 대해 깊이 알아보자. Vue의 반응성을 제대로 알지 못한다면 UI 컴포넌트를 다룰 때, 혹은 data 객체를 다룰 때 문제가 생길 수 있다.</p><style data-emotion="css 1pygz0x">.css-1pygz0x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:35px 0 0;padding-top:15px;border-top:1px solid #e4eaed;}.css-1pygz0x .post-full-byline-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.css-1pygz0x .post-full-byline-content .author-list{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;padding:0 12px 0 0;}.css-1pygz0x .post-full-byline-meta{margin:2px 0 0;color:#90a2aa;font-size:1.2rem;line-height:1.2em;letter-spacing:0.2px;text-transform:uppercase;}.css-1pygz0x .post-full-byline-meta h4{margin:0 0 3px;font-size:1.3rem;line-height:1.4em;font-weight:500;}.css-1pygz0x .post-full-byline-meta h4 a{color:#2c3036;}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#15171A;}.css-1pygz0x .post-full-byline-meta .bull{display:inline-block;margin:0 4px;opacity:0.6;}@media (prefers-color-scheme: dark){.css-1pygz0x{border-top-color:#3b4049;}.css-1pygz0x .post-full-byline-meta h4 a{color:rgba(255, 255, 255, 0.75);}.css-1pygz0x .post-full-byline-meta h4 a:hover{color:#fff;}}</style><div class="post-full-byline css-1pygz0x ewnyor52"><section class="post-full-byline-content"><style data-emotion="css 12fmpzj">.css-12fmpzj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 0 4px;padding:0;list-style:none;}</style><ul class="author-list css-12fmpzj e1vx1kx20"><style data-emotion="css 1g82peq">.css-1g82peq{position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0;}.css-1g82peq:hover .author-name-tooltip{opacity:1;-webkit-transform:translate(-10px, -2px);-moz-transform:translate(-10px, -2px);-ms-transform:translate(-10px, -2px);transform:translate(-10px, -2px);}</style><li class="author-list-item css-1g82peq e1jay2161"><style data-emotion="css nqg22v">.css-nqg22v{position:absolute;bottom:130%;left:50%;z-index:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-left:-200px;width:400px;font-size:1.4rem;line-height:1.5em;background:white;border-radius:3px;box-shadow:rgba(39, 44, 49, 0.08) 0 12px 26px,rgba(39, 44, 49, 0.06) 1px 3px 8px;opacity:0;-webkit-transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);transition:all 0.35s cubic-bezier(0.4, 0.01, 0.165, 0.99);-webkit-transform:scale(0.98) translateY(15px);-moz-transform:scale(0.98) translateY(15px);-ms-transform:scale(0.98) translateY(15px);transform:scale(0.98) translateY(15px);pointer-events:none;padding:20px 20px 22px;}.css-nqg22v:before{content:'';position:absolute;top:100%;left:50%;display:block;margin-left:-8px;width:0;height:0;border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent;}.css-nqg22v .author-info{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 0 0 20px;}.css-nqg22v .author-info h2{margin:8px 0 0;font-size:1.6rem;}.css-nqg22v .author-info p{margin:4px 0 0;color:color(var(--midgrey) l(-10%));}.css-nqg22v .author-info .bio h2{margin-top:0;}.css-nqg22v .author-info .bio p{margin-top:0.8em;}.css-nqg22v .author-profile-image{-webkit-flex:0 0 60px;-ms-flex:0 0 60px;flex:0 0 60px;margin:0;width:60px;height:60px;border:none;}@media (max-width: 1170px){.css-nqg22v{margin-left:-50px;width:430px;}.css-nqg22v:before{left:50px;}}@media (max-width: 650px){.css-nqg22v{display:none;}}@media (prefers-color-scheme: dark){.css-nqg22v{background:#22252a;box-shadow:0 12px 26px rgba(0, 0, 0, 0.4);}.css-nqg22v:before{border-top-color:#22252a;}}</style><div class="author-card css-nqg22v"><style data-emotion="css 12febhg">.css-12febhg{display:block;width:100%;height:100%;background:#e4eaed;border-radius:100%;object-fit:cover;}@media (prefers-color-scheme: dark){.css-12febhg{background:#191b1f;}}.css-12febhg img{border-radius:100%;}</style><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><div class="author-info"><div class="bio"><h2>Pozafly</h2><p>Frontend Developer</p><p><a href="/author/pozafly/">More posts</a> by<!-- --> <!-- -->Pozafly<!-- -->.</p></div></div></div><style data-emotion="css 1smzq71">.css-1smzq71{display:block;overflow:hidden;margin:0 -4px;width:40px;height:40px;border:#fff 2px solid;border-radius:100%;-webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;}@media (max-width: 500px){.css-1smzq71{width:36px;height:36px;}}@media (prefers-color-scheme: dark){.css-1smzq71{border-color:#1a1c20;}}</style><a class="author-avatar css-1smzq71" href="/author/pozafly/"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper author-profile-image css-12febhg"><div aria-hidden="true" style="padding-top:100%"></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#6808f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" data-srcset="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture><noscript><picture><source type="image/webp" srcSet="/static/8c061761f263c344f2c0416607c8adf1/e73fe/pozafly.webp 40w,/static/8c061761f263c344f2c0416607c8adf1/61ca6/pozafly.webp 80w,/static/8c061761f263c344f2c0416607c8adf1/507b0/pozafly.webp 120w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg" srcSet="/static/8c061761f263c344f2c0416607c8adf1/2f28c/pozafly.jpg 40w,/static/8c061761f263c344f2c0416607c8adf1/499f6/pozafly.jpg 80w,/static/8c061761f263c344f2c0416607c8adf1/73bb6/pozafly.jpg 120w" alt="Pozafly"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></li></ul><section class="post-full-byline-meta"><h4 class="author-name"><a href="/author/pozafly/">Pozafly</a></h4><div class="byline-meta-content"><time class="byline-meta-date" dateTime="2021-04-14">14 Apr 2021</time><span class="byline-reading-time"><span class="bull">•</span>15 min read</span></div></section></section></div></header><style data-emotion="css 2f6woi">.css-2f6woi{margin:25px auto 50px;max-height:800px;-webkit-background-size:cover;background-size:cover;width:80%;border-radius:8px;border:1px solid hsl(230deg 25% 94%);}.css-2f6woi img{border-radius:8px;}@media (max-width: 1170px){.css-2f6woi img{max-width:1170px;}}@media (max-width: 800px){.css-2f6woi{width:100%;}}@media (max-width: 500px){.css-2f6woi{margin-bottom:4vw;}}@media (prefers-color-scheme: dark){.css-2f6woi{border:1px solid hsl(230deg 6% 23%);}}</style><figure class="css-2f6woi ewnyor50"><div data-gatsby-image-wrapper="" style="height:100%" class="gatsby-image-wrapper"><div aria-hidden="true" style="padding-top:52.5%"></div><img aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAYIBAn/xAAVAQEBAAAAAAAAAAAAAAAAAAACA//aAAwDAQACEAMQAAAB7jxLUrU4KBjBT//EABkQAAMBAQEAAAAAAAAAAAAAAAMFBgEEB//aAAgBAQABBQJ1QqJ8Dt30UEf5+3avJ3nQJXLLJWbwZwYsP//EAB4RAQEAAQQDAQAAAAAAAAAAAAECEQMSITEAQbHh/9oACAEDAQE/AU1LRKDSSio28o4xW71Uo4OZZuihdrIoB3g7z+Hw8//EAB8RAAEDAwUAAAAAAAAAAAAAAAEAETECIWEiUXGBof/aAAgBAgEBPwHSJBNU44bZpXmBHT3X/8QAIhAAAgICAgICAwAAAAAAAAAAAgMBBAUSERMGFBUhACIy/9oACAEBAAY/Aoflbqq0MNa0q+2WHsayFLBNdUG5mzCiJIQ0COSYQjEzGboF5IzxqzmMtZGzG5rzFKuyYMvGR7XduPizTr9RZvHquB6dllrG1D7BeKcjlq5Je57ZRPrelUfSkVnVdjENIr/xuh9Vd2UFOQs9R2W10rclcFmcpjKl/KUJCpTuWVQxteuBxbBa+f1jWyRNgtdokijnUpiWq+DxnW7+wmmkh+uZCBghnrFUkUpBeookilMBJFy6pSddTWAgkFfIXmCGyVzMB22DkR5+4AZgI5niI5/P/8QAGBABAAMBAAAAAAAAAAAAAAAAAQARITH/2gAIAQEAAT8hS4BLndjQ3En3BlMiFkMlkfCEtvWJR5q3ZzHmGhLAwm0i6XHl2F42JVaKZmo2LqPt6/6kOmX/AP/aAAwDAQACAAMAAAAQUy//xAAYEQEBAQEBAAAAAAAAAAAAAAABESEAUf/aAAgBAwEBPxBP+Mo0hWDQGD9kRUAqlYVUJbd08LD/xAAZEQEBAQEBAQAAAAAAAAAAAAABESExAGH/2gAIAQIBAT8QJwAAaLbRQNLVWmS3zqsKboizEmOyq/eT/8QAFxABAQEBAAAAAAAAAAAAAAAAAQARIf/aAAgBAQABPxDaSzlYZQaVL1o+WEfxIllhGH68TZ2tSx/dDpBAZq5Ab7cQdV3lNI1sn4B1vaZEn+sJl1//2Q==" alt=""/><picture><source type="image/avif" data-srcset="/static/10ee2b8fdfcd49d0c97068e1a1049ccb/1260c/vue-jet.avif 600w" sizes="100vw"/><source type="image/webp" data-srcset="/static/10ee2b8fdfcd49d0c97068e1a1049ccb/22c65/vue-jet.webp 600w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" data-src="/static/10ee2b8fdfcd49d0c97068e1a1049ccb/550ca/vue-jet.jpg" data-srcset="/static/10ee2b8fdfcd49d0c97068e1a1049ccb/550ca/vue-jet.jpg 600w" alt="Vue2 반응성에 대해 깊이 알아보기"/></picture><noscript><picture><source type="image/avif" srcSet="/static/10ee2b8fdfcd49d0c97068e1a1049ccb/1260c/vue-jet.avif 600w" sizes="100vw"/><source type="image/webp" srcSet="/static/10ee2b8fdfcd49d0c97068e1a1049ccb/22c65/vue-jet.webp 600w" sizes="100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="100vw" decoding="async" loading="lazy" src="/static/10ee2b8fdfcd49d0c97068e1a1049ccb/550ca/vue-jet.jpg" srcSet="/static/10ee2b8fdfcd49d0c97068e1a1049ccb/550ca/vue-jet.jpg 600w" alt="Vue2 반응성에 대해 깊이 알아보기"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></figure><style data-emotion="css 2gpz80">.css-2gpz80 code[class*='language-'],.css-2gpz80 pre[class*='language-']{color:white;background:none;font-family:Consolas,Menlo,Monaco,source-code-pro,Courier New,monospace;font-feature-settings:normal;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;margin-bottom:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar{background-color:transparent;height:4px;}.css-2gpz80 code[class*='language-']::-webkit-scrollbar-thumb,.css-2gpz80 pre[class*='language-']::-webkit-scrollbar-thumb{border-radius:8px;background-color:hsla(230, 5%, 35%, 1);}.css-2gpz80 pre[class*='language-']{overflow:auto;}.css-2gpz80 pre[class*='language-']::-moz-selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::selection{background:hsl(207, 4%, 16%);}.css-2gpz80 pre[class*='language-']::-moz-selection,.css-2gpz80 pre[class*='language-'] ::-moz-selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 pre[class*='language-']::selection,.css-2gpz80 pre[class*='language-'] ::selection{text-shadow:none;background:hsla(0, 0%, 100%, 0.15);}.css-2gpz80 *:not(pre)>code[class*='language-']{border-radius:0.3em;background:#3c4148;color:white;padding:0.15em 0.5em;white-space:normal;}.css-2gpz80 .token{font-size:1.4rem;}.css-2gpz80 .token.attr-name{color:rgb(173, 219, 103);font-style:italic;}.css-2gpz80 .token.comment{color:rgb(128, 147, 147);}.css-2gpz80 .token.string,.css-2gpz80 .token.url{color:rgb(173, 219, 103);}.css-2gpz80 .token.variable{color:rgb(214, 222, 235);}.css-2gpz80 .token.number{color:rgb(247, 140, 108);}.css-2gpz80 .token.builtin,.css-2gpz80 .token.char,.css-2gpz80 .token.constant,.css-2gpz80 .token.function{color:rgb(130, 170, 255);}.css-2gpz80 .token.punctuation{color:rgb(199, 146, 234);}.css-2gpz80 .token.selector,.css-2gpz80 .token.doctype{color:rgb(199, 146, 234);font-style:'italic';}.css-2gpz80 .token.class-name{color:rgb(255, 203, 139);}.css-2gpz80 .token.tag,.css-2gpz80 .token.operator,.css-2gpz80 .token.keyword{color:#ffa7c4;}.css-2gpz80 .token.boolean{color:rgb(255, 88, 116);}.css-2gpz80 .token.property{color:rgb(128, 203, 196);}.css-2gpz80 .token.namespace{color:rgb(178, 204, 214);}.css-2gpz80 pre[data-line]{padding:1em 0 1em 3em;position:relative;}.css-2gpz80 .gatsby-highlight-code-line{background-color:hsla(207, 95%, 15%, 1);display:block;margin-right:-1.3125rem;margin-left:-1.3125rem;padding-right:1em;padding-left:1.25em;border-left:0.25em solid #ffa7c4;}.css-2gpz80 .gatsby-highlight{margin-bottom:1.75rem;margin-left:-1.3125rem;margin-right:-1.3125rem;border-radius:10px;background:rgb(32 36 39);-webkit-overflow-scrolling:touch;overflow:auto;}.css-2gpz80 .gatsby-highlight pre[class*='language-']{float:left;min-width:100%;font-size:1.5rem;}</style><style data-emotion="css 1dubram">.css-1dubram{position:relative;margin:0 auto;padding:0 100px 6vw;min-height:230px;font-size:2rem;line-height:1.6em;background:#fff;}@media (max-width: 1170px){.css-1dubram{padding:0 11vw;}}@media (max-width: 800px){.css-1dubram{padding:0 5vw;font-size:1.8rem;}}@media (max-width: 500px){.css-1dubram{padding:0;}}@media (max-width: 500px){.css-1dubram .post-full-custom-excerpt{font-size:1.9rem;line-height:1.5em;}}.css-1dubram .no-image{padding-top:0;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6,.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram blockquote,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin:0 0 1.5em 0;min-width:100%;}@media (max-width: 500px){.css-1dubram p,.css-1dubram ul,.css-1dubram ol,.css-1dubram dl,.css-1dubram pre,.css-1dubram .post-full-comments,.css-1dubram .footnotes{margin-bottom:1.28em;}}.css-1dubram li{word-break:break-word;}.css-1dubram li p{margin:0;}.css-1dubram a{color:#3eb0ef;word-break:break-word;box-shadow:#3eb0ef 0 -1px 0 inset;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}.css-1dubram a:hover{color:#15171A;-webkit-text-decoration:none;text-decoration:none;box-shadow:#15171A 0 -1px 0 inset;}.css-1dubram a[class*=image],.css-1dubram a[class*=image]:hover{box-shadow:none;}.css-1dubram a[class*=image] span[class*=image],.css-1dubram a[class*=image]:hover span[class*=image]{border-radius:6px;}.css-1dubram strong,.css-1dubram em{color:#0a0b0c;}.css-1dubram small{display:inline-block;line-height:1.6em;}.css-1dubram img,.css-1dubram video{display:block;margin:2em auto;max-width:840px;height:auto;border-radius:6px;border:1px solid hsl(230deg 25% 94%);}@media (prefers-color-scheme: dark){.css-1dubram img,.css-1dubram video{border:1px solid hsl(230,6%,23%);}}@media (max-width: 1040px){.css-1dubram img,.css-1dubram video{width:100%;}}.css-1dubram img[src$='#full']{max-width:none;width:100vw;}.css-1dubram img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center;}.css-1dubram iframe{margin:10px auto 20px;}.css-1dubram blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:#3eb0ef 3px solid;}@media (max-width: 500px){.css-1dubram blockquote{padding:0 1.3em;}}.css-1dubram blockquote p{margin:0 0 1em 0;color:inherit;font-size:inherit;line-height:inherit;font-style:italic;}.css-1dubram blockquote p:last-child{margin-bottom:0;}.css-1dubram code{padding:0 5px 2px;font-size:0.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram p code{word-break:keep-all;}.css-1dubram pre{overflow-x:auto;padding:20px;max-width:100%;color:#e5eff5;font-size:1.4rem;line-height:1.5em;border-radius:5px;}.css-1dubram pre ::selection{color:#3b474d;}.css-1dubram pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent;}.css-1dubram pre code :not(span){color:inherit;}.css-1dubram .fluid-width-video-wrapper{margin:1.5em 0 3em;}.css-1dubram hr{margin:2em 0;}.css-1dubram hr:after{content:'';position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e4eaed;box-shadow:#fff 0 0 0 5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.css-1dubram hr+p{margin-top:1.2em;}.css-1dubram h1,.css-1dubram h2,.css-1dubram h3,.css-1dubram h4,.css-1dubram h5,.css-1dubram h6{color:#0a0b0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;}.css-1dubram h1{margin:0.5em 0 0.4em;font-size:4.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h1{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h1{font-size:3.2rem;line-height:1.25em;}}.css-1dubram h2{margin:0.5em 0 0.4em;font-size:3.2rem;line-height:1.25em;font-weight:600;}.css-1dubram p+h2{margin-top:0.8em;}@media (max-width: 800px){.css-1dubram h2{margin-bottom:0.3em;font-size:2.8rem;line-height:1.25em;}}.css-1dubram h3{margin:0.5em 0 0.2em;font-size:2.5rem;line-height:1.3em;font-weight:600;}.css-1dubram h2+h3{margin-top:0.7em;}@media (max-width: 800px){.css-1dubram h3{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h4{margin:0.5em 0 0.2em;font-size:2.5rem;font-weight:600;}.css-1dubram h2+h4{margin-top:0.7em;}.css-1dubram h3+h4{margin-top:0;}@media (max-width: 800px){.css-1dubram h4{margin-bottom:0.3em;font-size:2.4rem;line-height:1.3em;}}.css-1dubram h5{display:block;margin:0.5em 0;padding:0.4em 1em 0.9em;border:0;color:#3eb0ef;font-size:3.2rem;line-height:1.35em;text-align:center;}@media (min-width: 1180px){.css-1dubram h5{max-width:1060px;}}@media (max-width: 800px){.css-1dubram h5{margin-bottom:1em;margin-left:1.3em;padding:0 0 0.5em;font-size:2.4rem;text-align:initial;}}.css-1dubram h6{margin:0.5em 0 0.2em 0;font-size:2rem;font-weight:700;}@media (max-width: 800px){.css-1dubram h6{font-size:1.8rem;line-height:1.4em;}}.css-1dubram table{display:inline-block;overflow-x:auto;margin:0.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Ubuntu','Droid Sans','Helvetica Neue',sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;}.css-1dubram table{-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center,radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;background-attachment:scroll,scroll;-webkit-background-size:10px 100%,10px 100%;background-size:10px 100%,10px 100%;background-repeat:no-repeat;}.css-1dubram table td:first-of-type{background-image:linear-gradient(
       to right,
       rgba(255, 255, 255, 1) 50%,
       rgba(255, 255, 255, 0) 100%
@@ -192,4 +192,4 @@ <h2 id="비동기-갱신-큐" style="position:relative">비동기 갱신 큐<a h
           >
             window.___chunkMapping="{\"app\":[\"/app-97d1ef99a3067094028f.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js\"],\"component---src-pages-about-tsx\":[\"/component---src-pages-about-tsx-537864e8821dcd6ae890.js\"],\"component---src-pages-tags-tsx\":[\"/component---src-pages-tags-tsx-735c812959870adf97bc.js\"],\"component---src-templates-author-tsx\":[],\"component---src-templates-index-tsx\":[\"/component---src-templates-index-tsx-79eaa8229b337742b119.js\"],\"component---src-templates-post-tsx\":[],\"component---src-templates-tags-tsx\":[\"/component---src-templates-tags-tsx-115dcf3868904aa97209.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="8e5c4f2454d8fb1fc3a6";</script><script src="/webpack-runtime-4240845313cd76c9dc71.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
+        <script>window.___webpackCompilationHash="bae96ce9da441646d979";</script><script src="/webpack-runtime-52fd7f98635d9b9ff5c2.js" async></script><script src="/framework-5332a90d114fef29dbe7.js" async></script><script src="/app-97d1ef99a3067094028f.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
\ No newline at end of file
diff --git a/webpack-runtime-52fd7f98635d9b9ff5c2.js b/webpack-runtime-52fd7f98635d9b9ff5c2.js
new file mode 100644
index 000000000..f45b1dc5e
--- /dev/null
+++ b/webpack-runtime-52fd7f98635d9b9ff5c2.js
@@ -0,0 +1,2 @@
+!function(){"use strict";var e,t,n,r,o,a={},f={};function c(e){var t=f[e];if(void 0!==t)return t.exports;var n=f[e]={exports:{}};return a[e](n,n.exports,c),n.exports}c.m=a,e=[],c.O=function(t,n,r,o){if(!n){var a=1/0;for(d=0;d<e.length;d++){n=e[d][0],r=e[d][1],o=e[d][2];for(var f=!0,u=0;u<n.length;u++)(!1&o||a>=o)&&Object.keys(c.O).every((function(e){return c.O[e](n[u])}))?n.splice(u--,1):(f=!1,o<a&&(a=o));if(f){e.splice(d--,1);var i=r();void 0!==i&&(t=i)}}return t}o=o||0;for(var d=e.length;d>0&&e[d-1][2]>o;d--)e[d]=e[d-1];e[d]=[n,r,o]},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},c.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var o=Object.create(null);c.r(o);var a={};t=t||[null,n({}),n([]),n(n)];for(var f=2&r&&e;"object"==typeof f&&!~t.indexOf(f);f=n(f))Object.getOwnPropertyNames(f).forEach((function(t){a[t]=function(){return e[t]}}));return a.default=function(){return e},c.d(o,a),o},c.d=function(e,t){for(var n in t)c.o(t,n)&&!c.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},c.f={},c.e=function(e){return Promise.all(Object.keys(c.f).reduce((function(t,n){return c.f[n](e,t),t}),[]))},c.u=function(e){return({38:"161edb849f784c06ff2710753fb2ae881c988403",49:"component---src-pages-about-tsx",79:"component---src-templates-index-tsx",147:"a35e405e",190:"component---src-pages-tags-tsx",218:"component---src-pages-404-tsx",351:"commons",446:"b4ffff85",583:"a0ebcbf800fa96fd6682a21a52734fadc1c6aa01",803:"14cad5d5",896:"2364e05d",956:"e0525e89",975:"component---src-templates-tags-tsx"}[e]||e)+"-"+{38:"2c7e15d7be5fffcc509b",49:"537864e8821dcd6ae890",79:"79eaa8229b337742b119",147:"3092ff97e4c276d483b5",190:"735c812959870adf97bc",218:"7e56e5f698fc1b8ecad4",223:"70c319b1392dfab89048",351:"3729aa87a24c660d4efa",446:"2147b84aa3f24d25f549",583:"76cb66e0239a9e280a6b",803:"f761f83a27bf3943760e",843:"aa2f32a29b81371563e7",896:"4a1afd93eb3a2ebf8238",956:"f580b5526d62ccdf5313",975:"115dcf3868904aa97209"}[e]+".js"},c.miniCssF=function(e){},c.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r={},o="gatsby-casper:",c.l=function(e,t,n,a){if(r[e])r[e].push(t);else{var f,u;if(void 0!==n)for(var i=document.getElementsByTagName("script"),d=0;d<i.length;d++){var s=i[d];if(s.getAttribute("src")==e||s.getAttribute("data-webpack")==o+n){f=s;break}}f||(u=!0,(f=document.createElement("script")).charset="utf-8",f.timeout=120,c.nc&&f.setAttribute("nonce",c.nc),f.setAttribute("data-webpack",o+n),f.src=e),r[e]=[t];var b=function(t,n){f.onerror=f.onload=null,clearTimeout(l);var o=r[e];if(delete r[e],f.parentNode&&f.parentNode.removeChild(f),o&&o.forEach((function(e){return e(n)})),t)return t(n)},l=setTimeout(b.bind(null,void 0,{type:"timeout",target:f}),12e4);f.onerror=b.bind(null,f.onerror),f.onload=b.bind(null,f.onload),u&&document.head.appendChild(f)}},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.p="/",function(){var e={658:0};c.f.j=function(t,n){var r=c.o(e,t)?e[t]:void 0;if(0!==r)if(r)n.push(r[2]);else if(658!=t){var o=new Promise((function(n,o){r=e[t]=[n,o]}));n.push(r[2]=o);var a=c.p+c.u(t),f=new Error;c.l(a,(function(n){if(c.o(e,t)&&(0!==(r=e[t])&&(e[t]=void 0),r)){var o=n&&("load"===n.type?"missing":n.type),a=n&&n.target&&n.target.src;f.message="Loading chunk "+t+" failed.\n("+o+": "+a+")",f.name="ChunkLoadError",f.type=o,f.request=a,r[1](f)}}),"chunk-"+t,t)}else e[t]=0},c.O.j=function(t){return 0===e[t]};var t=function(t,n){var r,o,a=n[0],f=n[1],u=n[2],i=0;if(a.some((function(t){return 0!==e[t]}))){for(r in f)c.o(f,r)&&(c.m[r]=f[r]);if(u)var d=u(c)}for(t&&t(n);i<a.length;i++)o=a[i],c.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return c.O(d)},n=self.webpackChunkgatsby_casper=self.webpackChunkgatsby_casper||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}()}();
+//# sourceMappingURL=webpack-runtime-52fd7f98635d9b9ff5c2.js.map
\ No newline at end of file
diff --git a/webpack-runtime-52fd7f98635d9b9ff5c2.js.map b/webpack-runtime-52fd7f98635d9b9ff5c2.js.map
new file mode 100644
index 000000000..16d40dec0
--- /dev/null
+++ b/webpack-runtime-52fd7f98635d9b9ff5c2.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"webpack-runtime-52fd7f98635d9b9ff5c2.js","mappings":"6BAAIA,ECCAC,EADAC,ECAAC,EACAC,E,KCAAC,EAA2B,CAAC,EAGhC,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAaE,QAGrB,IAAIC,EAASN,EAAyBE,GAAY,CAGjDG,QAAS,CAAC,GAOX,OAHAE,EAAoBL,GAAUI,EAAQA,EAAOD,QAASJ,GAG/CK,EAAOD,OACf,CAGAJ,EAAoBO,EAAID,EHzBpBZ,EAAW,GACfM,EAAoBQ,EAAI,SAASC,EAAQC,EAAUC,EAAIC,GACtD,IAAGF,EAAH,CAMA,IAAIG,EAAeC,IACnB,IAASC,EAAI,EAAGA,EAAIrB,EAASsB,OAAQD,IAAK,CACrCL,EAAWhB,EAASqB,GAAG,GACvBJ,EAAKjB,EAASqB,GAAG,GACjBH,EAAWlB,EAASqB,GAAG,GAE3B,IAJA,IAGIE,GAAY,EACPC,EAAI,EAAGA,EAAIR,EAASM,OAAQE,MACpB,EAAXN,GAAsBC,GAAgBD,IAAaO,OAAOC,KAAKpB,EAAoBQ,GAAGa,OAAM,SAASC,GAAO,OAAOtB,EAAoBQ,EAAEc,GAAKZ,EAASQ,GAAK,IAChKR,EAASa,OAAOL,IAAK,IAErBD,GAAY,EACTL,EAAWC,IAAcA,EAAeD,IAG7C,GAAGK,EAAW,CACbvB,EAAS6B,OAAOR,IAAK,GACrB,IAAIS,EAAIb,SACER,IAANqB,IAAiBf,EAASe,EAC/B,CACD,CACA,OAAOf,CArBP,CAJCG,EAAWA,GAAY,EACvB,IAAI,IAAIG,EAAIrB,EAASsB,OAAQD,EAAI,GAAKrB,EAASqB,EAAI,GAAG,GAAKH,EAAUG,IAAKrB,EAASqB,GAAKrB,EAASqB,EAAI,GACrGrB,EAASqB,GAAK,CAACL,EAAUC,EAAIC,EAwB/B,EI5BAZ,EAAoByB,EAAI,SAASpB,GAChC,IAAIqB,EAASrB,GAAUA,EAAOsB,WAC7B,WAAa,OAAOtB,EAAgB,OAAG,EACvC,WAAa,OAAOA,CAAQ,EAE7B,OADAL,EAAoB4B,EAAEF,EAAQ,CAAEG,EAAGH,IAC5BA,CACR,EHPI9B,EAAWuB,OAAOW,eAAiB,SAASC,GAAO,OAAOZ,OAAOW,eAAeC,EAAM,EAAI,SAASA,GAAO,OAAOA,EAAIC,SAAW,EAQpIhC,EAAoBiC,EAAI,SAASC,EAAOC,GAEvC,GADU,EAAPA,IAAUD,EAAQE,KAAKF,IAChB,EAAPC,EAAU,OAAOD,EACpB,GAAoB,iBAAVA,GAAsBA,EAAO,CACtC,GAAW,EAAPC,GAAaD,EAAMP,WAAY,OAAOO,EAC1C,GAAW,GAAPC,GAAoC,mBAAfD,EAAMG,KAAqB,OAAOH,CAC5D,CACA,IAAII,EAAKnB,OAAOoB,OAAO,MACvBvC,EAAoBwB,EAAEc,GACtB,IAAIE,EAAM,CAAC,EACX7C,EAAiBA,GAAkB,CAAC,KAAMC,EAAS,CAAC,GAAIA,EAAS,IAAKA,EAASA,IAC/E,IAAI,IAAI6C,EAAiB,EAAPN,GAAYD,EAAyB,iBAAXO,KAAyB9C,EAAe+C,QAAQD,GAAUA,EAAU7C,EAAS6C,GACxHtB,OAAOwB,oBAAoBF,GAASG,SAAQ,SAAStB,GAAOkB,EAAIlB,GAAO,WAAa,OAAOY,EAAMZ,EAAM,CAAG,IAI3G,OAFAkB,EAAa,QAAI,WAAa,OAAON,CAAO,EAC5ClC,EAAoB4B,EAAEU,EAAIE,GACnBF,CACR,EIxBAtC,EAAoB4B,EAAI,SAASxB,EAASyC,GACzC,IAAI,IAAIvB,KAAOuB,EACX7C,EAAoB8C,EAAED,EAAYvB,KAAStB,EAAoB8C,EAAE1C,EAASkB,IAC5EH,OAAO4B,eAAe3C,EAASkB,EAAK,CAAE0B,YAAY,EAAMC,IAAKJ,EAAWvB,IAG3E,ECPAtB,EAAoBkD,EAAI,CAAC,EAGzBlD,EAAoBmD,EAAI,SAASC,GAChC,OAAOC,QAAQC,IAAInC,OAAOC,KAAKpB,EAAoBkD,GAAGK,QAAO,SAASC,EAAUlC,GAE/E,OADAtB,EAAoBkD,EAAE5B,GAAK8B,EAASI,GAC7BA,CACR,GAAG,IACJ,ECPAxD,EAAoByD,EAAI,SAASL,GAEhC,OAAa,CAAC,GAAK,2CAA2C,GAAK,kCAAkC,GAAK,sCAAsC,IAAM,WAAW,IAAM,iCAAiC,IAAM,gCAAgC,IAAM,UAAU,IAAM,WAAW,IAAM,2CAA2C,IAAM,WAAW,IAAM,WAAW,IAAM,WAAW,IAAM,sCAAsCA,IAAYA,GAAW,IAAM,CAAC,GAAK,uBAAuB,GAAK,uBAAuB,GAAK,uBAAuB,IAAM,uBAAuB,IAAM,uBAAuB,IAAM,uBAAuB,IAAM,uBAAuB,IAAM,uBAAuB,IAAM,uBAAuB,IAAM,uBAAuB,IAAM,uBAAuB,IAAM,uBAAuB,IAAM,uBAAuB,IAAM,uBAAuB,IAAM,wBAAwBA,GAAW,KAC13B,ECHApD,EAAoB0D,SAAW,SAASN,GAGxC,ECJApD,EAAoB2D,EAAI,WACvB,GAA0B,iBAAfC,WAAyB,OAAOA,WAC3C,IACC,OAAOxB,MAAQ,IAAIyB,SAAS,cAAb,EAGhB,CAFE,MAAOV,GACR,GAAsB,iBAAXW,OAAqB,OAAOA,MACxC,CACA,CAPuB,GCAxB9D,EAAoB8C,EAAI,SAASf,EAAKgC,GAAQ,OAAO5C,OAAO6C,UAAUC,eAAeC,KAAKnC,EAAKgC,EAAO,ERAlGlE,EAAa,CAAC,EACdC,EAAoB,iBAExBE,EAAoBmE,EAAI,SAASC,EAAKC,EAAM/C,EAAK8B,GAChD,GAAGvD,EAAWuE,GAAQvE,EAAWuE,GAAKE,KAAKD,OAA3C,CACA,IAAIE,EAAQC,EACZ,QAAWrE,IAARmB,EAEF,IADA,IAAImD,EAAUC,SAASC,qBAAqB,UACpC5D,EAAI,EAAGA,EAAI0D,EAAQzD,OAAQD,IAAK,CACvC,IAAI6D,EAAIH,EAAQ1D,GAChB,GAAG6D,EAAEC,aAAa,QAAUT,GAAOQ,EAAEC,aAAa,iBAAmB/E,EAAoBwB,EAAK,CAAEiD,EAASK,EAAG,KAAO,CACpH,CAEGL,IACHC,GAAa,GACbD,EAASG,SAASI,cAAc,WAEzBC,QAAU,QACjBR,EAAOS,QAAU,IACbhF,EAAoBiF,IACvBV,EAAOW,aAAa,QAASlF,EAAoBiF,IAElDV,EAAOW,aAAa,eAAgBpF,EAAoBwB,GACxDiD,EAAOY,IAAMf,GAEdvE,EAAWuE,GAAO,CAACC,GACnB,IAAIe,EAAmB,SAASC,EAAMC,GAErCf,EAAOgB,QAAUhB,EAAOiB,OAAS,KACjCC,aAAaT,GACb,IAAIU,EAAU7F,EAAWuE,GAIzB,UAHOvE,EAAWuE,GAClBG,EAAOoB,YAAcpB,EAAOoB,WAAWC,YAAYrB,GACnDmB,GAAWA,EAAQ9C,SAAQ,SAASjC,GAAM,OAAOA,EAAG2E,EAAQ,IACzDD,EAAM,OAAOA,EAAKC,EACtB,EACIN,EAAUa,WAAWT,EAAiBU,KAAK,UAAM3F,EAAW,CAAE4F,KAAM,UAAWC,OAAQzB,IAAW,MACtGA,EAAOgB,QAAUH,EAAiBU,KAAK,KAAMvB,EAAOgB,SACpDhB,EAAOiB,OAASJ,EAAiBU,KAAK,KAAMvB,EAAOiB,QACnDhB,GAAcE,SAASuB,KAAKC,YAAY3B,EAnCkB,CAoC3D,ESvCAvE,EAAoBwB,EAAI,SAASpB,GACX,oBAAX+F,QAA0BA,OAAOC,aAC1CjF,OAAO4B,eAAe3C,EAAS+F,OAAOC,YAAa,CAAElE,MAAO,WAE7Df,OAAO4B,eAAe3C,EAAS,aAAc,CAAE8B,OAAO,GACvD,ECNAlC,EAAoBqG,EAAI,I,WCKxB,IAAIC,EAAkB,CACrB,IAAK,GAGNtG,EAAoBkD,EAAEhC,EAAI,SAASkC,EAASI,GAE1C,IAAI+C,EAAqBvG,EAAoB8C,EAAEwD,EAAiBlD,GAAWkD,EAAgBlD,QAAWjD,EACtG,GAA0B,IAAvBoG,EAGF,GAAGA,EACF/C,EAASc,KAAKiC,EAAmB,SAEjC,GAAG,KAAOnD,EAAS,CAElB,IAAIoD,EAAU,IAAInD,SAAQ,SAASoD,EAASC,GAAUH,EAAqBD,EAAgBlD,GAAW,CAACqD,EAASC,EAAS,IACzHlD,EAASc,KAAKiC,EAAmB,GAAKC,GAGtC,IAAIpC,EAAMpE,EAAoBqG,EAAIrG,EAAoByD,EAAEL,GAEpDuD,EAAQ,IAAIC,MAgBhB5G,EAAoBmE,EAAEC,GAfH,SAASkB,GAC3B,GAAGtF,EAAoB8C,EAAEwD,EAAiBlD,KAEf,KAD1BmD,EAAqBD,EAAgBlD,MACRkD,EAAgBlD,QAAWjD,GACrDoG,GAAoB,CACtB,IAAIM,EAAYvB,IAAyB,SAAfA,EAAMS,KAAkB,UAAYT,EAAMS,MAChEe,EAAUxB,GAASA,EAAMU,QAAUV,EAAMU,OAAOb,IACpDwB,EAAMI,QAAU,iBAAmB3D,EAAU,cAAgByD,EAAY,KAAOC,EAAU,IAC1FH,EAAMK,KAAO,iBACbL,EAAMZ,KAAOc,EACbF,EAAMM,QAAUH,EAChBP,EAAmB,GAAGI,EACvB,CAEF,GACyC,SAAWvD,EAASA,EAC9D,MAAOkD,EAAgBlD,GAAW,CAGtC,EAUApD,EAAoBQ,EAAEU,EAAI,SAASkC,GAAW,OAAoC,IAA7BkD,EAAgBlD,EAAgB,EAGrF,IAAI8D,EAAuB,SAASC,EAA4BC,GAC/D,IAKInH,EAAUmD,EALV1C,EAAW0G,EAAK,GAChBC,EAAcD,EAAK,GACnBE,EAAUF,EAAK,GAGIrG,EAAI,EAC3B,GAAGL,EAAS6G,MAAK,SAASC,GAAM,OAA+B,IAAxBlB,EAAgBkB,EAAW,IAAI,CACrE,IAAIvH,KAAYoH,EACZrH,EAAoB8C,EAAEuE,EAAapH,KACrCD,EAAoBO,EAAEN,GAAYoH,EAAYpH,IAGhD,GAAGqH,EAAS,IAAI7G,EAAS6G,EAAQtH,EAClC,CAEA,IADGmH,GAA4BA,EAA2BC,GACrDrG,EAAIL,EAASM,OAAQD,IACzBqC,EAAU1C,EAASK,GAChBf,EAAoB8C,EAAEwD,EAAiBlD,IAAYkD,EAAgBlD,IACrEkD,EAAgBlD,GAAS,KAE1BkD,EAAgBlD,GAAW,EAE5B,OAAOpD,EAAoBQ,EAAEC,EAC9B,EAEIgH,EAAqBC,KAAgC,0BAAIA,KAAgC,2BAAK,GAClGD,EAAmB7E,QAAQsE,EAAqBpB,KAAK,KAAM,IAC3D2B,EAAmBnD,KAAO4C,EAAqBpB,KAAK,KAAM2B,EAAmBnD,KAAKwB,KAAK2B,G","sources":["webpack://gatsby-casper/webpack/runtime/chunk loaded","webpack://gatsby-casper/webpack/runtime/create fake namespace object","webpack://gatsby-casper/webpack/runtime/load script","webpack://gatsby-casper/webpack/bootstrap","webpack://gatsby-casper/webpack/runtime/compat get default export","webpack://gatsby-casper/webpack/runtime/define property getters","webpack://gatsby-casper/webpack/runtime/ensure chunk","webpack://gatsby-casper/webpack/runtime/get javascript chunk filename","webpack://gatsby-casper/webpack/runtime/get mini-css chunk filename","webpack://gatsby-casper/webpack/runtime/global","webpack://gatsby-casper/webpack/runtime/hasOwnProperty shorthand","webpack://gatsby-casper/webpack/runtime/make namespace object","webpack://gatsby-casper/webpack/runtime/publicPath","webpack://gatsby-casper/webpack/runtime/jsonp chunk loading"],"sourcesContent":["var deferred = [];\n__webpack_require__.O = function(result, chunkIds, fn, priority) {\n\tif(chunkIds) {\n\t\tpriority = priority || 0;\n\t\tfor(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];\n\t\tdeferred[i] = [chunkIds, fn, priority];\n\t\treturn;\n\t}\n\tvar notFulfilled = Infinity;\n\tfor (var i = 0; i < deferred.length; i++) {\n\t\tvar chunkIds = deferred[i][0];\n\t\tvar fn = deferred[i][1];\n\t\tvar priority = deferred[i][2];\n\t\tvar fulfilled = true;\n\t\tfor (var j = 0; j < chunkIds.length; j++) {\n\t\t\tif ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every(function(key) { return __webpack_require__.O[key](chunkIds[j]); })) {\n\t\t\t\tchunkIds.splice(j--, 1);\n\t\t\t} else {\n\t\t\t\tfulfilled = false;\n\t\t\t\tif(priority < notFulfilled) notFulfilled = priority;\n\t\t\t}\n\t\t}\n\t\tif(fulfilled) {\n\t\t\tdeferred.splice(i--, 1)\n\t\t\tvar r = fn();\n\t\t\tif (r !== undefined) result = r;\n\t\t}\n\t}\n\treturn result;\n};","var getProto = Object.getPrototypeOf ? function(obj) { return Object.getPrototypeOf(obj); } : function(obj) { return obj.__proto__; };\nvar leafPrototypes;\n// create a fake namespace object\n// mode & 1: value is a module id, require it\n// mode & 2: merge all properties of value into the ns\n// mode & 4: return value when already ns object\n// mode & 16: return value when it's Promise-like\n// mode & 8|1: behave like require\n__webpack_require__.t = function(value, mode) {\n\tif(mode & 1) value = this(value);\n\tif(mode & 8) return value;\n\tif(typeof value === 'object' && value) {\n\t\tif((mode & 4) && value.__esModule) return value;\n\t\tif((mode & 16) && typeof value.then === 'function') return value;\n\t}\n\tvar ns = Object.create(null);\n\t__webpack_require__.r(ns);\n\tvar def = {};\n\tleafPrototypes = leafPrototypes || [null, getProto({}), getProto([]), getProto(getProto)];\n\tfor(var current = mode & 2 && value; typeof current == 'object' && !~leafPrototypes.indexOf(current); current = getProto(current)) {\n\t\tObject.getOwnPropertyNames(current).forEach(function(key) { def[key] = function() { return value[key]; }; });\n\t}\n\tdef['default'] = function() { return value; };\n\t__webpack_require__.d(ns, def);\n\treturn ns;\n};","var inProgress = {};\nvar dataWebpackPrefix = \"gatsby-casper:\";\n// loadScript function to load a script via script tag\n__webpack_require__.l = function(url, done, key, chunkId) {\n\tif(inProgress[url]) { inProgress[url].push(done); return; }\n\tvar script, needAttach;\n\tif(key !== undefined) {\n\t\tvar scripts = document.getElementsByTagName(\"script\");\n\t\tfor(var i = 0; i < scripts.length; i++) {\n\t\t\tvar s = scripts[i];\n\t\t\tif(s.getAttribute(\"src\") == url || s.getAttribute(\"data-webpack\") == dataWebpackPrefix + key) { script = s; break; }\n\t\t}\n\t}\n\tif(!script) {\n\t\tneedAttach = true;\n\t\tscript = document.createElement('script');\n\n\t\tscript.charset = 'utf-8';\n\t\tscript.timeout = 120;\n\t\tif (__webpack_require__.nc) {\n\t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n\t\t}\n\t\tscript.setAttribute(\"data-webpack\", dataWebpackPrefix + key);\n\t\tscript.src = url;\n\t}\n\tinProgress[url] = [done];\n\tvar onScriptComplete = function(prev, event) {\n\t\t// avoid mem leaks in IE.\n\t\tscript.onerror = script.onload = null;\n\t\tclearTimeout(timeout);\n\t\tvar doneFns = inProgress[url];\n\t\tdelete inProgress[url];\n\t\tscript.parentNode && script.parentNode.removeChild(script);\n\t\tdoneFns && doneFns.forEach(function(fn) { return fn(event); });\n\t\tif(prev) return prev(event);\n\t};\n\tvar timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000);\n\tscript.onerror = onScriptComplete.bind(null, script.onerror);\n\tscript.onload = onScriptComplete.bind(null, script.onload);\n\tneedAttach && document.head.appendChild(script);\n};","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n// expose the modules object (__webpack_modules__)\n__webpack_require__.m = __webpack_modules__;\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = function(module) {\n\tvar getter = module && module.__esModule ?\n\t\tfunction() { return module['default']; } :\n\t\tfunction() { return module; };\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.f = {};\n// This file contains only the entry chunk.\n// The chunk loading function for additional chunks\n__webpack_require__.e = function(chunkId) {\n\treturn Promise.all(Object.keys(__webpack_require__.f).reduce(function(promises, key) {\n\t\t__webpack_require__.f[key](chunkId, promises);\n\t\treturn promises;\n\t}, []));\n};","// This function allow to reference async chunks\n__webpack_require__.u = function(chunkId) {\n\t// return url for filenames based on template\n\treturn \"\" + ({\"38\":\"161edb849f784c06ff2710753fb2ae881c988403\",\"49\":\"component---src-pages-about-tsx\",\"79\":\"component---src-templates-index-tsx\",\"147\":\"a35e405e\",\"190\":\"component---src-pages-tags-tsx\",\"218\":\"component---src-pages-404-tsx\",\"351\":\"commons\",\"446\":\"b4ffff85\",\"583\":\"a0ebcbf800fa96fd6682a21a52734fadc1c6aa01\",\"803\":\"14cad5d5\",\"896\":\"2364e05d\",\"956\":\"e0525e89\",\"975\":\"component---src-templates-tags-tsx\"}[chunkId] || chunkId) + \"-\" + {\"38\":\"2c7e15d7be5fffcc509b\",\"49\":\"537864e8821dcd6ae890\",\"79\":\"79eaa8229b337742b119\",\"147\":\"3092ff97e4c276d483b5\",\"190\":\"735c812959870adf97bc\",\"218\":\"7e56e5f698fc1b8ecad4\",\"223\":\"70c319b1392dfab89048\",\"351\":\"3729aa87a24c660d4efa\",\"446\":\"2147b84aa3f24d25f549\",\"583\":\"76cb66e0239a9e280a6b\",\"803\":\"f761f83a27bf3943760e\",\"843\":\"aa2f32a29b81371563e7\",\"896\":\"4a1afd93eb3a2ebf8238\",\"956\":\"f580b5526d62ccdf5313\",\"975\":\"115dcf3868904aa97209\"}[chunkId] + \".js\";\n};","// This function allow to reference all chunks\n__webpack_require__.miniCssF = function(chunkId) {\n\t// return url for filenames based on template\n\treturn undefined;\n};","__webpack_require__.g = (function() {\n\tif (typeof globalThis === 'object') return globalThis;\n\ttry {\n\t\treturn this || new Function('return this')();\n\t} catch (e) {\n\t\tif (typeof window === 'object') return window;\n\t}\n})();","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.p = \"/\";","// no baseURI\n\n// object to store loaded and loading chunks\n// undefined = chunk not loaded, null = chunk preloaded/prefetched\n// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded\nvar installedChunks = {\n\t658: 0\n};\n\n__webpack_require__.f.j = function(chunkId, promises) {\n\t\t// JSONP chunk loading for javascript\n\t\tvar installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;\n\t\tif(installedChunkData !== 0) { // 0 means \"already installed\".\n\n\t\t\t// a Promise means \"currently loading\".\n\t\t\tif(installedChunkData) {\n\t\t\t\tpromises.push(installedChunkData[2]);\n\t\t\t} else {\n\t\t\t\tif(658 != chunkId) {\n\t\t\t\t\t// setup Promise in chunk cache\n\t\t\t\t\tvar promise = new Promise(function(resolve, reject) { installedChunkData = installedChunks[chunkId] = [resolve, reject]; });\n\t\t\t\t\tpromises.push(installedChunkData[2] = promise);\n\n\t\t\t\t\t// start chunk loading\n\t\t\t\t\tvar url = __webpack_require__.p + __webpack_require__.u(chunkId);\n\t\t\t\t\t// create error before stack unwound to get useful stacktrace later\n\t\t\t\t\tvar error = new Error();\n\t\t\t\t\tvar loadingEnded = function(event) {\n\t\t\t\t\t\tif(__webpack_require__.o(installedChunks, chunkId)) {\n\t\t\t\t\t\t\tinstalledChunkData = installedChunks[chunkId];\n\t\t\t\t\t\t\tif(installedChunkData !== 0) installedChunks[chunkId] = undefined;\n\t\t\t\t\t\t\tif(installedChunkData) {\n\t\t\t\t\t\t\t\tvar errorType = event && (event.type === 'load' ? 'missing' : event.type);\n\t\t\t\t\t\t\t\tvar realSrc = event && event.target && event.target.src;\n\t\t\t\t\t\t\t\terror.message = 'Loading chunk ' + chunkId + ' failed.\\n(' + errorType + ': ' + realSrc + ')';\n\t\t\t\t\t\t\t\terror.name = 'ChunkLoadError';\n\t\t\t\t\t\t\t\terror.type = errorType;\n\t\t\t\t\t\t\t\terror.request = realSrc;\n\t\t\t\t\t\t\t\tinstalledChunkData[1](error);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t};\n\t\t\t\t\t__webpack_require__.l(url, loadingEnded, \"chunk-\" + chunkId, chunkId);\n\t\t\t\t} else installedChunks[chunkId] = 0;\n\t\t\t}\n\t\t}\n};\n\n// no prefetching\n\n// no preloaded\n\n// no HMR\n\n// no HMR manifest\n\n__webpack_require__.O.j = function(chunkId) { return installedChunks[chunkId] === 0; };\n\n// install a JSONP callback for chunk loading\nvar webpackJsonpCallback = function(parentChunkLoadingFunction, data) {\n\tvar chunkIds = data[0];\n\tvar moreModules = data[1];\n\tvar runtime = data[2];\n\t// add \"moreModules\" to the modules object,\n\t// then flag all \"chunkIds\" as loaded and fire callback\n\tvar moduleId, chunkId, i = 0;\n\tif(chunkIds.some(function(id) { return installedChunks[id] !== 0; })) {\n\t\tfor(moduleId in moreModules) {\n\t\t\tif(__webpack_require__.o(moreModules, moduleId)) {\n\t\t\t\t__webpack_require__.m[moduleId] = moreModules[moduleId];\n\t\t\t}\n\t\t}\n\t\tif(runtime) var result = runtime(__webpack_require__);\n\t}\n\tif(parentChunkLoadingFunction) parentChunkLoadingFunction(data);\n\tfor(;i < chunkIds.length; i++) {\n\t\tchunkId = chunkIds[i];\n\t\tif(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {\n\t\t\tinstalledChunks[chunkId][0]();\n\t\t}\n\t\tinstalledChunks[chunkId] = 0;\n\t}\n\treturn __webpack_require__.O(result);\n}\n\nvar chunkLoadingGlobal = self[\"webpackChunkgatsby_casper\"] = self[\"webpackChunkgatsby_casper\"] || [];\nchunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));\nchunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));"],"names":["deferred","leafPrototypes","getProto","inProgress","dataWebpackPrefix","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","exports","module","__webpack_modules__","m","O","result","chunkIds","fn","priority","notFulfilled","Infinity","i","length","fulfilled","j","Object","keys","every","key","splice","r","n","getter","__esModule","d","a","getPrototypeOf","obj","__proto__","t","value","mode","this","then","ns","create","def","current","indexOf","getOwnPropertyNames","forEach","definition","o","defineProperty","enumerable","get","f","e","chunkId","Promise","all","reduce","promises","u","miniCssF","g","globalThis","Function","window","prop","prototype","hasOwnProperty","call","l","url","done","push","script","needAttach","scripts","document","getElementsByTagName","s","getAttribute","createElement","charset","timeout","nc","setAttribute","src","onScriptComplete","prev","event","onerror","onload","clearTimeout","doneFns","parentNode","removeChild","setTimeout","bind","type","target","head","appendChild","Symbol","toStringTag","p","installedChunks","installedChunkData","promise","resolve","reject","error","Error","errorType","realSrc","message","name","request","webpackJsonpCallback","parentChunkLoadingFunction","data","moreModules","runtime","some","id","chunkLoadingGlobal","self"],"sourceRoot":""}
\ No newline at end of file
diff --git a/webpack.stats.json b/webpack.stats.json
index 42787f1e4..5050fa61c 100644
--- a/webpack.stats.json
+++ b/webpack.stats.json
@@ -1 +1 @@
-{"name":"build-javascript","namedChunkGroups":{"app":{"name":"app","assets":[{"name":"webpack-runtime-4240845313cd76c9dc71.js","size":4361},{"name":"framework-5332a90d114fef29dbe7.js","size":210237},{"name":"app-97d1ef99a3067094028f.js","size":86672}],"filteredAssets":0,"assetsSize":301270,"filteredAuxiliaryAssets":3,"auxiliaryAssetsSize":885163},"component---src-pages-404-tsx":{"name":"component---src-pages-404-tsx","assets":[{"name":"b4ffff85-2147b84aa3f24d25f549.js","size":6327},{"name":"14cad5d5-f761f83a27bf3943760e.js","size":4958},{"name":"a35e405e-3092ff97e4c276d483b5.js","size":3630},{"name":"commons-3729aa87a24c660d4efa.js","size":95278},{"name":"component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js","size":1635}],"filteredAssets":0,"assetsSize":111828,"filteredAuxiliaryAssets":6,"auxiliaryAssetsSize":583540},"component---src-pages-about-tsx":{"name":"component---src-pages-about-tsx","assets":[{"name":"b4ffff85-2147b84aa3f24d25f549.js","size":6327},{"name":"14cad5d5-f761f83a27bf3943760e.js","size":4958},{"name":"a35e405e-3092ff97e4c276d483b5.js","size":3630},{"name":"e0525e89-b98fd7283d792afda477.js","size":7637},{"name":"commons-3729aa87a24c660d4efa.js","size":95278},{"name":"a0ebcbf800fa96fd6682a21a52734fadc1c6aa01-76cb66e0239a9e280a6b.js","size":1760},{"name":"161edb849f784c06ff2710753fb2ae881c988403-2c7e15d7be5fffcc509b.js","size":41073},{"name":"component---src-pages-about-tsx-537864e8821dcd6ae890.js","size":6029}],"filteredAssets":0,"assetsSize":166692,"filteredAuxiliaryAssets":9,"auxiliaryAssetsSize":753516},"component---src-pages-tags-tsx":{"name":"component---src-pages-tags-tsx","assets":[{"name":"b4ffff85-2147b84aa3f24d25f549.js","size":6327},{"name":"14cad5d5-f761f83a27bf3943760e.js","size":4958},{"name":"a35e405e-3092ff97e4c276d483b5.js","size":3630},{"name":"e0525e89-b98fd7283d792afda477.js","size":7637},{"name":"commons-3729aa87a24c660d4efa.js","size":95278},{"name":"a0ebcbf800fa96fd6682a21a52734fadc1c6aa01-76cb66e0239a9e280a6b.js","size":1760},{"name":"161edb849f784c06ff2710753fb2ae881c988403-2c7e15d7be5fffcc509b.js","size":41073},{"name":"component---src-pages-tags-tsx-735c812959870adf97bc.js","size":2033}],"filteredAssets":0,"assetsSize":162696,"filteredAuxiliaryAssets":9,"auxiliaryAssetsSize":746864},"component---src-templates-author-tsx":{"name":"component---src-templates-author-tsx","assets":[{"name":"b4ffff85-2147b84aa3f24d25f549.js","size":6327},{"name":"14cad5d5-f761f83a27bf3943760e.js","size":4958},{"name":"a35e405e-3092ff97e4c276d483b5.js","size":3630},{"name":"2364e05d-4a1afd93eb3a2ebf8238.js","size":4793},{"name":"commons-3729aa87a24c660d4efa.js","size":95278},{"name":"a0ebcbf800fa96fd6682a21a52734fadc1c6aa01-76cb66e0239a9e280a6b.js","size":1760}],"filteredAssets":0,"assetsSize":116746,"filteredAuxiliaryAssets":7,"auxiliaryAssetsSize":597135},"component---src-templates-index-tsx":{"name":"component---src-templates-index-tsx","assets":[{"name":"b4ffff85-2147b84aa3f24d25f549.js","size":6327},{"name":"14cad5d5-f761f83a27bf3943760e.js","size":4958},{"name":"a35e405e-3092ff97e4c276d483b5.js","size":3630},{"name":"commons-3729aa87a24c660d4efa.js","size":95278},{"name":"a0ebcbf800fa96fd6682a21a52734fadc1c6aa01-76cb66e0239a9e280a6b.js","size":1760},{"name":"component---src-templates-index-tsx-79eaa8229b337742b119.js","size":5221}],"filteredAssets":0,"assetsSize":117174,"filteredAuxiliaryAssets":7,"auxiliaryAssetsSize":597378},"component---src-templates-post-tsx":{"name":"component---src-templates-post-tsx","assets":[{"name":"b4ffff85-2147b84aa3f24d25f549.js","size":6327},{"name":"14cad5d5-f761f83a27bf3943760e.js","size":4958},{"name":"a35e405e-3092ff97e4c276d483b5.js","size":3630},{"name":"e0525e89-b98fd7283d792afda477.js","size":7637},{"name":"commons-3729aa87a24c660d4efa.js","size":95278},{"name":"a0ebcbf800fa96fd6682a21a52734fadc1c6aa01-76cb66e0239a9e280a6b.js","size":1760},{"name":"161edb849f784c06ff2710753fb2ae881c988403-2c7e15d7be5fffcc509b.js","size":41073}],"filteredAssets":0,"assetsSize":160663,"filteredAuxiliaryAssets":8,"auxiliaryAssetsSize":741036},"component---src-templates-tags-tsx":{"name":"component---src-templates-tags-tsx","assets":[{"name":"b4ffff85-2147b84aa3f24d25f549.js","size":6327},{"name":"14cad5d5-f761f83a27bf3943760e.js","size":4958},{"name":"a35e405e-3092ff97e4c276d483b5.js","size":3630},{"name":"commons-3729aa87a24c660d4efa.js","size":95278},{"name":"a0ebcbf800fa96fd6682a21a52734fadc1c6aa01-76cb66e0239a9e280a6b.js","size":1760},{"name":"component---src-templates-tags-tsx-115dcf3868904aa97209.js","size":2231}],"filteredAssets":0,"assetsSize":114184,"filteredAuxiliaryAssets":7,"auxiliaryAssetsSize":590343}},"assetsByChunkName":{"app":["webpack-runtime-4240845313cd76c9dc71.js","framework-5332a90d114fef29dbe7.js","app-97d1ef99a3067094028f.js"],"component---src-pages-404-tsx":["b4ffff85-2147b84aa3f24d25f549.js","14cad5d5-f761f83a27bf3943760e.js","a35e405e-3092ff97e4c276d483b5.js","commons-3729aa87a24c660d4efa.js","component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js"],"component---src-pages-about-tsx":["b4ffff85-2147b84aa3f24d25f549.js","14cad5d5-f761f83a27bf3943760e.js","a35e405e-3092ff97e4c276d483b5.js","e0525e89-b98fd7283d792afda477.js","commons-3729aa87a24c660d4efa.js","a0ebcbf800fa96fd6682a21a52734fadc1c6aa01-76cb66e0239a9e280a6b.js","161edb849f784c06ff2710753fb2ae881c988403-2c7e15d7be5fffcc509b.js","component---src-pages-about-tsx-537864e8821dcd6ae890.js"],"component---src-pages-tags-tsx":["b4ffff85-2147b84aa3f24d25f549.js","14cad5d5-f761f83a27bf3943760e.js","a35e405e-3092ff97e4c276d483b5.js","e0525e89-b98fd7283d792afda477.js","commons-3729aa87a24c660d4efa.js","a0ebcbf800fa96fd6682a21a52734fadc1c6aa01-76cb66e0239a9e280a6b.js","161edb849f784c06ff2710753fb2ae881c988403-2c7e15d7be5fffcc509b.js","component---src-pages-tags-tsx-735c812959870adf97bc.js"],"component---src-templates-author-tsx":["b4ffff85-2147b84aa3f24d25f549.js","14cad5d5-f761f83a27bf3943760e.js","a35e405e-3092ff97e4c276d483b5.js","2364e05d-4a1afd93eb3a2ebf8238.js","commons-3729aa87a24c660d4efa.js","a0ebcbf800fa96fd6682a21a52734fadc1c6aa01-76cb66e0239a9e280a6b.js"],"component---src-templates-index-tsx":["b4ffff85-2147b84aa3f24d25f549.js","14cad5d5-f761f83a27bf3943760e.js","a35e405e-3092ff97e4c276d483b5.js","commons-3729aa87a24c660d4efa.js","a0ebcbf800fa96fd6682a21a52734fadc1c6aa01-76cb66e0239a9e280a6b.js","component---src-templates-index-tsx-79eaa8229b337742b119.js"],"component---src-templates-post-tsx":["b4ffff85-2147b84aa3f24d25f549.js","14cad5d5-f761f83a27bf3943760e.js","a35e405e-3092ff97e4c276d483b5.js","e0525e89-b98fd7283d792afda477.js","commons-3729aa87a24c660d4efa.js","a0ebcbf800fa96fd6682a21a52734fadc1c6aa01-76cb66e0239a9e280a6b.js","161edb849f784c06ff2710753fb2ae881c988403-2c7e15d7be5fffcc509b.js"],"component---src-templates-tags-tsx":["b4ffff85-2147b84aa3f24d25f549.js","14cad5d5-f761f83a27bf3943760e.js","a35e405e-3092ff97e4c276d483b5.js","commons-3729aa87a24c660d4efa.js","a0ebcbf800fa96fd6682a21a52734fadc1c6aa01-76cb66e0239a9e280a6b.js","component---src-templates-tags-tsx-115dcf3868904aa97209.js"]},"childAssetsByChunkName":{}}
\ No newline at end of file
+{"name":"build-javascript","namedChunkGroups":{"app":{"name":"app","assets":[{"name":"webpack-runtime-52fd7f98635d9b9ff5c2.js","size":4361},{"name":"framework-5332a90d114fef29dbe7.js","size":210237},{"name":"app-97d1ef99a3067094028f.js","size":86672}],"filteredAssets":0,"assetsSize":301270,"filteredAuxiliaryAssets":3,"auxiliaryAssetsSize":885163},"component---src-pages-404-tsx":{"name":"component---src-pages-404-tsx","assets":[{"name":"b4ffff85-2147b84aa3f24d25f549.js","size":6327},{"name":"14cad5d5-f761f83a27bf3943760e.js","size":4958},{"name":"a35e405e-3092ff97e4c276d483b5.js","size":3630},{"name":"commons-3729aa87a24c660d4efa.js","size":95278},{"name":"component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js","size":1635}],"filteredAssets":0,"assetsSize":111828,"filteredAuxiliaryAssets":6,"auxiliaryAssetsSize":583540},"component---src-pages-about-tsx":{"name":"component---src-pages-about-tsx","assets":[{"name":"b4ffff85-2147b84aa3f24d25f549.js","size":6327},{"name":"14cad5d5-f761f83a27bf3943760e.js","size":4958},{"name":"a35e405e-3092ff97e4c276d483b5.js","size":3630},{"name":"e0525e89-f580b5526d62ccdf5313.js","size":7720},{"name":"commons-3729aa87a24c660d4efa.js","size":95278},{"name":"a0ebcbf800fa96fd6682a21a52734fadc1c6aa01-76cb66e0239a9e280a6b.js","size":1760},{"name":"161edb849f784c06ff2710753fb2ae881c988403-2c7e15d7be5fffcc509b.js","size":41073},{"name":"component---src-pages-about-tsx-537864e8821dcd6ae890.js","size":6029}],"filteredAssets":0,"assetsSize":166775,"filteredAuxiliaryAssets":9,"auxiliaryAssetsSize":753607},"component---src-pages-tags-tsx":{"name":"component---src-pages-tags-tsx","assets":[{"name":"b4ffff85-2147b84aa3f24d25f549.js","size":6327},{"name":"14cad5d5-f761f83a27bf3943760e.js","size":4958},{"name":"a35e405e-3092ff97e4c276d483b5.js","size":3630},{"name":"e0525e89-f580b5526d62ccdf5313.js","size":7720},{"name":"commons-3729aa87a24c660d4efa.js","size":95278},{"name":"a0ebcbf800fa96fd6682a21a52734fadc1c6aa01-76cb66e0239a9e280a6b.js","size":1760},{"name":"161edb849f784c06ff2710753fb2ae881c988403-2c7e15d7be5fffcc509b.js","size":41073},{"name":"component---src-pages-tags-tsx-735c812959870adf97bc.js","size":2033}],"filteredAssets":0,"assetsSize":162779,"filteredAuxiliaryAssets":9,"auxiliaryAssetsSize":746955},"component---src-templates-author-tsx":{"name":"component---src-templates-author-tsx","assets":[{"name":"b4ffff85-2147b84aa3f24d25f549.js","size":6327},{"name":"14cad5d5-f761f83a27bf3943760e.js","size":4958},{"name":"a35e405e-3092ff97e4c276d483b5.js","size":3630},{"name":"2364e05d-4a1afd93eb3a2ebf8238.js","size":4793},{"name":"commons-3729aa87a24c660d4efa.js","size":95278},{"name":"a0ebcbf800fa96fd6682a21a52734fadc1c6aa01-76cb66e0239a9e280a6b.js","size":1760}],"filteredAssets":0,"assetsSize":116746,"filteredAuxiliaryAssets":7,"auxiliaryAssetsSize":597135},"component---src-templates-index-tsx":{"name":"component---src-templates-index-tsx","assets":[{"name":"b4ffff85-2147b84aa3f24d25f549.js","size":6327},{"name":"14cad5d5-f761f83a27bf3943760e.js","size":4958},{"name":"a35e405e-3092ff97e4c276d483b5.js","size":3630},{"name":"commons-3729aa87a24c660d4efa.js","size":95278},{"name":"a0ebcbf800fa96fd6682a21a52734fadc1c6aa01-76cb66e0239a9e280a6b.js","size":1760},{"name":"component---src-templates-index-tsx-79eaa8229b337742b119.js","size":5221}],"filteredAssets":0,"assetsSize":117174,"filteredAuxiliaryAssets":7,"auxiliaryAssetsSize":597378},"component---src-templates-post-tsx":{"name":"component---src-templates-post-tsx","assets":[{"name":"b4ffff85-2147b84aa3f24d25f549.js","size":6327},{"name":"14cad5d5-f761f83a27bf3943760e.js","size":4958},{"name":"a35e405e-3092ff97e4c276d483b5.js","size":3630},{"name":"e0525e89-f580b5526d62ccdf5313.js","size":7720},{"name":"commons-3729aa87a24c660d4efa.js","size":95278},{"name":"a0ebcbf800fa96fd6682a21a52734fadc1c6aa01-76cb66e0239a9e280a6b.js","size":1760},{"name":"161edb849f784c06ff2710753fb2ae881c988403-2c7e15d7be5fffcc509b.js","size":41073}],"filteredAssets":0,"assetsSize":160746,"filteredAuxiliaryAssets":8,"auxiliaryAssetsSize":741127},"component---src-templates-tags-tsx":{"name":"component---src-templates-tags-tsx","assets":[{"name":"b4ffff85-2147b84aa3f24d25f549.js","size":6327},{"name":"14cad5d5-f761f83a27bf3943760e.js","size":4958},{"name":"a35e405e-3092ff97e4c276d483b5.js","size":3630},{"name":"commons-3729aa87a24c660d4efa.js","size":95278},{"name":"a0ebcbf800fa96fd6682a21a52734fadc1c6aa01-76cb66e0239a9e280a6b.js","size":1760},{"name":"component---src-templates-tags-tsx-115dcf3868904aa97209.js","size":2231}],"filteredAssets":0,"assetsSize":114184,"filteredAuxiliaryAssets":7,"auxiliaryAssetsSize":590343}},"assetsByChunkName":{"app":["webpack-runtime-52fd7f98635d9b9ff5c2.js","framework-5332a90d114fef29dbe7.js","app-97d1ef99a3067094028f.js"],"component---src-pages-404-tsx":["b4ffff85-2147b84aa3f24d25f549.js","14cad5d5-f761f83a27bf3943760e.js","a35e405e-3092ff97e4c276d483b5.js","commons-3729aa87a24c660d4efa.js","component---src-pages-404-tsx-7e56e5f698fc1b8ecad4.js"],"component---src-pages-about-tsx":["b4ffff85-2147b84aa3f24d25f549.js","14cad5d5-f761f83a27bf3943760e.js","a35e405e-3092ff97e4c276d483b5.js","e0525e89-f580b5526d62ccdf5313.js","commons-3729aa87a24c660d4efa.js","a0ebcbf800fa96fd6682a21a52734fadc1c6aa01-76cb66e0239a9e280a6b.js","161edb849f784c06ff2710753fb2ae881c988403-2c7e15d7be5fffcc509b.js","component---src-pages-about-tsx-537864e8821dcd6ae890.js"],"component---src-pages-tags-tsx":["b4ffff85-2147b84aa3f24d25f549.js","14cad5d5-f761f83a27bf3943760e.js","a35e405e-3092ff97e4c276d483b5.js","e0525e89-f580b5526d62ccdf5313.js","commons-3729aa87a24c660d4efa.js","a0ebcbf800fa96fd6682a21a52734fadc1c6aa01-76cb66e0239a9e280a6b.js","161edb849f784c06ff2710753fb2ae881c988403-2c7e15d7be5fffcc509b.js","component---src-pages-tags-tsx-735c812959870adf97bc.js"],"component---src-templates-author-tsx":["b4ffff85-2147b84aa3f24d25f549.js","14cad5d5-f761f83a27bf3943760e.js","a35e405e-3092ff97e4c276d483b5.js","2364e05d-4a1afd93eb3a2ebf8238.js","commons-3729aa87a24c660d4efa.js","a0ebcbf800fa96fd6682a21a52734fadc1c6aa01-76cb66e0239a9e280a6b.js"],"component---src-templates-index-tsx":["b4ffff85-2147b84aa3f24d25f549.js","14cad5d5-f761f83a27bf3943760e.js","a35e405e-3092ff97e4c276d483b5.js","commons-3729aa87a24c660d4efa.js","a0ebcbf800fa96fd6682a21a52734fadc1c6aa01-76cb66e0239a9e280a6b.js","component---src-templates-index-tsx-79eaa8229b337742b119.js"],"component---src-templates-post-tsx":["b4ffff85-2147b84aa3f24d25f549.js","14cad5d5-f761f83a27bf3943760e.js","a35e405e-3092ff97e4c276d483b5.js","e0525e89-f580b5526d62ccdf5313.js","commons-3729aa87a24c660d4efa.js","a0ebcbf800fa96fd6682a21a52734fadc1c6aa01-76cb66e0239a9e280a6b.js","161edb849f784c06ff2710753fb2ae881c988403-2c7e15d7be5fffcc509b.js"],"component---src-templates-tags-tsx":["b4ffff85-2147b84aa3f24d25f549.js","14cad5d5-f761f83a27bf3943760e.js","a35e405e-3092ff97e4c276d483b5.js","commons-3729aa87a24c660d4efa.js","a0ebcbf800fa96fd6682a21a52734fadc1c6aa01-76cb66e0239a9e280a6b.js","component---src-templates-tags-tsx-115dcf3868904aa97209.js"]},"childAssetsByChunkName":{}}
\ No newline at end of file