From b0dbd211fbb75f14df6ff7c858156fc06ecf579c Mon Sep 17 00:00:00 2001
From: prayinforrain <prayinforrain@users.noreply.github.com>
Date: Mon, 23 Sep 2024 15:43:22 +0000
Subject: [PATCH] deploy: facd90b205185dab93eeb8dfbe3014c726744f04

---
 404.html                                      |  10 +-
 about/index.html                              |  10 +-
 ...webp => avatar_hu16273194194817824927.webp | Bin
 categories/algorithm/index.html               |  10 +-
 categories/algorithm/index.xml                |   8 +-
 categories/css/index.html                     |  10 +-
 categories/css/index.xml                      |  24 +-
 categories/ide/index.html                     |  10 +-
 categories/ide/index.xml                      |  11 +-
 categories/index.html                         |  10 +-
 categories/index.xml                          |   2 +-
 categories/javascript/index.html              |  10 +-
 categories/javascript/index.xml               |  15 +-
 categories/life/index.html                    |  10 +-
 categories/life/index.xml                     |  12 +-
 categories/moheyum/index.html                 |  10 +-
 categories/moheyum/index.xml                  |  76 ++++--
 categories/node.js/index.html                 |  10 +-
 categories/node.js/index.xml                  |  15 +-
 categories/react/index.html                   |  10 +-
 categories/react/index.xml                    |  19 +-
 categories/typescript/index.html              |  10 +-
 categories/typescript/index.xml               |  39 +++-
 categories/web/index.html                     |  10 +-
 categories/web/index.xml                      |  79 ++++++-
 images/posts/2024/07/site-optimization/01.PNG | Bin 0 -> 40353 bytes
 images/posts/2024/07/site-optimization/02.png | Bin 0 -> 234364 bytes
 index.html                                    |  10 +-
 index.xml                                     | 221 ++++++++++++++----
 posts/2022/11/emotion/index.html              |  16 +-
 .../making-editor-contenteditable/index.html  |  18 +-
 .../11/making-editor-getselection/index.html  |  20 +-
 posts/2022/11/npm-vs-yarn-vs-pnpm/index.html  |  12 +-
 posts/2022/11/redux-vs-recoil/index.html      |  16 +-
 posts/2022/12/finishing-moheyum/index.html    |  12 +-
 .../2022/12/making-editor-markdown/index.html |  16 +-
 .../12/prevent-sidebar-blinking/index.html    |  14 +-
 .../browser-rendering-performance/index.html  |  14 +-
 posts/2023/01/css-display/index.html          |  10 +-
 posts/2023/01/ecmascript/index.html           |  12 +-
 posts/2023/01/migrating-to-hugo/index.html    |  14 +-
 posts/2023/01/size-units-in-css/index.html    |  12 +-
 posts/2023/01/tree-shaking/index.html         |  14 +-
 .../02/firebase-with-typescript/index.html    |  12 +-
 posts/2023/02/typescript-generic/index.html   |  20 +-
 posts/2023/03/nodejs-for-baekjoon/index.html  |  12 +-
 .../03/npm-scripts-doesnt-work/index.html     |  20 +-
 .../04/nextjs-storybook-with-pnp/index.html   |  34 +--
 posts/2023/04/numble-talk/index.html          |  12 +-
 posts/2023/05/exploring-yarn-berry/index.html |  22 +-
 posts/2023/06/cds-retrospect/index.html       |  12 +-
 posts/2023/11/cell-refactoring/index.html     |  14 +-
 posts/2024/07/site-optimization/index.html    |  32 +++
 posts/index.html                              |  10 +-
 posts/index.xml                               | 197 ++++++++++++----
 sitemap.xml                                   |   2 +-
 tags/algorithm/index.html                     |  10 +-
 tags/algorithm/index.xml                      |   8 +-
 tags/baekjoon/index.html                      |  10 +-
 tags/baekjoon/index.xml                       |   8 +-
 tags/blog/index.html                          |  10 +-
 tags/blog/index.xml                           |   8 +-
 tags/browser/index.html                       |  10 +-
 tags/browser/index.xml                        |  19 +-
 tags/cds/index.html                           |  10 +-
 tags/cds/index.xml                            |   2 +-
 tags/css-in-js/index.html                     |  10 +-
 tags/css-in-js/index.xml                      |  12 +-
 tags/css/index.html                           |  10 +-
 tags/css/index.xml                            |  24 +-
 tags/ecmascript/index.html                    |  10 +-
 tags/ecmascript/index.xml                     |  11 +-
 tags/emotion/index.html                       |  10 +-
 tags/emotion/index.xml                        |  12 +-
 tags/firebase/index.html                      |  10 +-
 tags/firebase/index.xml                       |  14 +-
 tags/generic/index.html                       |  10 +-
 tags/generic/index.xml                        |  27 ++-
 tags/hugo/index.html                          |  10 +-
 tags/hugo/index.xml                           |   8 +-
 tags/index.html                               |  10 +-
 tags/index.xml                                |   2 +-
 tags/javascript/index.html                    |  10 +-
 tags/javascript/index.xml                     |  21 +-
 tags/macos/index.html                         |  10 +-
 tags/macos/index.xml                          |  11 +-
 tags/moheyum/index.html                       |  10 +-
 tags/moheyum/index.xml                        |  76 ++++--
 tags/nextjs/index.html                        |  10 +-
 tags/nextjs/index.xml                         |   5 +-
 tags/nodejs/index.html                        |  10 +-
 tags/nodejs/index.xml                         |   8 +-
 tags/npm/index.html                           |  10 +-
 tags/npm/index.xml                            |  20 +-
 tags/numble/index.html                        |  10 +-
 tags/numble/index.xml                         |   6 +-
 tags/nvm/index.html                           |  10 +-
 tags/nvm/index.xml                            |  11 +-
 tags/pnp/index.html                           |  10 +-
 tags/pnp/index.xml                            |   5 +-
 tags/pnpm/index.html                          |  10 +-
 tags/pnpm/index.xml                           |  11 +-
 tags/project/index.html                       |  10 +-
 tags/project/index.xml                        |   6 +-
 tags/ps/index.html                            |  10 +-
 tags/ps/index.xml                             |   8 +-
 tags/react/index.html                         |  10 +-
 tags/react/index.xml                          |   2 +-
 tags/recoil/index.html                        |  10 +-
 tags/recoil/index.xml                         |   9 +-
 tags/redux/index.html                         |  10 +-
 tags/redux/index.xml                          |   9 +-
 tags/storybook/index.html                     |  10 +-
 tags/storybook/index.xml                      |   5 +-
 tags/tree-shaking/index.html                  |  10 +-
 tags/tree-shaking/index.xml                   |   6 +-
 tags/typescript/index.html                    |  10 +-
 tags/typescript/index.xml                     |  39 +++-
 tags/vscode/index.html                        |  10 +-
 tags/vscode/index.xml                         |  11 +-
 tags/web/index.html                           |  10 +-
 tags/web/index.xml                            |  91 ++++++--
 tags/yarn/index.html                          |  10 +-
 tags/yarn/index.xml                           |  18 +-
 124 files changed, 1447 insertions(+), 686 deletions(-)
 rename avatar_hu8a16f9f51dd7b9a0a5f04c391447c48e_10088_100x100_fill_q75_h2_box_smart1_3.webp => avatar_hu16273194194817824927.webp (100%)
 create mode 100644 images/posts/2024/07/site-optimization/01.PNG
 create mode 100644 images/posts/2024/07/site-optimization/02.png
 create mode 100644 posts/2024/07/site-optimization/index.html

diff --git a/404.html b/404.html
index ee81c2d..0bfcfc4 100644
--- a/404.html
+++ b/404.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>404 Page not found | PrayinForRain.dev</title>
-<meta property="og:title" content="404 Page not found | PrayinForRain.dev"><meta name=twitter:title content="404 Page not found | PrayinForRain.dev"><meta itemprop=name content="404 Page not found | PrayinForRain.dev"><meta name=application-name content="404 Page not found | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/404.html title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/404.html><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="404 Page not found | PrayinForRain.dev"><meta name=twitter:title content="404 Page not found | PrayinForRain.dev"><meta itemprop=name content="404 Page not found | PrayinForRain.dev"><meta name=application-name content="404 Page not found | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/404.html title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/404.html><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class=wrapper><main class=main-404 aria-label=Content><h1 class=error-emoji></h1><p class=error-text>/* 404 page not found. */</p><aside class=error-notice><h3>💡 이전 버전의 이력서에 연결된 포스트의 링크가 잘못된 문제가 있습니다.</h3><a href=https://lily-muenster-f8b.notion.site/8e59068da9114724977496e76bb529f3>[새 이력서]</a>에서 갱신된 이력서를 확인하시거나,<br>아래 리스트에서 글을 확인해 주세요. 죄송합니다 😥<ul class=error-article-list></ul></aside><p class=error-link><a href=/>↑ Back Home ↑</a></p></main><script>var errorEmojiContainer=document.getElementsByClassName("error-emoji")[0],articleUList,articles,emojiArray=["\\(o_o)/","(o^^)o","(˚Δ˚)b","(^-^*)","(≥o≤)","(^_^)b","(·_·)","(='X'=)","(>_<)","(;-;)","\\(^Д^)/"],errorEmoji=emojiArray[Math.floor(Math.random()*emojiArray.length)];errorEmojiContainer.appendChild(document.createTextNode(errorEmoji)),articleUList=document.getElementsByClassName("error-article-list")[0],articles=[{title:"Package Manager",href:"https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/"},{title:"상태 관리 라이브러리",href:"https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/"},{title:"CSS-in-JS",href:"https://prayinforrain.github.io/posts/2022/11/emotion/"},{title:"마크다운 에디터 구현",href:"https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/"},{title:"사이드바 리렌더링 방지",href:"https://prayinforrain.github.io/posts/2022/12/prevent-sidebar-blinking/"}],articles.forEach(e=>{const n=document.createElement("li"),t=document.createElement("a");t.innerText=e.title,t.setAttribute("href",e.href),n.appendChild(t),articleUList.appendChild(n)})</script></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class=wrapper><main class=main-404 aria-label=Content><h1 class=error-emoji></h1><p class=error-text>/* 404 page not found. */</p><aside class=error-notice><h3>💡 이전 버전의 이력서에 연결된 포스트의 링크가 잘못된 문제가 있습니다.</h3><a href=https://lily-muenster-f8b.notion.site/8e59068da9114724977496e76bb529f3>[새 이력서]</a>에서 갱신된 이력서를 확인하시거나,<br>아래 리스트에서 글을 확인해 주세요. 죄송합니다 😥<ul class=error-article-list></ul></aside><p class=error-link><a href=/>↑ Back Home ↑</a></p></main><script>var articleUList,articles,errorEmojiContainer=document.getElementsByClassName("error-emoji")[0],emojiArray=["\\(o_o)/","(o^^)o","(˚Δ˚)b","(^-^*)","(≥o≤)","(^_^)b","(·_·)","(='X'=)","(>_<)","(;-;)","\\(^Д^)/"],errorEmoji=emojiArray[Math.floor(Math.random()*emojiArray.length)];errorEmojiContainer.appendChild(document.createTextNode(errorEmoji)),articleUList=document.getElementsByClassName("error-article-list")[0],articles=[{title:"Package Manager",href:"https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/"},{title:"상태 관리 라이브러리",href:"https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/"},{title:"CSS-in-JS",href:"https://prayinforrain.github.io/posts/2022/11/emotion/"},{title:"마크다운 에디터 구현",href:"https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/"},{title:"사이드바 리렌더링 방지",href:"https://prayinforrain.github.io/posts/2022/12/prevent-sidebar-blinking/"}],articles.forEach(e=>{const n=document.createElement("li"),t=document.createElement("a");t.innerText=e.title,t.setAttribute("href",e.href),n.appendChild(t),articleUList.appendChild(n)})</script></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/about/index.html b/about/index.html
index 09282d9..de9ecd5 100644
--- a/about/index.html
+++ b/about/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>이우재 | Front-end Developer | PrayinForRain.dev</title>
-<meta property="og:title" content="이우재 | Front-end Developer | PrayinForRain.dev"><meta name=twitter:title content="이우재 | Front-end Developer | PrayinForRain.dev"><meta itemprop=name content="이우재 | Front-end Developer | PrayinForRain.dev"><meta name=application-name content="이우재 | Front-end Developer | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/about/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/about/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="이우재 | Front-end Developer | PrayinForRain.dev"><meta name=twitter:title content="이우재 | Front-end Developer | PrayinForRain.dev"><meta itemprop=name content="이우재 | Front-end Developer | PrayinForRain.dev"><meta name=application-name content="이우재 | Front-end Developer | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/about/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/about/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>이우재 | Front-end Developer</h1><div class=post-meta><time datetime=2023-01-02T21:38:52+09:00 itemprop=datePublished>2023. 1. 2.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><ul><li><a href=#techstacks>Techstacks</a></li><li><a href=#projects>Projects</a></li><li><a href=#education>Education</a></li><li><a href=#contacts>Contacts</a></li></ul></li></ul></nav></details><div class=page-content><ul><li><code>Next.js</code>와 <code>Typescript</code>를 주로 사용하여 개발하는 프론트엔드 개발자입니다.</li><li><strong>말을 할 줄 아는 개발자</strong>가 되어 커뮤니티에 기여하는 것이 목표입니다.</li><li>저의 이력서는 <a href=https://www.rallit.com/resumes/229210@prayinforrain/%EC%9D%B4%EC%9A%B0%EC%9E%AC>[랠릿]</a>에서 확인해 주세요.</li></ul><h2 id=techstacks>Techstacks</h2><p><img src="https://img.shields.io/badge/git-%23F05033.svg?style=flat&amp;logo=git&amp;logoColor=white" alt=Git> <img src="https://img.shields.io/badge/figma-%23F24E1E.svg?style=flat&amp;logo=figma&amp;logoColor=white" alt=Figma> <img src="https://img.shields.io/badge/-Storybook-FF4785?style=flat&amp;logo=storybook&amp;logoColor=white" alt=Storybook><br><img src="https://img.shields.io/badge/html5-%23E34F26.svg?style=flat&amp;logo=html5&amp;logoColor=white" alt=HTML5> <img src="https://img.shields.io/badge/css3-%231572B6.svg?style=flat&amp;logo=css3&amp;logoColor=white" alt=CSS3> <img src="https://img.shields.io/badge/node.js-6DA55F?style=flat&amp;logo=node.js&amp;logoColor=white" alt=NodeJS> <img src="https://img.shields.io/badge/typescript-%23007ACC.svg?style=flat&amp;logo=typescript&amp;logoColor=white" alt=TypeScript> <img src="https://img.shields.io/badge/NPM-%23000000.svg?style=flat&amp;logo=npm&amp;logoColor=white" alt=NPM> <img src="https://img.shields.io/badge/yarn-%232C8EBB.svg?style=flat&amp;logo=yarn&amp;logoColor=white" alt=Yarn><br><img src="https://img.shields.io/badge/react-%2320232a.svg?style=flat&amp;logo=react&amp;logoColor=%2361DAFB" alt=React> <img src="https://img.shields.io/badge/Next-black?style=flat&amp;logo=next.js&amp;logoColor=white" alt="Next JS"><br><img src="https://img.shields.io/badge/express.js-%23404d59.svg?style=flat&amp;logo=express&amp;logoColor=%2361DAFB" alt=Express.js> <img src="https://img.shields.io/badge/nestjs-%23E0234E.svg?style=flat&amp;logo=nestjs&amp;logoColor=white" alt=NestJS></p><h2 id=projects>Projects</h2><ul><li>차가운 디자인 시스템, <strong>CDS</strong> [<a href=https://github.com/c-h-w-h/cds>Repo</a> | <a href=https://www.npmjs.com/package/@chwh/cds>npm</a>]</li><li>마크다운을 지원하는 SNS, <strong>모헤윰</strong> [<a href=https://github.com/boostcampwm-2022/web34-moheyum>Repo</a> | <a href=https://polarlsm.notion.site/Moheyum-4c54f7ce6bc348bd84121578d4079b50>Notion</a> | <del><a href=https://moheyum.ga/>Link</a></del><em>(expired)</em> ]</li></ul><h2 id=education>Education</h2><ul><li>네이버 커넥트재단 부스트캠프 웹·모바일 7기 (2022.07 ~ 2022.12)</li><li>서울과학기술대학교 컴퓨터공학과 <em>Seoultech Computer Science and Engineering</em> (2015.03 ~ 2022.02)</li></ul><h2 id=contacts>Contacts</h2><ul><li>Email : <a href=mailto:prayinforrain@naver.com>prayinforrain@naver.com</a></li></ul><p><img src="https://github-readme-stats.vercel.app/api?username=prayinforrain&amp;show_icons=true" alt="PrayinForRain&rsquo;s github stats"></p></div></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>이우재 | Front-end Developer</h1><div class=post-meta><time datetime=2023-01-02T21:38:52+09:00 itemprop=datePublished>2023. 1. 2.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#techstacks>Techstacks</a></li><li><a href=#projects>Projects</a></li><li><a href=#education>Education</a></li><li><a href=#contacts>Contacts</a></li></ul></nav></details><div class=page-content><ul><li><code>Next.js</code>와 <code>Typescript</code>를 주로 사용하여 개발하는 프론트엔드 개발자입니다.</li><li><strong>말을 할 줄 아는 개발자</strong>가 되어 커뮤니티에 기여하는 것이 목표입니다.</li><li>저의 이력서는 <a href=https://www.rallit.com/resumes/229210@prayinforrain/%EC%9D%B4%EC%9A%B0%EC%9E%AC>[랠릿]</a>에서 확인해 주세요.</li></ul><h2 id=techstacks>Techstacks</h2><p><img src="https://img.shields.io/badge/git-%23F05033.svg?style=flat&amp;logo=git&amp;logoColor=white" alt=Git> <img src="https://img.shields.io/badge/figma-%23F24E1E.svg?style=flat&amp;logo=figma&amp;logoColor=white" alt=Figma> <img src="https://img.shields.io/badge/-Storybook-FF4785?style=flat&amp;logo=storybook&amp;logoColor=white" alt=Storybook><br><img src="https://img.shields.io/badge/html5-%23E34F26.svg?style=flat&amp;logo=html5&amp;logoColor=white" alt=HTML5> <img src="https://img.shields.io/badge/css3-%231572B6.svg?style=flat&amp;logo=css3&amp;logoColor=white" alt=CSS3> <img src="https://img.shields.io/badge/node.js-6DA55F?style=flat&amp;logo=node.js&amp;logoColor=white" alt=NodeJS> <img src="https://img.shields.io/badge/typescript-%23007ACC.svg?style=flat&amp;logo=typescript&amp;logoColor=white" alt=TypeScript> <img src="https://img.shields.io/badge/NPM-%23000000.svg?style=flat&amp;logo=npm&amp;logoColor=white" alt=NPM> <img src="https://img.shields.io/badge/yarn-%232C8EBB.svg?style=flat&amp;logo=yarn&amp;logoColor=white" alt=Yarn><br><img src="https://img.shields.io/badge/react-%2320232a.svg?style=flat&amp;logo=react&amp;logoColor=%2361DAFB" alt=React> <img src="https://img.shields.io/badge/Next-black?style=flat&amp;logo=next.js&amp;logoColor=white" alt="Next JS"><br><img src="https://img.shields.io/badge/express.js-%23404d59.svg?style=flat&amp;logo=express&amp;logoColor=%2361DAFB" alt=Express.js> <img src="https://img.shields.io/badge/nestjs-%23E0234E.svg?style=flat&amp;logo=nestjs&amp;logoColor=white" alt=NestJS></p><h2 id=projects>Projects</h2><ul><li>차가운 디자인 시스템, <strong>CDS</strong> [<a href=https://github.com/c-h-w-h/cds>Repo</a> | <a href=https://www.npmjs.com/package/@chwh/cds>npm</a>]</li><li>마크다운을 지원하는 SNS, <strong>모헤윰</strong> [<a href=https://github.com/boostcampwm-2022/web34-moheyum>Repo</a> | <a href=https://polarlsm.notion.site/Moheyum-4c54f7ce6bc348bd84121578d4079b50>Notion</a> | <del><a href=https://moheyum.ga/>Link</a></del><em>(expired)</em> ]</li></ul><h2 id=education>Education</h2><ul><li>네이버 커넥트재단 부스트캠프 웹·모바일 7기 (2022.07 ~ 2022.12)</li><li>서울과학기술대학교 컴퓨터공학과 <em>Seoultech Computer Science and Engineering</em> (2015.03 ~ 2022.02)</li></ul><h2 id=contacts>Contacts</h2><ul><li>Email : <a href=mailto:prayinforrain@naver.com>prayinforrain@naver.com</a></li></ul><p><img src="https://github-readme-stats.vercel.app/api?username=prayinforrain&amp;show_icons=true" alt="PrayinForRain&rsquo;s github stats"></p></div></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/avatar_hu8a16f9f51dd7b9a0a5f04c391447c48e_10088_100x100_fill_q75_h2_box_smart1_3.webp b/avatar_hu16273194194817824927.webp
similarity index 100%
rename from avatar_hu8a16f9f51dd7b9a0a5f04c391447c48e_10088_100x100_fill_q75_h2_box_smart1_3.webp
rename to avatar_hu16273194194817824927.webp
diff --git a/categories/algorithm/index.html b/categories/algorithm/index.html
index 13ddbca..15e5bc0 100644
--- a/categories/algorithm/index.html
+++ b/categories/algorithm/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Algorithm | PrayinForRain.dev</title>
-<meta property="og:title" content="Algorithm | PrayinForRain.dev"><meta name=twitter:title content="Algorithm | PrayinForRain.dev"><meta itemprop=name content="Algorithm | PrayinForRain.dev"><meta name=application-name content="Algorithm | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/categories/algorithm/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/categories/algorithm/><link href=/categories/algorithm/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/categories/algorithm/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Algorithm | PrayinForRain.dev"><meta name=twitter:title content="Algorithm | PrayinForRain.dev"><meta itemprop=name content="Algorithm | PrayinForRain.dev"><meta name=application-name content="Algorithm | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/categories/algorithm/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/categories/algorithm/><link href=/categories/algorithm/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/categories/algorithm/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Algorithm</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/03/nodejs-for-baekjoon/><h4 class=post-item-title>백준을 위한 node.js</h4></a></div><time class=post-item-meta datetime=2023-03-30T15:17:00+0900>2023. 3. 30.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Algorithm</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/03/nodejs-for-baekjoon/><h4 class=post-item-title>백준을 위한 node.js</h4></a></div><time class=post-item-meta datetime=2023-03-30T15:17:00+0900>2023. 3. 30.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/categories/algorithm/index.xml b/categories/algorithm/index.xml
index 27b3971..9080ace 100644
--- a/categories/algorithm/index.xml
+++ b/categories/algorithm/index.xml
@@ -1,3 +1,5 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Algorithm on PrayinForRain.dev</title><link>https://prayinforrain.github.io/categories/algorithm/</link><description>Recent content in Algorithm on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Thu, 30 Mar 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/categories/algorithm/index.xml" rel="self" type="application/rss+xml"/><item><title>백준을 위한 node.js</title><link>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</guid><description>JS라도 백준이 하고싶어 공채 시즌이다. 개인적으로 코딩 테스트를 정말정말 자신 없어했는데, 더 이상 미룰 수 없어 야금야금 공부를 시작했다.
-불편한 점이 있다면, 백준은 자바스크립트에 아주 불친절하다는 점이다. 내가 학부생 때 잘 하지도 못하는 C++로 꾸역꾸역 문제를 풀었던 이유 중 하나이기도 했다. 그 때는 아는 PS 플랫폼이 백준 뿐이니, 자바스크립트의 어쩔 수 없는 한계인가보다 했다.
-그런데 프로그래머스를 맛 보고 나니 머리가 커져서 자바스크립트가 백준에게 부당한 차별을 받는(?) 기분이 들었다. 진짜로 화가 난 건 아니지만 그래도 화가 났다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Algorithm on PrayinForRain.dev</title><link>https://prayinforrain.github.io/categories/algorithm/</link><description>Recent content in Algorithm on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Thu, 30 Mar 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/categories/algorithm/index.xml" rel="self" type="application/rss+xml"/><item><title>백준을 위한 node.js</title><link>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</guid><description>&lt;h2 id="js라도-백준이-하고싶어">JS라도 백준이 하고싶어&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/03/nodejs-for-baekjoon/01.png" alt="Programmers IDE">&lt;/p>
+&lt;p>공채 시즌이다. 개인적으로 코딩 테스트를 정말정말 자신 없어했는데, 더 이상 미룰 수 없어 야금야금 공부를 시작했다.&lt;br>
+불편한 점이 있다면, 백준은 자바스크립트에 아주 불친절하다는 점이다. 내가 학부생 때 잘 하지도 못하는 C++로 꾸역꾸역 문제를 풀었던 이유 중 하나이기도 했다. 그 때는 아는 PS 플랫폼이 백준 뿐이니, 자바스크립트의 어쩔 수 없는 한계인가보다 했다.&lt;/p>
+&lt;p>그런데 프로그래머스를 맛 보고 나니 머리가 커져서 자바스크립트가 백준에게 부당한 차별을 받는(?) 기분이 들었다. 진짜로 화가 난 건 아니지만 그래도 화가 났다. 용서할 수가 없어 보일러플레이트 코드를 작성했다.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/categories/css/index.html b/categories/css/index.html
index 0fedf5c..d33074f 100644
--- a/categories/css/index.html
+++ b/categories/css/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>CSS | PrayinForRain.dev</title>
-<meta property="og:title" content="CSS | PrayinForRain.dev"><meta name=twitter:title content="CSS | PrayinForRain.dev"><meta itemprop=name content="CSS | PrayinForRain.dev"><meta name=application-name content="CSS | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/categories/css/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/categories/css/><link href=/categories/css/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/categories/css/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="CSS | PrayinForRain.dev"><meta name=twitter:title content="CSS | PrayinForRain.dev"><meta itemprop=name content="CSS | PrayinForRain.dev"><meta name=application-name content="CSS | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/categories/css/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/categories/css/><link href=/categories/css/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/categories/css/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">CSS</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/01/css-display/><h4 class=post-item-title>CSS의 display 속성</h4></a></div><time class=post-item-meta datetime=2023-01-16T16:38:15+0900>2023. 1. 16.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/size-units-in-css/><h4 class=post-item-title>CSS의 크기 단위</h4></a></div><time class=post-item-meta datetime=2023-01-13T23:39:15+0900>2023. 1. 13.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">CSS</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/01/css-display/><h4 class=post-item-title>CSS의 display 속성</h4></a></div><time class=post-item-meta datetime=2023-01-16T16:38:15+0900>2023. 1. 16.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/size-units-in-css/><h4 class=post-item-title>CSS의 크기 단위</h4></a></div><time class=post-item-meta datetime=2023-01-13T23:39:15+0900>2023. 1. 13.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/categories/css/index.xml b/categories/css/index.xml
index dae71cc..b34cfc4 100644
--- a/categories/css/index.xml
+++ b/categories/css/index.xml
@@ -1,3 +1,21 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>CSS on PrayinForRain.dev</title><link>https://prayinforrain.github.io/categories/css/</link><description>Recent content in CSS on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Mon, 16 Jan 2023 16:38:15 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/categories/css/index.xml" rel="self" type="application/rss+xml"/><item><title>CSS의 display 속성</title><link>https://prayinforrain.github.io/posts/2023/01/css-display/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/css-display/</guid><description>CSS의 display 속성은 HTML element가 block인지, inline인지, 그리고 자식 element들을 어떤 식으로 표시할지를 정하는 속성입니다. 다시 말해 요소 자체가 형제 요소와 배치되는 방법과, 자식 요소를 배치하는 방법을 함께 정의하기 때문에 ‘안쪽’과 ‘바깥쪽’으로 속성을 나눌 수 있습니다.
-display: 바깥쪽 block 한 줄에는 한 요소만 올 수 있게 하는 속성입니다. inline 요소가 한 줄에 여러 개 표시 될 수 있음을 의미합니다. 만약 inline이 적용된 요소의 전후에 inline 요소를 표시할 공간이 있다면 한 줄에 표시됩니다.</description></item><item><title>CSS의 크기 단위</title><link>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</link><pubDate>Fri, 13 Jan 2023 23:39:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</guid><description>CSS의 크기 단위 CSS에는 다양한 단위가 존재합니다. 우리가 잘 아는 px와 %부터, em, rem, pt, vh, vw 등등 다양한 단위가 존재하는데요, 이 크기 단위들을 언제 어떻게 사용하면 좋을지에 대해 정리해 보았습니다.
-상대 단위와 절대 단위 px과 %를 먼저 비교해 보면, px은 우리가 알고 있는 컴퓨터 화면의 1픽셀을 의미합니다. 이는 어느 화면에서나 같은 크기를 나타내므로 절대 단위에 해당합니다. 반면 %는 보통 부모 element의 크기를 상속받아 그의 정해진 비율만큼을 나타냅니다. 즉 width: 10px;인 부모를 가진 element에 width: 50%;를 주면 5px이 되겠죠.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>CSS on PrayinForRain.dev</title><link>https://prayinforrain.github.io/categories/css/</link><description>Recent content in CSS on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Mon, 16 Jan 2023 16:38:15 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/categories/css/index.xml" rel="self" type="application/rss+xml"/><item><title>CSS의 display 속성</title><link>https://prayinforrain.github.io/posts/2023/01/css-display/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/css-display/</guid><description>&lt;p>CSS의 &lt;code>display&lt;/code> 속성은 HTML element가 block인지, inline인지, 그리고 자식 element들을 어떤 식으로 표시할지를 정하는 속성입니다. 다시 말해 요소 자체가 형제 요소와 배치되는 방법과, 자식 요소를 배치하는 방법을 함께 정의하기 때문에 ‘&lt;strong>안쪽&lt;/strong>’과 ‘&lt;strong>바깥쪽&lt;/strong>’으로 속성을 나눌 수 있습니다.&lt;/p>
+&lt;h2 id="display">display:&lt;/h2>
+&lt;h3 id="바깥쪽">바깥쪽&lt;/h3>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/css-display/01.png" alt="Untitled">&lt;/p>
+&lt;ul>
+&lt;li>&lt;code>block&lt;/code>
+&lt;ul>
+&lt;li>한 줄에는 한 요소만 올 수 있게 하는 속성입니다.&lt;/li>
+&lt;/ul>
+&lt;/li>
+&lt;li>&lt;code>inline&lt;/code>
+&lt;ul>
+&lt;li>요소가 한 줄에 여러 개 표시 될 수 있음을 의미합니다. 만약 &lt;code>inline&lt;/code>이 적용된 요소의 전후에 &lt;code>inline&lt;/code> 요소를 표시할 공간이 있다면 한 줄에 표시됩니다.&lt;/li>
+&lt;/ul>
+&lt;/li>
+&lt;/ul>
+&lt;p>사진의 div들은 각각 &lt;code>inline&lt;/code>, &lt;code>block&lt;/code> 속성을 지정하였습니다. 보이는 것과 같이 &lt;code>block&lt;/code> 속성의 요소는 한 줄에 하나만 존재할 수 있으며, &lt;code>inline&lt;/code> 속성은 충분한 공간이 있으면 한 줄에 표시됩니다. &lt;code>span&lt;/code>과 &lt;code>p&lt;/code>태그의 차이와 비슷합니다.&lt;/p></description></item><item><title>CSS의 크기 단위</title><link>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</link><pubDate>Fri, 13 Jan 2023 23:39:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</guid><description>&lt;h2 id="css의-크기-단위">CSS의 크기 단위&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/size-units-in-css/01.png" alt="Untitled">&lt;/p>
+&lt;p>CSS에는 다양한 단위가 존재합니다. 우리가 잘 아는 &lt;code>px&lt;/code>와 &lt;code>%&lt;/code>부터, &lt;code>em&lt;/code>, &lt;code>rem&lt;/code>, &lt;code>pt&lt;/code>, &lt;code>vh&lt;/code>, &lt;code>vw&lt;/code> 등등 다양한 단위가 존재하는데요, 이 크기 단위들을 언제 어떻게 사용하면 좋을지에 대해 정리해 보았습니다.&lt;/p>
+&lt;h2 id="상대-단위와-절대-단위">상대 단위와 절대 단위&lt;/h2>
+&lt;p>&lt;code>px&lt;/code>과 &lt;code>%&lt;/code>를 먼저 비교해 보면, &lt;code>px&lt;/code>은 우리가 알고 있는 컴퓨터 화면의 1픽셀을 의미합니다. 이는 어느 화면에서나 같은 크기를 나타내므로 &lt;strong>절대 단위&lt;/strong>에 해당합니다. 반면 &lt;code>%&lt;/code>는 보통 부모 element의 크기를 상속받아 그의 정해진 비율만큼을 나타냅니다. 즉 &lt;code>width: 10px;&lt;/code>인 부모를 가진 element에 &lt;code>width: 50%;&lt;/code>를 주면 5px이 되겠죠. 이렇게 상황에 따라서 다른 값을 갖는 단위를 &lt;strong>상대 단위&lt;/strong>라고 부릅니다.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/categories/ide/index.html b/categories/ide/index.html
index e0bcce7..ad732b6 100644
--- a/categories/ide/index.html
+++ b/categories/ide/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Ide | PrayinForRain.dev</title>
-<meta property="og:title" content="Ide | PrayinForRain.dev"><meta name=twitter:title content="Ide | PrayinForRain.dev"><meta itemprop=name content="Ide | PrayinForRain.dev"><meta name=application-name content="Ide | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/categories/ide/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/categories/ide/><link href=/categories/ide/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/categories/ide/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Ide | PrayinForRain.dev"><meta name=twitter:title content="Ide | PrayinForRain.dev"><meta itemprop=name content="Ide | PrayinForRain.dev"><meta name=application-name content="Ide | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/categories/ide/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/categories/ide/><link href=/categories/ide/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/categories/ide/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Ide</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/03/npm-scripts-doesnt-work/><h4 class=post-item-title>VSCode의 NPM Scripts가 작동하지 않는 사람</h4></a></div><time class=post-item-meta datetime=2023-03-29T15:17:00+0900>2023. 3. 29.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Ide</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/03/npm-scripts-doesnt-work/><h4 class=post-item-title>VSCode의 NPM Scripts가 작동하지 않는 사람</h4></a></div><time class=post-item-meta datetime=2023-03-29T15:17:00+0900>2023. 3. 29.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/categories/ide/index.xml b/categories/ide/index.xml
index f019b22..2126da3 100644
--- a/categories/ide/index.xml
+++ b/categories/ide/index.xml
@@ -1,3 +1,8 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Ide on PrayinForRain.dev</title><link>https://prayinforrain.github.io/categories/ide/</link><description>Recent content in Ide on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Wed, 29 Mar 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/categories/ide/index.xml" rel="self" type="application/rss+xml"/><item><title>VSCode의 NPM Scripts가 작동하지 않는 사람</title><link>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</link><pubDate>Wed, 29 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</guid><description>늦잠자고 갓생사는 척 하는 삶이란&amp;hellip;
-맥북과 친해지기 시작한지 2달이 되었다. 윈도우 노트북을 사용하다가 갈아 탄 이유는, 맥에서 되는 것이 윈도우에서 되고, 윈도우에서 되는 것은 맥에서 안되는 문제를 너무 많이 겪었기 때문이다. 주변의 맥 유저에게 계속해서 테스트를 요청하기도 눈치보이고, 언젠가는 마주해야겠다고 생각했던 녀석이기 때문에 과감한 투자를 했다. 그 과정에서 내가 윈도우에 지나치게 강결합(?) 되어 있다는 것을 깨달았고, 지금은 맥도 윈도우도 못 쓰는 그 어딘가의 지점에 있다.
-그리고 최근에는 프로젝트를 하고 있다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Ide on PrayinForRain.dev</title><link>https://prayinforrain.github.io/categories/ide/</link><description>Recent content in Ide on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Wed, 29 Mar 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/categories/ide/index.xml" rel="self" type="application/rss+xml"/><item><title>VSCode의 NPM Scripts가 작동하지 않는 사람</title><link>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</link><pubDate>Wed, 29 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</guid><description>&lt;figure>&lt;img src="https://prayinforrain.github.io/images/posts/2023/03/npm-scripts-doesnt-work/01.jpeg"
+ alt="image">&lt;figcaption>
+ &lt;p>늦잠자고 갓생사는 척 하는 삶이란&amp;hellip;&lt;/p>
+ &lt;/figcaption>
+&lt;/figure>
+
+&lt;p>맥북과 친해지기 시작한지 2달이 되었다. 윈도우 노트북을 사용하다가 갈아 탄 이유는, &lt;em>맥에서 되는 것이 윈도우에서 되고, 윈도우에서 되는 것은 맥에서 안되는&lt;/em> 문제를 너무 많이 겪었기 때문이다. 주변의 맥 유저에게 계속해서 테스트를 요청하기도 눈치보이고, 언젠가는 마주해야겠다고 생각했던 녀석이기 때문에 과감한 투자를 했다. 그 과정에서 내가 윈도우에 지나치게 강결합(?) 되어 있다는 것을 깨달았고, 지금은 맥도 윈도우도 못 쓰는 그 어딘가의 지점에 있다.&lt;/p>
+&lt;p>그리고 최근에는 프로젝트를 하고 있다. 부스트캠프에서 만난 사람들과 스터디를 하다가, 디자인 시스템을 만들어 보자는 이야기가 나와서 다같이 티스푼 공사 중이다. 이 것에 대해서도 글을 써야 하는데 오늘 포스팅할 내용은 이 것도 아니다. 회고를 안 쓰니 이야기가 많이 밀려 횡설수설 하는구나..&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/categories/index.html b/categories/index.html
index 1d85646..c54de21 100644
--- a/categories/index.html
+++ b/categories/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Categories | PrayinForRain.dev</title>
-<meta property="og:title" content="Categories | PrayinForRain.dev"><meta name=twitter:title content="Categories | PrayinForRain.dev"><meta itemprop=name content="Categories | PrayinForRain.dev"><meta name=application-name content="Categories | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/categories/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/categories/><link href=/categories/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/categories/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Categories | PrayinForRain.dev"><meta name=twitter:title content="Categories | PrayinForRain.dev"><meta itemprop=name content="Categories | PrayinForRain.dev"><meta name=application-name content="Categories | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/categories/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/categories/><link href=/categories/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/categories/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Categories</h1></header><main class=page-content aria-label=Content><ul class=badge-list><li class=badge-item><a href=https://prayinforrain.github.io/categories/web/>Web (8)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/categories/node.js/>Node.js (2)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/categories/life/>Life (2)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/categories/algorithm/>Algorithm (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/categories/ide/>Ide (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/categories/typescript/>TypeScript (2)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/categories/javascript/>Javascript (2)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/categories/css/>CSS (2)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/categories/moheyum/>Moheyum (8)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/categories/react/>React (2)</a></li></ul></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Categories</h1></header><main class=page-content aria-label=Content><ul class=badge-list><li class=badge-item><a href=https://prayinforrain.github.io/categories/web/>Web (9)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/categories/node.js/>Node.js (2)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/categories/life/>Life (2)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/categories/algorithm/>Algorithm (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/categories/ide/>Ide (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/categories/typescript/>TypeScript (2)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/categories/javascript/>Javascript (2)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/categories/css/>CSS (2)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/categories/moheyum/>Moheyum (8)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/categories/react/>React (2)</a></li></ul></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/categories/index.xml b/categories/index.xml
index d6bcf39..f3037d7 100644
--- a/categories/index.xml
+++ b/categories/index.xml
@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Categories on PrayinForRain.dev</title><link>https://prayinforrain.github.io/categories/</link><description>Recent content in Categories on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Mon, 15 Apr 2024 16:43:32 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/categories/index.xml" rel="self" type="application/rss+xml"/><item><title>Web</title><link>https://prayinforrain.github.io/categories/web/</link><pubDate>Tue, 07 Nov 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/categories/web/</guid><description/></item><item><title>Node.js</title><link>https://prayinforrain.github.io/categories/node.js/</link><pubDate>Tue, 30 May 2023 02:27:49 +0900</pubDate><guid>https://prayinforrain.github.io/categories/node.js/</guid><description/></item><item><title>Life</title><link>https://prayinforrain.github.io/categories/life/</link><pubDate>Sun, 23 Apr 2023 04:05:58 +0900</pubDate><guid>https://prayinforrain.github.io/categories/life/</guid><description/></item><item><title>Algorithm</title><link>https://prayinforrain.github.io/categories/algorithm/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/categories/algorithm/</guid><description/></item><item><title>Ide</title><link>https://prayinforrain.github.io/categories/ide/</link><pubDate>Wed, 29 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/categories/ide/</guid><description/></item><item><title>TypeScript</title><link>https://prayinforrain.github.io/categories/typescript/</link><pubDate>Wed, 15 Feb 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/categories/typescript/</guid><description/></item><item><title>Javascript</title><link>https://prayinforrain.github.io/categories/javascript/</link><pubDate>Wed, 25 Jan 2023 17:17:15 +0900</pubDate><guid>https://prayinforrain.github.io/categories/javascript/</guid><description/></item><item><title>CSS</title><link>https://prayinforrain.github.io/categories/css/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/categories/css/</guid><description/></item><item><title>Moheyum</title><link>https://prayinforrain.github.io/categories/moheyum/</link><pubDate>Wed, 21 Dec 2022 03:30:25 +0900</pubDate><guid>https://prayinforrain.github.io/categories/moheyum/</guid><description/></item><item><title>React</title><link>https://prayinforrain.github.io/categories/react/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/categories/react/</guid><description/></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Categories on PrayinForRain.dev</title><link>https://prayinforrain.github.io/categories/</link><description>Recent content in Categories on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Thu, 18 Jul 2024 12:34:32 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/categories/index.xml" rel="self" type="application/rss+xml"/><item><title>Web</title><link>https://prayinforrain.github.io/categories/web/</link><pubDate>Thu, 18 Jul 2024 12:34:32 +0900</pubDate><guid>https://prayinforrain.github.io/categories/web/</guid><description/></item><item><title>Node.js</title><link>https://prayinforrain.github.io/categories/node.js/</link><pubDate>Tue, 30 May 2023 02:27:49 +0900</pubDate><guid>https://prayinforrain.github.io/categories/node.js/</guid><description/></item><item><title>Life</title><link>https://prayinforrain.github.io/categories/life/</link><pubDate>Sun, 23 Apr 2023 04:05:58 +0900</pubDate><guid>https://prayinforrain.github.io/categories/life/</guid><description/></item><item><title>Algorithm</title><link>https://prayinforrain.github.io/categories/algorithm/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/categories/algorithm/</guid><description/></item><item><title>Ide</title><link>https://prayinforrain.github.io/categories/ide/</link><pubDate>Wed, 29 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/categories/ide/</guid><description/></item><item><title>TypeScript</title><link>https://prayinforrain.github.io/categories/typescript/</link><pubDate>Wed, 15 Feb 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/categories/typescript/</guid><description/></item><item><title>Javascript</title><link>https://prayinforrain.github.io/categories/javascript/</link><pubDate>Wed, 25 Jan 2023 17:17:15 +0900</pubDate><guid>https://prayinforrain.github.io/categories/javascript/</guid><description/></item><item><title>CSS</title><link>https://prayinforrain.github.io/categories/css/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/categories/css/</guid><description/></item><item><title>Moheyum</title><link>https://prayinforrain.github.io/categories/moheyum/</link><pubDate>Wed, 21 Dec 2022 03:30:25 +0900</pubDate><guid>https://prayinforrain.github.io/categories/moheyum/</guid><description/></item><item><title>React</title><link>https://prayinforrain.github.io/categories/react/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/categories/react/</guid><description/></item></channel></rss>
\ No newline at end of file
diff --git a/categories/javascript/index.html b/categories/javascript/index.html
index 4432873..ee9ab92 100644
--- a/categories/javascript/index.html
+++ b/categories/javascript/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Javascript | PrayinForRain.dev</title>
-<meta property="og:title" content="Javascript | PrayinForRain.dev"><meta name=twitter:title content="Javascript | PrayinForRain.dev"><meta itemprop=name content="Javascript | PrayinForRain.dev"><meta name=application-name content="Javascript | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/categories/javascript/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/categories/javascript/><link href=/categories/javascript/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/categories/javascript/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Javascript | PrayinForRain.dev"><meta name=twitter:title content="Javascript | PrayinForRain.dev"><meta itemprop=name content="Javascript | PrayinForRain.dev"><meta name=application-name content="Javascript | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/categories/javascript/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/categories/javascript/><link href=/categories/javascript/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/categories/javascript/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Javascript</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/01/tree-shaking/><h4 class=post-item-title>Tree Shaking</h4></a></div><time class=post-item-meta datetime=2023-01-25T17:17:15+0900>2023. 1. 25.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/ecmascript/><h4 class=post-item-title>ECMAScript</h4></a></div><time class=post-item-meta datetime=2023-01-25T16:35:01+0900>2023. 1. 25.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Javascript</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/01/tree-shaking/><h4 class=post-item-title>Tree Shaking</h4></a></div><time class=post-item-meta datetime=2023-01-25T17:17:15+0900>2023. 1. 25.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/ecmascript/><h4 class=post-item-title>ECMAScript</h4></a></div><time class=post-item-meta datetime=2023-01-25T16:35:01+0900>2023. 1. 25.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/categories/javascript/index.xml b/categories/javascript/index.xml
index ede5706..6538391 100644
--- a/categories/javascript/index.xml
+++ b/categories/javascript/index.xml
@@ -1,4 +1,11 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Javascript on PrayinForRain.dev</title><link>https://prayinforrain.github.io/categories/javascript/</link><description>Recent content in Javascript on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Wed, 25 Jan 2023 17:17:15 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/categories/javascript/index.xml" rel="self" type="application/rss+xml"/><item><title>Tree Shaking</title><link>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</link><pubDate>Wed, 25 Jan 2023 17:17:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</guid><description>용량을 절약하는 방법 웹페이지의 성능을 이야기하는 가장 직관적인 지표는 아마 페이지에 사용되는 파일의 크기일 것입니다. 파일의 크기가 무겁다면 파일을 다운받는 데 시간이 오래 걸리고, 다운로드한 파일을 읽고 렌더링 하는데도 시간이 오래 걸릴 것입니다. 따라서 번들 파일의 용량을 다이어트 하는 것은 사이트 성능에 꽤 중요한 역할을 합니다.
-위 사진은 팀 프로젝트를 하던 중 @next/bundle-analyzer 패키지를 이용해 번들 맵을 그렸던 것입니다. 클수록 번들 용량이 크다는 뜻이니 커다란 청크 위주로 최적화를 시도하면 될 것 같습니다.</description></item><item><title>ECMAScript</title><link>https://prayinforrain.github.io/posts/2023/01/ecmascript/</link><pubDate>Wed, 25 Jan 2023 16:35:01 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/ecmascript/</guid><description>Ecma international Ecma International is an industry association dedicated to the standardization of information and communication systems Emca International은 정보통신 시스템의 표준화를 위한 국제 표준화 기구입니다. &amp;gt; https://www.ecma-international.org/
-Ecma International은 Ecma 사이트에서 소개하듯, 정보통신 시스템의 표준을 만들기 위한 국제 기구입니다. C#, JSON, .u3d 확장자 등 여러 방면에서의 표준안을 제시하였으며, 개발자를 위한 IEEE같은 존재로 이해하면 될 것 같습니다.(제 생각)
-유럽에서 컴퓨터 시스템을 표준화하기 위해 설립되어서 ECMA(European Computer Manufacturers Association)라는 이름을 가지고 있으나 유럽국가 뿐 아니라 전세계의 표준으로 활용되기 위해 Ecma International로 이름을 변경하였습니다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Javascript on PrayinForRain.dev</title><link>https://prayinforrain.github.io/categories/javascript/</link><description>Recent content in Javascript on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Wed, 25 Jan 2023 17:17:15 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/categories/javascript/index.xml" rel="self" type="application/rss+xml"/><item><title>Tree Shaking</title><link>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</link><pubDate>Wed, 25 Jan 2023 17:17:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</guid><description>&lt;h2 id="용량을-절약하는-방법">용량을 절약하는 방법&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/tree-shaking/01.png" alt="bundle_map">&lt;/p>
+&lt;p>웹페이지의 성능을 이야기하는 가장 직관적인 지표는 아마 페이지에 사용되는 &lt;strong>파일의 크기&lt;/strong>일 것입니다. 파일의 크기가 무겁다면 파일을 다운받는 데 시간이 오래 걸리고, 다운로드한 파일을 읽고 렌더링 하는데도 시간이 오래 걸릴 것입니다. 따라서 번들 파일의 용량을 다이어트 하는 것은 사이트 성능에 꽤 중요한 역할을 합니다.&lt;/p>
+&lt;p>위 사진은 팀 프로젝트를 하던 중 &lt;code>@next/bundle-analyzer&lt;/code> 패키지를 이용해 번들 맵을 그렸던 것입니다. 클수록 번들 용량이 크다는 뜻이니 커다란 청크 위주로 최적화를 시도하면 될 것 같습니다. 그런데 어떻게 용량을 줄일 수 있을까요? gzip을 통해 파일을 압축해서 보내는 방법도 있겠지만, 코드적으로 최적화할 수 있는 방법은 &lt;code>Tree-shaking&lt;/code>입니다.&lt;/p></description></item><item><title>ECMAScript</title><link>https://prayinforrain.github.io/posts/2023/01/ecmascript/</link><pubDate>Wed, 25 Jan 2023 16:35:01 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/ecmascript/</guid><description>&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/ecmascript/01.png" alt="untitled">&lt;/p>
+&lt;h2 id="ecma-international">Ecma international&lt;/h2>
+&lt;blockquote>
+&lt;p>&lt;strong>Ecma International&lt;/strong> is an industry association dedicated to the standardization of information and communication systems
+&lt;em>Emca International은 정보통신 시스템의 표준화를 위한 국제 표준화 기구입니다.&lt;/em> &amp;gt; &lt;a href="https://www.ecma-international.org/">https://www.ecma-international.org/&lt;/a>&lt;/p>
+&lt;/blockquote>
+&lt;p>Ecma International은 Ecma 사이트에서 소개하듯, 정보통신 시스템의 표준을 만들기 위한 국제 기구입니다. C#, JSON, .u3d 확장자 등 여러 방면에서의 표준안을 제시하였으며, 개발자를 위한 IEEE같은 존재로 이해하면 될 것 같습니다.(제 생각)&lt;/p>
+&lt;p>유럽에서 컴퓨터 시스템을 표준화하기 위해 설립되어서 &lt;strong>ECMA&lt;/strong>(&lt;em>European Computer Manufacturers Association&lt;/em>)라는 이름을 가지고 있으나 유럽국가 뿐 아니라 전세계의 표준으로 활용되기 위해 &lt;strong>Ecma International&lt;/strong>로 이름을 변경하였습니다. &lt;strong>ECMA&lt;/strong> 자체는 두문자어이지만 지금의 이름은 하나의 고유명사로 사용되는 셈이죠. 따라서 &lt;strong>Ecma&lt;/strong>로 표기하는 것이 맞습니다.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/categories/life/index.html b/categories/life/index.html
index 97f1c30..865b3e8 100644
--- a/categories/life/index.html
+++ b/categories/life/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Life | PrayinForRain.dev</title>
-<meta property="og:title" content="Life | PrayinForRain.dev"><meta name=twitter:title content="Life | PrayinForRain.dev"><meta itemprop=name content="Life | PrayinForRain.dev"><meta name=application-name content="Life | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/categories/life/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/categories/life/><link href=/categories/life/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/categories/life/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Life | PrayinForRain.dev"><meta name=twitter:title content="Life | PrayinForRain.dev"><meta itemprop=name content="Life | PrayinForRain.dev"><meta name=application-name content="Life | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/categories/life/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/categories/life/><link href=/categories/life/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/categories/life/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Life</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/04/numble-talk/><h4 class=post-item-title>넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고</h4></a></div><time class=post-item-meta datetime=2023-04-23T04:05:58+0900>2023. 4. 23.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/migrating-to-hugo/><h4 class=post-item-title>Hugo로 블로그를 옮기자</h4></a></div><time class=post-item-meta datetime=2023-01-30T19:17:55+0900>2023. 1. 30.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Life</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/04/numble-talk/><h4 class=post-item-title>넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고</h4></a></div><time class=post-item-meta datetime=2023-04-23T04:05:58+0900>2023. 4. 23.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/migrating-to-hugo/><h4 class=post-item-title>Hugo로 블로그를 옮기자</h4></a></div><time class=post-item-meta datetime=2023-01-30T19:17:55+0900>2023. 1. 30.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/categories/life/index.xml b/categories/life/index.xml
index b5093c5..f788a42 100644
--- a/categories/life/index.xml
+++ b/categories/life/index.xml
@@ -1,3 +1,9 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Life on PrayinForRain.dev</title><link>https://prayinforrain.github.io/categories/life/</link><description>Recent content in Life on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Sun, 23 Apr 2023 04:05:58 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/categories/life/index.xml" rel="self" type="application/rss+xml"/><item><title>넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고</title><link>https://prayinforrain.github.io/posts/2023/04/numble-talk/</link><pubDate>Sun, 23 Apr 2023 04:05:58 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/04/numble-talk/</guid><description>시작하게 된 계기 3월에 정말 많은 일들이 있었다. 아직 뭔가 성과라고 내세울 결과물이 없긴 하지만 그래도 무의미하진 않았다(?)고 주장할 수 있는 그런 시간이었다. 점점 일이 정리가 되고 여유가 생기면서 번아웃이 온 사람처럼 푹 늘어지는 느낌이 있었는데, 그 와중에 누가 넘블을 소개해 주셨다.
-대충.. 프로젝트 주제와 요구사항을 주고 구현을 해 보는? 프로세스의 활동으로 이해했다. 기간이 짧아 확 몰입하기 좋겠다는 생각을 해서 한 번 맛만 보기로 했다. OpenAI API를 활용해 보는 프로젝트라는 점이 관심을 끌기도 했다.</description></item><item><title>Hugo로 블로그를 옮기자</title><link>https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/</link><pubDate>Mon, 30 Jan 2023 19:17:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/</guid><description>알음알음 티스푼 공사로 티스토리에서 이 곳으로 블로그를 옮겼습니다. 티스토리에 있던 컨텐츠 대부분은 옮기지 않았습니다. 별 의미도 없고 너무 사적인 내용이 많았기 때문입니다. 또 티스토리만의 감성이라고 해야 하나.. 약간 그 곳에 더 맞는 포인트들이 있어서 아카이브같은 느낌으로 그냥 티스토리에 두기로 했습니다. 곳곳에 티스토리 링크가 있으니 시간을 효율적으로 버리고 싶은 분이 있다면 읽어주셔도 감사할 것 같습니다. 아무튼 옮겨야 하는 컨텐츠도 없으면서 정말 오랜 기간 삽질을 했는데, 그 과정에 대해 이야기해보려고 합니다.
-블로그를 이전하게 된 계기 아직도 저 Main Page라는 글자의 의미를 모르겠습니다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Life on PrayinForRain.dev</title><link>https://prayinforrain.github.io/categories/life/</link><description>Recent content in Life on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Sun, 23 Apr 2023 04:05:58 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/categories/life/index.xml" rel="self" type="application/rss+xml"/><item><title>넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고</title><link>https://prayinforrain.github.io/posts/2023/04/numble-talk/</link><pubDate>Sun, 23 Apr 2023 04:05:58 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/04/numble-talk/</guid><description>&lt;h2 id="시작하게-된-계기">시작하게 된 계기&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/04/numble-talk/01.png" alt="ui design">&lt;/p>
+&lt;p>3월에 정말 많은 일들이 있었다. 아직 뭔가 성과라고 내세울 결과물이 없긴 하지만 그래도 무의미하진 않았다(?)고 주장할 수 있는 그런 시간이었다. 점점 일이 정리가 되고 여유가 생기면서 번아웃이 온 사람처럼 푹 늘어지는 느낌이 있었는데, 그 와중에 누가 넘블을 소개해 주셨다.&lt;/p>
+&lt;p>대충.. 프로젝트 주제와 요구사항을 주고 구현을 해 보는? 프로세스의 활동으로 이해했다. 기간이 짧아 확 몰입하기 좋겠다는 생각을 해서 한 번 맛만 보기로 했다. OpenAI API를 활용해 보는 프로젝트라는 점이 관심을 끌기도 했다. 요새 챗쌤한테 이런저런 도움도 받았고 관련 아티클도 많이 보이고..&lt;/p></description></item><item><title>Hugo로 블로그를 옮기자</title><link>https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/</link><pubDate>Mon, 30 Jan 2023 19:17:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/</guid><description>&lt;p>알음알음 티스푼 공사로 티스토리에서 이 곳으로 블로그를 옮겼습니다. 티스토리에 있던 컨텐츠 대부분은 옮기지 않았습니다. 별 의미도 없고 너무 사적인 내용이 많았기 때문입니다. 또 티스토리만의 감성이라고 해야 하나.. 약간 그 곳에 더 맞는 포인트들이 있어서 아카이브같은 느낌으로 그냥 티스토리에 두기로 했습니다. 곳곳에 티스토리 링크가 있으니 시간을 효율적으로 버리고 싶은 분이 있다면 읽어주셔도 감사할 것 같습니다.
+아무튼 옮겨야 하는 컨텐츠도 없으면서 정말 오랜 기간 삽질을 했는데, 그 과정에 대해 이야기해보려고 합니다.&lt;/p>
+&lt;h2 id="블로그를-이전하게-된-계기">블로그를 이전하게 된 계기&lt;/h2>
+&lt;p>&lt;figure>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/migrating-to-hugo/01.png"
+ alt="image">&lt;figcaption>
+ &lt;p>아직도 저 Main Page라는 글자의 의미를 모르겠습니다..&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/categories/moheyum/index.html b/categories/moheyum/index.html
index 044104b..eda88ca 100644
--- a/categories/moheyum/index.html
+++ b/categories/moheyum/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Moheyum | PrayinForRain.dev</title>
-<meta property="og:title" content="Moheyum | PrayinForRain.dev"><meta name=twitter:title content="Moheyum | PrayinForRain.dev"><meta itemprop=name content="Moheyum | PrayinForRain.dev"><meta name=application-name content="Moheyum | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/categories/moheyum/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/categories/moheyum/><link href=/categories/moheyum/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/categories/moheyum/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Moheyum | PrayinForRain.dev"><meta name=twitter:title content="Moheyum | PrayinForRain.dev"><meta itemprop=name content="Moheyum | PrayinForRain.dev"><meta name=application-name content="Moheyum | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/categories/moheyum/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/categories/moheyum/><link href=/categories/moheyum/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/categories/moheyum/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Moheyum</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2022</h2><article class=post-item><div class=post-item-content><a href=/posts/2022/12/finishing-moheyum/><h4 class=post-item-title>모헤윰 mo:heyum - 프로젝트 회고</h4></a></div><time class=post-item-meta datetime=2022-12-21T03:30:25+0900>2022. 12. 21.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/12/prevent-sidebar-blinking/><h4 class=post-item-title>사이드바야 그만 깜빡여라</h4></a></div><time class=post-item-meta datetime=2022-12-06T02:11:55+0900>2022. 12. 6.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/12/making-editor-markdown/><h4 class=post-item-title>마크다운 만들기 - Markdown [3/3]</h4></a></div><time class=post-item-meta datetime=2022-12-05T13:18:55+0900>2022. 12. 5.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/making-editor-getselection/><h4 class=post-item-title>마크다운 만들기 - getSelection [2/3]</h4></a></div><time class=post-item-meta datetime=2022-11-24T00:53:55+0900>2022. 11. 24.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/making-editor-contenteditable/><h4 class=post-item-title>마크다운 만들기 - contentEditable [1/3]</h4></a></div><time class=post-item-meta datetime=2022-11-22T20:36:55+0900>2022. 11. 22.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/redux-vs-recoil/><h4 class=post-item-title>Redux vs Recoil</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/npm-vs-yarn-vs-pnpm/><h4 class=post-item-title>npm vs yarn vs pnpm</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/emotion/><h4 class=post-item-title>Emotion</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Moheyum</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2022</h2><article class=post-item><div class=post-item-content><a href=/posts/2022/12/finishing-moheyum/><h4 class=post-item-title>모헤윰 mo:heyum - 프로젝트 회고</h4></a></div><time class=post-item-meta datetime=2022-12-21T03:30:25+0900>2022. 12. 21.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/12/prevent-sidebar-blinking/><h4 class=post-item-title>사이드바야 그만 깜빡여라</h4></a></div><time class=post-item-meta datetime=2022-12-06T02:11:55+0900>2022. 12. 6.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/12/making-editor-markdown/><h4 class=post-item-title>마크다운 만들기 - Markdown [3/3]</h4></a></div><time class=post-item-meta datetime=2022-12-05T13:18:55+0900>2022. 12. 5.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/making-editor-getselection/><h4 class=post-item-title>마크다운 만들기 - getSelection [2/3]</h4></a></div><time class=post-item-meta datetime=2022-11-24T00:53:55+0900>2022. 11. 24.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/making-editor-contenteditable/><h4 class=post-item-title>마크다운 만들기 - contentEditable [1/3]</h4></a></div><time class=post-item-meta datetime=2022-11-22T20:36:55+0900>2022. 11. 22.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/redux-vs-recoil/><h4 class=post-item-title>Redux vs Recoil</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/npm-vs-yarn-vs-pnpm/><h4 class=post-item-title>npm vs yarn vs pnpm</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/emotion/><h4 class=post-item-title>Emotion</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/categories/moheyum/index.xml b/categories/moheyum/index.xml
index 5049ffd..9fec6b5 100644
--- a/categories/moheyum/index.xml
+++ b/categories/moheyum/index.xml
@@ -1,21 +1,55 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Moheyum on PrayinForRain.dev</title><link>https://prayinforrain.github.io/categories/moheyum/</link><description>Recent content in Moheyum on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Wed, 21 Dec 2022 03:30:25 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/categories/moheyum/index.xml" rel="self" type="application/rss+xml"/><item><title>모헤윰 mo:heyum - 프로젝트 회고</title><link>https://prayinforrain.github.io/posts/2022/12/finishing-moheyum/</link><pubDate>Wed, 21 Dec 2022 03:30:25 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/12/finishing-moheyum/</guid><description>티스토리 블로그에 작성했던 부스트캠프 팀 프로젝트의 회고 글이다. [원본 링크]
-내가 팀원들한테 이 얘길 했나 모르겠는데.. 이 페이지 좀 이쁘다. 잘만드셨다..
-부스트캠프의 최종 팀 프로젝트로 나는 모헤윰이라는 SNS를 만들었다. 결과물은 꽤 괜찮다. [여기]에 간단한 시연 영상이 있다. 사실 팀 구인을 하던 때부터 나는 무엇을 만드는지는 크게 중요하지 않았다. 여태까지의 학습 스프린트로 이미 개발이라는 과정은 어느정도 감을 익혔고, 내가 성장함에 따라 이 과정에서 사용하는 기술만 조금씩 변화할 뿐이라고 생각했다. 따라서 내가 팀 프로젝트에서 가장 중요하게 생각했던 포인트는 협업이었다.</description></item><item><title>사이드바야 그만 깜빡여라</title><link>https://prayinforrain.github.io/posts/2022/12/prevent-sidebar-blinking/</link><pubDate>Tue, 06 Dec 2022 02:11:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/12/prevent-sidebar-blinking/</guid><description>모헤윰의 프론트엔드 앱은 Next.js로 만들어져 있습니다. 팀원 그 누구도 사용해 본 적이 없음에도 굳이 선택한 이유는 NestJS를 써 보니 프레임워크를 사용하는 것이 협업 환경에서 코드 일관성을 지키는 데 도움을 줄 것이라는 막연한 기대와, SSR을 체험해 보고 싶은 학습적인 욕심이 있었습니다. 지금 돌아보니 ‘너와 함께 하길 잘 했어!’ 하는 감상은 없네요.
-기왕 SSR을 체험한다고 시작한 프로젝트인 만큼, 성능에 신경을 쓰지 않을 수 없게 되었습니다. 그러다 제가 좋아하는 어떤 팀의 노션에서 memoization을 통한 컴포넌트 중복 렌더링 방지에 대한 글을 읽었는데요, 이 부분이 때 마침 Next.</description></item><item><title>마크다운 만들기 - Markdown [3/3]</title><link>https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/</link><pubDate>Mon, 05 Dec 2022 13:18:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/</guid><description>모헤윰의 에디터 만들기 시리즈 모아보기
-에디터 만들기 - ContentEditable [1/3]
-에디터 만들기 - getSelection [2/3]
-에디터 만들기 - Markdown [3/3]
-마지막입니다. 입력하고, 게시할 수 있게 되었으니, 이제 남은 일은 서식을 적용하는 것 뿐입니다. 마크다운 문법을 이용해 어떻게 서식을 적용할 수 있을까요? 그 과정을 정리해 보겠습니다.
-🤷 어떻게 할까요? 정말이지 어떻게 하면 좋을까요? 우선 제가 생각하는 가장 사용성이 좋은 마크다운은 깃허브의 그것이였습니다. GFM(GitHub Flavored Markdown)이라고 부르는 스펙이 있는데, 처음에는 이걸 부르는 이름이 있는 것조차 모르고 막무가내로 리버스 엔지니어링 마인드로 작업을 시작했습니다.</description></item><item><title>마크다운 만들기 - getSelection [2/3]</title><link>https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/</link><pubDate>Thu, 24 Nov 2022 00:53:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/</guid><description>모헤윰의 에디터 만들기 시리즈 모아보기
-에디터 만들기 - ContentEditable [1/3]
-에디터 만들기 - getSelection [2/3]
-에디터 만들기 - Markdown [3/3]
-아니???????? 두 번째 글이 파서가 아니였네요. 저는 사실 이 글이 2부작이길 간절히 바랬는데, 1편에서 만든 에디터에 너무 끔찍한 버그가 있어서 이에 대해 정리해 보고자 합니다. 이걸로 3시간을 씨름하고 있었지만 모헤윰의 TIL 문서가 풍성해지고 있으니 긍정적이게 생각해야겠죠?
-💡 이 글은 Window 10, Chrome 107.0.5304.107 버전을 기준으로 작성되었습니다. 일부 환경에 따라 다르게 작동하는 부분이 있을 수 있습니다.</description></item><item><title>마크다운 만들기 - contentEditable [1/3]</title><link>https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/</link><pubDate>Tue, 22 Nov 2022 20:36:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/</guid><description>모헤윰의 에디터 만들기 시리즈 모아보기
-에디터 만들기 - ContentEditable [1/3]
-에디터 만들기 - getSelection [2/3]
-에디터 만들기 - Markdown [3/3]
-모헤윰의 핵심 기능 중 하나는 마크다운 서식 지원입니다. 왜 SNS에 마크다운을 끼얹을 생각을 했나 생각해보면 최초 기획부터 있다가 기능 다이어트를 한 후 살아남았기 때문인데, 아무튼 드디어 때가 왔습니다.
-내부적으로 에디터를 외부 라이브러리를 사용하는게 좋지 않겠냐는 이야기가 나왔는데요, 결국 직접 구현해 보기로 했지만 그 과정에서 여러 레퍼런스를 얻을 수 있었습니다. 개인적으로 멋있다고 생각한 사이트 두 가지를 소개합니다.</description></item><item><title>Emotion</title><link>https://prayinforrain.github.io/posts/2022/11/emotion/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/emotion/</guid><description>🤷TL;DR CSS-in-JS는 프로젝트 규모가 커질수록 관리하기 어려운 CSS의 문제를 보완한다. emotion과 styled-components는 사용상의 차이가 거의 없으니 골라서 사용하자. 적절한 IDE Extension을 잘 활용하자. CSS-in-JS가 모든 경우에 대한 정답이 아님을 인지하자. 🎨CSS-in-JS CSS-in-JS는 HTML Element의 스타일을 자바스크립트 파일을 통해서 지정하는 방식입니다. .css 파일이 하던 일을 .js 파일에게 시키는 것이죠. CSS는 CSS이고, JS는 JS입니다. 왜 굳이 둘을 합쳐야만 하는 것일까요? 이 알 수 없는 발상을 이해하려면 우선 기존 css의 단점을 살펴보겠습니다.
-제가 학습 스프린트때 진행한 프로젝트 파일의 일부입니다.</description></item><item><title>npm vs yarn vs pnpm</title><link>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</guid><description>지금까지 저는 아무 의심 없이 npm을 사용해왔습니다. 이따금씩 node_modules 폴더가 저를 고통스럽게 했던 시간들이 있었지만, 프로젝트 초기화에 정말 이상한 행동만 하지 않으면 npm i 한 줄과 커피 한 잔으로 모든게 문제 없이 동작했으니까요. 하지만 우리는 슬랙의 어떤 분을 통해, npm보다 좋은 방법이 있음을 알고 있습니다. 이번 포스트에서는 yarn과 pnpm을 체험해 보도록 하겠습니다.
-🤷 TL;DR npm의 의존성 관리는 사실 매우 비효율적이다. 이 문제를 보완한 패키지 매니저가 yarn, pnpm이다. 각 패키지 매니저로의 마이그레이션은 매우 쉽다.</description></item><item><title>Redux vs Recoil</title><link>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</guid><description>🤷 TL;DR Redux는 안정적이지만, 선언과 사용이 복잡하다. Recoil은 사용이 매우 쉽지만 정식 버전이 없다. 프로젝트 규모에 따라 마음에 드는 라이브러리를 선택하자 🚪 서론 우리는 React를 사용할 때 보통 useState를 통해 상태를 관리합니다. useState는 정말 섹시하지만, 한 가지 너무 큰 단점이 있습니다. 바로 컴포넌트끼리 데이터를 주고받는 데 사용하기가 힘들다는 점입니다. 그 일을 하기 위해 등장한 것이 바로 상태 관리 라이브러리입니다. 상태 관리 라이브러리의 필요성에 대해 공감하지 못하는 분들을 위해 짧은 토막글을 마련해 보았습니다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Moheyum on PrayinForRain.dev</title><link>https://prayinforrain.github.io/categories/moheyum/</link><description>Recent content in Moheyum on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Wed, 21 Dec 2022 03:30:25 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/categories/moheyum/index.xml" rel="self" type="application/rss+xml"/><item><title>모헤윰 mo:heyum - 프로젝트 회고</title><link>https://prayinforrain.github.io/posts/2022/12/finishing-moheyum/</link><pubDate>Wed, 21 Dec 2022 03:30:25 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/12/finishing-moheyum/</guid><description>&lt;blockquote>
+&lt;p>티스토리 블로그에 작성했던 부스트캠프 팀 프로젝트의 회고 글이다. &lt;a href="https://prayinforrain.tistory.com/80">[원본 링크]&lt;/a>&lt;/p>
+&lt;/blockquote>
+&lt;figure>&lt;img src="https://prayinforrain.github.io/images/posts/2022/12/finishing-moheyum/moheyum_01.png"
+ alt="image">&lt;figcaption>
+ &lt;p>내가 팀원들한테 이 얘길 했나 모르겠는데.. 이 페이지 좀 이쁘다. 잘만드셨다..&lt;/p>
+ &lt;/figcaption>
+&lt;/figure>
+
+&lt;p>부스트캠프의 최종 팀 프로젝트로 나는 &lt;strong>모헤윰&lt;/strong>이라는 SNS를 만들었다. 결과물은 꽤 괜찮다. &lt;a href="https://youtu.be/9mVinynuUTw">[여기]&lt;/a>에 간단한 시연 영상이 있다. 사실 팀 구인을 하던 때부터 나는 무엇을 만드는지는 크게 중요하지 않았다. 여태까지의 학습 스프린트로 이미 개발이라는 과정은 어느정도 감을 익혔고, 내가 성장함에 따라 이 과정에서 사용하는 기술만 조금씩 변화할 뿐이라고 생각했다. 따라서 내가 팀 프로젝트에서 가장 중요하게 생각했던 포인트는 협업이었다.&lt;/p></description></item><item><title>사이드바야 그만 깜빡여라</title><link>https://prayinforrain.github.io/posts/2022/12/prevent-sidebar-blinking/</link><pubDate>Tue, 06 Dec 2022 02:11:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/12/prevent-sidebar-blinking/</guid><description>&lt;p>&lt;strong>모헤윰&lt;/strong>의 프론트엔드 앱은 &lt;code>Next.js&lt;/code>로 만들어져 있습니다. 팀원 그 누구도 사용해 본 적이 없음에도 굳이 선택한 이유는 &lt;code>NestJS&lt;/code>를 써 보니 프레임워크를 사용하는 것이 협업 환경에서 코드 일관성을 지키는 데 도움을 줄 것이라는 막연한 기대와, &lt;code>SSR&lt;/code>을 체험해 보고 싶은 학습적인 욕심이 있었습니다. 지금 돌아보니 ‘너와 함께 하길 잘 했어!’ 하는 감상은 없네요.&lt;/p>
+&lt;p>기왕 SSR을 체험한다고 시작한 프로젝트인 만큼, 성능에 신경을 쓰지 않을 수 없게 되었습니다. 그러다 제가 좋아하는 어떤 팀의 노션에서 &lt;code>memoization&lt;/code>을 통한 컴포넌트 중복 렌더링 방지에 대한 글을 읽었는데요, 이 부분이 때 마침 &lt;a href="https://www.notion.so/next-js-13-app-dir-11191a66a5564a25ba882c8a835afd13">Next.js 13을 적용하지 못해 포기해야만 했던&lt;/a> 아픈 상처를 자극하고 있어서 모헤윰에도 시도해 보기로 하였습니다.&lt;/p></description></item><item><title>마크다운 만들기 - Markdown [3/3]</title><link>https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/</link><pubDate>Mon, 05 Dec 2022 13:18:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/</guid><description>&lt;p>&lt;strong>모헤윰&lt;/strong>의 에디터 만들기 시리즈 모아보기&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/">에디터 만들기 - ContentEditable [1/3]&lt;/a>&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/">에디터 만들기 - getSelection [2/3]&lt;/a>&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/">에디터 만들기 - Markdown [3/3]&lt;/a>&lt;/p>
+&lt;hr>
+&lt;p>마지막입니다. 입력하고, 게시할 수 있게 되었으니, 이제 남은 일은 서식을 적용하는 것 뿐입니다. 마크다운 문법을 이용해 어떻게 서식을 적용할 수 있을까요? 그 과정을 정리해 보겠습니다.&lt;/p>
+&lt;h2 id="-어떻게-할까요">🤷 어떻게 할까요?&lt;/h2>
+&lt;p>정말이지 어떻게 하면 좋을까요? 우선 제가 생각하는 가장 사용성이 좋은 마크다운은 깃허브의 그것이였습니다. &lt;a href="https://github.github.com/gfm/">GFM(GitHub Flavored Markdown)&lt;/a>이라고 부르는 스펙이 있는데, 처음에는 이걸 부르는 이름이 있는 것조차 모르고 막무가내로 리버스 엔지니어링 마인드로 작업을 시작했습니다. 아래 사진처럼 아무 이슈나 들어가서 댓글 창에 실험을 하면서요.&lt;/p></description></item><item><title>마크다운 만들기 - getSelection [2/3]</title><link>https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/</link><pubDate>Thu, 24 Nov 2022 00:53:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/</guid><description>&lt;p>&lt;strong>모헤윰&lt;/strong>의 에디터 만들기 시리즈 모아보기&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/">에디터 만들기 - ContentEditable [1/3]&lt;/a>&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/">에디터 만들기 - getSelection [2/3]&lt;/a>&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/">에디터 만들기 - Markdown [3/3]&lt;/a>&lt;/p>
+&lt;hr>
+&lt;p>아니???????? 두 번째 글이 파서가 아니였네요. 저는 사실 이 글이 2부작이길 간절히 바랬는데, 1편에서 만든 에디터에 너무 끔찍한 버그가 있어서 이에 대해 정리해 보고자 합니다. 이걸로 3시간을 씨름하고 있었지만 모헤윰의 TIL 문서가 풍성해지고 있으니 긍정적이게 생각해야겠죠?&lt;/p>
+&lt;blockquote>
+&lt;p>💡 이 글은 Window 10, Chrome 107.0.5304.107 버전을 기준으로 작성되었습니다. 일부 환경에 따라 다르게 작동하는 부분이 있을 수 있습니다.&lt;/p></description></item><item><title>마크다운 만들기 - contentEditable [1/3]</title><link>https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/</link><pubDate>Tue, 22 Nov 2022 20:36:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/</guid><description>&lt;p>&lt;strong>모헤윰&lt;/strong>의 에디터 만들기 시리즈 모아보기&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/">에디터 만들기 - ContentEditable [1/3]&lt;/a>&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/">에디터 만들기 - getSelection [2/3]&lt;/a>&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/">에디터 만들기 - Markdown [3/3]&lt;/a>&lt;/p>
+&lt;hr>
+&lt;p>모헤윰의 핵심 기능 중 하나는 &lt;code>마크다운 서식 지원&lt;/code>입니다. 왜 SNS에 마크다운을 끼얹을 생각을 했나 생각해보면 최초 기획부터 있다가 기능 다이어트를 한 후 살아남았기 때문인데, 아무튼 드디어 때가 왔습니다.&lt;/p>
+&lt;p>내부적으로 에디터를 외부 라이브러리를 사용하는게 좋지 않겠냐는 이야기가 나왔는데요, 결국 직접 구현해 보기로 했지만 그 과정에서 여러 레퍼런스를 얻을 수 있었습니다. 개인적으로 멋있다고 생각한 사이트 두 가지를 소개합니다.&lt;/p></description></item><item><title>Emotion</title><link>https://prayinforrain.github.io/posts/2022/11/emotion/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/emotion/</guid><description>&lt;h2 id="tldr">🤷TL;DR&lt;/h2>
+&lt;ul>
+&lt;li>CSS-in-JS는 프로젝트 규모가 커질수록 관리하기 어려운 CSS의 문제를 보완한다.&lt;/li>
+&lt;li>emotion과 styled-components는 사용상의 차이가 거의 없으니 골라서 사용하자.&lt;/li>
+&lt;li>적절한 IDE Extension을 잘 활용하자.&lt;/li>
+&lt;li>CSS-in-JS가 모든 경우에 대한 정답이 아님을 인지하자.&lt;/li>
+&lt;/ul>
+&lt;h2 id="css-in-js">🎨CSS-in-JS&lt;/h2>
+&lt;p>CSS-in-JS는 HTML Element의 스타일을 자바스크립트 파일을 통해서 지정하는 방식입니다. .css 파일이 하던 일을 .js 파일에게 시키는 것이죠. CSS는 CSS이고, JS는 JS입니다. 왜 굳이 둘을 합쳐야만 하는 것일까요? 이 알 수 없는 발상을 이해하려면 우선 기존 css의 단점을 살펴보겠습니다.&lt;/p>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2022/11/emotion/emotion_01.png" alt="Untitled">&lt;/p></description></item><item><title>npm vs yarn vs pnpm</title><link>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</guid><description>&lt;p>지금까지 저는 아무 의심 없이 npm을 사용해왔습니다. 이따금씩 &lt;code>node_modules&lt;/code> 폴더가 저를 고통스럽게 했던 시간들이 있었지만, 프로젝트 초기화에 정말 이상한 행동만 하지 않으면 &lt;code>npm i&lt;/code> 한 줄과 커피 한 잔으로 모든게 문제 없이 동작했으니까요. 하지만 우리는 슬랙의 어떤 분을 통해, npm보다 좋은 방법이 있음을 알고 있습니다. 이번 포스트에서는 &lt;code>yarn&lt;/code>과 &lt;code>pnpm&lt;/code>을 체험해 보도록 하겠습니다.&lt;/p>
+&lt;h2 id="-tldr">🤷 TL;DR&lt;/h2>
+&lt;ul>
+&lt;li>npm의 의존성 관리는 사실 매우 비효율적이다.&lt;/li>
+&lt;li>이 문제를 보완한 패키지 매니저가 yarn, pnpm이다.&lt;/li>
+&lt;li>각 패키지 매니저로의 마이그레이션은 매우 쉽다. 긍정적으로 고려해보자.&lt;/li>
+&lt;/ul>
+&lt;h2 id="-npm">🎁 npm&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_01.png" alt="Untitled">&lt;/p></description></item><item><title>Redux vs Recoil</title><link>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</guid><description>&lt;h2 id="-tldr">🤷 TL;DR&lt;/h2>
+&lt;ul>
+&lt;li>Redux는 안정적이지만, 선언과 사용이 복잡하다.&lt;/li>
+&lt;li>Recoil은 사용이 매우 쉽지만 정식 버전이 없다.&lt;/li>
+&lt;li>프로젝트 규모에 따라 마음에 드는 라이브러리를 선택하자&lt;/li>
+&lt;/ul>
+&lt;h2 id="-서론">🚪 서론&lt;/h2>
+&lt;p>우리는 React를 사용할 때 보통 &lt;code>useState&lt;/code>를 통해 상태를 관리합니다. &lt;code>useState&lt;/code>는 정말 섹시하지만, 한 가지 너무 큰 단점이 있습니다. 바로 컴포넌트끼리 데이터를 주고받는 데 사용하기가 힘들다는 점입니다. 그 일을 하기 위해 등장한 것이 바로 &lt;strong>상태 관리 라이브러리&lt;/strong>입니다. 상태 관리 라이브러리의 필요성에 대해 공감하지 못하는 분들을 위해 짧은 토막글을 마련해 보았습니다.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/categories/node.js/index.html b/categories/node.js/index.html
index 7180f53..435b77a 100644
--- a/categories/node.js/index.html
+++ b/categories/node.js/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Node.js | PrayinForRain.dev</title>
-<meta property="og:title" content="Node.js | PrayinForRain.dev"><meta name=twitter:title content="Node.js | PrayinForRain.dev"><meta itemprop=name content="Node.js | PrayinForRain.dev"><meta name=application-name content="Node.js | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/categories/node.js/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/categories/node.js/><link href=/categories/node.js/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/categories/node.js/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Node.js | PrayinForRain.dev"><meta name=twitter:title content="Node.js | PrayinForRain.dev"><meta itemprop=name content="Node.js | PrayinForRain.dev"><meta name=application-name content="Node.js | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/categories/node.js/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/categories/node.js/><link href=/categories/node.js/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/categories/node.js/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Node.js</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/05/exploring-yarn-berry/><h4 class=post-item-title>얀 베리 탐험하기</h4></a></div><time class=post-item-meta datetime=2023-05-30T02:27:49+0900>2023. 5. 30.</time></article><h2 class=post-year>2022</h2><article class=post-item><div class=post-item-content><a href=/posts/2022/11/npm-vs-yarn-vs-pnpm/><h4 class=post-item-title>npm vs yarn vs pnpm</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Node.js</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/05/exploring-yarn-berry/><h4 class=post-item-title>얀 베리 탐험하기</h4></a></div><time class=post-item-meta datetime=2023-05-30T02:27:49+0900>2023. 5. 30.</time></article><h2 class=post-year>2022</h2><article class=post-item><div class=post-item-content><a href=/posts/2022/11/npm-vs-yarn-vs-pnpm/><h4 class=post-item-title>npm vs yarn vs pnpm</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/categories/node.js/index.xml b/categories/node.js/index.xml
index 27998ef..54af9f9 100644
--- a/categories/node.js/index.xml
+++ b/categories/node.js/index.xml
@@ -1,3 +1,12 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Node.js on PrayinForRain.dev</title><link>https://prayinforrain.github.io/categories/node.js/</link><description>Recent content in Node.js on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Tue, 30 May 2023 02:27:49 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/categories/node.js/index.xml" rel="self" type="application/rss+xml"/><item><title>얀 베리 탐험하기</title><link>https://prayinforrain.github.io/posts/2023/05/exploring-yarn-berry/</link><pubDate>Tue, 30 May 2023 02:27:49 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/05/exploring-yarn-berry/</guid><description>내 레포의 위험한 녀석 최근 차가운 디자인 시스템(CDS)의 패키지 매니저를 Yarn berry로 마이그레이션 하는 작업을 하고 있다. 이유는 후술할 node_modules 자체의 단점도 있고, 내 데스크탑이 HDD를 사용하기 때문에 node_modules의 수십만 개의 파일들을 다루는 것이 너무 느려서 강력 추천했다.
-하지만 사실 나는 PnP가 어떻게 패키지들을 resolve하는지 전혀 모른다. 그저 어떻게 해야 오류 없이 쓸 수 있는지만 열심히 고민했는데, 팀원들에게 설명할 때 마다 막연히 얀베리가 잘못했겠죠~ 하는 스스로에게 자괴감을 느껴 이 기회에 한 번 Yarn PnP를 똑바로 마주해 보기로 했다.</description></item><item><title>npm vs yarn vs pnpm</title><link>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</guid><description>지금까지 저는 아무 의심 없이 npm을 사용해왔습니다. 이따금씩 node_modules 폴더가 저를 고통스럽게 했던 시간들이 있었지만, 프로젝트 초기화에 정말 이상한 행동만 하지 않으면 npm i 한 줄과 커피 한 잔으로 모든게 문제 없이 동작했으니까요. 하지만 우리는 슬랙의 어떤 분을 통해, npm보다 좋은 방법이 있음을 알고 있습니다. 이번 포스트에서는 yarn과 pnpm을 체험해 보도록 하겠습니다.
-🤷 TL;DR npm의 의존성 관리는 사실 매우 비효율적이다. 이 문제를 보완한 패키지 매니저가 yarn, pnpm이다. 각 패키지 매니저로의 마이그레이션은 매우 쉽다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Node.js on PrayinForRain.dev</title><link>https://prayinforrain.github.io/categories/node.js/</link><description>Recent content in Node.js on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Tue, 30 May 2023 02:27:49 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/categories/node.js/index.xml" rel="self" type="application/rss+xml"/><item><title>얀 베리 탐험하기</title><link>https://prayinforrain.github.io/posts/2023/05/exploring-yarn-berry/</link><pubDate>Tue, 30 May 2023 02:27:49 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/05/exploring-yarn-berry/</guid><description>&lt;h2 id="내-레포의-위험한-녀석">내 레포의 위험한 녀석&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/05/exploring-yarn-berry/01.png" alt="cds issue">&lt;/p>
+&lt;p>최근 &lt;a href="https://github.com/c-h-w-h/cds">차가운 디자인 시스템(CDS)&lt;/a>의 패키지 매니저를 &lt;strong>Yarn berry&lt;/strong>로 마이그레이션 하는 작업을 하고 있다. 이유는 후술할 &lt;code>node_modules&lt;/code> 자체의 단점도 있고, 내 데스크탑이 HDD를 사용하기 때문에 &lt;code>node_modules&lt;/code>의 수십만 개의 파일들을 다루는 것이 너무 느려서 강력 추천했다.&lt;/p>
+&lt;p>하지만 사실 나는 PnP가 어떻게 패키지들을 resolve하는지 전혀 모른다. 그저 어떻게 해야 오류 없이 쓸 수 있는지만 열심히 고민했는데, 팀원들에게 설명할 때 마다 막연히 얀베리가 잘못했겠죠~ 하는 스스로에게 자괴감을 느껴 이 기회에 한 번 Yarn PnP를 똑바로 마주해 보기로 했다.&lt;/p></description></item><item><title>npm vs yarn vs pnpm</title><link>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</guid><description>&lt;p>지금까지 저는 아무 의심 없이 npm을 사용해왔습니다. 이따금씩 &lt;code>node_modules&lt;/code> 폴더가 저를 고통스럽게 했던 시간들이 있었지만, 프로젝트 초기화에 정말 이상한 행동만 하지 않으면 &lt;code>npm i&lt;/code> 한 줄과 커피 한 잔으로 모든게 문제 없이 동작했으니까요. 하지만 우리는 슬랙의 어떤 분을 통해, npm보다 좋은 방법이 있음을 알고 있습니다. 이번 포스트에서는 &lt;code>yarn&lt;/code>과 &lt;code>pnpm&lt;/code>을 체험해 보도록 하겠습니다.&lt;/p>
+&lt;h2 id="-tldr">🤷 TL;DR&lt;/h2>
+&lt;ul>
+&lt;li>npm의 의존성 관리는 사실 매우 비효율적이다.&lt;/li>
+&lt;li>이 문제를 보완한 패키지 매니저가 yarn, pnpm이다.&lt;/li>
+&lt;li>각 패키지 매니저로의 마이그레이션은 매우 쉽다. 긍정적으로 고려해보자.&lt;/li>
+&lt;/ul>
+&lt;h2 id="-npm">🎁 npm&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_01.png" alt="Untitled">&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/categories/react/index.html b/categories/react/index.html
index a8fd9b7..6fe5897 100644
--- a/categories/react/index.html
+++ b/categories/react/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>React | PrayinForRain.dev</title>
-<meta property="og:title" content="React | PrayinForRain.dev"><meta name=twitter:title content="React | PrayinForRain.dev"><meta itemprop=name content="React | PrayinForRain.dev"><meta name=application-name content="React | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/categories/react/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/categories/react/><link href=/categories/react/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/categories/react/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="React | PrayinForRain.dev"><meta name=twitter:title content="React | PrayinForRain.dev"><meta itemprop=name content="React | PrayinForRain.dev"><meta name=application-name content="React | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/categories/react/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/categories/react/><link href=/categories/react/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/categories/react/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">React</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2022</h2><article class=post-item><div class=post-item-content><a href=/posts/2022/11/redux-vs-recoil/><h4 class=post-item-title>Redux vs Recoil</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/emotion/><h4 class=post-item-title>Emotion</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">React</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2022</h2><article class=post-item><div class=post-item-content><a href=/posts/2022/11/redux-vs-recoil/><h4 class=post-item-title>Redux vs Recoil</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/emotion/><h4 class=post-item-title>Emotion</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/categories/react/index.xml b/categories/react/index.xml
index 39f11ae..af75862 100644
--- a/categories/react/index.xml
+++ b/categories/react/index.xml
@@ -1,2 +1,17 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>React on PrayinForRain.dev</title><link>https://prayinforrain.github.io/categories/react/</link><description>Recent content in React on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Fri, 18 Nov 2022 16:42:55 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/categories/react/index.xml" rel="self" type="application/rss+xml"/><item><title>Emotion</title><link>https://prayinforrain.github.io/posts/2022/11/emotion/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/emotion/</guid><description>🤷TL;DR CSS-in-JS는 프로젝트 규모가 커질수록 관리하기 어려운 CSS의 문제를 보완한다. emotion과 styled-components는 사용상의 차이가 거의 없으니 골라서 사용하자. 적절한 IDE Extension을 잘 활용하자. CSS-in-JS가 모든 경우에 대한 정답이 아님을 인지하자. 🎨CSS-in-JS CSS-in-JS는 HTML Element의 스타일을 자바스크립트 파일을 통해서 지정하는 방식입니다. .css 파일이 하던 일을 .js 파일에게 시키는 것이죠. CSS는 CSS이고, JS는 JS입니다. 왜 굳이 둘을 합쳐야만 하는 것일까요? 이 알 수 없는 발상을 이해하려면 우선 기존 css의 단점을 살펴보겠습니다.
-제가 학습 스프린트때 진행한 프로젝트 파일의 일부입니다.</description></item><item><title>Redux vs Recoil</title><link>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</guid><description>🤷 TL;DR Redux는 안정적이지만, 선언과 사용이 복잡하다. Recoil은 사용이 매우 쉽지만 정식 버전이 없다. 프로젝트 규모에 따라 마음에 드는 라이브러리를 선택하자 🚪 서론 우리는 React를 사용할 때 보통 useState를 통해 상태를 관리합니다. useState는 정말 섹시하지만, 한 가지 너무 큰 단점이 있습니다. 바로 컴포넌트끼리 데이터를 주고받는 데 사용하기가 힘들다는 점입니다. 그 일을 하기 위해 등장한 것이 바로 상태 관리 라이브러리입니다. 상태 관리 라이브러리의 필요성에 대해 공감하지 못하는 분들을 위해 짧은 토막글을 마련해 보았습니다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>React on PrayinForRain.dev</title><link>https://prayinforrain.github.io/categories/react/</link><description>Recent content in React on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Fri, 18 Nov 2022 16:42:55 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/categories/react/index.xml" rel="self" type="application/rss+xml"/><item><title>Emotion</title><link>https://prayinforrain.github.io/posts/2022/11/emotion/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/emotion/</guid><description>&lt;h2 id="tldr">🤷TL;DR&lt;/h2>
+&lt;ul>
+&lt;li>CSS-in-JS는 프로젝트 규모가 커질수록 관리하기 어려운 CSS의 문제를 보완한다.&lt;/li>
+&lt;li>emotion과 styled-components는 사용상의 차이가 거의 없으니 골라서 사용하자.&lt;/li>
+&lt;li>적절한 IDE Extension을 잘 활용하자.&lt;/li>
+&lt;li>CSS-in-JS가 모든 경우에 대한 정답이 아님을 인지하자.&lt;/li>
+&lt;/ul>
+&lt;h2 id="css-in-js">🎨CSS-in-JS&lt;/h2>
+&lt;p>CSS-in-JS는 HTML Element의 스타일을 자바스크립트 파일을 통해서 지정하는 방식입니다. .css 파일이 하던 일을 .js 파일에게 시키는 것이죠. CSS는 CSS이고, JS는 JS입니다. 왜 굳이 둘을 합쳐야만 하는 것일까요? 이 알 수 없는 발상을 이해하려면 우선 기존 css의 단점을 살펴보겠습니다.&lt;/p>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2022/11/emotion/emotion_01.png" alt="Untitled">&lt;/p></description></item><item><title>Redux vs Recoil</title><link>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</guid><description>&lt;h2 id="-tldr">🤷 TL;DR&lt;/h2>
+&lt;ul>
+&lt;li>Redux는 안정적이지만, 선언과 사용이 복잡하다.&lt;/li>
+&lt;li>Recoil은 사용이 매우 쉽지만 정식 버전이 없다.&lt;/li>
+&lt;li>프로젝트 규모에 따라 마음에 드는 라이브러리를 선택하자&lt;/li>
+&lt;/ul>
+&lt;h2 id="-서론">🚪 서론&lt;/h2>
+&lt;p>우리는 React를 사용할 때 보통 &lt;code>useState&lt;/code>를 통해 상태를 관리합니다. &lt;code>useState&lt;/code>는 정말 섹시하지만, 한 가지 너무 큰 단점이 있습니다. 바로 컴포넌트끼리 데이터를 주고받는 데 사용하기가 힘들다는 점입니다. 그 일을 하기 위해 등장한 것이 바로 &lt;strong>상태 관리 라이브러리&lt;/strong>입니다. 상태 관리 라이브러리의 필요성에 대해 공감하지 못하는 분들을 위해 짧은 토막글을 마련해 보았습니다.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/categories/typescript/index.html b/categories/typescript/index.html
index f26aa78..d38aa06 100644
--- a/categories/typescript/index.html
+++ b/categories/typescript/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>TypeScript | PrayinForRain.dev</title>
-<meta property="og:title" content="TypeScript | PrayinForRain.dev"><meta name=twitter:title content="TypeScript | PrayinForRain.dev"><meta itemprop=name content="TypeScript | PrayinForRain.dev"><meta name=application-name content="TypeScript | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/categories/typescript/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/categories/typescript/><link href=/categories/typescript/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/categories/typescript/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="TypeScript | PrayinForRain.dev"><meta name=twitter:title content="TypeScript | PrayinForRain.dev"><meta itemprop=name content="TypeScript | PrayinForRain.dev"><meta name=application-name content="TypeScript | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/categories/typescript/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/categories/typescript/><link href=/categories/typescript/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/categories/typescript/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">TypeScript</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/02/firebase-with-typescript/><h4 class=post-item-title>Firebase를 TypeScript에서 사용하기</h4></a></div><time class=post-item-meta datetime=2023-02-15T15:17:00+0900>2023. 2. 15.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/02/typescript-generic/><h4 class=post-item-title>Typescript Generic</h4></a></div><time class=post-item-meta datetime=2023-02-01T02:01:15+0900>2023. 2. 1.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">TypeScript</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/02/firebase-with-typescript/><h4 class=post-item-title>Firebase를 TypeScript에서 사용하기</h4></a></div><time class=post-item-meta datetime=2023-02-15T15:17:00+0900>2023. 2. 15.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/02/typescript-generic/><h4 class=post-item-title>Typescript Generic</h4></a></div><time class=post-item-meta datetime=2023-02-01T02:01:15+0900>2023. 2. 1.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/categories/typescript/index.xml b/categories/typescript/index.xml
index 2634680..40ea948 100644
--- a/categories/typescript/index.xml
+++ b/categories/typescript/index.xml
@@ -1,7 +1,32 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>TypeScript on PrayinForRain.dev</title><link>https://prayinforrain.github.io/categories/typescript/</link><description>Recent content in TypeScript on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Wed, 15 Feb 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/categories/typescript/index.xml" rel="self" type="application/rss+xml"/><item><title>Firebase를 TypeScript에서 사용하기</title><link>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</link><pubDate>Wed, 15 Feb 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</guid><description>최근에 들어서 Firebase가 필요한 일이 있었다. 대학교에서 써본 경험은 있었는데, 오랜만에 만난 Firebase는 예전같지 않았다. 가장 큰 문제는 Firebase가 제공하는 데이터베이스인 Firestore는 문서를 가져와도 타입을 제대로 정의할 수 없다는 것.
-자동완성이 안되는 타입스크립트는.. 그.. 왜..?
-물론 데이터스키마를 따로 정의하지 않기 때문에 Firebase 라이브러리가 DocumentData 타입을 개발자에게 맞춰줄 의무는 없지만, 적어도 React.useState처럼 제네릭으로 타입을 받아 어느정도 약속해 주기를 바랐다. 아니 바라는게 아니라 되어야 하는 거 아닌가..?
-붕대 감기 우선 Firebase의 쿼리 실행 결과로 오는 DocumentData는 다음과 같이 정의되어 있다.</description></item><item><title>Typescript Generic</title><link>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</link><pubDate>Wed, 01 Feb 2023 02:01:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</guid><description>타입스크립트와 리액트를 같이 사용할 때, 우리는 useState 훅을 아래와 같이 사용합니다.
-const [name, setName] = useState&amp;lt;string&amp;gt;(&amp;#34;지상렬&amp;#34;); 뭔진 몰라도, 저 꺽쇠 괄호를 사용해서 state가 다룰 상태의 타입을 지정할 수가 있습니다. 사실 적지 않아도 알아서 추론해 주지만, 아무튼 name.split('')처럼 string 타입이 제공하는 메소드나 프로퍼티도 자동완성해주고, 아주 편하게 사용할 수 있습니다. 오늘은 저 꺽쇠괄호에 대해 알아볼거에요.
-any 타입의 문제 아무튼 이번에 가져온 예제는 스택(Stack) 자료구조입니다. 그냥 대충 만들게요.
-class Stack { arr: any[] = []; push(element: any) { this.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>TypeScript on PrayinForRain.dev</title><link>https://prayinforrain.github.io/categories/typescript/</link><description>Recent content in TypeScript on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Wed, 15 Feb 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/categories/typescript/index.xml" rel="self" type="application/rss+xml"/><item><title>Firebase를 TypeScript에서 사용하기</title><link>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</link><pubDate>Wed, 15 Feb 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</guid><description>&lt;p>최근에 들어서 Firebase가 필요한 일이 있었다. 대학교에서 써본 경험은 있었는데, 오랜만에 만난 Firebase는 예전같지 않았다. 가장 큰 문제는 Firebase가 제공하는 데이터베이스인 Firestore는 문서를 가져와도 타입을 제대로 정의할 수 없다는 것.&lt;/p>
+&lt;figure>&lt;img src="https://prayinforrain.github.io/images/posts/2023/02/firebase-with-typescript/01.png"
+ alt="image">&lt;figcaption>
+ &lt;p>자동완성이 안되는 타입스크립트는.. 그.. 왜..?&lt;/p>
+ &lt;/figcaption>
+&lt;/figure>
+
+&lt;p>물론 데이터스키마를 따로 정의하지 않기 때문에 Firebase 라이브러리가 &lt;code>DocumentData&lt;/code> 타입을 개발자에게 맞춰줄 의무는 없지만, 적어도 &lt;code>React.useState&lt;/code>처럼 제네릭으로 타입을 받아 어느정도 약속해 주기를 바랐다. 아니 바라는게 아니라 되어야 하는 거 아닌가..?&lt;/p>
+&lt;h2 id="붕대-감기">붕대 감기&lt;/h2>
+&lt;p>우선 Firebase의 쿼리 실행 결과로 오는 &lt;code>DocumentData&lt;/code>는 다음과 같이 정의되어 있다.&lt;/p></description></item><item><title>Typescript Generic</title><link>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</link><pubDate>Wed, 01 Feb 2023 02:01:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</guid><description>&lt;p>타입스크립트와 리액트를 같이 사용할 때, 우리는 &lt;code>useState&lt;/code> 훅을 아래와 같이 사용합니다.&lt;/p>
+&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-typescript" data-lang="typescript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="nx">name&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">setName&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">useState&lt;/span>&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">string&lt;/span>&lt;span class="p">&amp;gt;(&lt;/span>&lt;span class="s2">&amp;#34;지상렬&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>뭔진 몰라도, 저 꺽쇠 괄호를 사용해서 state가 다룰 상태의 타입을 지정할 수가 있습니다. 사실 적지 않아도 알아서 추론해 주지만, 아무튼 &lt;code>name.split('')&lt;/code>처럼 string 타입이 제공하는 메소드나 프로퍼티도 자동완성해주고, 아주 편하게 사용할 수 있습니다. 오늘은 저 꺽쇠괄호에 대해 알아볼거에요.&lt;/p>
+&lt;h2 id="any-타입의-문제">any 타입의 문제&lt;/h2>
+&lt;p>아무튼 이번에 가져온 예제는 스택(Stack) 자료구조입니다. 그냥 대충 만들게요.&lt;/p>
+&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-typescript" data-lang="typescript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">class&lt;/span> &lt;span class="nx">Stack&lt;/span> &lt;span class="p">{&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">arr&lt;/span>: &lt;span class="kt">any&lt;/span>&lt;span class="p">[]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[];&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">element&lt;/span>: &lt;span class="kt">any&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">arr&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">element&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">arr&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">length&lt;/span>&lt;span class="p">;&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">pop() {&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">arr&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">pop&lt;/span>&lt;span class="p">();&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
+&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-typescript" data-lang="typescript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">stringStack&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="k">new&lt;/span> &lt;span class="nx">Stack&lt;/span>&lt;span class="p">();&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">stringStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;크와앙&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">console&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">log&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">stringStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">pop&lt;/span>&lt;span class="p">().&lt;/span>&lt;span class="nx">slice&lt;/span>&lt;span class="p">());&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">numberStack&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="k">new&lt;/span> &lt;span class="nx">Stack&lt;/span>&lt;span class="p">();&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">numberStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">console&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">log&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">numberStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">pop&lt;/span>&lt;span class="p">().&lt;/span>&lt;span class="nx">slice&lt;/span>&lt;span class="p">());&lt;/span> &lt;span class="c1">// TypeError: numberStack.pop(...).slice is not a function
+&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>당연히 &lt;code>numberStack&lt;/code> 부분에서 에러가 나지만, 이 문제를 &lt;strong>코드를 실행하기 전까진 알 수 없습니다&lt;/strong>. &lt;code>Stack&lt;/code>이 관리하는 것은 &lt;code>any&lt;/code> 타입의 배열이니까요.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/categories/web/index.html b/categories/web/index.html
index 91f31eb..ca1e8a7 100644
--- a/categories/web/index.html
+++ b/categories/web/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Web | PrayinForRain.dev</title>
-<meta property="og:title" content="Web | PrayinForRain.dev"><meta name=twitter:title content="Web | PrayinForRain.dev"><meta itemprop=name content="Web | PrayinForRain.dev"><meta name=application-name content="Web | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/categories/web/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/categories/web/><link href=/categories/web/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/categories/web/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Web | PrayinForRain.dev"><meta name=twitter:title content="Web | PrayinForRain.dev"><meta itemprop=name content="Web | PrayinForRain.dev"><meta name=application-name content="Web | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/categories/web/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/categories/web/><link href=/categories/web/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/categories/web/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Web</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/11/cell-refactoring/><h4 class=post-item-title>스프레드시트를 최적화 하자</h4><div class=post-item-summary>React로 성능 되찾기</div></a></div><time class=post-item-meta datetime=2023-11-07T16:43:32+0900>2023. 11. 7.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/06/cds-retrospect/><h4 class=post-item-title>차가운 디자인 시스템(CDS) 회고</h4><div class=post-item-summary>우리 v1.2 합시다</div></a></div><time class=post-item-meta datetime=2023-06-18T16:43:32+0900>2023. 6. 18.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/02/typescript-generic/><h4 class=post-item-title>Typescript Generic</h4></a></div><time class=post-item-meta datetime=2023-02-01T02:01:15+0900>2023. 2. 1.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/tree-shaking/><h4 class=post-item-title>Tree Shaking</h4></a></div><time class=post-item-meta datetime=2023-01-25T17:17:15+0900>2023. 1. 25.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/ecmascript/><h4 class=post-item-title>ECMAScript</h4></a></div><time class=post-item-meta datetime=2023-01-25T16:35:01+0900>2023. 1. 25.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/browser-rendering-performance/><h4 class=post-item-title>브라우저 렌더링과 성능</h4></a></div><time class=post-item-meta datetime=2023-01-16T16:38:15+0900>2023. 1. 16.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/css-display/><h4 class=post-item-title>CSS의 display 속성</h4></a></div><time class=post-item-meta datetime=2023-01-16T16:38:15+0900>2023. 1. 16.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/size-units-in-css/><h4 class=post-item-title>CSS의 크기 단위</h4></a></div><time class=post-item-meta datetime=2023-01-13T23:39:15+0900>2023. 1. 13.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Web</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2024</h2><article class=post-item><div class=post-item-content><a href=/posts/2024/07/site-optimization/><h4 class=post-item-title>Next.js 성능 개선기</h4><div class=post-item-summary>최대한 가벼운 사이트를 만들어보자</div></a></div><time class=post-item-meta datetime=2024-07-18T12:34:32+0900>2024. 7. 18.</time></article><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/11/cell-refactoring/><h4 class=post-item-title>스프레드시트를 최적화 하자</h4><div class=post-item-summary>React로 성능 되찾기</div></a></div><time class=post-item-meta datetime=2023-11-07T16:43:32+0900>2023. 11. 7.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/06/cds-retrospect/><h4 class=post-item-title>차가운 디자인 시스템(CDS) 회고</h4><div class=post-item-summary>우리 v1.2 합시다</div></a></div><time class=post-item-meta datetime=2023-06-18T16:43:32+0900>2023. 6. 18.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/02/typescript-generic/><h4 class=post-item-title>Typescript Generic</h4></a></div><time class=post-item-meta datetime=2023-02-01T02:01:15+0900>2023. 2. 1.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/tree-shaking/><h4 class=post-item-title>Tree Shaking</h4></a></div><time class=post-item-meta datetime=2023-01-25T17:17:15+0900>2023. 1. 25.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/ecmascript/><h4 class=post-item-title>ECMAScript</h4></a></div><time class=post-item-meta datetime=2023-01-25T16:35:01+0900>2023. 1. 25.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/browser-rendering-performance/><h4 class=post-item-title>브라우저 렌더링과 성능</h4></a></div><time class=post-item-meta datetime=2023-01-16T16:38:15+0900>2023. 1. 16.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/css-display/><h4 class=post-item-title>CSS의 display 속성</h4></a></div><time class=post-item-meta datetime=2023-01-16T16:38:15+0900>2023. 1. 16.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/size-units-in-css/><h4 class=post-item-title>CSS의 크기 단위</h4></a></div><time class=post-item-meta datetime=2023-01-13T23:39:15+0900>2023. 1. 13.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/categories/web/index.xml b/categories/web/index.xml
index 8f3ab48..6120b62 100644
--- a/categories/web/index.xml
+++ b/categories/web/index.xml
@@ -1,10 +1,69 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Web on PrayinForRain.dev</title><link>https://prayinforrain.github.io/categories/web/</link><description>Recent content in Web on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Mon, 15 Apr 2024 16:43:32 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/categories/web/index.xml" rel="self" type="application/rss+xml"/><item><title>스프레드시트를 최적화 하자</title><link>https://prayinforrain.github.io/posts/2023/11/cell-refactoring/</link><pubDate>Tue, 07 Nov 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/11/cell-refactoring/</guid><description>React로 성능 되찾기</description></item><item><title>차가운 디자인 시스템(CDS) 회고</title><link>https://prayinforrain.github.io/posts/2023/06/cds-retrospect/</link><pubDate>Sun, 18 Jun 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/06/cds-retrospect/</guid><description>우리 v1.2 합시다</description></item><item><title>Typescript Generic</title><link>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</link><pubDate>Wed, 01 Feb 2023 02:01:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</guid><description>타입스크립트와 리액트를 같이 사용할 때, 우리는 useState 훅을 아래와 같이 사용합니다.
-const [name, setName] = useState&amp;lt;string&amp;gt;(&amp;#34;지상렬&amp;#34;); 뭔진 몰라도, 저 꺽쇠 괄호를 사용해서 state가 다룰 상태의 타입을 지정할 수가 있습니다. 사실 적지 않아도 알아서 추론해 주지만, 아무튼 name.split('')처럼 string 타입이 제공하는 메소드나 프로퍼티도 자동완성해주고, 아주 편하게 사용할 수 있습니다. 오늘은 저 꺽쇠괄호에 대해 알아볼거에요.
-any 타입의 문제 아무튼 이번에 가져온 예제는 스택(Stack) 자료구조입니다. 그냥 대충 만들게요.
-class Stack { arr: any[] = []; push(element: any) { this.</description></item><item><title>Tree Shaking</title><link>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</link><pubDate>Wed, 25 Jan 2023 17:17:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</guid><description>용량을 절약하는 방법 웹페이지의 성능을 이야기하는 가장 직관적인 지표는 아마 페이지에 사용되는 파일의 크기일 것입니다. 파일의 크기가 무겁다면 파일을 다운받는 데 시간이 오래 걸리고, 다운로드한 파일을 읽고 렌더링 하는데도 시간이 오래 걸릴 것입니다. 따라서 번들 파일의 용량을 다이어트 하는 것은 사이트 성능에 꽤 중요한 역할을 합니다.
-위 사진은 팀 프로젝트를 하던 중 @next/bundle-analyzer 패키지를 이용해 번들 맵을 그렸던 것입니다. 클수록 번들 용량이 크다는 뜻이니 커다란 청크 위주로 최적화를 시도하면 될 것 같습니다.</description></item><item><title>ECMAScript</title><link>https://prayinforrain.github.io/posts/2023/01/ecmascript/</link><pubDate>Wed, 25 Jan 2023 16:35:01 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/ecmascript/</guid><description>Ecma international Ecma International is an industry association dedicated to the standardization of information and communication systems Emca International은 정보통신 시스템의 표준화를 위한 국제 표준화 기구입니다. &amp;gt; https://www.ecma-international.org/
-Ecma International은 Ecma 사이트에서 소개하듯, 정보통신 시스템의 표준을 만들기 위한 국제 기구입니다. C#, JSON, .u3d 확장자 등 여러 방면에서의 표준안을 제시하였으며, 개발자를 위한 IEEE같은 존재로 이해하면 될 것 같습니다.(제 생각)
-유럽에서 컴퓨터 시스템을 표준화하기 위해 설립되어서 ECMA(European Computer Manufacturers Association)라는 이름을 가지고 있으나 유럽국가 뿐 아니라 전세계의 표준으로 활용되기 위해 Ecma International로 이름을 변경하였습니다.</description></item><item><title>CSS의 display 속성</title><link>https://prayinforrain.github.io/posts/2023/01/css-display/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/css-display/</guid><description>CSS의 display 속성은 HTML element가 block인지, inline인지, 그리고 자식 element들을 어떤 식으로 표시할지를 정하는 속성입니다. 다시 말해 요소 자체가 형제 요소와 배치되는 방법과, 자식 요소를 배치하는 방법을 함께 정의하기 때문에 ‘안쪽’과 ‘바깥쪽’으로 속성을 나눌 수 있습니다.
-display: 바깥쪽 block 한 줄에는 한 요소만 올 수 있게 하는 속성입니다. inline 요소가 한 줄에 여러 개 표시 될 수 있음을 의미합니다. 만약 inline이 적용된 요소의 전후에 inline 요소를 표시할 공간이 있다면 한 줄에 표시됩니다.</description></item><item><title>브라우저 렌더링과 성능</title><link>https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/</guid><description>브라우저 렌더링 성능 최적화를 위해, 브라우저가 어떻게 HTML 문서를 화면에 그리는지 과정에 대해 이해할 필요가 있습니다. 브라우저 렌더링은 아래 사진과 같은 흐름으로 이루어집니다.
-서버로부터 HTML, CSS, JavaScript 파일을 받아와 HTML → DOM, CSS → CSSOM으로 변환하고 Render Tree를 구성합니다. Render Tree의 노드들에 대한 위치와 크기를 계산합니다. Render Tree의 루트부터 시작하여 모든 노드에 대해 계산을 수행합니다. (Layout) 계산된 결과물을 기반으로 화면에 실제 노드들을 그립니다. (Paint) 사용자의 상호작용이나 스크립트를 통한 제어 등으로 HTML 요소의 크기나 위치의 변경이 일어나면 Reflow라는 과정을 수행합니다.</description></item><item><title>CSS의 크기 단위</title><link>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</link><pubDate>Fri, 13 Jan 2023 23:39:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</guid><description>CSS의 크기 단위 CSS에는 다양한 단위가 존재합니다. 우리가 잘 아는 px와 %부터, em, rem, pt, vh, vw 등등 다양한 단위가 존재하는데요, 이 크기 단위들을 언제 어떻게 사용하면 좋을지에 대해 정리해 보았습니다.
-상대 단위와 절대 단위 px과 %를 먼저 비교해 보면, px은 우리가 알고 있는 컴퓨터 화면의 1픽셀을 의미합니다. 이는 어느 화면에서나 같은 크기를 나타내므로 절대 단위에 해당합니다. 반면 %는 보통 부모 element의 크기를 상속받아 그의 정해진 비율만큼을 나타냅니다. 즉 width: 10px;인 부모를 가진 element에 width: 50%;를 주면 5px이 되겠죠.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Web on PrayinForRain.dev</title><link>https://prayinforrain.github.io/categories/web/</link><description>Recent content in Web on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Thu, 18 Jul 2024 12:34:32 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/categories/web/index.xml" rel="self" type="application/rss+xml"/><item><title>Next.js 성능 개선기</title><link>https://prayinforrain.github.io/posts/2024/07/site-optimization/</link><pubDate>Thu, 18 Jul 2024 12:34:32 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2024/07/site-optimization/</guid><description>최대한 가벼운 사이트를 만들어보자</description></item><item><title>스프레드시트를 최적화 하자</title><link>https://prayinforrain.github.io/posts/2023/11/cell-refactoring/</link><pubDate>Tue, 07 Nov 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/11/cell-refactoring/</guid><description>React로 성능 되찾기</description></item><item><title>차가운 디자인 시스템(CDS) 회고</title><link>https://prayinforrain.github.io/posts/2023/06/cds-retrospect/</link><pubDate>Sun, 18 Jun 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/06/cds-retrospect/</guid><description>우리 v1.2 합시다</description></item><item><title>Typescript Generic</title><link>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</link><pubDate>Wed, 01 Feb 2023 02:01:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</guid><description>&lt;p>타입스크립트와 리액트를 같이 사용할 때, 우리는 &lt;code>useState&lt;/code> 훅을 아래와 같이 사용합니다.&lt;/p>
+&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-typescript" data-lang="typescript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="nx">name&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">setName&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">useState&lt;/span>&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">string&lt;/span>&lt;span class="p">&amp;gt;(&lt;/span>&lt;span class="s2">&amp;#34;지상렬&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>뭔진 몰라도, 저 꺽쇠 괄호를 사용해서 state가 다룰 상태의 타입을 지정할 수가 있습니다. 사실 적지 않아도 알아서 추론해 주지만, 아무튼 &lt;code>name.split('')&lt;/code>처럼 string 타입이 제공하는 메소드나 프로퍼티도 자동완성해주고, 아주 편하게 사용할 수 있습니다. 오늘은 저 꺽쇠괄호에 대해 알아볼거에요.&lt;/p>
+&lt;h2 id="any-타입의-문제">any 타입의 문제&lt;/h2>
+&lt;p>아무튼 이번에 가져온 예제는 스택(Stack) 자료구조입니다. 그냥 대충 만들게요.&lt;/p>
+&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-typescript" data-lang="typescript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">class&lt;/span> &lt;span class="nx">Stack&lt;/span> &lt;span class="p">{&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">arr&lt;/span>: &lt;span class="kt">any&lt;/span>&lt;span class="p">[]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[];&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">element&lt;/span>: &lt;span class="kt">any&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">arr&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">element&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">arr&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">length&lt;/span>&lt;span class="p">;&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">pop() {&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">arr&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">pop&lt;/span>&lt;span class="p">();&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
+&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-typescript" data-lang="typescript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">stringStack&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="k">new&lt;/span> &lt;span class="nx">Stack&lt;/span>&lt;span class="p">();&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">stringStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;크와앙&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">console&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">log&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">stringStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">pop&lt;/span>&lt;span class="p">().&lt;/span>&lt;span class="nx">slice&lt;/span>&lt;span class="p">());&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">numberStack&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="k">new&lt;/span> &lt;span class="nx">Stack&lt;/span>&lt;span class="p">();&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">numberStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">console&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">log&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">numberStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">pop&lt;/span>&lt;span class="p">().&lt;/span>&lt;span class="nx">slice&lt;/span>&lt;span class="p">());&lt;/span> &lt;span class="c1">// TypeError: numberStack.pop(...).slice is not a function
+&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>당연히 &lt;code>numberStack&lt;/code> 부분에서 에러가 나지만, 이 문제를 &lt;strong>코드를 실행하기 전까진 알 수 없습니다&lt;/strong>. &lt;code>Stack&lt;/code>이 관리하는 것은 &lt;code>any&lt;/code> 타입의 배열이니까요.&lt;/p></description></item><item><title>Tree Shaking</title><link>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</link><pubDate>Wed, 25 Jan 2023 17:17:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</guid><description>&lt;h2 id="용량을-절약하는-방법">용량을 절약하는 방법&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/tree-shaking/01.png" alt="bundle_map">&lt;/p>
+&lt;p>웹페이지의 성능을 이야기하는 가장 직관적인 지표는 아마 페이지에 사용되는 &lt;strong>파일의 크기&lt;/strong>일 것입니다. 파일의 크기가 무겁다면 파일을 다운받는 데 시간이 오래 걸리고, 다운로드한 파일을 읽고 렌더링 하는데도 시간이 오래 걸릴 것입니다. 따라서 번들 파일의 용량을 다이어트 하는 것은 사이트 성능에 꽤 중요한 역할을 합니다.&lt;/p>
+&lt;p>위 사진은 팀 프로젝트를 하던 중 &lt;code>@next/bundle-analyzer&lt;/code> 패키지를 이용해 번들 맵을 그렸던 것입니다. 클수록 번들 용량이 크다는 뜻이니 커다란 청크 위주로 최적화를 시도하면 될 것 같습니다. 그런데 어떻게 용량을 줄일 수 있을까요? gzip을 통해 파일을 압축해서 보내는 방법도 있겠지만, 코드적으로 최적화할 수 있는 방법은 &lt;code>Tree-shaking&lt;/code>입니다.&lt;/p></description></item><item><title>ECMAScript</title><link>https://prayinforrain.github.io/posts/2023/01/ecmascript/</link><pubDate>Wed, 25 Jan 2023 16:35:01 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/ecmascript/</guid><description>&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/ecmascript/01.png" alt="untitled">&lt;/p>
+&lt;h2 id="ecma-international">Ecma international&lt;/h2>
+&lt;blockquote>
+&lt;p>&lt;strong>Ecma International&lt;/strong> is an industry association dedicated to the standardization of information and communication systems
+&lt;em>Emca International은 정보통신 시스템의 표준화를 위한 국제 표준화 기구입니다.&lt;/em> &amp;gt; &lt;a href="https://www.ecma-international.org/">https://www.ecma-international.org/&lt;/a>&lt;/p>
+&lt;/blockquote>
+&lt;p>Ecma International은 Ecma 사이트에서 소개하듯, 정보통신 시스템의 표준을 만들기 위한 국제 기구입니다. C#, JSON, .u3d 확장자 등 여러 방면에서의 표준안을 제시하였으며, 개발자를 위한 IEEE같은 존재로 이해하면 될 것 같습니다.(제 생각)&lt;/p>
+&lt;p>유럽에서 컴퓨터 시스템을 표준화하기 위해 설립되어서 &lt;strong>ECMA&lt;/strong>(&lt;em>European Computer Manufacturers Association&lt;/em>)라는 이름을 가지고 있으나 유럽국가 뿐 아니라 전세계의 표준으로 활용되기 위해 &lt;strong>Ecma International&lt;/strong>로 이름을 변경하였습니다. &lt;strong>ECMA&lt;/strong> 자체는 두문자어이지만 지금의 이름은 하나의 고유명사로 사용되는 셈이죠. 따라서 &lt;strong>Ecma&lt;/strong>로 표기하는 것이 맞습니다.&lt;/p></description></item><item><title>CSS의 display 속성</title><link>https://prayinforrain.github.io/posts/2023/01/css-display/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/css-display/</guid><description>&lt;p>CSS의 &lt;code>display&lt;/code> 속성은 HTML element가 block인지, inline인지, 그리고 자식 element들을 어떤 식으로 표시할지를 정하는 속성입니다. 다시 말해 요소 자체가 형제 요소와 배치되는 방법과, 자식 요소를 배치하는 방법을 함께 정의하기 때문에 ‘&lt;strong>안쪽&lt;/strong>’과 ‘&lt;strong>바깥쪽&lt;/strong>’으로 속성을 나눌 수 있습니다.&lt;/p>
+&lt;h2 id="display">display:&lt;/h2>
+&lt;h3 id="바깥쪽">바깥쪽&lt;/h3>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/css-display/01.png" alt="Untitled">&lt;/p>
+&lt;ul>
+&lt;li>&lt;code>block&lt;/code>
+&lt;ul>
+&lt;li>한 줄에는 한 요소만 올 수 있게 하는 속성입니다.&lt;/li>
+&lt;/ul>
+&lt;/li>
+&lt;li>&lt;code>inline&lt;/code>
+&lt;ul>
+&lt;li>요소가 한 줄에 여러 개 표시 될 수 있음을 의미합니다. 만약 &lt;code>inline&lt;/code>이 적용된 요소의 전후에 &lt;code>inline&lt;/code> 요소를 표시할 공간이 있다면 한 줄에 표시됩니다.&lt;/li>
+&lt;/ul>
+&lt;/li>
+&lt;/ul>
+&lt;p>사진의 div들은 각각 &lt;code>inline&lt;/code>, &lt;code>block&lt;/code> 속성을 지정하였습니다. 보이는 것과 같이 &lt;code>block&lt;/code> 속성의 요소는 한 줄에 하나만 존재할 수 있으며, &lt;code>inline&lt;/code> 속성은 충분한 공간이 있으면 한 줄에 표시됩니다. &lt;code>span&lt;/code>과 &lt;code>p&lt;/code>태그의 차이와 비슷합니다.&lt;/p></description></item><item><title>브라우저 렌더링과 성능</title><link>https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/</guid><description>&lt;h2 id="브라우저-렌더링">브라우저 렌더링&lt;/h2>
+&lt;p>성능 최적화를 위해, 브라우저가 어떻게 HTML 문서를 화면에 그리는지 과정에 대해 이해할 필요가 있습니다. 브라우저 렌더링은 아래 사진과 같은 흐름으로 이루어집니다.&lt;/p>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/browser-rendering-performance/01.png" alt="Untitled">&lt;/p>
+&lt;ul>
+&lt;li>서버로부터 HTML, CSS, JavaScript 파일을 받아와 HTML → DOM, CSS → CSSOM으로 변환하고 Render Tree를 구성합니다.&lt;/li>
+&lt;li>Render Tree의 노드들에 대한 위치와 크기를 계산합니다. Render Tree의 루트부터 시작하여 모든 노드에 대해 계산을 수행합니다. (Layout)&lt;/li>
+&lt;li>계산된 결과물을 기반으로 화면에 실제 노드들을 그립니다. (Paint)&lt;/li>
+&lt;li>사용자의 상호작용이나 스크립트를 통한 제어 등으로 HTML 요소의 크기나 위치의 변경이 일어나면 &lt;code>Reflow&lt;/code>라는 과정을 수행합니다.
+&lt;ul>
+&lt;li>Reflow는 Render Tree 구성부터 &lt;strong>모든 작업을 다시 수행&lt;/strong>합니다.&lt;/li>
+&lt;li>만약 레이아웃 자체에는 변화가 없고, 색상이나 visibility 등의 변경만 있는 경우에는 Paint 과정만을 다시 수행합니다. (Repaint)&lt;/li>
+&lt;li>따라서 비용이 큰 &lt;strong>Reflow의 발생을 최대한 줄이는 것이 중요&lt;/strong>합니다.&lt;/li>
+&lt;/ul>
+&lt;/li>
+&lt;/ul>
+&lt;iframe width="560" height="315" src="https://www.youtube.com/embed/TZz9VHjJzMk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>&lt;/iframe>
+&lt;p>이거 되게 좋은 내용인 것 같아요 CSS의 &lt;code>will-change&lt;/code>를 통헤 불필요한 GPU 점유를 줄이는 방법도 소개하고 있네요!&lt;/p></description></item><item><title>CSS의 크기 단위</title><link>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</link><pubDate>Fri, 13 Jan 2023 23:39:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</guid><description>&lt;h2 id="css의-크기-단위">CSS의 크기 단위&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/size-units-in-css/01.png" alt="Untitled">&lt;/p>
+&lt;p>CSS에는 다양한 단위가 존재합니다. 우리가 잘 아는 &lt;code>px&lt;/code>와 &lt;code>%&lt;/code>부터, &lt;code>em&lt;/code>, &lt;code>rem&lt;/code>, &lt;code>pt&lt;/code>, &lt;code>vh&lt;/code>, &lt;code>vw&lt;/code> 등등 다양한 단위가 존재하는데요, 이 크기 단위들을 언제 어떻게 사용하면 좋을지에 대해 정리해 보았습니다.&lt;/p>
+&lt;h2 id="상대-단위와-절대-단위">상대 단위와 절대 단위&lt;/h2>
+&lt;p>&lt;code>px&lt;/code>과 &lt;code>%&lt;/code>를 먼저 비교해 보면, &lt;code>px&lt;/code>은 우리가 알고 있는 컴퓨터 화면의 1픽셀을 의미합니다. 이는 어느 화면에서나 같은 크기를 나타내므로 &lt;strong>절대 단위&lt;/strong>에 해당합니다. 반면 &lt;code>%&lt;/code>는 보통 부모 element의 크기를 상속받아 그의 정해진 비율만큼을 나타냅니다. 즉 &lt;code>width: 10px;&lt;/code>인 부모를 가진 element에 &lt;code>width: 50%;&lt;/code>를 주면 5px이 되겠죠. 이렇게 상황에 따라서 다른 값을 갖는 단위를 &lt;strong>상대 단위&lt;/strong>라고 부릅니다.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/images/posts/2024/07/site-optimization/01.PNG b/images/posts/2024/07/site-optimization/01.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..98f54eb8c592a5baa87044b28e9d90f258614c4f
GIT binary patch
literal 40353
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%0Ag!GZ);?zTQWmq=_kJTh3%H&S$gMJNfVE
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

literal 0
HcmV?d00001

diff --git a/images/posts/2024/07/site-optimization/02.png b/images/posts/2024/07/site-optimization/02.png
new file mode 100644
index 0000000000000000000000000000000000000000..8002bf6360158c96976c3fdc6f4b34687414c902
GIT binary patch
literal 234364
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
DH`eRU

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 29042d5..b83d474 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>PrayinForRain.dev | PrayinForRain.dev</title>
-<meta property="og:title" content="PrayinForRain.dev | PrayinForRain.dev"><meta name=twitter:title content="PrayinForRain.dev | PrayinForRain.dev"><meta itemprop=name content="PrayinForRain.dev | PrayinForRain.dev"><meta name=application-name content="PrayinForRain.dev | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/><link href=/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="PrayinForRain.dev | PrayinForRain.dev"><meta name=twitter:title content="PrayinForRain.dev | PrayinForRain.dev"><meta itemprop=name content="PrayinForRain.dev | PrayinForRain.dev"><meta name=application-name content="PrayinForRain.dev | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/><link href=/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class=wrapper><div class=author><img class=author-avatar src=/avatar_hu8a16f9f51dd7b9a0a5f04c391447c48e_10088_100x100_fill_q75_h2_box_smart1_3.webp alt=PrayinforRain width=420 height=420><h2 class=author-name>PrayinforRain</h2><p class=author-bio>Frontend Developer</p></div><main aria-label=Content><h3 class=posts-item-note aria-label="Recent Posts">Recent Posts</h3><article class=post-item><div class=post-item-content><a href=/posts/2023/11/cell-refactoring/><h4 class=post-item-title>스프레드시트를 최적화 하자</h4><div class=post-item-summary>React로 성능 되찾기</div></a></div><time class=post-item-meta datetime=2023-11-07T16:43:32+0900>2023. 11. 7.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/06/cds-retrospect/><h4 class=post-item-title>차가운 디자인 시스템(CDS) 회고</h4><div class=post-item-summary>우리 v1.2 합시다</div></a></div><time class=post-item-meta datetime=2023-06-18T16:43:32+0900>2023. 6. 18.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/05/exploring-yarn-berry/><h4 class=post-item-title>얀 베리 탐험하기</h4></a></div><time class=post-item-meta datetime=2023-05-30T02:27:49+0900>2023. 5. 30.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/04/nextjs-storybook-with-pnp/><h4 class=post-item-title>Next.js Storybook에 Yarn PnP 적용하기</h4></a></div><time class=post-item-meta datetime=2023-04-27T15:32:50+0900>2023. 4. 27.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/04/numble-talk/><h4 class=post-item-title>넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고</h4></a></div><time class=post-item-meta datetime=2023-04-23T04:05:58+0900>2023. 4. 23.</time></article><p><a href=https://prayinforrain.github.io/posts/>See all posts</a></p></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class=wrapper><div class=author><img class=author-avatar src=/avatar_hu16273194194817824927.webp alt=PrayinforRain width=420 height=420><h2 class=author-name>PrayinforRain</h2><p class=author-bio>Frontend Developer</p></div><main aria-label=Content><h3 class=posts-item-note aria-label="Recent Posts">Recent Posts</h3><article class=post-item><div class=post-item-content><a href=/posts/2024/07/site-optimization/><h4 class=post-item-title>Next.js 성능 개선기</h4><div class=post-item-summary>최대한 가벼운 사이트를 만들어보자</div></a></div><time class=post-item-meta datetime=2024-07-18T12:34:32+0900>2024. 7. 18.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/11/cell-refactoring/><h4 class=post-item-title>스프레드시트를 최적화 하자</h4><div class=post-item-summary>React로 성능 되찾기</div></a></div><time class=post-item-meta datetime=2023-11-07T16:43:32+0900>2023. 11. 7.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/06/cds-retrospect/><h4 class=post-item-title>차가운 디자인 시스템(CDS) 회고</h4><div class=post-item-summary>우리 v1.2 합시다</div></a></div><time class=post-item-meta datetime=2023-06-18T16:43:32+0900>2023. 6. 18.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/05/exploring-yarn-berry/><h4 class=post-item-title>얀 베리 탐험하기</h4></a></div><time class=post-item-meta datetime=2023-05-30T02:27:49+0900>2023. 5. 30.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/04/nextjs-storybook-with-pnp/><h4 class=post-item-title>Next.js Storybook에 Yarn PnP 적용하기</h4></a></div><time class=post-item-meta datetime=2023-04-27T15:32:50+0900>2023. 4. 27.</time></article><p><a href=https://prayinforrain.github.io/posts/>See all posts</a></p></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/index.xml b/index.xml
index f06c9ff..a42b35d 100644
--- a/index.xml
+++ b/index.xml
@@ -1,41 +1,180 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>PrayinForRain.dev</title><link>https://prayinforrain.github.io/</link><description>Recent content on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Mon, 15 Apr 2024 16:43:32 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/index.xml" rel="self" type="application/rss+xml"/><item><title>스프레드시트를 최적화 하자</title><link>https://prayinforrain.github.io/posts/2023/11/cell-refactoring/</link><pubDate>Tue, 07 Nov 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/11/cell-refactoring/</guid><description>React로 성능 되찾기</description></item><item><title>차가운 디자인 시스템(CDS) 회고</title><link>https://prayinforrain.github.io/posts/2023/06/cds-retrospect/</link><pubDate>Sun, 18 Jun 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/06/cds-retrospect/</guid><description>우리 v1.2 합시다</description></item><item><title>얀 베리 탐험하기</title><link>https://prayinforrain.github.io/posts/2023/05/exploring-yarn-berry/</link><pubDate>Tue, 30 May 2023 02:27:49 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/05/exploring-yarn-berry/</guid><description>내 레포의 위험한 녀석 최근 차가운 디자인 시스템(CDS)의 패키지 매니저를 Yarn berry로 마이그레이션 하는 작업을 하고 있다. 이유는 후술할 node_modules 자체의 단점도 있고, 내 데스크탑이 HDD를 사용하기 때문에 node_modules의 수십만 개의 파일들을 다루는 것이 너무 느려서 강력 추천했다.
-하지만 사실 나는 PnP가 어떻게 패키지들을 resolve하는지 전혀 모른다. 그저 어떻게 해야 오류 없이 쓸 수 있는지만 열심히 고민했는데, 팀원들에게 설명할 때 마다 막연히 얀베리가 잘못했겠죠~ 하는 스스로에게 자괴감을 느껴 이 기회에 한 번 Yarn PnP를 똑바로 마주해 보기로 했다.</description></item><item><title>Next.js Storybook에 Yarn PnP 적용하기</title><link>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</link><pubDate>Thu, 27 Apr 2023 15:32:50 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</guid><description>Storybook을 쓰려고 했는데 최근 Storybook을 사용할 일이 무척 많았다. 언젠가는 포스팅을 해야 할 CDS 프로젝트부터 넘블 챌린지도 있었고&amp;hellip; 처음엔 너무 낯설었지만 공통된 컴포넌트들을 미리 설계해 두고 재사용하는 것이 좀 더 깔끔한 설계가 되는 것 같아 매력을 느꼈다.
-그런데 문제는 내 작업 환경에 있었다. 꽤 연식이 된 윈도우 데스크탑에 수십가지 개발 환경을 섞어 놓고, 요새는 게임에도 못 쓰는 처참한 성능의 HDD에 레포를 두고 쓰니 종속성 패키지 설치도 커피 한 잔 타와야 하는 시간이 걸리니 Yarn Berry의 사용이 반필수가 되어버렸다.</description></item><item><title>넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고</title><link>https://prayinforrain.github.io/posts/2023/04/numble-talk/</link><pubDate>Sun, 23 Apr 2023 04:05:58 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/04/numble-talk/</guid><description>시작하게 된 계기 3월에 정말 많은 일들이 있었다. 아직 뭔가 성과라고 내세울 결과물이 없긴 하지만 그래도 무의미하진 않았다(?)고 주장할 수 있는 그런 시간이었다. 점점 일이 정리가 되고 여유가 생기면서 번아웃이 온 사람처럼 푹 늘어지는 느낌이 있었는데, 그 와중에 누가 넘블을 소개해 주셨다.
-대충.. 프로젝트 주제와 요구사항을 주고 구현을 해 보는? 프로세스의 활동으로 이해했다. 기간이 짧아 확 몰입하기 좋겠다는 생각을 해서 한 번 맛만 보기로 했다. OpenAI API를 활용해 보는 프로젝트라는 점이 관심을 끌기도 했다.</description></item><item><title>백준을 위한 node.js</title><link>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</guid><description>JS라도 백준이 하고싶어 공채 시즌이다. 개인적으로 코딩 테스트를 정말정말 자신 없어했는데, 더 이상 미룰 수 없어 야금야금 공부를 시작했다.
-불편한 점이 있다면, 백준은 자바스크립트에 아주 불친절하다는 점이다. 내가 학부생 때 잘 하지도 못하는 C++로 꾸역꾸역 문제를 풀었던 이유 중 하나이기도 했다. 그 때는 아는 PS 플랫폼이 백준 뿐이니, 자바스크립트의 어쩔 수 없는 한계인가보다 했다.
-그런데 프로그래머스를 맛 보고 나니 머리가 커져서 자바스크립트가 백준에게 부당한 차별을 받는(?) 기분이 들었다. 진짜로 화가 난 건 아니지만 그래도 화가 났다.</description></item><item><title>VSCode의 NPM Scripts가 작동하지 않는 사람</title><link>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</link><pubDate>Wed, 29 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</guid><description>늦잠자고 갓생사는 척 하는 삶이란&amp;hellip;
-맥북과 친해지기 시작한지 2달이 되었다. 윈도우 노트북을 사용하다가 갈아 탄 이유는, 맥에서 되는 것이 윈도우에서 되고, 윈도우에서 되는 것은 맥에서 안되는 문제를 너무 많이 겪었기 때문이다. 주변의 맥 유저에게 계속해서 테스트를 요청하기도 눈치보이고, 언젠가는 마주해야겠다고 생각했던 녀석이기 때문에 과감한 투자를 했다. 그 과정에서 내가 윈도우에 지나치게 강결합(?) 되어 있다는 것을 깨달았고, 지금은 맥도 윈도우도 못 쓰는 그 어딘가의 지점에 있다.
-그리고 최근에는 프로젝트를 하고 있다.</description></item><item><title>Firebase를 TypeScript에서 사용하기</title><link>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</link><pubDate>Wed, 15 Feb 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</guid><description>최근에 들어서 Firebase가 필요한 일이 있었다. 대학교에서 써본 경험은 있었는데, 오랜만에 만난 Firebase는 예전같지 않았다. 가장 큰 문제는 Firebase가 제공하는 데이터베이스인 Firestore는 문서를 가져와도 타입을 제대로 정의할 수 없다는 것.
-자동완성이 안되는 타입스크립트는.. 그.. 왜..?
-물론 데이터스키마를 따로 정의하지 않기 때문에 Firebase 라이브러리가 DocumentData 타입을 개발자에게 맞춰줄 의무는 없지만, 적어도 React.useState처럼 제네릭으로 타입을 받아 어느정도 약속해 주기를 바랐다. 아니 바라는게 아니라 되어야 하는 거 아닌가..?
-붕대 감기 우선 Firebase의 쿼리 실행 결과로 오는 DocumentData는 다음과 같이 정의되어 있다.</description></item><item><title>Typescript Generic</title><link>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</link><pubDate>Wed, 01 Feb 2023 02:01:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</guid><description>타입스크립트와 리액트를 같이 사용할 때, 우리는 useState 훅을 아래와 같이 사용합니다.
-const [name, setName] = useState&amp;lt;string&amp;gt;(&amp;#34;지상렬&amp;#34;); 뭔진 몰라도, 저 꺽쇠 괄호를 사용해서 state가 다룰 상태의 타입을 지정할 수가 있습니다. 사실 적지 않아도 알아서 추론해 주지만, 아무튼 name.split('')처럼 string 타입이 제공하는 메소드나 프로퍼티도 자동완성해주고, 아주 편하게 사용할 수 있습니다. 오늘은 저 꺽쇠괄호에 대해 알아볼거에요.
-any 타입의 문제 아무튼 이번에 가져온 예제는 스택(Stack) 자료구조입니다. 그냥 대충 만들게요.
-class Stack { arr: any[] = []; push(element: any) { this.</description></item><item><title>Hugo로 블로그를 옮기자</title><link>https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/</link><pubDate>Mon, 30 Jan 2023 19:17:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/</guid><description>알음알음 티스푼 공사로 티스토리에서 이 곳으로 블로그를 옮겼습니다. 티스토리에 있던 컨텐츠 대부분은 옮기지 않았습니다. 별 의미도 없고 너무 사적인 내용이 많았기 때문입니다. 또 티스토리만의 감성이라고 해야 하나.. 약간 그 곳에 더 맞는 포인트들이 있어서 아카이브같은 느낌으로 그냥 티스토리에 두기로 했습니다. 곳곳에 티스토리 링크가 있으니 시간을 효율적으로 버리고 싶은 분이 있다면 읽어주셔도 감사할 것 같습니다. 아무튼 옮겨야 하는 컨텐츠도 없으면서 정말 오랜 기간 삽질을 했는데, 그 과정에 대해 이야기해보려고 합니다.
-블로그를 이전하게 된 계기 아직도 저 Main Page라는 글자의 의미를 모르겠습니다.</description></item><item><title>Tree Shaking</title><link>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</link><pubDate>Wed, 25 Jan 2023 17:17:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</guid><description>용량을 절약하는 방법 웹페이지의 성능을 이야기하는 가장 직관적인 지표는 아마 페이지에 사용되는 파일의 크기일 것입니다. 파일의 크기가 무겁다면 파일을 다운받는 데 시간이 오래 걸리고, 다운로드한 파일을 읽고 렌더링 하는데도 시간이 오래 걸릴 것입니다. 따라서 번들 파일의 용량을 다이어트 하는 것은 사이트 성능에 꽤 중요한 역할을 합니다.
-위 사진은 팀 프로젝트를 하던 중 @next/bundle-analyzer 패키지를 이용해 번들 맵을 그렸던 것입니다. 클수록 번들 용량이 크다는 뜻이니 커다란 청크 위주로 최적화를 시도하면 될 것 같습니다.</description></item><item><title>ECMAScript</title><link>https://prayinforrain.github.io/posts/2023/01/ecmascript/</link><pubDate>Wed, 25 Jan 2023 16:35:01 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/ecmascript/</guid><description>Ecma international Ecma International is an industry association dedicated to the standardization of information and communication systems Emca International은 정보통신 시스템의 표준화를 위한 국제 표준화 기구입니다. &amp;gt; https://www.ecma-international.org/
-Ecma International은 Ecma 사이트에서 소개하듯, 정보통신 시스템의 표준을 만들기 위한 국제 기구입니다. C#, JSON, .u3d 확장자 등 여러 방면에서의 표준안을 제시하였으며, 개발자를 위한 IEEE같은 존재로 이해하면 될 것 같습니다.(제 생각)
-유럽에서 컴퓨터 시스템을 표준화하기 위해 설립되어서 ECMA(European Computer Manufacturers Association)라는 이름을 가지고 있으나 유럽국가 뿐 아니라 전세계의 표준으로 활용되기 위해 Ecma International로 이름을 변경하였습니다.</description></item><item><title>CSS의 display 속성</title><link>https://prayinforrain.github.io/posts/2023/01/css-display/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/css-display/</guid><description>CSS의 display 속성은 HTML element가 block인지, inline인지, 그리고 자식 element들을 어떤 식으로 표시할지를 정하는 속성입니다. 다시 말해 요소 자체가 형제 요소와 배치되는 방법과, 자식 요소를 배치하는 방법을 함께 정의하기 때문에 ‘안쪽’과 ‘바깥쪽’으로 속성을 나눌 수 있습니다.
-display: 바깥쪽 block 한 줄에는 한 요소만 올 수 있게 하는 속성입니다. inline 요소가 한 줄에 여러 개 표시 될 수 있음을 의미합니다. 만약 inline이 적용된 요소의 전후에 inline 요소를 표시할 공간이 있다면 한 줄에 표시됩니다.</description></item><item><title>브라우저 렌더링과 성능</title><link>https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/</guid><description>브라우저 렌더링 성능 최적화를 위해, 브라우저가 어떻게 HTML 문서를 화면에 그리는지 과정에 대해 이해할 필요가 있습니다. 브라우저 렌더링은 아래 사진과 같은 흐름으로 이루어집니다.
-서버로부터 HTML, CSS, JavaScript 파일을 받아와 HTML → DOM, CSS → CSSOM으로 변환하고 Render Tree를 구성합니다. Render Tree의 노드들에 대한 위치와 크기를 계산합니다. Render Tree의 루트부터 시작하여 모든 노드에 대해 계산을 수행합니다. (Layout) 계산된 결과물을 기반으로 화면에 실제 노드들을 그립니다. (Paint) 사용자의 상호작용이나 스크립트를 통한 제어 등으로 HTML 요소의 크기나 위치의 변경이 일어나면 Reflow라는 과정을 수행합니다.</description></item><item><title>CSS의 크기 단위</title><link>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</link><pubDate>Fri, 13 Jan 2023 23:39:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</guid><description>CSS의 크기 단위 CSS에는 다양한 단위가 존재합니다. 우리가 잘 아는 px와 %부터, em, rem, pt, vh, vw 등등 다양한 단위가 존재하는데요, 이 크기 단위들을 언제 어떻게 사용하면 좋을지에 대해 정리해 보았습니다.
-상대 단위와 절대 단위 px과 %를 먼저 비교해 보면, px은 우리가 알고 있는 컴퓨터 화면의 1픽셀을 의미합니다. 이는 어느 화면에서나 같은 크기를 나타내므로 절대 단위에 해당합니다. 반면 %는 보통 부모 element의 크기를 상속받아 그의 정해진 비율만큼을 나타냅니다. 즉 width: 10px;인 부모를 가진 element에 width: 50%;를 주면 5px이 되겠죠.</description></item><item><title>이우재 | Front-end Developer</title><link>https://prayinforrain.github.io/about/</link><pubDate>Mon, 02 Jan 2023 21:38:52 +0900</pubDate><guid>https://prayinforrain.github.io/about/</guid><description> Next.js와 Typescript를 주로 사용하여 개발하는 프론트엔드 개발자입니다. 말을 할 줄 아는 개발자가 되어 커뮤니티에 기여하는 것이 목표입니다. 저의 이력서는 [랠릿]에서 확인해 주세요. Techstacks Projects 차가운 디자인 시스템, CDS [Repo | npm] 마크다운을 지원하는 SNS, 모헤윰 [Repo | Notion | Link(expired) ] Education 네이버 커넥트재단 부스트캠프 웹·모바일 7기 (2022.07 ~ 2022.12) 서울과학기술대학교 컴퓨터공학과 Seoultech Computer Science and Engineering (2015.03 ~ 2022.02) Contacts Email : prayinforrain@naver.com</description></item><item><title>모헤윰 mo:heyum - 프로젝트 회고</title><link>https://prayinforrain.github.io/posts/2022/12/finishing-moheyum/</link><pubDate>Wed, 21 Dec 2022 03:30:25 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/12/finishing-moheyum/</guid><description>티스토리 블로그에 작성했던 부스트캠프 팀 프로젝트의 회고 글이다. [원본 링크]
-내가 팀원들한테 이 얘길 했나 모르겠는데.. 이 페이지 좀 이쁘다. 잘만드셨다..
-부스트캠프의 최종 팀 프로젝트로 나는 모헤윰이라는 SNS를 만들었다. 결과물은 꽤 괜찮다. [여기]에 간단한 시연 영상이 있다. 사실 팀 구인을 하던 때부터 나는 무엇을 만드는지는 크게 중요하지 않았다. 여태까지의 학습 스프린트로 이미 개발이라는 과정은 어느정도 감을 익혔고, 내가 성장함에 따라 이 과정에서 사용하는 기술만 조금씩 변화할 뿐이라고 생각했다. 따라서 내가 팀 프로젝트에서 가장 중요하게 생각했던 포인트는 협업이었다.</description></item><item><title>사이드바야 그만 깜빡여라</title><link>https://prayinforrain.github.io/posts/2022/12/prevent-sidebar-blinking/</link><pubDate>Tue, 06 Dec 2022 02:11:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/12/prevent-sidebar-blinking/</guid><description>모헤윰의 프론트엔드 앱은 Next.js로 만들어져 있습니다. 팀원 그 누구도 사용해 본 적이 없음에도 굳이 선택한 이유는 NestJS를 써 보니 프레임워크를 사용하는 것이 협업 환경에서 코드 일관성을 지키는 데 도움을 줄 것이라는 막연한 기대와, SSR을 체험해 보고 싶은 학습적인 욕심이 있었습니다. 지금 돌아보니 ‘너와 함께 하길 잘 했어!’ 하는 감상은 없네요.
-기왕 SSR을 체험한다고 시작한 프로젝트인 만큼, 성능에 신경을 쓰지 않을 수 없게 되었습니다. 그러다 제가 좋아하는 어떤 팀의 노션에서 memoization을 통한 컴포넌트 중복 렌더링 방지에 대한 글을 읽었는데요, 이 부분이 때 마침 Next.</description></item><item><title>마크다운 만들기 - Markdown [3/3]</title><link>https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/</link><pubDate>Mon, 05 Dec 2022 13:18:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/</guid><description>모헤윰의 에디터 만들기 시리즈 모아보기
-에디터 만들기 - ContentEditable [1/3]
-에디터 만들기 - getSelection [2/3]
-에디터 만들기 - Markdown [3/3]
-마지막입니다. 입력하고, 게시할 수 있게 되었으니, 이제 남은 일은 서식을 적용하는 것 뿐입니다. 마크다운 문법을 이용해 어떻게 서식을 적용할 수 있을까요? 그 과정을 정리해 보겠습니다.
-🤷 어떻게 할까요? 정말이지 어떻게 하면 좋을까요? 우선 제가 생각하는 가장 사용성이 좋은 마크다운은 깃허브의 그것이였습니다. GFM(GitHub Flavored Markdown)이라고 부르는 스펙이 있는데, 처음에는 이걸 부르는 이름이 있는 것조차 모르고 막무가내로 리버스 엔지니어링 마인드로 작업을 시작했습니다.</description></item><item><title>마크다운 만들기 - getSelection [2/3]</title><link>https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/</link><pubDate>Thu, 24 Nov 2022 00:53:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/</guid><description>모헤윰의 에디터 만들기 시리즈 모아보기
-에디터 만들기 - ContentEditable [1/3]
-에디터 만들기 - getSelection [2/3]
-에디터 만들기 - Markdown [3/3]
-아니???????? 두 번째 글이 파서가 아니였네요. 저는 사실 이 글이 2부작이길 간절히 바랬는데, 1편에서 만든 에디터에 너무 끔찍한 버그가 있어서 이에 대해 정리해 보고자 합니다. 이걸로 3시간을 씨름하고 있었지만 모헤윰의 TIL 문서가 풍성해지고 있으니 긍정적이게 생각해야겠죠?
-💡 이 글은 Window 10, Chrome 107.0.5304.107 버전을 기준으로 작성되었습니다. 일부 환경에 따라 다르게 작동하는 부분이 있을 수 있습니다.</description></item><item><title>마크다운 만들기 - contentEditable [1/3]</title><link>https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/</link><pubDate>Tue, 22 Nov 2022 20:36:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/</guid><description>모헤윰의 에디터 만들기 시리즈 모아보기
-에디터 만들기 - ContentEditable [1/3]
-에디터 만들기 - getSelection [2/3]
-에디터 만들기 - Markdown [3/3]
-모헤윰의 핵심 기능 중 하나는 마크다운 서식 지원입니다. 왜 SNS에 마크다운을 끼얹을 생각을 했나 생각해보면 최초 기획부터 있다가 기능 다이어트를 한 후 살아남았기 때문인데, 아무튼 드디어 때가 왔습니다.
-내부적으로 에디터를 외부 라이브러리를 사용하는게 좋지 않겠냐는 이야기가 나왔는데요, 결국 직접 구현해 보기로 했지만 그 과정에서 여러 레퍼런스를 얻을 수 있었습니다. 개인적으로 멋있다고 생각한 사이트 두 가지를 소개합니다.</description></item><item><title>Emotion</title><link>https://prayinforrain.github.io/posts/2022/11/emotion/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/emotion/</guid><description>🤷TL;DR CSS-in-JS는 프로젝트 규모가 커질수록 관리하기 어려운 CSS의 문제를 보완한다. emotion과 styled-components는 사용상의 차이가 거의 없으니 골라서 사용하자. 적절한 IDE Extension을 잘 활용하자. CSS-in-JS가 모든 경우에 대한 정답이 아님을 인지하자. 🎨CSS-in-JS CSS-in-JS는 HTML Element의 스타일을 자바스크립트 파일을 통해서 지정하는 방식입니다. .css 파일이 하던 일을 .js 파일에게 시키는 것이죠. CSS는 CSS이고, JS는 JS입니다. 왜 굳이 둘을 합쳐야만 하는 것일까요? 이 알 수 없는 발상을 이해하려면 우선 기존 css의 단점을 살펴보겠습니다.
-제가 학습 스프린트때 진행한 프로젝트 파일의 일부입니다.</description></item><item><title>npm vs yarn vs pnpm</title><link>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</guid><description>지금까지 저는 아무 의심 없이 npm을 사용해왔습니다. 이따금씩 node_modules 폴더가 저를 고통스럽게 했던 시간들이 있었지만, 프로젝트 초기화에 정말 이상한 행동만 하지 않으면 npm i 한 줄과 커피 한 잔으로 모든게 문제 없이 동작했으니까요. 하지만 우리는 슬랙의 어떤 분을 통해, npm보다 좋은 방법이 있음을 알고 있습니다. 이번 포스트에서는 yarn과 pnpm을 체험해 보도록 하겠습니다.
-🤷 TL;DR npm의 의존성 관리는 사실 매우 비효율적이다. 이 문제를 보완한 패키지 매니저가 yarn, pnpm이다. 각 패키지 매니저로의 마이그레이션은 매우 쉽다.</description></item><item><title>Redux vs Recoil</title><link>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</guid><description>🤷 TL;DR Redux는 안정적이지만, 선언과 사용이 복잡하다. Recoil은 사용이 매우 쉽지만 정식 버전이 없다. 프로젝트 규모에 따라 마음에 드는 라이브러리를 선택하자 🚪 서론 우리는 React를 사용할 때 보통 useState를 통해 상태를 관리합니다. useState는 정말 섹시하지만, 한 가지 너무 큰 단점이 있습니다. 바로 컴포넌트끼리 데이터를 주고받는 데 사용하기가 힘들다는 점입니다. 그 일을 하기 위해 등장한 것이 바로 상태 관리 라이브러리입니다. 상태 관리 라이브러리의 필요성에 대해 공감하지 못하는 분들을 위해 짧은 토막글을 마련해 보았습니다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>PrayinForRain.dev</title><link>https://prayinforrain.github.io/</link><description>Recent content on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Thu, 18 Jul 2024 12:34:32 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/index.xml" rel="self" type="application/rss+xml"/><item><title>Next.js 성능 개선기</title><link>https://prayinforrain.github.io/posts/2024/07/site-optimization/</link><pubDate>Thu, 18 Jul 2024 12:34:32 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2024/07/site-optimization/</guid><description>최대한 가벼운 사이트를 만들어보자</description></item><item><title>스프레드시트를 최적화 하자</title><link>https://prayinforrain.github.io/posts/2023/11/cell-refactoring/</link><pubDate>Tue, 07 Nov 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/11/cell-refactoring/</guid><description>React로 성능 되찾기</description></item><item><title>차가운 디자인 시스템(CDS) 회고</title><link>https://prayinforrain.github.io/posts/2023/06/cds-retrospect/</link><pubDate>Sun, 18 Jun 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/06/cds-retrospect/</guid><description>우리 v1.2 합시다</description></item><item><title>얀 베리 탐험하기</title><link>https://prayinforrain.github.io/posts/2023/05/exploring-yarn-berry/</link><pubDate>Tue, 30 May 2023 02:27:49 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/05/exploring-yarn-berry/</guid><description>&lt;h2 id="내-레포의-위험한-녀석">내 레포의 위험한 녀석&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/05/exploring-yarn-berry/01.png" alt="cds issue">&lt;/p>
+&lt;p>최근 &lt;a href="https://github.com/c-h-w-h/cds">차가운 디자인 시스템(CDS)&lt;/a>의 패키지 매니저를 &lt;strong>Yarn berry&lt;/strong>로 마이그레이션 하는 작업을 하고 있다. 이유는 후술할 &lt;code>node_modules&lt;/code> 자체의 단점도 있고, 내 데스크탑이 HDD를 사용하기 때문에 &lt;code>node_modules&lt;/code>의 수십만 개의 파일들을 다루는 것이 너무 느려서 강력 추천했다.&lt;/p>
+&lt;p>하지만 사실 나는 PnP가 어떻게 패키지들을 resolve하는지 전혀 모른다. 그저 어떻게 해야 오류 없이 쓸 수 있는지만 열심히 고민했는데, 팀원들에게 설명할 때 마다 막연히 얀베리가 잘못했겠죠~ 하는 스스로에게 자괴감을 느껴 이 기회에 한 번 Yarn PnP를 똑바로 마주해 보기로 했다.&lt;/p></description></item><item><title>Next.js Storybook에 Yarn PnP 적용하기</title><link>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</link><pubDate>Thu, 27 Apr 2023 15:32:50 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</guid><description>&lt;h2 id="storybook을-쓰려고-했는데">Storybook을 쓰려고 했는데&lt;/h2>
+&lt;p>최근 Storybook을 사용할 일이 무척 많았다. 언젠가는 포스팅을 해야 할 CDS 프로젝트부터 &lt;a href="https://prayinforrain.github.io/posts/2023/04/numble-talk/">넘블 챌린지&lt;/a>도 있었고&amp;hellip; 처음엔 너무 낯설었지만 공통된 컴포넌트들을 미리 설계해 두고 재사용하는 것이 좀 더 깔끔한 설계가 되는 것 같아 매력을 느꼈다.&lt;/p>
+&lt;p>그런데 문제는 내 작업 환경에 있었다. 꽤 연식이 된 윈도우 데스크탑에 수십가지 개발 환경을 섞어 놓고, 요새는 게임에도 못 쓰는 처참한 성능의 HDD에 레포를 두고 쓰니 종속성 패키지 설치도 커피 한 잔 타와야 하는 시간이 걸리니 Yarn Berry의 사용이 반필수가 되어버렸다. 넘블 챌린지 때 Yarn Berry를 사용하고 싶었지만 애석하게도 수 많은 문제에 시달려 포기했는데, 여유가 생긴 지금 마음을 다잡고 다시 시도해 보기로 했다.&lt;/p></description></item><item><title>넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고</title><link>https://prayinforrain.github.io/posts/2023/04/numble-talk/</link><pubDate>Sun, 23 Apr 2023 04:05:58 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/04/numble-talk/</guid><description>&lt;h2 id="시작하게-된-계기">시작하게 된 계기&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/04/numble-talk/01.png" alt="ui design">&lt;/p>
+&lt;p>3월에 정말 많은 일들이 있었다. 아직 뭔가 성과라고 내세울 결과물이 없긴 하지만 그래도 무의미하진 않았다(?)고 주장할 수 있는 그런 시간이었다. 점점 일이 정리가 되고 여유가 생기면서 번아웃이 온 사람처럼 푹 늘어지는 느낌이 있었는데, 그 와중에 누가 넘블을 소개해 주셨다.&lt;/p>
+&lt;p>대충.. 프로젝트 주제와 요구사항을 주고 구현을 해 보는? 프로세스의 활동으로 이해했다. 기간이 짧아 확 몰입하기 좋겠다는 생각을 해서 한 번 맛만 보기로 했다. OpenAI API를 활용해 보는 프로젝트라는 점이 관심을 끌기도 했다. 요새 챗쌤한테 이런저런 도움도 받았고 관련 아티클도 많이 보이고..&lt;/p></description></item><item><title>백준을 위한 node.js</title><link>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</guid><description>&lt;h2 id="js라도-백준이-하고싶어">JS라도 백준이 하고싶어&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/03/nodejs-for-baekjoon/01.png" alt="Programmers IDE">&lt;/p>
+&lt;p>공채 시즌이다. 개인적으로 코딩 테스트를 정말정말 자신 없어했는데, 더 이상 미룰 수 없어 야금야금 공부를 시작했다.&lt;br>
+불편한 점이 있다면, 백준은 자바스크립트에 아주 불친절하다는 점이다. 내가 학부생 때 잘 하지도 못하는 C++로 꾸역꾸역 문제를 풀었던 이유 중 하나이기도 했다. 그 때는 아는 PS 플랫폼이 백준 뿐이니, 자바스크립트의 어쩔 수 없는 한계인가보다 했다.&lt;/p>
+&lt;p>그런데 프로그래머스를 맛 보고 나니 머리가 커져서 자바스크립트가 백준에게 부당한 차별을 받는(?) 기분이 들었다. 진짜로 화가 난 건 아니지만 그래도 화가 났다. 용서할 수가 없어 보일러플레이트 코드를 작성했다.&lt;/p></description></item><item><title>VSCode의 NPM Scripts가 작동하지 않는 사람</title><link>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</link><pubDate>Wed, 29 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</guid><description>&lt;figure>&lt;img src="https://prayinforrain.github.io/images/posts/2023/03/npm-scripts-doesnt-work/01.jpeg"
+ alt="image">&lt;figcaption>
+ &lt;p>늦잠자고 갓생사는 척 하는 삶이란&amp;hellip;&lt;/p>
+ &lt;/figcaption>
+&lt;/figure>
+
+&lt;p>맥북과 친해지기 시작한지 2달이 되었다. 윈도우 노트북을 사용하다가 갈아 탄 이유는, &lt;em>맥에서 되는 것이 윈도우에서 되고, 윈도우에서 되는 것은 맥에서 안되는&lt;/em> 문제를 너무 많이 겪었기 때문이다. 주변의 맥 유저에게 계속해서 테스트를 요청하기도 눈치보이고, 언젠가는 마주해야겠다고 생각했던 녀석이기 때문에 과감한 투자를 했다. 그 과정에서 내가 윈도우에 지나치게 강결합(?) 되어 있다는 것을 깨달았고, 지금은 맥도 윈도우도 못 쓰는 그 어딘가의 지점에 있다.&lt;/p>
+&lt;p>그리고 최근에는 프로젝트를 하고 있다. 부스트캠프에서 만난 사람들과 스터디를 하다가, 디자인 시스템을 만들어 보자는 이야기가 나와서 다같이 티스푼 공사 중이다. 이 것에 대해서도 글을 써야 하는데 오늘 포스팅할 내용은 이 것도 아니다. 회고를 안 쓰니 이야기가 많이 밀려 횡설수설 하는구나..&lt;/p></description></item><item><title>Firebase를 TypeScript에서 사용하기</title><link>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</link><pubDate>Wed, 15 Feb 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</guid><description>&lt;p>최근에 들어서 Firebase가 필요한 일이 있었다. 대학교에서 써본 경험은 있었는데, 오랜만에 만난 Firebase는 예전같지 않았다. 가장 큰 문제는 Firebase가 제공하는 데이터베이스인 Firestore는 문서를 가져와도 타입을 제대로 정의할 수 없다는 것.&lt;/p>
+&lt;figure>&lt;img src="https://prayinforrain.github.io/images/posts/2023/02/firebase-with-typescript/01.png"
+ alt="image">&lt;figcaption>
+ &lt;p>자동완성이 안되는 타입스크립트는.. 그.. 왜..?&lt;/p>
+ &lt;/figcaption>
+&lt;/figure>
+
+&lt;p>물론 데이터스키마를 따로 정의하지 않기 때문에 Firebase 라이브러리가 &lt;code>DocumentData&lt;/code> 타입을 개발자에게 맞춰줄 의무는 없지만, 적어도 &lt;code>React.useState&lt;/code>처럼 제네릭으로 타입을 받아 어느정도 약속해 주기를 바랐다. 아니 바라는게 아니라 되어야 하는 거 아닌가..?&lt;/p>
+&lt;h2 id="붕대-감기">붕대 감기&lt;/h2>
+&lt;p>우선 Firebase의 쿼리 실행 결과로 오는 &lt;code>DocumentData&lt;/code>는 다음과 같이 정의되어 있다.&lt;/p></description></item><item><title>Typescript Generic</title><link>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</link><pubDate>Wed, 01 Feb 2023 02:01:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</guid><description>&lt;p>타입스크립트와 리액트를 같이 사용할 때, 우리는 &lt;code>useState&lt;/code> 훅을 아래와 같이 사용합니다.&lt;/p>
+&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-typescript" data-lang="typescript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="nx">name&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">setName&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">useState&lt;/span>&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">string&lt;/span>&lt;span class="p">&amp;gt;(&lt;/span>&lt;span class="s2">&amp;#34;지상렬&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>뭔진 몰라도, 저 꺽쇠 괄호를 사용해서 state가 다룰 상태의 타입을 지정할 수가 있습니다. 사실 적지 않아도 알아서 추론해 주지만, 아무튼 &lt;code>name.split('')&lt;/code>처럼 string 타입이 제공하는 메소드나 프로퍼티도 자동완성해주고, 아주 편하게 사용할 수 있습니다. 오늘은 저 꺽쇠괄호에 대해 알아볼거에요.&lt;/p>
+&lt;h2 id="any-타입의-문제">any 타입의 문제&lt;/h2>
+&lt;p>아무튼 이번에 가져온 예제는 스택(Stack) 자료구조입니다. 그냥 대충 만들게요.&lt;/p>
+&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-typescript" data-lang="typescript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">class&lt;/span> &lt;span class="nx">Stack&lt;/span> &lt;span class="p">{&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">arr&lt;/span>: &lt;span class="kt">any&lt;/span>&lt;span class="p">[]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[];&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">element&lt;/span>: &lt;span class="kt">any&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">arr&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">element&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">arr&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">length&lt;/span>&lt;span class="p">;&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">pop() {&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">arr&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">pop&lt;/span>&lt;span class="p">();&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
+&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-typescript" data-lang="typescript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">stringStack&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="k">new&lt;/span> &lt;span class="nx">Stack&lt;/span>&lt;span class="p">();&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">stringStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;크와앙&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">console&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">log&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">stringStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">pop&lt;/span>&lt;span class="p">().&lt;/span>&lt;span class="nx">slice&lt;/span>&lt;span class="p">());&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">numberStack&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="k">new&lt;/span> &lt;span class="nx">Stack&lt;/span>&lt;span class="p">();&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">numberStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">console&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">log&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">numberStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">pop&lt;/span>&lt;span class="p">().&lt;/span>&lt;span class="nx">slice&lt;/span>&lt;span class="p">());&lt;/span> &lt;span class="c1">// TypeError: numberStack.pop(...).slice is not a function
+&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>당연히 &lt;code>numberStack&lt;/code> 부분에서 에러가 나지만, 이 문제를 &lt;strong>코드를 실행하기 전까진 알 수 없습니다&lt;/strong>. &lt;code>Stack&lt;/code>이 관리하는 것은 &lt;code>any&lt;/code> 타입의 배열이니까요.&lt;/p></description></item><item><title>Hugo로 블로그를 옮기자</title><link>https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/</link><pubDate>Mon, 30 Jan 2023 19:17:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/</guid><description>&lt;p>알음알음 티스푼 공사로 티스토리에서 이 곳으로 블로그를 옮겼습니다. 티스토리에 있던 컨텐츠 대부분은 옮기지 않았습니다. 별 의미도 없고 너무 사적인 내용이 많았기 때문입니다. 또 티스토리만의 감성이라고 해야 하나.. 약간 그 곳에 더 맞는 포인트들이 있어서 아카이브같은 느낌으로 그냥 티스토리에 두기로 했습니다. 곳곳에 티스토리 링크가 있으니 시간을 효율적으로 버리고 싶은 분이 있다면 읽어주셔도 감사할 것 같습니다.
+아무튼 옮겨야 하는 컨텐츠도 없으면서 정말 오랜 기간 삽질을 했는데, 그 과정에 대해 이야기해보려고 합니다.&lt;/p>
+&lt;h2 id="블로그를-이전하게-된-계기">블로그를 이전하게 된 계기&lt;/h2>
+&lt;p>&lt;figure>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/migrating-to-hugo/01.png"
+ alt="image">&lt;figcaption>
+ &lt;p>아직도 저 Main Page라는 글자의 의미를 모르겠습니다..&lt;/p></description></item><item><title>Tree Shaking</title><link>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</link><pubDate>Wed, 25 Jan 2023 17:17:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</guid><description>&lt;h2 id="용량을-절약하는-방법">용량을 절약하는 방법&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/tree-shaking/01.png" alt="bundle_map">&lt;/p>
+&lt;p>웹페이지의 성능을 이야기하는 가장 직관적인 지표는 아마 페이지에 사용되는 &lt;strong>파일의 크기&lt;/strong>일 것입니다. 파일의 크기가 무겁다면 파일을 다운받는 데 시간이 오래 걸리고, 다운로드한 파일을 읽고 렌더링 하는데도 시간이 오래 걸릴 것입니다. 따라서 번들 파일의 용량을 다이어트 하는 것은 사이트 성능에 꽤 중요한 역할을 합니다.&lt;/p>
+&lt;p>위 사진은 팀 프로젝트를 하던 중 &lt;code>@next/bundle-analyzer&lt;/code> 패키지를 이용해 번들 맵을 그렸던 것입니다. 클수록 번들 용량이 크다는 뜻이니 커다란 청크 위주로 최적화를 시도하면 될 것 같습니다. 그런데 어떻게 용량을 줄일 수 있을까요? gzip을 통해 파일을 압축해서 보내는 방법도 있겠지만, 코드적으로 최적화할 수 있는 방법은 &lt;code>Tree-shaking&lt;/code>입니다.&lt;/p></description></item><item><title>ECMAScript</title><link>https://prayinforrain.github.io/posts/2023/01/ecmascript/</link><pubDate>Wed, 25 Jan 2023 16:35:01 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/ecmascript/</guid><description>&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/ecmascript/01.png" alt="untitled">&lt;/p>
+&lt;h2 id="ecma-international">Ecma international&lt;/h2>
+&lt;blockquote>
+&lt;p>&lt;strong>Ecma International&lt;/strong> is an industry association dedicated to the standardization of information and communication systems
+&lt;em>Emca International은 정보통신 시스템의 표준화를 위한 국제 표준화 기구입니다.&lt;/em> &amp;gt; &lt;a href="https://www.ecma-international.org/">https://www.ecma-international.org/&lt;/a>&lt;/p>
+&lt;/blockquote>
+&lt;p>Ecma International은 Ecma 사이트에서 소개하듯, 정보통신 시스템의 표준을 만들기 위한 국제 기구입니다. C#, JSON, .u3d 확장자 등 여러 방면에서의 표준안을 제시하였으며, 개발자를 위한 IEEE같은 존재로 이해하면 될 것 같습니다.(제 생각)&lt;/p>
+&lt;p>유럽에서 컴퓨터 시스템을 표준화하기 위해 설립되어서 &lt;strong>ECMA&lt;/strong>(&lt;em>European Computer Manufacturers Association&lt;/em>)라는 이름을 가지고 있으나 유럽국가 뿐 아니라 전세계의 표준으로 활용되기 위해 &lt;strong>Ecma International&lt;/strong>로 이름을 변경하였습니다. &lt;strong>ECMA&lt;/strong> 자체는 두문자어이지만 지금의 이름은 하나의 고유명사로 사용되는 셈이죠. 따라서 &lt;strong>Ecma&lt;/strong>로 표기하는 것이 맞습니다.&lt;/p></description></item><item><title>CSS의 display 속성</title><link>https://prayinforrain.github.io/posts/2023/01/css-display/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/css-display/</guid><description>&lt;p>CSS의 &lt;code>display&lt;/code> 속성은 HTML element가 block인지, inline인지, 그리고 자식 element들을 어떤 식으로 표시할지를 정하는 속성입니다. 다시 말해 요소 자체가 형제 요소와 배치되는 방법과, 자식 요소를 배치하는 방법을 함께 정의하기 때문에 ‘&lt;strong>안쪽&lt;/strong>’과 ‘&lt;strong>바깥쪽&lt;/strong>’으로 속성을 나눌 수 있습니다.&lt;/p>
+&lt;h2 id="display">display:&lt;/h2>
+&lt;h3 id="바깥쪽">바깥쪽&lt;/h3>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/css-display/01.png" alt="Untitled">&lt;/p>
+&lt;ul>
+&lt;li>&lt;code>block&lt;/code>
+&lt;ul>
+&lt;li>한 줄에는 한 요소만 올 수 있게 하는 속성입니다.&lt;/li>
+&lt;/ul>
+&lt;/li>
+&lt;li>&lt;code>inline&lt;/code>
+&lt;ul>
+&lt;li>요소가 한 줄에 여러 개 표시 될 수 있음을 의미합니다. 만약 &lt;code>inline&lt;/code>이 적용된 요소의 전후에 &lt;code>inline&lt;/code> 요소를 표시할 공간이 있다면 한 줄에 표시됩니다.&lt;/li>
+&lt;/ul>
+&lt;/li>
+&lt;/ul>
+&lt;p>사진의 div들은 각각 &lt;code>inline&lt;/code>, &lt;code>block&lt;/code> 속성을 지정하였습니다. 보이는 것과 같이 &lt;code>block&lt;/code> 속성의 요소는 한 줄에 하나만 존재할 수 있으며, &lt;code>inline&lt;/code> 속성은 충분한 공간이 있으면 한 줄에 표시됩니다. &lt;code>span&lt;/code>과 &lt;code>p&lt;/code>태그의 차이와 비슷합니다.&lt;/p></description></item><item><title>브라우저 렌더링과 성능</title><link>https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/</guid><description>&lt;h2 id="브라우저-렌더링">브라우저 렌더링&lt;/h2>
+&lt;p>성능 최적화를 위해, 브라우저가 어떻게 HTML 문서를 화면에 그리는지 과정에 대해 이해할 필요가 있습니다. 브라우저 렌더링은 아래 사진과 같은 흐름으로 이루어집니다.&lt;/p>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/browser-rendering-performance/01.png" alt="Untitled">&lt;/p>
+&lt;ul>
+&lt;li>서버로부터 HTML, CSS, JavaScript 파일을 받아와 HTML → DOM, CSS → CSSOM으로 변환하고 Render Tree를 구성합니다.&lt;/li>
+&lt;li>Render Tree의 노드들에 대한 위치와 크기를 계산합니다. Render Tree의 루트부터 시작하여 모든 노드에 대해 계산을 수행합니다. (Layout)&lt;/li>
+&lt;li>계산된 결과물을 기반으로 화면에 실제 노드들을 그립니다. (Paint)&lt;/li>
+&lt;li>사용자의 상호작용이나 스크립트를 통한 제어 등으로 HTML 요소의 크기나 위치의 변경이 일어나면 &lt;code>Reflow&lt;/code>라는 과정을 수행합니다.
+&lt;ul>
+&lt;li>Reflow는 Render Tree 구성부터 &lt;strong>모든 작업을 다시 수행&lt;/strong>합니다.&lt;/li>
+&lt;li>만약 레이아웃 자체에는 변화가 없고, 색상이나 visibility 등의 변경만 있는 경우에는 Paint 과정만을 다시 수행합니다. (Repaint)&lt;/li>
+&lt;li>따라서 비용이 큰 &lt;strong>Reflow의 발생을 최대한 줄이는 것이 중요&lt;/strong>합니다.&lt;/li>
+&lt;/ul>
+&lt;/li>
+&lt;/ul>
+&lt;iframe width="560" height="315" src="https://www.youtube.com/embed/TZz9VHjJzMk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>&lt;/iframe>
+&lt;p>이거 되게 좋은 내용인 것 같아요 CSS의 &lt;code>will-change&lt;/code>를 통헤 불필요한 GPU 점유를 줄이는 방법도 소개하고 있네요!&lt;/p></description></item><item><title>CSS의 크기 단위</title><link>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</link><pubDate>Fri, 13 Jan 2023 23:39:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</guid><description>&lt;h2 id="css의-크기-단위">CSS의 크기 단위&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/size-units-in-css/01.png" alt="Untitled">&lt;/p>
+&lt;p>CSS에는 다양한 단위가 존재합니다. 우리가 잘 아는 &lt;code>px&lt;/code>와 &lt;code>%&lt;/code>부터, &lt;code>em&lt;/code>, &lt;code>rem&lt;/code>, &lt;code>pt&lt;/code>, &lt;code>vh&lt;/code>, &lt;code>vw&lt;/code> 등등 다양한 단위가 존재하는데요, 이 크기 단위들을 언제 어떻게 사용하면 좋을지에 대해 정리해 보았습니다.&lt;/p>
+&lt;h2 id="상대-단위와-절대-단위">상대 단위와 절대 단위&lt;/h2>
+&lt;p>&lt;code>px&lt;/code>과 &lt;code>%&lt;/code>를 먼저 비교해 보면, &lt;code>px&lt;/code>은 우리가 알고 있는 컴퓨터 화면의 1픽셀을 의미합니다. 이는 어느 화면에서나 같은 크기를 나타내므로 &lt;strong>절대 단위&lt;/strong>에 해당합니다. 반면 &lt;code>%&lt;/code>는 보통 부모 element의 크기를 상속받아 그의 정해진 비율만큼을 나타냅니다. 즉 &lt;code>width: 10px;&lt;/code>인 부모를 가진 element에 &lt;code>width: 50%;&lt;/code>를 주면 5px이 되겠죠. 이렇게 상황에 따라서 다른 값을 갖는 단위를 &lt;strong>상대 단위&lt;/strong>라고 부릅니다.&lt;/p></description></item><item><title>이우재 | Front-end Developer</title><link>https://prayinforrain.github.io/about/</link><pubDate>Mon, 02 Jan 2023 21:38:52 +0900</pubDate><guid>https://prayinforrain.github.io/about/</guid><description>&lt;ul>
+&lt;li>&lt;code>Next.js&lt;/code>와 &lt;code>Typescript&lt;/code>를 주로 사용하여 개발하는 프론트엔드 개발자입니다.&lt;/li>
+&lt;li>&lt;strong>말을 할 줄 아는 개발자&lt;/strong>가 되어 커뮤니티에 기여하는 것이 목표입니다.&lt;/li>
+&lt;li>저의 이력서는 &lt;a href="https://www.rallit.com/resumes/229210@prayinforrain/%EC%9D%B4%EC%9A%B0%EC%9E%AC">[랠릿]&lt;/a>에서 확인해 주세요.&lt;/li>
+&lt;/ul>
+&lt;h2 id="techstacks">Techstacks&lt;/h2>
+&lt;p>&lt;img src="https://img.shields.io/badge/git-%23F05033.svg?style=flat&amp;amp;logo=git&amp;amp;logoColor=white" alt="Git"> &lt;img src="https://img.shields.io/badge/figma-%23F24E1E.svg?style=flat&amp;amp;logo=figma&amp;amp;logoColor=white" alt="Figma"> &lt;img src="https://img.shields.io/badge/-Storybook-FF4785?style=flat&amp;amp;logo=storybook&amp;amp;logoColor=white" alt="Storybook">&lt;br>
+&lt;img src="https://img.shields.io/badge/html5-%23E34F26.svg?style=flat&amp;amp;logo=html5&amp;amp;logoColor=white" alt="HTML5"> &lt;img src="https://img.shields.io/badge/css3-%231572B6.svg?style=flat&amp;amp;logo=css3&amp;amp;logoColor=white" alt="CSS3"> &lt;img src="https://img.shields.io/badge/node.js-6DA55F?style=flat&amp;amp;logo=node.js&amp;amp;logoColor=white" alt="NodeJS"> &lt;img src="https://img.shields.io/badge/typescript-%23007ACC.svg?style=flat&amp;amp;logo=typescript&amp;amp;logoColor=white" alt="TypeScript"> &lt;img src="https://img.shields.io/badge/NPM-%23000000.svg?style=flat&amp;amp;logo=npm&amp;amp;logoColor=white" alt="NPM"> &lt;img src="https://img.shields.io/badge/yarn-%232C8EBB.svg?style=flat&amp;amp;logo=yarn&amp;amp;logoColor=white" alt="Yarn">&lt;br>
+&lt;img src="https://img.shields.io/badge/react-%2320232a.svg?style=flat&amp;amp;logo=react&amp;amp;logoColor=%2361DAFB" alt="React"> &lt;img src="https://img.shields.io/badge/Next-black?style=flat&amp;amp;logo=next.js&amp;amp;logoColor=white" alt="Next JS">&lt;br>
+&lt;img src="https://img.shields.io/badge/express.js-%23404d59.svg?style=flat&amp;amp;logo=express&amp;amp;logoColor=%2361DAFB" alt="Express.js"> &lt;img src="https://img.shields.io/badge/nestjs-%23E0234E.svg?style=flat&amp;amp;logo=nestjs&amp;amp;logoColor=white" alt="NestJS">&lt;/p>
+&lt;h2 id="projects">Projects&lt;/h2>
+&lt;ul>
+&lt;li>차가운 디자인 시스템, &lt;strong>CDS&lt;/strong> [&lt;a href="https://github.com/c-h-w-h/cds">Repo&lt;/a> | &lt;a href="https://www.npmjs.com/package/@chwh/cds">npm&lt;/a>]&lt;/li>
+&lt;li>마크다운을 지원하는 SNS, &lt;strong>모헤윰&lt;/strong> [&lt;a href="https://github.com/boostcampwm-2022/web34-moheyum">Repo&lt;/a> | &lt;a href="https://polarlsm.notion.site/Moheyum-4c54f7ce6bc348bd84121578d4079b50">Notion&lt;/a> | &lt;del>&lt;a href="https://moheyum.ga/">Link&lt;/a>&lt;/del>&lt;em>(expired)&lt;/em> ]&lt;/li>
+&lt;/ul>
+&lt;h2 id="education">Education&lt;/h2>
+&lt;ul>
+&lt;li>네이버 커넥트재단 부스트캠프 웹·모바일 7기 (2022.07 ~ 2022.12)&lt;/li>
+&lt;li>서울과학기술대학교 컴퓨터공학과 &lt;em>Seoultech Computer Science and Engineering&lt;/em> (2015.03 ~ 2022.02)&lt;/li>
+&lt;/ul>
+&lt;h2 id="contacts">Contacts&lt;/h2>
+&lt;ul>
+&lt;li>Email : &lt;a href="mailto:prayinforrain@naver.com">prayinforrain@naver.com&lt;/a>&lt;/li>
+&lt;/ul>
+&lt;p>&lt;img src="https://github-readme-stats.vercel.app/api?username=prayinforrain&amp;amp;show_icons=true" alt="PrayinForRain&amp;rsquo;s github stats">&lt;/p></description></item><item><title>모헤윰 mo:heyum - 프로젝트 회고</title><link>https://prayinforrain.github.io/posts/2022/12/finishing-moheyum/</link><pubDate>Wed, 21 Dec 2022 03:30:25 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/12/finishing-moheyum/</guid><description>&lt;blockquote>
+&lt;p>티스토리 블로그에 작성했던 부스트캠프 팀 프로젝트의 회고 글이다. &lt;a href="https://prayinforrain.tistory.com/80">[원본 링크]&lt;/a>&lt;/p>
+&lt;/blockquote>
+&lt;figure>&lt;img src="https://prayinforrain.github.io/images/posts/2022/12/finishing-moheyum/moheyum_01.png"
+ alt="image">&lt;figcaption>
+ &lt;p>내가 팀원들한테 이 얘길 했나 모르겠는데.. 이 페이지 좀 이쁘다. 잘만드셨다..&lt;/p>
+ &lt;/figcaption>
+&lt;/figure>
+
+&lt;p>부스트캠프의 최종 팀 프로젝트로 나는 &lt;strong>모헤윰&lt;/strong>이라는 SNS를 만들었다. 결과물은 꽤 괜찮다. &lt;a href="https://youtu.be/9mVinynuUTw">[여기]&lt;/a>에 간단한 시연 영상이 있다. 사실 팀 구인을 하던 때부터 나는 무엇을 만드는지는 크게 중요하지 않았다. 여태까지의 학습 스프린트로 이미 개발이라는 과정은 어느정도 감을 익혔고, 내가 성장함에 따라 이 과정에서 사용하는 기술만 조금씩 변화할 뿐이라고 생각했다. 따라서 내가 팀 프로젝트에서 가장 중요하게 생각했던 포인트는 협업이었다.&lt;/p></description></item><item><title>사이드바야 그만 깜빡여라</title><link>https://prayinforrain.github.io/posts/2022/12/prevent-sidebar-blinking/</link><pubDate>Tue, 06 Dec 2022 02:11:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/12/prevent-sidebar-blinking/</guid><description>&lt;p>&lt;strong>모헤윰&lt;/strong>의 프론트엔드 앱은 &lt;code>Next.js&lt;/code>로 만들어져 있습니다. 팀원 그 누구도 사용해 본 적이 없음에도 굳이 선택한 이유는 &lt;code>NestJS&lt;/code>를 써 보니 프레임워크를 사용하는 것이 협업 환경에서 코드 일관성을 지키는 데 도움을 줄 것이라는 막연한 기대와, &lt;code>SSR&lt;/code>을 체험해 보고 싶은 학습적인 욕심이 있었습니다. 지금 돌아보니 ‘너와 함께 하길 잘 했어!’ 하는 감상은 없네요.&lt;/p>
+&lt;p>기왕 SSR을 체험한다고 시작한 프로젝트인 만큼, 성능에 신경을 쓰지 않을 수 없게 되었습니다. 그러다 제가 좋아하는 어떤 팀의 노션에서 &lt;code>memoization&lt;/code>을 통한 컴포넌트 중복 렌더링 방지에 대한 글을 읽었는데요, 이 부분이 때 마침 &lt;a href="https://www.notion.so/next-js-13-app-dir-11191a66a5564a25ba882c8a835afd13">Next.js 13을 적용하지 못해 포기해야만 했던&lt;/a> 아픈 상처를 자극하고 있어서 모헤윰에도 시도해 보기로 하였습니다.&lt;/p></description></item><item><title>마크다운 만들기 - Markdown [3/3]</title><link>https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/</link><pubDate>Mon, 05 Dec 2022 13:18:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/</guid><description>&lt;p>&lt;strong>모헤윰&lt;/strong>의 에디터 만들기 시리즈 모아보기&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/">에디터 만들기 - ContentEditable [1/3]&lt;/a>&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/">에디터 만들기 - getSelection [2/3]&lt;/a>&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/">에디터 만들기 - Markdown [3/3]&lt;/a>&lt;/p>
+&lt;hr>
+&lt;p>마지막입니다. 입력하고, 게시할 수 있게 되었으니, 이제 남은 일은 서식을 적용하는 것 뿐입니다. 마크다운 문법을 이용해 어떻게 서식을 적용할 수 있을까요? 그 과정을 정리해 보겠습니다.&lt;/p>
+&lt;h2 id="-어떻게-할까요">🤷 어떻게 할까요?&lt;/h2>
+&lt;p>정말이지 어떻게 하면 좋을까요? 우선 제가 생각하는 가장 사용성이 좋은 마크다운은 깃허브의 그것이였습니다. &lt;a href="https://github.github.com/gfm/">GFM(GitHub Flavored Markdown)&lt;/a>이라고 부르는 스펙이 있는데, 처음에는 이걸 부르는 이름이 있는 것조차 모르고 막무가내로 리버스 엔지니어링 마인드로 작업을 시작했습니다. 아래 사진처럼 아무 이슈나 들어가서 댓글 창에 실험을 하면서요.&lt;/p></description></item><item><title>마크다운 만들기 - getSelection [2/3]</title><link>https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/</link><pubDate>Thu, 24 Nov 2022 00:53:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/</guid><description>&lt;p>&lt;strong>모헤윰&lt;/strong>의 에디터 만들기 시리즈 모아보기&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/">에디터 만들기 - ContentEditable [1/3]&lt;/a>&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/">에디터 만들기 - getSelection [2/3]&lt;/a>&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/">에디터 만들기 - Markdown [3/3]&lt;/a>&lt;/p>
+&lt;hr>
+&lt;p>아니???????? 두 번째 글이 파서가 아니였네요. 저는 사실 이 글이 2부작이길 간절히 바랬는데, 1편에서 만든 에디터에 너무 끔찍한 버그가 있어서 이에 대해 정리해 보고자 합니다. 이걸로 3시간을 씨름하고 있었지만 모헤윰의 TIL 문서가 풍성해지고 있으니 긍정적이게 생각해야겠죠?&lt;/p>
+&lt;blockquote>
+&lt;p>💡 이 글은 Window 10, Chrome 107.0.5304.107 버전을 기준으로 작성되었습니다. 일부 환경에 따라 다르게 작동하는 부분이 있을 수 있습니다.&lt;/p></description></item><item><title>마크다운 만들기 - contentEditable [1/3]</title><link>https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/</link><pubDate>Tue, 22 Nov 2022 20:36:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/</guid><description>&lt;p>&lt;strong>모헤윰&lt;/strong>의 에디터 만들기 시리즈 모아보기&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/">에디터 만들기 - ContentEditable [1/3]&lt;/a>&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/">에디터 만들기 - getSelection [2/3]&lt;/a>&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/">에디터 만들기 - Markdown [3/3]&lt;/a>&lt;/p>
+&lt;hr>
+&lt;p>모헤윰의 핵심 기능 중 하나는 &lt;code>마크다운 서식 지원&lt;/code>입니다. 왜 SNS에 마크다운을 끼얹을 생각을 했나 생각해보면 최초 기획부터 있다가 기능 다이어트를 한 후 살아남았기 때문인데, 아무튼 드디어 때가 왔습니다.&lt;/p>
+&lt;p>내부적으로 에디터를 외부 라이브러리를 사용하는게 좋지 않겠냐는 이야기가 나왔는데요, 결국 직접 구현해 보기로 했지만 그 과정에서 여러 레퍼런스를 얻을 수 있었습니다. 개인적으로 멋있다고 생각한 사이트 두 가지를 소개합니다.&lt;/p></description></item><item><title>Emotion</title><link>https://prayinforrain.github.io/posts/2022/11/emotion/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/emotion/</guid><description>&lt;h2 id="tldr">🤷TL;DR&lt;/h2>
+&lt;ul>
+&lt;li>CSS-in-JS는 프로젝트 규모가 커질수록 관리하기 어려운 CSS의 문제를 보완한다.&lt;/li>
+&lt;li>emotion과 styled-components는 사용상의 차이가 거의 없으니 골라서 사용하자.&lt;/li>
+&lt;li>적절한 IDE Extension을 잘 활용하자.&lt;/li>
+&lt;li>CSS-in-JS가 모든 경우에 대한 정답이 아님을 인지하자.&lt;/li>
+&lt;/ul>
+&lt;h2 id="css-in-js">🎨CSS-in-JS&lt;/h2>
+&lt;p>CSS-in-JS는 HTML Element의 스타일을 자바스크립트 파일을 통해서 지정하는 방식입니다. .css 파일이 하던 일을 .js 파일에게 시키는 것이죠. CSS는 CSS이고, JS는 JS입니다. 왜 굳이 둘을 합쳐야만 하는 것일까요? 이 알 수 없는 발상을 이해하려면 우선 기존 css의 단점을 살펴보겠습니다.&lt;/p>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2022/11/emotion/emotion_01.png" alt="Untitled">&lt;/p></description></item><item><title>npm vs yarn vs pnpm</title><link>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</guid><description>&lt;p>지금까지 저는 아무 의심 없이 npm을 사용해왔습니다. 이따금씩 &lt;code>node_modules&lt;/code> 폴더가 저를 고통스럽게 했던 시간들이 있었지만, 프로젝트 초기화에 정말 이상한 행동만 하지 않으면 &lt;code>npm i&lt;/code> 한 줄과 커피 한 잔으로 모든게 문제 없이 동작했으니까요. 하지만 우리는 슬랙의 어떤 분을 통해, npm보다 좋은 방법이 있음을 알고 있습니다. 이번 포스트에서는 &lt;code>yarn&lt;/code>과 &lt;code>pnpm&lt;/code>을 체험해 보도록 하겠습니다.&lt;/p>
+&lt;h2 id="-tldr">🤷 TL;DR&lt;/h2>
+&lt;ul>
+&lt;li>npm의 의존성 관리는 사실 매우 비효율적이다.&lt;/li>
+&lt;li>이 문제를 보완한 패키지 매니저가 yarn, pnpm이다.&lt;/li>
+&lt;li>각 패키지 매니저로의 마이그레이션은 매우 쉽다. 긍정적으로 고려해보자.&lt;/li>
+&lt;/ul>
+&lt;h2 id="-npm">🎁 npm&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_01.png" alt="Untitled">&lt;/p></description></item><item><title>Redux vs Recoil</title><link>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</guid><description>&lt;h2 id="-tldr">🤷 TL;DR&lt;/h2>
+&lt;ul>
+&lt;li>Redux는 안정적이지만, 선언과 사용이 복잡하다.&lt;/li>
+&lt;li>Recoil은 사용이 매우 쉽지만 정식 버전이 없다.&lt;/li>
+&lt;li>프로젝트 규모에 따라 마음에 드는 라이브러리를 선택하자&lt;/li>
+&lt;/ul>
+&lt;h2 id="-서론">🚪 서론&lt;/h2>
+&lt;p>우리는 React를 사용할 때 보통 &lt;code>useState&lt;/code>를 통해 상태를 관리합니다. &lt;code>useState&lt;/code>는 정말 섹시하지만, 한 가지 너무 큰 단점이 있습니다. 바로 컴포넌트끼리 데이터를 주고받는 데 사용하기가 힘들다는 점입니다. 그 일을 하기 위해 등장한 것이 바로 &lt;strong>상태 관리 라이브러리&lt;/strong>입니다. 상태 관리 라이브러리의 필요성에 대해 공감하지 못하는 분들을 위해 짧은 토막글을 마련해 보았습니다.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/posts/2022/11/emotion/index.html b/posts/2022/11/emotion/index.html
index 76d271a..d8b582f 100644
--- a/posts/2022/11/emotion/index.html
+++ b/posts/2022/11/emotion/index.html
@@ -1,9 +1,9 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Emotion | PrayinForRain.dev</title>
-<meta property="og:title" content="Emotion | PrayinForRain.dev"><meta name=twitter:title content="Emotion | PrayinForRain.dev"><meta itemprop=name content="Emotion | PrayinForRain.dev"><meta name=application-name content="Emotion | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2022/11/emotion/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2022-11-18T16:42:55+0900><meta property="article:published_time" content=2022-11-18T16:42:55+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"Emotion","author":{"@type":"Person","name":""},"datePublished":"2022-11-18","description":"","wordCount":920,"mainEntityOfPage":"True","dateModified":"2022-11-18","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/posts/2022/11/emotion/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Emotion | PrayinForRain.dev"><meta name=twitter:title content="Emotion | PrayinForRain.dev"><meta itemprop=name content="Emotion | PrayinForRain.dev"><meta name=application-name content="Emotion | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2022/11/emotion/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2022-11-18T16:42:55+0900><meta property="article:published_time" content=2022-11-18T16:42:55+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"Emotion","author":{"@type":"Person","name":""},"datePublished":"2022-11-18","description":"","wordCount":920,"mainEntityOfPage":"True","dateModified":"2022-11-18","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/2022/11/emotion/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>Emotion</h1><div class=post-meta><time datetime=2022-11-18T16:42:55+09:00 itemprop=datePublished>2022. 11. 18.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#tldr>🤷TL;DR</a></li><li><a href=#css-in-js>🎨CSS-in-JS</a></li><li><a href=#emotionstyled>😆emotion/styled</a></li><li><a href=#emotion의-특징>📋emotion의 특징</a></li><li><a href=#함께-사용하면-좋은-확장>🔨함께 사용하면 좋은 확장</a><ul><li><ul><li><a href=#auto-rename-tag>Auto Rename Tag</a></li><li><a href=#highlight-matching-tag>Highlight Matching Tag</a></li><li><a href=#vscode-styled-components>vscode-styled-components</a></li><li><a href=#color-highlight>Color Highlight</a></li></ul></li></ul></li><li><a href=#쓰시게요>🤔쓰시게요?</a></li><li><a href=#refs>📖Refs.</a></li></ul></nav></details><div class=page-content><h1 id=tldr>🤷TL;DR</h1><ul><li>CSS-in-JS는 프로젝트 규모가 커질수록 관리하기 어려운 CSS의 문제를 보완한다.</li><li>emotion과 styled-components는 사용상의 차이가 거의 없으니 골라서 사용하자.</li><li>적절한 IDE Extension을 잘 활용하자.</li><li>CSS-in-JS가 모든 경우에 대한 정답이 아님을 인지하자.</li></ul><h1 id=css-in-js>🎨CSS-in-JS</h1><p>CSS-in-JS는 HTML Element의 스타일을 자바스크립트 파일을 통해서 지정하는 방식입니다. .css 파일이 하던 일을 .js 파일에게 시키는 것이죠. CSS는 CSS이고, JS는 JS입니다. 왜 굳이 둘을 합쳐야만 하는 것일까요? 이 알 수 없는 발상을 이해하려면 우선 기존 css의 단점을 살펴보겠습니다.</p><p><img src=/images/posts/2022/11/emotion/emotion_01.png alt=Untitled></p><p><img src=/images/posts/2022/11/emotion/emotion_02.png alt=Untitled></p><p>제가 학습 스프린트때 진행한 프로젝트 파일의 일부입니다. 사용자의 현재 위치를 표시하기 위한 컴포넌트의 스타일을 <code>location-bar</code>라는 클래스명으로 지정하고 있죠. 단순히 이 부분만 봐서는 크게 문제가 없어 보이지만, 아래와 같은 문제들이 있습니다.</p><ul><li><code>location-bar</code> 라는 클래스명은 추상적입니다.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>Emotion</h1><div class=post-meta><time datetime=2022-11-18T16:42:55+09:00 itemprop=datePublished>2022. 11. 18.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#tldr>🤷TL;DR</a></li><li><a href=#css-in-js>🎨CSS-in-JS</a></li><li><a href=#emotionstyled>😆emotion/styled</a></li><li><a href=#emotion의-특징>📋emotion의 특징</a></li><li><a href=#함께-사용하면-좋은-확장>🔨함께 사용하면 좋은 확장</a><ul><li></li></ul></li><li><a href=#쓰시게요>🤔쓰시게요?</a></li><li><a href=#refs>📖Refs.</a></li></ul></nav></details><div class=page-content><h2 id=tldr>🤷TL;DR</h2><ul><li>CSS-in-JS는 프로젝트 규모가 커질수록 관리하기 어려운 CSS의 문제를 보완한다.</li><li>emotion과 styled-components는 사용상의 차이가 거의 없으니 골라서 사용하자.</li><li>적절한 IDE Extension을 잘 활용하자.</li><li>CSS-in-JS가 모든 경우에 대한 정답이 아님을 인지하자.</li></ul><h2 id=css-in-js>🎨CSS-in-JS</h2><p>CSS-in-JS는 HTML Element의 스타일을 자바스크립트 파일을 통해서 지정하는 방식입니다. .css 파일이 하던 일을 .js 파일에게 시키는 것이죠. CSS는 CSS이고, JS는 JS입니다. 왜 굳이 둘을 합쳐야만 하는 것일까요? 이 알 수 없는 발상을 이해하려면 우선 기존 css의 단점을 살펴보겠습니다.</p><p><img src=/images/posts/2022/11/emotion/emotion_01.png alt=Untitled></p><p><img src=/images/posts/2022/11/emotion/emotion_02.png alt=Untitled></p><p>제가 학습 스프린트때 진행한 프로젝트 파일의 일부입니다. 사용자의 현재 위치를 표시하기 위한 컴포넌트의 스타일을 <code>location-bar</code>라는 클래스명으로 지정하고 있죠. 단순히 이 부분만 봐서는 크게 문제가 없어 보이지만, 아래와 같은 문제들이 있습니다.</p><ul><li><code>location-bar</code> 라는 클래스명은 추상적입니다.
 즉, 사용자의 위치를 표시하기 위한 <code>location-bar</code>는 장기적으로 다양한 페이지에서, 다양한 컴포넌트에서 활용될 수 있습니다. CSS는 그 적용 범위를 지정하는 것이 상당히 제한적이기 때문에 이런 문제를 해결하려면 클래스명을 더 길고 복잡하게 정할 수 밖에 없습니다.</li><li>css 파일은 관심사의 분리가 어렵습니다.
-당장 저 파일은 어떤 상품의 정보를 표시하기 위한 컴포넌트의 스타일만이 모여 있습니다. 상품 정보와 사용자 위치는 크게 연관이 없어보임에도 같은 페이지에 있다는 이유로 같은 파일에 있으며, 이를 수정하려면 400줄 가량 되는 파일에서 저 부분을 찾아야만 합니다.</li></ul><p>작업할 당시에는 당연한 불편함이라 생각하고 감내해 왔지만, 프로젝트 규모가 커졌을 때를 상상해 보니 머리가 시큰해집니다. 이런 문제를 해결하기 위해 등장한 것이 <strong>CSS-in-JS</strong>입니다.</p><h1 id=emotionstyled>😆emotion/styled</h1><p>React에서 사용하는 CSS-in-JS 라이브러리는 <code>styled-components</code>와 <code>emotion</code> 두 가지가 있습니다. 두 라이브러리는 사실 사용하는 입장에서 차이가 거의 없습니다. 어떤 레퍼런스를 보면 <code>emotion</code>만이 css props를 사용할 수 있다는 차이점을 이야기하지만, 지금 시점에서는 양쪽 다 지원하고 있습니다. 성능 역시 <code>emotion</code>이 앞선다는 분석이 있지만 <code>styled-components</code> 역시 최적화가 이루어지고 있고, 애초에 그렇게 큰 폭으로 차이가 나지 않기 때문에, 손에 잡히는 것 아무거나 사용해도 될 것 같습니다. 저는 <code>emotion</code>이 더 손에 익다는 이유로 <code>emotion</code>을 골랐습니다. <strong>styled</strong>라는 단어가 키보드로 잘 안 쳐 지더라구요.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-powershell data-lang=powershell><span class=line><span class=cl><span class=n>npm</span> <span class=n>i</span> <span class=nv>@emotion</span><span class=p>/</span><span class=n>styled</span> <span class=nv>@emotion</span><span class=p>/</span><span class=nb>babel-plugin</span>
+당장 저 파일은 어떤 상품의 정보를 표시하기 위한 컴포넌트의 스타일만이 모여 있습니다. 상품 정보와 사용자 위치는 크게 연관이 없어보임에도 같은 페이지에 있다는 이유로 같은 파일에 있으며, 이를 수정하려면 400줄 가량 되는 파일에서 저 부분을 찾아야만 합니다.</li></ul><p>작업할 당시에는 당연한 불편함이라 생각하고 감내해 왔지만, 프로젝트 규모가 커졌을 때를 상상해 보니 머리가 시큰해집니다. 이런 문제를 해결하기 위해 등장한 것이 <strong>CSS-in-JS</strong>입니다.</p><h2 id=emotionstyled>😆emotion/styled</h2><p>React에서 사용하는 CSS-in-JS 라이브러리는 <code>styled-components</code>와 <code>emotion</code> 두 가지가 있습니다. 두 라이브러리는 사실 사용하는 입장에서 차이가 거의 없습니다. 어떤 레퍼런스를 보면 <code>emotion</code>만이 css props를 사용할 수 있다는 차이점을 이야기하지만, 지금 시점에서는 양쪽 다 지원하고 있습니다. 성능 역시 <code>emotion</code>이 앞선다는 분석이 있지만 <code>styled-components</code> 역시 최적화가 이루어지고 있고, 애초에 그렇게 큰 폭으로 차이가 나지 않기 때문에, 손에 잡히는 것 아무거나 사용해도 될 것 같습니다. 저는 <code>emotion</code>이 더 손에 익다는 이유로 <code>emotion</code>을 골랐습니다. <strong>styled</strong>라는 단어가 키보드로 잘 안 쳐 지더라구요.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-powershell data-lang=powershell><span class=line><span class=cl><span class=n>npm</span> <span class=n>i</span> <span class=nv>@emotion</span><span class=p>/</span><span class=n>styled</span> <span class=nv>@emotion</span><span class=p>/</span><span class=nb>babel-plugin</span>
 </span></span></code></pre></div><p><code>@emotion/babel-plugin</code>은 babel을 사용하는 경우에만 설치 후 config파일의 plugins에 <code>@emotion</code>을 추가해 줍니다. 그러면 모든 준비가 끝납니다. 사용 예시를 확인하기 위해 예제 코드를 준비했습니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=kr>export</span> <span class=k>default</span> <span class=kd>function</span> <span class=nx>TestRecoil() {</span>
 </span></span><span class=line><span class=cl>  <span class=kr>const</span> <span class=p>[</span><span class=nx>count</span><span class=p>,</span> <span class=nx>setCount</span><span class=p>]</span> <span class=o>=</span> <span class=nx>useRecoilState</span><span class=p>(</span><span class=nx>counterState</span><span class=p>);</span>
 </span></span><span class=line><span class=cl>  <span class=k>return</span> <span class=p>(</span>
@@ -88,16 +88,16 @@
 </span></span><span class=line><span class=cl>    <span class=p>&lt;/</span><span class=nt>ResetButton</span><span class=p>&gt;</span>
 </span></span><span class=line><span class=cl>  <span class=p>&lt;/</span><span class=nt>WrapperDiv</span><span class=p>&gt;</span>
 </span></span><span class=line><span class=cl><span class=p>);</span>
-</span></span></code></pre></div><p><img src=/images/posts/2022/11/emotion/emotion_04.png alt=Untitled></p><p>짜잔! 스타일이 적용되었습니다. 못생긴 건 똑같지만 어쨌든 제 의도대로 못생겼네요.</p><h1 id=emotion의-특징>📋emotion의 특징</h1><p>기본적인 사용법을 알았으니, 알아두어야 할 점을 정리해봅시다.</p><p><img src=/images/posts/2022/11/emotion/emotion_05.png alt=Untitled></p><ul><li>styled component의 이름은 대문자로 시작해야 합니다. (CamelCase)
+</span></span></code></pre></div><p><img src=/images/posts/2022/11/emotion/emotion_04.png alt=Untitled></p><p>짜잔! 스타일이 적용되었습니다. 못생긴 건 똑같지만 어쨌든 제 의도대로 못생겼네요.</p><h2 id=emotion의-특징>📋emotion의 특징</h2><p>기본적인 사용법을 알았으니, 알아두어야 할 점을 정리해봅시다.</p><p><img src=/images/posts/2022/11/emotion/emotion_05.png alt=Untitled></p><ul><li>styled component의 이름은 대문자로 시작해야 합니다. (CamelCase)
 타입스크립트의 규칙이 원인인데, 스타일이 지정된 태그 각각이 하나의 컴포넌트로서 취급되기 때문에 카멜 케이스로 작성할 필요가 있습니다. 그 부분이 일관성 있기도 하구요.</li><li>스타일을 지정하는 코드를 별도의 style 파일로 분리할 수 있습니다.
 별도의 .ts 파일로 분리하고, 각각의 스타일을 export하고 import하는 것으로 사용이 가능합니다. css 파일과의 차이는 해당 컴포넌트의 스타일 정의를 IDE가 바로 찾아줄 수 있다는 점이 있습니다. VS Code 기준, Ctrl + 클릭으로 바로가기가 가능합니다!</li><li>scss 문법을 지원합니다.
 scss의 nesting 문법을 지원합니다. backquote 안에서는 완전 scss처럼 사용하면 됩니다!</li><li>class / id 선택자를 지양합시다!
 기본적으로 scss의 모든 선택자를 지원하지만, 클래스 명을 사용하는 것은 추천되지 않습니다. 애초에 컴포넌트 이름 자체가 하나의 선택자로서의 역할을 하니까요.
 어느 캠퍼분에게 들었던 내용인데 레퍼런스를 찾지 못하고 있습니다.</li></ul><blockquote><p>❓ <strong>아니 그럼 <code>.selected</code> 처럼 사용하던 클래스의 역할은 누가 하나요?</strong>
-emotion은 놀랍게도 CSS props를 지원합니다. 말 그대로 React Component에서 사용하는 Props를 그대로 CSS에서 참조할 수 있다는 뜻입니다.</p><p><img src=/images/posts/2022/11/emotion/emotion_06.png alt="제목 없음-1.png"></p><p>위와 같이 props를 참조하여 유동적인 스타일 지정이 가능합니다. 깔끔하죠? 스타일의 props interface에 선언되었는데 실제 사용에서 props 값을 지정해주지 않으면 빨간 줄을 그어 주기도 한답니다.</p></blockquote><h1 id=함께-사용하면-좋은-확장>🔨함께 사용하면 좋은 확장</h1><p>VS Code에는 emotion과 함께 사용하면 좋은 확장들이 있는데요, 짤막하게 몇 가지 소개해 보고자 합니다.</p><h3 id=auto-rename-tag>Auto Rename Tag</h3><p><img src=/images/posts/2022/11/emotion/emotion_07.png alt=Untitled></p><p><img src=/images/posts/2022/11/emotion/emotion_08.gif alt=확장1.gif></p><p>tsx, jsx를 포함한 파일에서 HTML 태그를 수정할 때 열린 태그와 닫는 태그를 동시에 수정해 주는 확장입니다. 특히 <code>div</code>같이 여러 번 사용되는 태그를 정확히 짝을 찾아서 자동으로 고쳐주기 때문에 스타일 적용이 매우 편해집니다.</p><h3 id=highlight-matching-tag>Highlight Matching Tag</h3><p><img src=/images/posts/2022/11/emotion/emotion_09.png alt=Untitled></p><p><img src=/images/posts/2022/11/emotion/emotion_10.png alt=Untitled></p><p>여는 태그와 닫는 태그가 눈에 띄도록 밑줄로 강조해 줍니다. <code>Auto Rename Tag</code>와 함께 사용하기 좋습니다.</p><h3 id=vscode-styled-components>vscode-styled-components</h3><p><img src=/images/posts/2022/11/emotion/emotion_11.png alt=Untitled></p><p><img src=/images/posts/2022/11/emotion/emotion_12.png alt=Untitled></p><p><img src=/images/posts/2022/11/emotion/emotion_13.png alt=Untitled></p><p><code>styled.tag</code>를 통해 스타일을 지정하면 css 프로퍼티가 단순 문자열로 인식되어 자동완성이 지원되지 않는데요, 이 확장을 사용하면 해당 부분이 css 프로퍼티로 인식되어 css 파일을 작성하듯 사용할 수 있습니다. 무지 좋죠?</p><h3 id=color-highlight>Color Highlight</h3><p><img src=/images/posts/2022/11/emotion/emotion_14.png alt=Untitled></p><p><img src=/images/posts/2022/11/emotion/emotion_15.png alt=Untitled></p><p>IDE 차원에서 색상의 hex code에 대한 미리보기를 지원해 줍니다. 기본적으로 미리보기를 지원해주긴 하지만 조금 더 크게 보여주는 점이 마음에 들었습니다. 스크롤을 쭉 내리다가 발견하기가 쉽거든요.</p><h1 id=쓰시게요>🤔쓰시게요?</h1><p>CSS-in-JS의 개념과 그 사용법에 대해 알아보았습니다. 그런데 <strong>CSS-in-JS는 과연 정답일까요?</strong> 얼마 전에 슬랙에서 이에 대한 흥미로운 글을 봤습니다. <a href=https://junghan92.medium.com/%EB%B2%88%EC%97%AD-%EC%9A%B0%EB%A6%AC%EA%B0%80-css-in-js%EC%99%80-%ED%97%A4%EC%96%B4%EC%A7%80%EB%8A%94-%EC%9D%B4%EC%9C%A0-a2e726d6ace6>우리가 CSS-in-JS와 헤어지는 이유</a> 라는 제목의 글인데요, Emotion의 메인 기여자 중 한 명이 이런 글을 썼다는 점에서 고민해 볼 가치는 충분할 것으로 보입니다.</p><p>성능 측면에서의 단점과 React와의 몇 가지 역시너지 문제가 있다고 하는데, 제 수준에서는 문제 상황을 체감하기도, 이해하기도 어려운 내용이지만 모든 라이브러리나 프레임워크가 그러하듯 CSS-in-JS도 그 장단점을 인지하면 상황에 따라 어느 선택이 최선인지 결정하는 데 도움이 될거라 생각합니다.</p><p><a href=https://junghan92.medium.com/%EB%B2%88%EC%97%AD-%EC%9A%B0%EB%A6%AC%EA%B0%80-css-in-js%EC%99%80-%ED%97%A4%EC%96%B4%EC%A7%80%EB%8A%94-%EC%9D%B4%EC%9C%A0-a2e726d6ace6>(번역) 우리가 CSS-in-JS와 헤어지는 이유</a></p><h1 id=refs>📖Refs.</h1><p><a href=https://github.com/jsjoeio/styled-components-vs-emotion>https://github.com/jsjoeio/styled-components-vs-emotion</a><br><a href=https://velog.io/@bepyan/styled-components-%EA%B3%BC-emotion-%EB%8F%84%EB%8C%80%EC%B2%B4-%EC%B0%A8%EC%9D%B4%EA%B0%80-%EB%AD%94%EA%B0%80#emotion%EC%9D%98-%EC%B0%A8%EB%B3%84%EC%A0%90>styled-components 과 emotion, 도대체 차이가 뭔가?</a><br><a href=https://d0gf00t.tistory.com/22>[번역] CSS-in-JS에 관해 알아야 할 모든 것</a><br><a href=https://velog.io/@prkyw1206/does-not-exist-on-type-jsx.intrinsicelements-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0>does not exist on type &lsquo;jsx.intrinsicelements&rsquo; 문제 해결</a><br><a href=https://junghan92.medium.com/%EB%B2%88%EC%97%AD-%EC%9A%B0%EB%A6%AC%EA%B0%80-css-in-js%EC%99%80-%ED%97%A4%EC%96%B4%EC%A7%80%EB%8A%94-%EC%9D%B4%EC%9C%A0-a2e726d6ace6>(번역) 우리가 CSS-in-JS와 헤어지는 이유</a><br>페어 프로그래밍 기간동안 제가 검색 한 번 없이 emotion을 능숙하게 사용할 수 있도록 인간 레퍼런스가 되어주신 <strong>J154 이정욱</strong> 캠퍼님께 감사드립니다. 🙇</p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+emotion은 놀랍게도 CSS props를 지원합니다. 말 그대로 React Component에서 사용하는 Props를 그대로 CSS에서 참조할 수 있다는 뜻입니다.</p><p><img src=/images/posts/2022/11/emotion/emotion_06.png alt="제목 없음-1.png"></p><p>위와 같이 props를 참조하여 유동적인 스타일 지정이 가능합니다. 깔끔하죠? 스타일의 props interface에 선언되었는데 실제 사용에서 props 값을 지정해주지 않으면 빨간 줄을 그어 주기도 한답니다.</p></blockquote><h2 id=함께-사용하면-좋은-확장>🔨함께 사용하면 좋은 확장</h2><p>VS Code에는 emotion과 함께 사용하면 좋은 확장들이 있는데요, 짤막하게 몇 가지 소개해 보고자 합니다.</p><h4 id=auto-rename-tag>Auto Rename Tag</h4><p><img src=/images/posts/2022/11/emotion/emotion_07.png alt=Untitled></p><p><img src=/images/posts/2022/11/emotion/emotion_08.gif alt=확장1.gif></p><p>tsx, jsx를 포함한 파일에서 HTML 태그를 수정할 때 열린 태그와 닫는 태그를 동시에 수정해 주는 확장입니다. 특히 <code>div</code>같이 여러 번 사용되는 태그를 정확히 짝을 찾아서 자동으로 고쳐주기 때문에 스타일 적용이 매우 편해집니다.</p><h4 id=highlight-matching-tag>Highlight Matching Tag</h4><p><img src=/images/posts/2022/11/emotion/emotion_09.png alt=Untitled></p><p><img src=/images/posts/2022/11/emotion/emotion_10.png alt=Untitled></p><p>여는 태그와 닫는 태그가 눈에 띄도록 밑줄로 강조해 줍니다. <code>Auto Rename Tag</code>와 함께 사용하기 좋습니다.</p><h4 id=vscode-styled-components>vscode-styled-components</h4><p><img src=/images/posts/2022/11/emotion/emotion_11.png alt=Untitled></p><p><img src=/images/posts/2022/11/emotion/emotion_12.png alt=Untitled></p><p><img src=/images/posts/2022/11/emotion/emotion_13.png alt=Untitled></p><p><code>styled.tag</code>를 통해 스타일을 지정하면 css 프로퍼티가 단순 문자열로 인식되어 자동완성이 지원되지 않는데요, 이 확장을 사용하면 해당 부분이 css 프로퍼티로 인식되어 css 파일을 작성하듯 사용할 수 있습니다. 무지 좋죠?</p><h4 id=color-highlight>Color Highlight</h4><p><img src=/images/posts/2022/11/emotion/emotion_14.png alt=Untitled></p><p><img src=/images/posts/2022/11/emotion/emotion_15.png alt=Untitled></p><p>IDE 차원에서 색상의 hex code에 대한 미리보기를 지원해 줍니다. 기본적으로 미리보기를 지원해주긴 하지만 조금 더 크게 보여주는 점이 마음에 들었습니다. 스크롤을 쭉 내리다가 발견하기가 쉽거든요.</p><h2 id=쓰시게요>🤔쓰시게요?</h2><p>CSS-in-JS의 개념과 그 사용법에 대해 알아보았습니다. 그런데 <strong>CSS-in-JS는 과연 정답일까요?</strong> 얼마 전에 슬랙에서 이에 대한 흥미로운 글을 봤습니다. <a href=https://junghan92.medium.com/%EB%B2%88%EC%97%AD-%EC%9A%B0%EB%A6%AC%EA%B0%80-css-in-js%EC%99%80-%ED%97%A4%EC%96%B4%EC%A7%80%EB%8A%94-%EC%9D%B4%EC%9C%A0-a2e726d6ace6>우리가 CSS-in-JS와 헤어지는 이유</a> 라는 제목의 글인데요, Emotion의 메인 기여자 중 한 명이 이런 글을 썼다는 점에서 고민해 볼 가치는 충분할 것으로 보입니다.</p><p>성능 측면에서의 단점과 React와의 몇 가지 역시너지 문제가 있다고 하는데, 제 수준에서는 문제 상황을 체감하기도, 이해하기도 어려운 내용이지만 모든 라이브러리나 프레임워크가 그러하듯 CSS-in-JS도 그 장단점을 인지하면 상황에 따라 어느 선택이 최선인지 결정하는 데 도움이 될거라 생각합니다.</p><p><a href=https://junghan92.medium.com/%EB%B2%88%EC%97%AD-%EC%9A%B0%EB%A6%AC%EA%B0%80-css-in-js%EC%99%80-%ED%97%A4%EC%96%B4%EC%A7%80%EB%8A%94-%EC%9D%B4%EC%9C%A0-a2e726d6ace6>(번역) 우리가 CSS-in-JS와 헤어지는 이유</a></p><h2 id=refs>📖Refs.</h2><p><a href=https://github.com/jsjoeio/styled-components-vs-emotion>https://github.com/jsjoeio/styled-components-vs-emotion</a><br><a href=https://velog.io/@bepyan/styled-components-%EA%B3%BC-emotion-%EB%8F%84%EB%8C%80%EC%B2%B4-%EC%B0%A8%EC%9D%B4%EA%B0%80-%EB%AD%94%EA%B0%80#emotion%EC%9D%98-%EC%B0%A8%EB%B3%84%EC%A0%90>styled-components 과 emotion, 도대체 차이가 뭔가?</a><br><a href=https://d0gf00t.tistory.com/22>[번역] CSS-in-JS에 관해 알아야 할 모든 것</a><br><a href=https://velog.io/@prkyw1206/does-not-exist-on-type-jsx.intrinsicelements-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0>does not exist on type &lsquo;jsx.intrinsicelements&rsquo; 문제 해결</a><br><a href=https://junghan92.medium.com/%EB%B2%88%EC%97%AD-%EC%9A%B0%EB%A6%AC%EA%B0%80-css-in-js%EC%99%80-%ED%97%A4%EC%96%B4%EC%A7%80%EB%8A%94-%EC%9D%B4%EC%9C%A0-a2e726d6ace6>(번역) 우리가 CSS-in-JS와 헤어지는 이유</a><br>페어 프로그래밍 기간동안 제가 검색 한 번 없이 emotion을 능숙하게 사용할 수 있도록 인간 레퍼런스가 되어주신 <strong>J154 이정욱</strong> 캠퍼님께 감사드립니다. 🙇</p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/2022/11/making-editor-contenteditable/index.html b/posts/2022/11/making-editor-contenteditable/index.html
index 5bd521b..2ff60b2 100644
--- a/posts/2022/11/making-editor-contenteditable/index.html
+++ b/posts/2022/11/making-editor-contenteditable/index.html
@@ -1,7 +1,7 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>마크다운 만들기 - contentEditable [1/3] | PrayinForRain.dev</title>
-<meta property="og:title" content="마크다운 만들기 - contentEditable [1/3] | PrayinForRain.dev"><meta name=twitter:title content="마크다운 만들기 - contentEditable [1/3] | PrayinForRain.dev"><meta itemprop=name content="마크다운 만들기 - contentEditable [1/3] | PrayinForRain.dev"><meta name=application-name content="마크다운 만들기 - contentEditable [1/3] | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2022-11-22T20:36:55+0900><meta property="article:published_time" content=2022-11-22T20:36:55+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"마크다운 만들기 - contentEditable [1/3]","author":{"@type":"Person","name":""},"datePublished":"2022-11-22","description":"","wordCount":865,"mainEntityOfPage":"True","dateModified":"2022-11-22","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="마크다운 만들기 - contentEditable [1/3] | PrayinForRain.dev"><meta name=twitter:title content="마크다운 만들기 - contentEditable [1/3] | PrayinForRain.dev"><meta itemprop=name content="마크다운 만들기 - contentEditable [1/3] | PrayinForRain.dev"><meta name=application-name content="마크다운 만들기 - contentEditable [1/3] | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2022-11-22T20:36:55+0900><meta property="article:published_time" content=2022-11-22T20:36:55+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"마크다운 만들기 - contentEditable [1/3]","author":{"@type":"Person","name":""},"datePublished":"2022-11-22","description":"","wordCount":865,"mainEntityOfPage":"True","dateModified":"2022-11-22","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>마크다운 만들기 - contentEditable [1/3]</h1><div class=post-meta><time datetime=2022-11-22T20:36:55+09:00 itemprop=datePublished>2022. 11. 22.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#레퍼런스-살펴보기>레퍼런스 살펴보기</a></li><li><a href=#시작해보자>시작해보자</a><ul><li><a href=#changeevent가-없는-input>ChangeEvent가 없는 Input</a></li><li><a href=#커서를-찾고-제어하기>커서를 찾고 제어하기</a></li><li><a href=#입력-데이터를-만들자>입력 데이터를 만들자</a></li></ul></li><li><a href=#서식을-어떻게-입힐까요>서식을 어떻게 입힐까요?</a></li></ul></nav></details><div class=page-content><p><strong>모헤윰</strong>의 에디터 만들기 시리즈 모아보기<br><a href=https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/>에디터 만들기 - ContentEditable [1/3]</a><br><a href=https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/>에디터 만들기 - getSelection [2/3]</a><br><a href=https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/>에디터 만들기 - Markdown [3/3]</a></p><hr><p>모헤윰의 핵심 기능 중 하나는 <code>마크다운 서식 지원</code>입니다. 왜 SNS에 마크다운을 끼얹을 생각을 했나 생각해보면 최초 기획부터 있다가 기능 다이어트를 한 후 살아남았기 때문인데, 아무튼 드디어 때가 왔습니다.</p><p>내부적으로 에디터를 외부 라이브러리를 사용하는게 좋지 않겠냐는 이야기가 나왔는데요, 결국 직접 구현해 보기로 했지만 그 과정에서 여러 레퍼런스를 얻을 수 있었습니다. 개인적으로 멋있다고 생각한 사이트 두 가지를 소개합니다.</p><p><a href=https://hackmd.io/>https://hackmd.io/</a><br><a href=https://ui.toast.com/tui-editor>https://ui.toast.com/tui-editor</a></p><h1 id=레퍼런스-살펴보기>레퍼런스 살펴보기</h1><p><img src=/images/posts/2022/11/making-editor-contenteditable/md_editor_1_01.png alt=Untitled></p><p>놀랍게도 우리가 사용하는 에디터 중 <code>textarea</code>나 <code>input</code> 태그를 사용하는 경우는 거의 없습니다. 기껏해야 깃허브의 에디터가 <code>textarea</code>로 되어 있던 기억이 나네요. <code>textarea</code>의 가장 큰 문제는 입력 칸 안에 서식을 적용할 수 없다는 점이 되겠습니다. 다시 말해, <strong>syntax highlighting</strong>이 불가능합니다. 제가 아는 한에서는요.</p><p>그 문제를 우리는 <code>div</code> 태그에 <code>contenteditable</code> 속성을 통해 해결할 수 있습니다. <code>contenteditable</code>은 <code>div</code>를 <code>textarea</code>처럼 사용할 수 있게 해주며, 중간에 <code>span</code>같은 태그로 부분 스타일 적용이 가능합니다.</p><blockquote><p>💡 <code>contenteditable</code>을 적용하면 아래와 같은 메시지가 나타납니다.</p><p><strong>A component is <code>contentEditable</code> and contains <code>children</code> managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional.</strong></p><p>이는 <code>contenteditable</code>이 적용된 태그는 사용자의 입력에 따라 새 element가 늘기도 하고, 다시 줄어들기도 하기 때문에 React 엔진이 관리할 수 없으니 그로 인한 부작용은 너 알아서 해라 라고 말하는 메시지입니다. 이 element를 더 이상 React가 지켜줄 수 없다는 경고인데요, <code>contenteditable</code> 속성이 적용된 태그에 <code>suppressContentEditableWarning</code> 속성을 같이 달아주면 비활성화됩니다.</p></blockquote><h1 id=시작해보자>시작해보자</h1><p>그럼 이제 간단하게 contenteditable을 만들어 보겠습니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=p>&lt;</span><span class=nt>div</span><span class=p>&gt;</span>
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>마크다운 만들기 - contentEditable [1/3]</h1><div class=post-meta><time datetime=2022-11-22T20:36:55+09:00 itemprop=datePublished>2022. 11. 22.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#레퍼런스-살펴보기>레퍼런스 살펴보기</a></li><li><a href=#시작해보자>시작해보자</a><ul><li><a href=#changeevent가-없는-input>ChangeEvent가 없는 Input</a></li><li><a href=#커서를-찾고-제어하기>커서를 찾고 제어하기</a></li><li><a href=#입력-데이터를-만들자>입력 데이터를 만들자</a></li></ul></li><li><a href=#서식을-어떻게-입힐까요>서식을 어떻게 입힐까요?</a></li></ul></nav></details><div class=page-content><p><strong>모헤윰</strong>의 에디터 만들기 시리즈 모아보기<br><a href=https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/>에디터 만들기 - ContentEditable [1/3]</a><br><a href=https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/>에디터 만들기 - getSelection [2/3]</a><br><a href=https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/>에디터 만들기 - Markdown [3/3]</a></p><hr><p>모헤윰의 핵심 기능 중 하나는 <code>마크다운 서식 지원</code>입니다. 왜 SNS에 마크다운을 끼얹을 생각을 했나 생각해보면 최초 기획부터 있다가 기능 다이어트를 한 후 살아남았기 때문인데, 아무튼 드디어 때가 왔습니다.</p><p>내부적으로 에디터를 외부 라이브러리를 사용하는게 좋지 않겠냐는 이야기가 나왔는데요, 결국 직접 구현해 보기로 했지만 그 과정에서 여러 레퍼런스를 얻을 수 있었습니다. 개인적으로 멋있다고 생각한 사이트 두 가지를 소개합니다.</p><p><a href=https://hackmd.io/>https://hackmd.io/</a><br><a href=https://ui.toast.com/tui-editor>https://ui.toast.com/tui-editor</a></p><h2 id=레퍼런스-살펴보기>레퍼런스 살펴보기</h2><p><img src=/images/posts/2022/11/making-editor-contenteditable/md_editor_1_01.png alt=Untitled></p><p>놀랍게도 우리가 사용하는 에디터 중 <code>textarea</code>나 <code>input</code> 태그를 사용하는 경우는 거의 없습니다. 기껏해야 깃허브의 에디터가 <code>textarea</code>로 되어 있던 기억이 나네요. <code>textarea</code>의 가장 큰 문제는 입력 칸 안에 서식을 적용할 수 없다는 점이 되겠습니다. 다시 말해, <strong>syntax highlighting</strong>이 불가능합니다. 제가 아는 한에서는요.</p><p>그 문제를 우리는 <code>div</code> 태그에 <code>contenteditable</code> 속성을 통해 해결할 수 있습니다. <code>contenteditable</code>은 <code>div</code>를 <code>textarea</code>처럼 사용할 수 있게 해주며, 중간에 <code>span</code>같은 태그로 부분 스타일 적용이 가능합니다.</p><blockquote><p>💡 <code>contenteditable</code>을 적용하면 아래와 같은 메시지가 나타납니다.</p><p><strong>A component is <code>contentEditable</code> and contains <code>children</code> managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional.</strong></p><p>이는 <code>contenteditable</code>이 적용된 태그는 사용자의 입력에 따라 새 element가 늘기도 하고, 다시 줄어들기도 하기 때문에 React 엔진이 관리할 수 없으니 그로 인한 부작용은 너 알아서 해라 라고 말하는 메시지입니다. 이 element를 더 이상 React가 지켜줄 수 없다는 경고인데요, <code>contenteditable</code> 속성이 적용된 태그에 <code>suppressContentEditableWarning</code> 속성을 같이 달아주면 비활성화됩니다.</p></blockquote><h2 id=시작해보자>시작해보자</h2><p>그럼 이제 간단하게 contenteditable을 만들어 보겠습니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=p>&lt;</span><span class=nt>div</span><span class=p>&gt;</span>
 </span></span><span class=line><span class=cl>  <span class=p>&lt;</span><span class=nt>div</span><span class=p>&gt;</span><span class=nx>Toolbar</span><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
 </span></span><span class=line><span class=cl>  <span class=p>&lt;</span><span class=nt>div</span> <span class=na>contentEditable</span><span class=p>&gt;</span><span class=nx>content</span><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
 </span></span><span class=line><span class=cl>  <span class=p>&lt;</span><span class=nt>div</span><span class=p>&gt;</span>
@@ -11,7 +11,7 @@
 </span></span><span class=line><span class=cl>  <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
 </span></span><span class=line><span class=cl><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
 </span></span></code></pre></div><p><img src=/images/posts/2022/11/making-editor-contenteditable/md_editor_1_02.png alt=Untitled>
-<img src=/images/posts/2022/11/making-editor-contenteditable/md_editor_1_03.png alt=Untitled></p><p>오.. 잘 됩니다. 왜 될까요?</p><p>개발자 도구로 까보니 개행 입력을 할 때마다 <code>div</code> 태그가 새로 생성되어 그 안에 내용이 입력되고 있습니다. 이러면 <code>contenteditable</code>이 걸린 <code>div</code>를 참조하여 <code>innerText</code>, <code>innerHTML</code>중 한 쪽을 선택해서 가져다가 사용하면 될 것 같습니다.</p><p><code>contenteditable</code>이 걸린 <code>div</code>에 css로 <code>display: inline-block;</code> 속성을 주면 개행이 <code>br</code>태그로 나눠진다고 하네요. 지금 저는 syntax highlight 기능까지 욕심을 내고 있기 때문에 부분 스타일 적용이 비교적 편해 보이는 <code>div</code>를 선택했습니다.</p><h2 id=changeevent가-없는-input>ChangeEvent가 없는 Input</h2><p>여기서 마주친 첫 번째 문제가 있었습니다. 위의 사진에서는 이쁘게 모든 행이 div태그에 감싸져 있었지만, 사실 모든 내용을 지우고 백스페이스를 한 번 더 누르면 첫 줄이 <code>contenteditable div</code> 자체의 innerText로 들어갈 수 있습니다. 무슨 소리냐면 아래 사진처럼 되는 것이죠.</p><p><img src=/images/posts/2022/11/making-editor-contenteditable/md_editor_1_04.png alt=Untitled></p><p>이것은 큰 문제입니다. 우선 첫 줄만 저런 형태로 나오면 심리적인 불편함이 있고, 두번째로 나중에 <code>syntax-highlight</code>를 구현하게 된다면 첫 줄에 한정된 버그가 쏟아져 나올 위험이 있습니다. 그래서 delete나 백스페이스 입력으로 인해 내용이 없어지면 <code>&lt;div>&lt;br/>&lt;/div></code>로 초기화 되도록 <code>onChange</code> 리스너를 추가해야겠습니다. <code>&lt;br/></code>이 포함된 이유는 비어있는 <code>div</code> 태그로 초기화하면 입력할 때 그 안으로 입력이 되지 않기 때문입니다.</p><p>그런데 문제는, <code>contenteditable</code>은 <code>onChange</code>이벤트를 지원해주지 않습니다. 정확히는 애초에 <code>input</code> 태그가 아니기 때문에, 입력한 값에 대한 이벤트를 처리할 수가 없는 것이죠. 그렇기 때문에 <code>onKeyUp</code>, <code>onKeyDown</code>같은 Key 이벤트와 <code>contenteditable</code> 태그의 <code>innerHTML</code>에 접근하는 것으로 우회해서 구현하겠습니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=kr>const</span> <span class=nx>handleKeyUp</span> <span class=o>=</span> <span class=p>(</span><span class=nx>e</span>: <span class=kt>KeyboardEvent</span><span class=p>&lt;</span><span class=nt>HTMLDivElement</span><span class=p>&gt;)</span> <span class=o>=&gt;</span> <span class=p>{</span>
+<img src=/images/posts/2022/11/making-editor-contenteditable/md_editor_1_03.png alt=Untitled></p><p>오.. 잘 됩니다. 왜 될까요?</p><p>개발자 도구로 까보니 개행 입력을 할 때마다 <code>div</code> 태그가 새로 생성되어 그 안에 내용이 입력되고 있습니다. 이러면 <code>contenteditable</code>이 걸린 <code>div</code>를 참조하여 <code>innerText</code>, <code>innerHTML</code>중 한 쪽을 선택해서 가져다가 사용하면 될 것 같습니다.</p><p><code>contenteditable</code>이 걸린 <code>div</code>에 css로 <code>display: inline-block;</code> 속성을 주면 개행이 <code>br</code>태그로 나눠진다고 하네요. 지금 저는 syntax highlight 기능까지 욕심을 내고 있기 때문에 부분 스타일 적용이 비교적 편해 보이는 <code>div</code>를 선택했습니다.</p><h3 id=changeevent가-없는-input>ChangeEvent가 없는 Input</h3><p>여기서 마주친 첫 번째 문제가 있었습니다. 위의 사진에서는 이쁘게 모든 행이 div태그에 감싸져 있었지만, 사실 모든 내용을 지우고 백스페이스를 한 번 더 누르면 첫 줄이 <code>contenteditable div</code> 자체의 innerText로 들어갈 수 있습니다. 무슨 소리냐면 아래 사진처럼 되는 것이죠.</p><p><img src=/images/posts/2022/11/making-editor-contenteditable/md_editor_1_04.png alt=Untitled></p><p>이것은 큰 문제입니다. 우선 첫 줄만 저런 형태로 나오면 심리적인 불편함이 있고, 두번째로 나중에 <code>syntax-highlight</code>를 구현하게 된다면 첫 줄에 한정된 버그가 쏟아져 나올 위험이 있습니다. 그래서 delete나 백스페이스 입력으로 인해 내용이 없어지면 <code>&lt;div>&lt;br/>&lt;/div></code>로 초기화 되도록 <code>onChange</code> 리스너를 추가해야겠습니다. <code>&lt;br/></code>이 포함된 이유는 비어있는 <code>div</code> 태그로 초기화하면 입력할 때 그 안으로 입력이 되지 않기 때문입니다.</p><p>그런데 문제는, <code>contenteditable</code>은 <code>onChange</code>이벤트를 지원해주지 않습니다. 정확히는 애초에 <code>input</code> 태그가 아니기 때문에, 입력한 값에 대한 이벤트를 처리할 수가 없는 것이죠. 그렇기 때문에 <code>onKeyUp</code>, <code>onKeyDown</code>같은 Key 이벤트와 <code>contenteditable</code> 태그의 <code>innerHTML</code>에 접근하는 것으로 우회해서 구현하겠습니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=kr>const</span> <span class=nx>handleKeyUp</span> <span class=o>=</span> <span class=p>(</span><span class=nx>e</span>: <span class=kt>KeyboardEvent</span><span class=p>&lt;</span><span class=nt>HTMLDivElement</span><span class=p>&gt;)</span> <span class=o>=&gt;</span> <span class=p>{</span>
 </span></span><span class=line><span class=cl>  <span class=k>if</span> <span class=p>(</span><span class=o>!</span><span class=nx>contentRef</span><span class=p>.</span><span class=nx>current</span><span class=p>)</span> <span class=k>return</span><span class=p>;</span>
 </span></span><span class=line><span class=cl>  <span class=kr>const</span> <span class=p>{</span> <span class=nx>key</span> <span class=p>}</span> <span class=o>=</span> <span class=nx>e</span><span class=p>;</span>
 </span></span><span class=line><span class=cl>  <span class=k>if</span> <span class=p>(</span><span class=nx>key</span> <span class=o>===</span> <span class=s2>&#34;Backspace&#34;</span> <span class=o>||</span> <span class=nx>key</span> <span class=o>===</span> <span class=s2>&#34;Delete&#34;</span><span class=p>)</span> <span class=p>{</span>
@@ -24,7 +24,7 @@
 </span></span><span class=line><span class=cl>  <span class=p>}</span>
 </span></span><span class=line><span class=cl>  <span class=nx>setContent</span><span class=p>(</span><span class=nx>contentRef</span><span class=p>.</span><span class=nx>current</span><span class=p>.</span><span class=nx>innerText</span><span class=p>.</span><span class=nx>replace</span><span class=p>(</span><span class=sr>/\n\n/g</span><span class=p>,</span> <span class=s2>&#34;\n&#34;</span><span class=p>));</span>
 </span></span><span class=line><span class=cl><span class=p>};</span>
-</span></span></code></pre></div><p><img src=/images/posts/2022/11/making-editor-contenteditable/md_editor_1_05.png alt=Untitled></p><p>잠깐의 테스트 끝에 문제가 해결되었음을 확인할 수 있었습니다.</p><h2 id=커서를-찾고-제어하기>커서를 찾고 제어하기</h2><p>이제 다 된걸까요? 때마침 게더타운에 있던 팀원분에게 결과를 공유했더니 <code>\t</code> 캐릭터 입력이 안되는 점이 아쉽다는 피드백을 주셨습니다. 음.. 마크다운 문법 자체가 개발자 친화적인 요소인데 탭키를 지원하지 않으면 곤란하니 한번 구현해 보겠습니다. 앞에서 했던 것처럼 <code>onKeyDown</code>으로 Tab 키를 가로채서 입력을 해주면 되지 않을까요? ..어? 근데 사용자 커서 위치에 탭키를 넣는 과정을 어떻게 구현할까요?</p><p>여기서 <code>window.getSelection()</code> 함수를 사용합니다. getSelection은 사용자의 커서가 어디에 있는지를 알려주는 함수인데요, 블록 지정을 했을 때, 단일 위치에 커서가 있을 때 각각 나누어서 위치 정보를 반환해 줍니다.</p><p><img src=/images/posts/2022/11/making-editor-contenteditable/md_editor_1_06.png alt=Untitled></p><p>여기서 사용할 요소는 <code>anchorOffset</code>과 <code>focusOffset</code>입니다. <code>type</code>이 <strong>Caret</strong>일 경우 두 값은 똑같이 현재 커서 위치를 가리키며, <code>type</code>이 <strong>Range</strong>인, 즉 사용자가 드래그로 블록 지정을 한 경우에는 <code>anchorOffset</code>이 드래그 시작 지점, <code>focusOffset</code>이 드래그 종료 지점을 나타냅니다. 이걸 이용해서, 사용자의 커서 위치를 알아내서, 해당 위치의 node의 innerText를 제어하면 되겠습니다. 삽입 후에 <code>window.getSelection().collapse()</code>를 이용해 입력된 문자의 바로 뒤로 커서를 옮겨주면 더 좋겠네요!</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=kr>const</span> <span class=nx>handleKeyDown</span> <span class=o>=</span> <span class=p>(</span><span class=nx>e</span>: <span class=kt>KeyboardEvent</span><span class=p>&lt;</span><span class=nt>HTMLDivElement</span><span class=p>&gt;)</span> <span class=o>=&gt;</span> <span class=p>{</span>
+</span></span></code></pre></div><p><img src=/images/posts/2022/11/making-editor-contenteditable/md_editor_1_05.png alt=Untitled></p><p>잠깐의 테스트 끝에 문제가 해결되었음을 확인할 수 있었습니다.</p><h3 id=커서를-찾고-제어하기>커서를 찾고 제어하기</h3><p>이제 다 된걸까요? 때마침 게더타운에 있던 팀원분에게 결과를 공유했더니 <code>\t</code> 캐릭터 입력이 안되는 점이 아쉽다는 피드백을 주셨습니다. 음.. 마크다운 문법 자체가 개발자 친화적인 요소인데 탭키를 지원하지 않으면 곤란하니 한번 구현해 보겠습니다. 앞에서 했던 것처럼 <code>onKeyDown</code>으로 Tab 키를 가로채서 입력을 해주면 되지 않을까요? ..어? 근데 사용자 커서 위치에 탭키를 넣는 과정을 어떻게 구현할까요?</p><p>여기서 <code>window.getSelection()</code> 함수를 사용합니다. getSelection은 사용자의 커서가 어디에 있는지를 알려주는 함수인데요, 블록 지정을 했을 때, 단일 위치에 커서가 있을 때 각각 나누어서 위치 정보를 반환해 줍니다.</p><p><img src=/images/posts/2022/11/making-editor-contenteditable/md_editor_1_06.png alt=Untitled></p><p>여기서 사용할 요소는 <code>anchorOffset</code>과 <code>focusOffset</code>입니다. <code>type</code>이 <strong>Caret</strong>일 경우 두 값은 똑같이 현재 커서 위치를 가리키며, <code>type</code>이 <strong>Range</strong>인, 즉 사용자가 드래그로 블록 지정을 한 경우에는 <code>anchorOffset</code>이 드래그 시작 지점, <code>focusOffset</code>이 드래그 종료 지점을 나타냅니다. 이걸 이용해서, 사용자의 커서 위치를 알아내서, 해당 위치의 node의 innerText를 제어하면 되겠습니다. 삽입 후에 <code>window.getSelection().collapse()</code>를 이용해 입력된 문자의 바로 뒤로 커서를 옮겨주면 더 좋겠네요!</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=kr>const</span> <span class=nx>handleKeyDown</span> <span class=o>=</span> <span class=p>(</span><span class=nx>e</span>: <span class=kt>KeyboardEvent</span><span class=p>&lt;</span><span class=nt>HTMLDivElement</span><span class=p>&gt;)</span> <span class=o>=&gt;</span> <span class=p>{</span>
 </span></span><span class=line><span class=cl>  <span class=kr>const</span> <span class=p>{</span> <span class=nx>key</span> <span class=p>}</span> <span class=o>=</span> <span class=nx>e</span><span class=p>;</span>
 </span></span><span class=line><span class=cl>  <span class=kr>const</span> <span class=nx>cursor</span> <span class=o>=</span> <span class=nb>window</span><span class=p>.</span><span class=nx>getSelection</span><span class=p>();</span>
 </span></span><span class=line><span class=cl>  <span class=k>if</span> <span class=p>(</span><span class=o>!</span><span class=nx>cursor</span><span class=p>)</span> <span class=k>return</span><span class=p>;</span>
@@ -41,12 +41,12 @@
 </span></span><span class=line><span class=cl>    <span class=p>}</span>
 </span></span><span class=line><span class=cl>  <span class=p>}</span>
 </span></span><span class=line><span class=cl><span class=p>};</span>
-</span></span></code></pre></div><p><code>\t</code> 문자를 입력하도록 했더니 탭을 연달아 입력하면 한 번만 입력이 처리되는 문제가 있어 공백 두 칸으로 대체하였습니다.</p><p><img src=/images/posts/2022/11/making-editor-contenteditable/md_editor_1_07.png alt=Untitled></p><p>제대로 작동하는군요. 마음에 듭니다!</p><h2 id=입력-데이터를-만들자>입력 데이터를 만들자</h2><p>이제 마크다운을 변환하는 작업을 하는 함수에 사용자가 입력한 결과물을 넘겨주려고 합니다. 앞서 말했던 것처럼 <code>innerText</code>를 가져와서 보내면 될 것 같아요. 그런데 문제가 생겼습니다.</p><p><img src=/images/posts/2022/11/making-editor-contenteditable/md_editor_1_08.png alt=Untitled></p><p>위 입력 결과의 innerText는 어떤 모습일까요?</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-markdown data-lang=markdown><span class=line><span class=cl>첫줄\n\n\n셋째줄\n
+</span></span></code></pre></div><p><code>\t</code> 문자를 입력하도록 했더니 탭을 연달아 입력하면 한 번만 입력이 처리되는 문제가 있어 공백 두 칸으로 대체하였습니다.</p><p><img src=/images/posts/2022/11/making-editor-contenteditable/md_editor_1_07.png alt=Untitled></p><p>제대로 작동하는군요. 마음에 듭니다!</p><h3 id=입력-데이터를-만들자>입력 데이터를 만들자</h3><p>이제 마크다운을 변환하는 작업을 하는 함수에 사용자가 입력한 결과물을 넘겨주려고 합니다. 앞서 말했던 것처럼 <code>innerText</code>를 가져와서 보내면 될 것 같아요. 그런데 문제가 생겼습니다.</p><p><img src=/images/posts/2022/11/making-editor-contenteditable/md_editor_1_08.png alt=Untitled></p><p>위 입력 결과의 innerText는 어떤 모습일까요?</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-markdown data-lang=markdown><span class=line><span class=cl>첫줄\n\n\n셋째줄\n
 </span></span></code></pre></div><p>이런.. <code>div</code> 자체가 한 줄로 입력이 되고 둘째줄 안의 <code>br</code> 태그가 개행문자를 하나 더 입력하고 있습니다. contenteditable은 빈 줄에 자동으로 <code>br</code>을 삽입하므로, 데이터를 넘기기 전에 정규표현식으로 연속된 개행문자를 하나로 합치는 작업을 거치겠습니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=nx>setContent</span><span class=p>(</span><span class=nx>contentRef</span><span class=p>.</span><span class=nx>current</span><span class=p>.</span><span class=nx>innerText</span><span class=p>.</span><span class=nx>replace</span><span class=p>(</span><span class=sr>/\n\n/g</span><span class=p>,</span> <span class=s2>&#34;\n&#34;</span><span class=p>));</span>
-</span></span></code></pre></div><p>음, 이제 데이터가 잘 정제되었네요! 이대로 데이터를 넘겨주면 되겠습니다.</p><h1 id=서식을-어떻게-입힐까요>서식을 어떻게 입힐까요?</h1><p><img src=/images/posts/2022/11/making-editor-contenteditable/md_editor_1_09.png alt=Untitled></p><p>정제한 입력값을 가지고, 정규표현식을 이용해 간단하게 <code>#</code>을 이용한 헤딩 마크다운을 추가했습니다. 그런데 이렇게 모든 규칙에 대해 코드를 하나씩 집어 넣는 방식이 좋은 방식일까요? <code>#</code>을 이용한 헤딩도 있지만 아랫줄에 <code>-</code> 또는 <code>=</code>를 입력해서 헤딩을 하는 것은 어떻게 구현할까요? 만약 헤딩과 코드블럭 마크다운이 중첩되면 어떻게 처리해야 할까요? 표를 그리는 방법은요?</p><p>생각만 해도 벌써 머리가 얼큰해지네요. 흠.. 갑자기 tokenizer, lexer, parser같은 키워드가 막 떠오르는데.. 다시 차분히 공부해 볼 필요가 있겠습니다. 다음 글의 내용이 벌써 짐작이 가는군요. 지금까지 <code>contenteditable</code>과 <code>getSelection()</code>을 활용한 과정에 대해 이야기해 보았습니다.</p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+</span></span></code></pre></div><p>음, 이제 데이터가 잘 정제되었네요! 이대로 데이터를 넘겨주면 되겠습니다.</p><h2 id=서식을-어떻게-입힐까요>서식을 어떻게 입힐까요?</h2><p><img src=/images/posts/2022/11/making-editor-contenteditable/md_editor_1_09.png alt=Untitled></p><p>정제한 입력값을 가지고, 정규표현식을 이용해 간단하게 <code>#</code>을 이용한 헤딩 마크다운을 추가했습니다. 그런데 이렇게 모든 규칙에 대해 코드를 하나씩 집어 넣는 방식이 좋은 방식일까요? <code>#</code>을 이용한 헤딩도 있지만 아랫줄에 <code>-</code> 또는 <code>=</code>를 입력해서 헤딩을 하는 것은 어떻게 구현할까요? 만약 헤딩과 코드블럭 마크다운이 중첩되면 어떻게 처리해야 할까요? 표를 그리는 방법은요?</p><p>생각만 해도 벌써 머리가 얼큰해지네요. 흠.. 갑자기 tokenizer, lexer, parser같은 키워드가 막 떠오르는데.. 다시 차분히 공부해 볼 필요가 있겠습니다. 다음 글의 내용이 벌써 짐작이 가는군요. 지금까지 <code>contenteditable</code>과 <code>getSelection()</code>을 활용한 과정에 대해 이야기해 보았습니다.</p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/2022/11/making-editor-getselection/index.html b/posts/2022/11/making-editor-getselection/index.html
index 862b78d..2b5c8f6 100644
--- a/posts/2022/11/making-editor-getselection/index.html
+++ b/posts/2022/11/making-editor-getselection/index.html
@@ -1,27 +1,27 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>마크다운 만들기 - getSelection [2/3] | PrayinForRain.dev</title>
-<meta property="og:title" content="마크다운 만들기 - getSelection [2/3] | PrayinForRain.dev"><meta name=twitter:title content="마크다운 만들기 - getSelection [2/3] | PrayinForRain.dev"><meta itemprop=name content="마크다운 만들기 - getSelection [2/3] | PrayinForRain.dev"><meta name=application-name content="마크다운 만들기 - getSelection [2/3] | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2022-11-24T00:53:55+0900><meta property="article:published_time" content=2022-11-24T00:53:55+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"마크다운 만들기 - getSelection [2/3]","author":{"@type":"Person","name":""},"datePublished":"2022-11-24","description":"","wordCount":1020,"mainEntityOfPage":"True","dateModified":"2022-11-24","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="마크다운 만들기 - getSelection [2/3] | PrayinForRain.dev"><meta name=twitter:title content="마크다운 만들기 - getSelection [2/3] | PrayinForRain.dev"><meta itemprop=name content="마크다운 만들기 - getSelection [2/3] | PrayinForRain.dev"><meta name=application-name content="마크다운 만들기 - getSelection [2/3] | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2022-11-24T00:53:55+0900><meta property="article:published_time" content=2022-11-24T00:53:55+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"마크다운 만들기 - getSelection [2/3]","author":{"@type":"Person","name":""},"datePublished":"2022-11-24","description":"","wordCount":1020,"mainEntityOfPage":"True","dateModified":"2022-11-24","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>마크다운 만들기 - getSelection [2/3]</h1><div class=post-meta><time datetime=2022-11-24T00:53:55+09:00 itemprop=datePublished>2022. 11. 24.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#-첫-단추가-중요하다>😢 첫 단추가 중요하다</a></li><li><a href=#-windowsgetselection>🖱️ windows.getSelection()</a><ul><li><a href=#contenteditable의-문제>contenteditable의 문제</a></li><li><a href=#type-selection>type Selection</a></li><li><a href=#anchornode는-node다>anchorNode는 node다</a><ul><li><a href=#텍스트-노드를-아시나요>텍스트 노드를 아시나요?</a></li></ul></li><li><a href=#nodenodetype>Node.nodeType</a></li></ul></li><li><a href=#-오버엔지니어링의-길목에서>🤦 오버엔지니어링의 길목에서</a></li></ul></nav></details><div class=page-content><p><strong>모헤윰</strong>의 에디터 만들기 시리즈 모아보기<br><a href=https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/>에디터 만들기 - ContentEditable [1/3]</a><br><a href=https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/>에디터 만들기 - getSelection [2/3]</a><br><a href=https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/>에디터 만들기 - Markdown [3/3]</a></p><hr><p>아니???????? 두 번째 글이 파서가 아니였네요. 저는 사실 이 글이 2부작이길 간절히 바랬는데, 1편에서 만든 에디터에 너무 끔찍한 버그가 있어서 이에 대해 정리해 보고자 합니다. 이걸로 3시간을 씨름하고 있었지만 모헤윰의 TIL 문서가 풍성해지고 있으니 긍정적이게 생각해야겠죠?</p><blockquote><p>💡 이 글은 Window 10, Chrome 107.0.5304.107 버전을 기준으로 작성되었습니다. 일부 환경에 따라 다르게 작동하는 부분이 있을 수 있습니다.</p></blockquote><h1 id=-첫-단추가-중요하다>😢 첫 단추가 중요하다</h1><p><img src=/images/posts/2022/11/making-editor-getselection/md_editor_2_01.png alt=Untitled></p><p>지금 만든 <code>contenteditable div</code>는 치명적 문제가 있습니다. <code>contenteditable</code>이 사진처럼 첫 줄의 텍스트를 div 태그로 감싸주지 않는다고 언급한 문제가 기억 나시나요? 사실 저는 처음 글에서 첫 줄 문제가 해결된 척 이야기한 바 있죠. 특정 상황에서는 여전히 <code>contenteditable div</code>에 직접 텍스트를 입력할 수 있었지만, 솔직하게 그 때는 어차피 syntax highlighting을 지원하지 않을 거라 생각해 쉬쉬하기로 했습니다. 그런데 아니나 다를까, 붙여넣기에서 문제가 발생했습니다.</p><p><img src=/images/posts/2022/11/making-editor-getselection/md_editor_2_02.png alt=Untitled></p><p>아무 입력도 되어 있지 않은 <code>contenteditable div</code>에 붙여넣기를 하면 위와 같은 오류가 납니다. 이 상태에서 다시 붙여넣기를 하면 그 때부턴 정상적으로 작동하는데, 어차피 이런 에러 쯤이야 콘솔을 열어놓고 웹서핑을 하는 개발자가 아니고서야 무시할 수 있는 수준이니 넘어갈 수 있겠지만, 결정적으로 붙여넣기 후 <strong>커서가 붙여넣기 한 글귀의 끝으로 이동하지 않았습니다</strong>. 아니나 다를까 탭 키에 대해서 구현했던 코드도 같은 오류가 있네요.</p><p>오늘은 이 오류의 원인과 해결 과정에 대해 기록하는 글을 써 보겠습니다.</p><h1 id=-windowsgetselection>🖱️ windows.getSelection()</h1><h2 id=contenteditable의-문제>contenteditable의 문제</h2><p>저번 글에서 공부했던 바와 같이, <code>contenteditable div</code>는 일반적인 입력 동작이 제대로 이루어지지 않습니다. 착한 사용자가 차분히 글을 입력한다고 해도 첫 줄만 <code>div</code> 태그로 감싸주지 않는다거나, 붙여넣기를 하면 대뜸 원본의 서식이 그대로 적용된 글귀가 입력되기도 합니다.</p><p><img src=/images/posts/2022/11/making-editor-getselection/md_editor_2_03.png alt=Untitled></p><p>대충 이런 느낌이죠. 그 외에도 수정을 어떻게 하느냐에 따라 결과물이 묘하게 달라지기도 하는 등, 너무나 다양한 문제가 산재해 있습니다. 서론이 너무 길었네요. 그냥 <code>con..어쩌구</code>에 대해 처음 글을 쓸 때 이런 문제들이 있다고 설명할 걸 그랬어요.</p><p>아무튼 이런 불쾌한 동작들을 해결하기 위해, <code>keydown</code>, <code>keyup</code>, <code>paste</code> 등 다양한 이벤트 리스너를 바인딩해서 직접 이런 제스쳐를 구현해야만 했습니다. 그 과정에서 소개했던 것이 바로 <code>windows.getSelection()</code>이였죠.</p><p><img src=/images/posts/2022/11/making-editor-getselection/md_editor_2_04.png alt=Untitled></p><h2 id=type-selection>type Selection</h2><p>우선 이 녀석이 제공해주는 <code>Selection</code> 타입 객체의 property를 보겠습니다.</p><table><thead><tr><th>이름</th><th>설명</th></tr></thead><tbody><tr><td>anchorNode</td><td>선택이 시작된 지점(=드래그 시작 지점)의 노드를 참조합니다.</td></tr><tr><td>anchorOffset</td><td>선택이 시작된 지점의 anchorNode상에서의 위치를 나타냅니다.</td></tr><tr><td>focusNode</td><td>선택이 끝난 지점(=드래그 종료 지점)의 노드를 참조합니다.</td></tr><tr><td>focusOffset</td><td>선택이 끝난 지점의 focusNode상에서의 위치를 나타냅니다.</td></tr><tr><td>type</td><td>블록 지정시 Range, 단일 커서는 Caret을 갖습니다.</td></tr></tbody></table><p>큰 의미 없거나 정식 스펙이 아닌 경우는 제외하고 이 정도를 알고 있으면 되겠습니다. 드래그 시작과 종료 지점을 명시한 이유는 저번 글에서 언급했던 것처럼 드래그에는 방향이 있기 때문이죠. Caret의 경우에는 항상 두 프로퍼티가 같은 값을 가질 것입니다.</p><p><code>Selection</code> 타입은 제공하는 method도 있습니다. 한번 알아보겠습니다.</p><table><thead><tr><th>이름</th><th>설명</th></tr></thead><tbody><tr><td>getRangeAt(index)</td><td>현재 선택된 index번째 Range 범위를 반환합니다. 다중 선택이 지원되는 브라우저가 아닌 경우 보통 index는 0이 최대입니다.</td></tr><tr><td>addRange(range)</td><td>현재 선택된 Range에 더해 range를 함께 선택합니다. 다중 선택이 지원되는 브라우저가 아닌 경우 range만이 재선택됩니다.</td></tr><tr><td>collapse(node, offset?)</td><td>node의 offset 위치를 선택합니다.</td></tr><tr><td>containsNode(node, partialContainment?)</td><td>node가 선택 Range 안에 포함되는지 여부를 반환합니다. partialContainment가 true인 경우 일부만 포함되어 있어도 true를 반환합니다.</td></tr></tbody></table><p>훨씬 종류가 많지만 쓰이지 않을 것 같아 길게 적지 않았습니다. 그 외에 <code>Selection</code> 타입 객체는 각 프로퍼티에 대해 얕은 참조를 제공하기 때문에 같은 이름으로 참조해도 참조 시점에 따라 값이 변할 수 있다는 특성이 있겠네요. 여기서 제가 사용했던 메소드는 <code>collapse</code>였습니다. 대충 <code>getSelection()</code>으로 받은 <code>anchorNode</code>를 그대로 사용하고, <code>anchorOffset + 추가한 문자열 길이</code>로 위치를 잡는 식이죠.</p><h2 id=anchornode는-node다>anchorNode는 node다</h2><p>그런데 이 <code>anchorOffset</code>은 상황에 따라 다르게 사용해야 합니다. 이게 무슨 소리냐면, 이 녀석을 1로 지정하면 커서가 끝으로 갈 때가 있고, 두 번째 글자로 커서가 이동할 때가 있다는 말이죠.</p><p><img src=/images/posts/2022/11/making-editor-getselection/md_editor_2_05.gif alt=복사맨2.gif></p><p>두 번째 글자로 커서가 가는건 이해가 가는데, 처음엔 왜 끝으로 갔던 걸까요? 그 비밀은 <code>getSelection</code>이 참조하던 <code>anchorNode</code>에 있습니다. <strong>첫 번째 붙여넣기와 그 이후의 붙여넣기의 anchorNode가 다르기 때문</strong>이죠. 첫 번째 붙여넣기는 <code>contenteditable div</code>를, 그 이후에는 해당 라인의 div..도 아니라 <code>그 div의 **텍스트 노드**</code>를 참조하고 있습니다.</p><h3 id=텍스트-노드를-아시나요>텍스트 노드를 아시나요?</h3><p>위에 제가 <code>console.log</code>를 찍어본 사진에는 <code>anchorNode</code>에 <code>text</code>라고 쓰여 있었습니다. 저는 <code>contenteditable div</code>의 자식 <code>div</code>중 하나를 선택하고 있었는데 말이죠. 즉 <code>getSelection</code>은 선택중인 텍스트 노드까지 따져서 참조한다는 특징을 알 수 있습니다. 텍스트 노드라.. 딱히 어느 태그에 포함되어 있지 않으면서 애매하게 텍스트만 들어있는 바로 그 <code>innerText</code>를 텍스트 노드라고 부르는 모양입니다.</p><p><img src=/images/posts/2022/11/making-editor-getselection/md_editor_2_06.png alt=Untitled></p><p>바로 요 녀석인데요, 텍스트 노드는 다른 노드와 다르게 조금 특이한 성질을 갖습니다. 다르다고 하나, 아무튼 Node 인터페이스를 상속하지만 HTML Element는 아니기 때문에 다루기가 굉장히 까다롭습니다.</p><ul><li>innerText가 비어있는, 즉 <code>‘’</code>인 Element는 텍스트 노드가 없습니다.</li><li>부모의 <code>childNodes</code>같은 프로퍼티로 접근할 수 있지만, 고정된 인덱스에 있지는 않습니다.<ul><li>즉 다른 형제 노드와의 순서에 따라 인덱스가 변합니다..</li></ul></li></ul><p>다시 돌아와서 <code>collapse</code>에 제공한 <code>offset</code>이 어째서 텍스트 상의 위치를 가리키지 않았느냐, 노드상에서의 <strong>offset은 텍스트 노드를 제외하고는 자식 노드의 인덱스를 가리키기 때문</strong>이죠. 즉 아래 과정과 같습니다.</p><p>첫 번째 복사했을 때에는 <code>anchorNode</code>가 <code>contenteditable div</code>였기 때문에, <code>offset = 1</code>에 해당하는 위치는 아래와 같습니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=p>&lt;</span><span class=nt>div</span> <span class=na>contenteditable</span><span class=p>&gt;</span>
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>마크다운 만들기 - getSelection [2/3]</h1><div class=post-meta><time datetime=2022-11-24T00:53:55+09:00 itemprop=datePublished>2022. 11. 24.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#-첫-단추가-중요하다>😢 첫 단추가 중요하다</a></li><li><a href=#-windowsgetselection>🖱️ windows.getSelection()</a><ul><li><a href=#contenteditable의-문제>contenteditable의 문제</a></li><li><a href=#type-selection>type Selection</a></li><li><a href=#anchornode는-node다>anchorNode는 node다</a></li><li><a href=#nodenodetype>Node.nodeType</a></li></ul></li><li><a href=#-오버엔지니어링의-길목에서>🤦 오버엔지니어링의 길목에서</a></li></ul></nav></details><div class=page-content><p><strong>모헤윰</strong>의 에디터 만들기 시리즈 모아보기<br><a href=https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/>에디터 만들기 - ContentEditable [1/3]</a><br><a href=https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/>에디터 만들기 - getSelection [2/3]</a><br><a href=https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/>에디터 만들기 - Markdown [3/3]</a></p><hr><p>아니???????? 두 번째 글이 파서가 아니였네요. 저는 사실 이 글이 2부작이길 간절히 바랬는데, 1편에서 만든 에디터에 너무 끔찍한 버그가 있어서 이에 대해 정리해 보고자 합니다. 이걸로 3시간을 씨름하고 있었지만 모헤윰의 TIL 문서가 풍성해지고 있으니 긍정적이게 생각해야겠죠?</p><blockquote><p>💡 이 글은 Window 10, Chrome 107.0.5304.107 버전을 기준으로 작성되었습니다. 일부 환경에 따라 다르게 작동하는 부분이 있을 수 있습니다.</p></blockquote><h2 id=-첫-단추가-중요하다>😢 첫 단추가 중요하다</h2><p><img src=/images/posts/2022/11/making-editor-getselection/md_editor_2_01.png alt=Untitled></p><p>지금 만든 <code>contenteditable div</code>는 치명적 문제가 있습니다. <code>contenteditable</code>이 사진처럼 첫 줄의 텍스트를 div 태그로 감싸주지 않는다고 언급한 문제가 기억 나시나요? 사실 저는 처음 글에서 첫 줄 문제가 해결된 척 이야기한 바 있죠. 특정 상황에서는 여전히 <code>contenteditable div</code>에 직접 텍스트를 입력할 수 있었지만, 솔직하게 그 때는 어차피 syntax highlighting을 지원하지 않을 거라 생각해 쉬쉬하기로 했습니다. 그런데 아니나 다를까, 붙여넣기에서 문제가 발생했습니다.</p><p><img src=/images/posts/2022/11/making-editor-getselection/md_editor_2_02.png alt=Untitled></p><p>아무 입력도 되어 있지 않은 <code>contenteditable div</code>에 붙여넣기를 하면 위와 같은 오류가 납니다. 이 상태에서 다시 붙여넣기를 하면 그 때부턴 정상적으로 작동하는데, 어차피 이런 에러 쯤이야 콘솔을 열어놓고 웹서핑을 하는 개발자가 아니고서야 무시할 수 있는 수준이니 넘어갈 수 있겠지만, 결정적으로 붙여넣기 후 <strong>커서가 붙여넣기 한 글귀의 끝으로 이동하지 않았습니다</strong>. 아니나 다를까 탭 키에 대해서 구현했던 코드도 같은 오류가 있네요.</p><p>오늘은 이 오류의 원인과 해결 과정에 대해 기록하는 글을 써 보겠습니다.</p><h2 id=-windowsgetselection>🖱️ windows.getSelection()</h2><h3 id=contenteditable의-문제>contenteditable의 문제</h3><p>저번 글에서 공부했던 바와 같이, <code>contenteditable div</code>는 일반적인 입력 동작이 제대로 이루어지지 않습니다. 착한 사용자가 차분히 글을 입력한다고 해도 첫 줄만 <code>div</code> 태그로 감싸주지 않는다거나, 붙여넣기를 하면 대뜸 원본의 서식이 그대로 적용된 글귀가 입력되기도 합니다.</p><p><img src=/images/posts/2022/11/making-editor-getselection/md_editor_2_03.png alt=Untitled></p><p>대충 이런 느낌이죠. 그 외에도 수정을 어떻게 하느냐에 따라 결과물이 묘하게 달라지기도 하는 등, 너무나 다양한 문제가 산재해 있습니다. 서론이 너무 길었네요. 그냥 <code>con..어쩌구</code>에 대해 처음 글을 쓸 때 이런 문제들이 있다고 설명할 걸 그랬어요.</p><p>아무튼 이런 불쾌한 동작들을 해결하기 위해, <code>keydown</code>, <code>keyup</code>, <code>paste</code> 등 다양한 이벤트 리스너를 바인딩해서 직접 이런 제스쳐를 구현해야만 했습니다. 그 과정에서 소개했던 것이 바로 <code>windows.getSelection()</code>이였죠.</p><p><img src=/images/posts/2022/11/making-editor-getselection/md_editor_2_04.png alt=Untitled></p><h3 id=type-selection>type Selection</h3><p>우선 이 녀석이 제공해주는 <code>Selection</code> 타입 객체의 property를 보겠습니다.</p><table><thead><tr><th style=text-align:left>이름</th><th style=text-align:left>설명</th></tr></thead><tbody><tr><td style=text-align:left>anchorNode</td><td style=text-align:left>선택이 시작된 지점(=드래그 시작 지점)의 노드를 참조합니다.</td></tr><tr><td style=text-align:left>anchorOffset</td><td style=text-align:left>선택이 시작된 지점의 anchorNode상에서의 위치를 나타냅니다.</td></tr><tr><td style=text-align:left>focusNode</td><td style=text-align:left>선택이 끝난 지점(=드래그 종료 지점)의 노드를 참조합니다.</td></tr><tr><td style=text-align:left>focusOffset</td><td style=text-align:left>선택이 끝난 지점의 focusNode상에서의 위치를 나타냅니다.</td></tr><tr><td style=text-align:left>type</td><td style=text-align:left>블록 지정시 Range, 단일 커서는 Caret을 갖습니다.</td></tr></tbody></table><p>큰 의미 없거나 정식 스펙이 아닌 경우는 제외하고 이 정도를 알고 있으면 되겠습니다. 드래그 시작과 종료 지점을 명시한 이유는 저번 글에서 언급했던 것처럼 드래그에는 방향이 있기 때문이죠. Caret의 경우에는 항상 두 프로퍼티가 같은 값을 가질 것입니다.</p><p><code>Selection</code> 타입은 제공하는 method도 있습니다. 한번 알아보겠습니다.</p><table><thead><tr><th style=text-align:left>이름</th><th style=text-align:left>설명</th></tr></thead><tbody><tr><td style=text-align:left>getRangeAt(index)</td><td style=text-align:left>현재 선택된 index번째 Range 범위를 반환합니다. 다중 선택이 지원되는 브라우저가 아닌 경우 보통 index는 0이 최대입니다.</td></tr><tr><td style=text-align:left>addRange(range)</td><td style=text-align:left>현재 선택된 Range에 더해 range를 함께 선택합니다. 다중 선택이 지원되는 브라우저가 아닌 경우 range만이 재선택됩니다.</td></tr><tr><td style=text-align:left>collapse(node, offset?)</td><td style=text-align:left>node의 offset 위치를 선택합니다.</td></tr><tr><td style=text-align:left>containsNode(node, partialContainment?)</td><td style=text-align:left>node가 선택 Range 안에 포함되는지 여부를 반환합니다. partialContainment가 true인 경우 일부만 포함되어 있어도 true를 반환합니다.</td></tr></tbody></table><p>훨씬 종류가 많지만 쓰이지 않을 것 같아 길게 적지 않았습니다. 그 외에 <code>Selection</code> 타입 객체는 각 프로퍼티에 대해 얕은 참조를 제공하기 때문에 같은 이름으로 참조해도 참조 시점에 따라 값이 변할 수 있다는 특성이 있겠네요. 여기서 제가 사용했던 메소드는 <code>collapse</code>였습니다. 대충 <code>getSelection()</code>으로 받은 <code>anchorNode</code>를 그대로 사용하고, <code>anchorOffset + 추가한 문자열 길이</code>로 위치를 잡는 식이죠.</p><h3 id=anchornode는-node다>anchorNode는 node다</h3><p>그런데 이 <code>anchorOffset</code>은 상황에 따라 다르게 사용해야 합니다. 이게 무슨 소리냐면, 이 녀석을 1로 지정하면 커서가 끝으로 갈 때가 있고, 두 번째 글자로 커서가 이동할 때가 있다는 말이죠.</p><p><img src=/images/posts/2022/11/making-editor-getselection/md_editor_2_05.gif alt=복사맨2.gif></p><p>두 번째 글자로 커서가 가는건 이해가 가는데, 처음엔 왜 끝으로 갔던 걸까요? 그 비밀은 <code>getSelection</code>이 참조하던 <code>anchorNode</code>에 있습니다. <strong>첫 번째 붙여넣기와 그 이후의 붙여넣기의 anchorNode가 다르기 때문</strong>이죠. 첫 번째 붙여넣기는 <code>contenteditable div</code>를, 그 이후에는 해당 라인의 div..도 아니라 <code>그 div의 **텍스트 노드**</code>를 참조하고 있습니다.</p><h4 id=텍스트-노드를-아시나요>텍스트 노드를 아시나요?</h4><p>위에 제가 <code>console.log</code>를 찍어본 사진에는 <code>anchorNode</code>에 <code>text</code>라고 쓰여 있었습니다. 저는 <code>contenteditable div</code>의 자식 <code>div</code>중 하나를 선택하고 있었는데 말이죠. 즉 <code>getSelection</code>은 선택중인 텍스트 노드까지 따져서 참조한다는 특징을 알 수 있습니다. 텍스트 노드라.. 딱히 어느 태그에 포함되어 있지 않으면서 애매하게 텍스트만 들어있는 바로 그 <code>innerText</code>를 텍스트 노드라고 부르는 모양입니다.</p><p><img src=/images/posts/2022/11/making-editor-getselection/md_editor_2_06.png alt=Untitled></p><p>바로 요 녀석인데요, 텍스트 노드는 다른 노드와 다르게 조금 특이한 성질을 갖습니다. 다르다고 하나, 아무튼 Node 인터페이스를 상속하지만 HTML Element는 아니기 때문에 다루기가 굉장히 까다롭습니다.</p><ul><li>innerText가 비어있는, 즉 <code>‘’</code>인 Element는 텍스트 노드가 없습니다.</li><li>부모의 <code>childNodes</code>같은 프로퍼티로 접근할 수 있지만, 고정된 인덱스에 있지는 않습니다.<ul><li>즉 다른 형제 노드와의 순서에 따라 인덱스가 변합니다..</li></ul></li></ul><p>다시 돌아와서 <code>collapse</code>에 제공한 <code>offset</code>이 어째서 텍스트 상의 위치를 가리키지 않았느냐, 노드상에서의 <strong>offset은 텍스트 노드를 제외하고는 자식 노드의 인덱스를 가리키기 때문</strong>이죠. 즉 아래 과정과 같습니다.</p><p>첫 번째 복사했을 때에는 <code>anchorNode</code>가 <code>contenteditable div</code>였기 때문에, <code>offset = 1</code>에 해당하는 위치는 아래와 같습니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=p>&lt;</span><span class=nt>div</span> <span class=na>contenteditable</span><span class=p>&gt;</span>
 </span></span><span class=line><span class=cl>	<span class=p>&lt;</span><span class=nt>textNode</span><span class=p>&gt;</span><span class=err>복사한</span> <span class=err>글귀입니다</span><span class=p>&lt;/</span><span class=nt>textNode</span><span class=p>&gt;</span>
-</span></span><span class=line><span class=cl>	<span class=c>&lt;!--</span> <span class=err>여기</span><span class=o>!</span> <span class=o>--&gt;</span>
+</span></span><span class=line><span class=cl>	<span class=c>&lt;!-- 여기! --&gt;</span>
 </span></span><span class=line><span class=cl><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
 </span></span></code></pre></div><p>이렇게 커서를 이동시키고 나면, <code>div</code> 태그 안의 입력은 모두 텍스트 노드 안으로 들어가게 되므로 커서는 텍스트 노드가 끝나기 직전 위치로 자동으로 보정되게 됩니다. 표현하자면 아래처럼 되겠군요.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=p>&lt;</span><span class=nt>div</span> <span class=na>contenteditable</span><span class=p>&gt;</span>
 </span></span><span class=line><span class=cl>	<span class=p>&lt;</span><span class=nt>textNode</span><span class=p>&gt;</span>
 </span></span><span class=line><span class=cl>		<span class=err>복사한</span> <span class=err>글귀입니다</span>
-</span></span><span class=line><span class=cl>		<span class=c>&lt;!--</span> <span class=err>여기</span><span class=o>!</span> <span class=o>--&gt;</span>
+</span></span><span class=line><span class=cl>		<span class=c>&lt;!-- 여기! --&gt;</span>
 </span></span><span class=line><span class=cl>	<span class=p>&lt;/</span><span class=nt>textNode</span><span class=p>&gt;</span>
 </span></span><span class=line><span class=cl><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
 </span></span></code></pre></div><p>이 상태에서 한번 더 붙여넣기를 한다면 끝에 자연스럽게 붙여넣기가 되지만, 이번에 참조하는 <code>anchorNode</code>는 텍스트노드로 변경되어 offset이 가리키는 위치는 처음 원했던 바로 그 텍스트에서의 위치가 됩니다. 두 번째 붙여넣기를 완료한 후의 커서 상태는 아래와 같이 됩니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=p>&lt;</span><span class=nt>div</span> <span class=na>contenteditable</span><span class=p>&gt;</span>
 </span></span><span class=line><span class=cl>	<span class=p>&lt;</span><span class=nt>textNode</span><span class=p>&gt;</span>
-</span></span><span class=line><span class=cl>		<span class=err>복</span><span class=c>&lt;!--</span> <span class=err>여기</span><span class=o>!</span> <span class=o>--&gt;</span><span class=err>사한</span> <span class=err>글귀입니다복사한</span> <span class=err>글귀입니다</span>
+</span></span><span class=line><span class=cl>		<span class=err>복</span><span class=c>&lt;!-- 여기! --&gt;</span><span class=err>사한</span> <span class=err>글귀입니다복사한</span> <span class=err>글귀입니다</span>
 </span></span><span class=line><span class=cl>	<span class=p>&lt;/</span><span class=nt>textNode</span><span class=p>&gt;</span>
 </span></span><span class=line><span class=cl><span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
-</span></span></code></pre></div><p>정말 끔찍하군요. offset이 노드의 타입에 따라 다르게 적용된다니! 아니 그 이전에 왜 <code>anchorNode</code>는 처음부터 텍스트노드를 잡아 주지 않는거죠?</p><h2 id=nodenodetype>Node.nodeType</h2><p>다행히 이 문제를 바로잡을 방법이 있었습니다. 바로 Node 인터페이스가 제공하는 <code>nodeType</code>인데요, 이 녀석이 1이면 Element, 3이면 Text 노드라고 하네요. 그 말인 즉 <code>anchorNode</code>가 1이거나 3일 때 다른 한 쪽으로 변환해서 통일해주면 되는데.. 앞에서 언급했듯 텍스트 노드는 참조하는 것 자체가 여간 어려운 일이 아닙니다. 그래서 제가 해결한 방법은 <code>nodeType</code>에 따라 offset을 다르게 사용하는 것입니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=kr>const</span> <span class=nx>position</span> <span class=o>=</span> <span class=nx>anchorNode</span><span class=p>.</span><span class=nx>nodeType</span> <span class=o>===</span> <span class=mi>3</span> <span class=o>?</span> <span class=nx>anchorOffset</span> <span class=o>+</span> <span class=nx>data.length</span> : <span class=kt>1</span><span class=p>;</span>
+</span></span></code></pre></div><p>정말 끔찍하군요. offset이 노드의 타입에 따라 다르게 적용된다니! 아니 그 이전에 왜 <code>anchorNode</code>는 처음부터 텍스트노드를 잡아 주지 않는거죠?</p><h3 id=nodenodetype>Node.nodeType</h3><p>다행히 이 문제를 바로잡을 방법이 있었습니다. 바로 Node 인터페이스가 제공하는 <code>nodeType</code>인데요, 이 녀석이 1이면 Element, 3이면 Text 노드라고 하네요. 그 말인 즉 <code>anchorNode</code>가 1이거나 3일 때 다른 한 쪽으로 변환해서 통일해주면 되는데.. 앞에서 언급했듯 텍스트 노드는 참조하는 것 자체가 여간 어려운 일이 아닙니다. 그래서 제가 해결한 방법은 <code>nodeType</code>에 따라 offset을 다르게 사용하는 것입니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=kr>const</span> <span class=nx>position</span> <span class=o>=</span> <span class=nx>anchorNode</span><span class=p>.</span><span class=nx>nodeType</span> <span class=o>===</span> <span class=mi>3</span> <span class=o>?</span> <span class=nx>anchorOffset</span> <span class=o>+</span> <span class=nx>data.length</span> : <span class=kt>1</span><span class=p>;</span>
 </span></span><span class=line><span class=cl><span class=nb>window</span><span class=p>.</span><span class=nx>getSelection</span><span class=p>()</span><span class=o>?</span><span class=p>.</span><span class=nx>collapse</span><span class=p>(</span><span class=nx>anchorNode</span><span class=p>,</span> <span class=nx>position</span><span class=p>);</span>
-</span></span></code></pre></div><p>텍스트 노드이면 정상적으로 길이를 더해서 끝자리를 잡아주고, 엘리먼트이면 1의 offset을 대입합니다. 이게 가능한 이유는 이 문제가 발생하는 케이스가 빈 칸에 최초 입력 시에만 발생하기 때문인데, 새로운 케이스가 발견되면 저 1을 무척 피곤하고 귀찮은 변수로 바꿔 주어야 겠네요.</p><h1 id=-오버엔지니어링의-길목에서>🤦 오버엔지니어링의 길목에서</h1><p><img src=/images/posts/2022/11/making-editor-getselection/md_editor_2_07.gif alt=고쳤맨.gif></p><p>처음에는 아주 간단한 에디터를 생각했는데, 그 <em>간단한</em> 에디터 뒤에 얼마나 깊은 심연이 있는지 몸소 두들겨 맞게 되는 요즘입니다. <code>input</code>이나 <code>textarea</code>를 썼으면 이런 긴 글을 두 개나 쓸 필요가 없었을텐데, 제가 무슨 부귀영화를 누리자고 <code>contenteditable</code>을 쓰자고 했을까요?</p><p>그럼에도 불구하고 새로운 경험을 하고 글을 쓸 수 있어서 정말 즐겁습니다. 데모 발표 시간에도 제가 즐거워해야 할텐데요, 다음 글은 드디어 마크다운을 파싱하는 과정에 대해 써볼 예정입니다. 지금 어느 난관에 부딪혀 멈춰 있는데, 여유가 된다면 아마 6주차에 리팩토링을 할 것 같네요. 화이팅!</p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+</span></span></code></pre></div><p>텍스트 노드이면 정상적으로 길이를 더해서 끝자리를 잡아주고, 엘리먼트이면 1의 offset을 대입합니다. 이게 가능한 이유는 이 문제가 발생하는 케이스가 빈 칸에 최초 입력 시에만 발생하기 때문인데, 새로운 케이스가 발견되면 저 1을 무척 피곤하고 귀찮은 변수로 바꿔 주어야 겠네요.</p><h2 id=-오버엔지니어링의-길목에서>🤦 오버엔지니어링의 길목에서</h2><p><img src=/images/posts/2022/11/making-editor-getselection/md_editor_2_07.gif alt=고쳤맨.gif></p><p>처음에는 아주 간단한 에디터를 생각했는데, 그 <em>간단한</em> 에디터 뒤에 얼마나 깊은 심연이 있는지 몸소 두들겨 맞게 되는 요즘입니다. <code>input</code>이나 <code>textarea</code>를 썼으면 이런 긴 글을 두 개나 쓸 필요가 없었을텐데, 제가 무슨 부귀영화를 누리자고 <code>contenteditable</code>을 쓰자고 했을까요?</p><p>그럼에도 불구하고 새로운 경험을 하고 글을 쓸 수 있어서 정말 즐겁습니다. 데모 발표 시간에도 제가 즐거워해야 할텐데요, 다음 글은 드디어 마크다운을 파싱하는 과정에 대해 써볼 예정입니다. 지금 어느 난관에 부딪혀 멈춰 있는데, 여유가 된다면 아마 6주차에 리팩토링을 할 것 같네요. 화이팅!</p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/2022/11/npm-vs-yarn-vs-pnpm/index.html b/posts/2022/11/npm-vs-yarn-vs-pnpm/index.html
index b42d685..195c032 100644
--- a/posts/2022/11/npm-vs-yarn-vs-pnpm/index.html
+++ b/posts/2022/11/npm-vs-yarn-vs-pnpm/index.html
@@ -1,13 +1,13 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>npm vs yarn vs pnpm | PrayinForRain.dev</title>
-<meta property="og:title" content="npm vs yarn vs pnpm | PrayinForRain.dev"><meta name=twitter:title content="npm vs yarn vs pnpm | PrayinForRain.dev"><meta itemprop=name content="npm vs yarn vs pnpm | PrayinForRain.dev"><meta name=application-name content="npm vs yarn vs pnpm | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2022-11-18T16:42:55+0900><meta property="article:published_time" content=2022-11-18T16:42:55+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"npm vs yarn vs pnpm","author":{"@type":"Person","name":""},"datePublished":"2022-11-18","description":"","wordCount":645,"mainEntityOfPage":"True","dateModified":"2022-11-18","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="npm vs yarn vs pnpm | PrayinForRain.dev"><meta name=twitter:title content="npm vs yarn vs pnpm | PrayinForRain.dev"><meta itemprop=name content="npm vs yarn vs pnpm | PrayinForRain.dev"><meta name=application-name content="npm vs yarn vs pnpm | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2022-11-18T16:42:55+0900><meta property="article:published_time" content=2022-11-18T16:42:55+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"npm vs yarn vs pnpm","author":{"@type":"Person","name":""},"datePublished":"2022-11-18","description":"","wordCount":645,"mainEntityOfPage":"True","dateModified":"2022-11-18","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>npm vs yarn vs pnpm</h1><div class=post-meta><time datetime=2022-11-18T16:42:55+09:00 itemprop=datePublished>2022. 11. 18.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#-tldr>🤷 TL;DR</a></li><li><a href=#-npm>🎁 npm</a></li><li><a href=#-yarn>🐈 Yarn</a></li><li><a href=#-pnpm>🧊 pnpm</a></li><li><a href=#-뭐가-다를까요>🤨 뭐가 다를까요..?</a></li><li><a href=#-refs>📖 Refs.</a></li></ul></nav></details><div class=page-content><p>지금까지 저는 아무 의심 없이 npm을 사용해왔습니다. 이따금씩 <code>node_modules</code> 폴더가 저를 고통스럽게 했던 시간들이 있었지만, 프로젝트 초기화에 정말 이상한 행동만 하지 않으면 <code>npm i</code> 한 줄과 커피 한 잔으로 모든게 문제 없이 동작했으니까요. 하지만 우리는 슬랙의 어떤 분을 통해, npm보다 좋은 방법이 있음을 알고 있습니다. 이번 포스트에서는 <code>yarn</code>과 <code>pnpm</code>을 체험해 보도록 하겠습니다.</p><h1 id=-tldr>🤷 TL;DR</h1><ul><li>npm의 의존성 관리는 사실 매우 비효율적이다.</li><li>이 문제를 보완한 패키지 매니저가 yarn, pnpm이다.</li><li>각 패키지 매니저로의 마이그레이션은 매우 쉽다. 긍정적으로 고려해보자.</li></ul><h1 id=-npm>🎁 npm</h1><p><img src=/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_01.png alt=Untitled></p><p>우선 npm입니다. npm에 대해 더 할 이야기는 없지만, 우선 비교를 하기 위해 기준이 될 프로젝트의 의존성을 설치하고 실행까지 진행해 보겠습니다. 이번 글에서 실험할 프로젝트는 제가 개인적으로 사용하는 React boilerplate입니다. 어떤 것들을 포함하는지는 <a href=https://github.com/prayinforrain/ReactTS_Boilerplate_v2>레포지토리의 README.md</a>를 참고해 주세요.</p><p><img src=/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_02.png alt=Untitled></p><p>설치가 되었습니다. 이대로 <code>package.json</code>에 정의된 dev 명령어를 실행하면 리액트 서버에 접속할 수 있게 됩니다.</p><p><img src=/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_03.png alt=Untitled></p><p>무난하게 진행이 되었습니다.</p><h1 id=-yarn>🐈 Yarn</h1><p>Yarn의 가장 큰 특징은, 비교적 최근에 나온 버전인 Yarn berry의 PnP 전략을 통한 파일 관리입니다. npm은 기본적으로 패키지 A, B가 C를 참조한다면 프로젝트가 C를 직접 사용하지 않는다고 해도 C를 <code>node_modules</code> 디렉토리 최상위로 호이스팅하여 최적화를 진행합니다. 하지만 이 때 A, B가 참조하는 C의 버전이 다르다면 두 버전 중 하나만이 호이스팅되며, 이후 호이스팅되지 않은 버전을 참조하는 패키지가 많아지더라도 이 구조는 변경되지 않습니다. 즉 완전한 최적화는 되지 않습니다.</p><p>반면 Yarn berry에서는 패키지의 각 버전마다 하나의 .zip 파일로 설치되고, 앞서 말한 중복 설치 문제가 발생하지 않습니다. .zip 파일로 압축되면서 얻는 용량 상의 이점도 챙길 수 있습니다. 자세한 설명은 <a href=https://toss.tech/article/node-modules-and-yarn-berry>토스 기술 블로그</a>를 읽어보세요!</p><p>그럼 이제 <a href=https://yarnpkg.com/getting-started/install>Yarn 공식 문서</a>의 설명을 따라서 설치를 진행해 보겠습니다. NodeJS의 <code>Corepack</code> 기능을 이용해야 하는 모양인데, 노드 버전 16.10을 기준으로 추가 조치가 필요한 것 같습니다. 저는 NodeJS v16.16.0을 사용중이므로 별도 설치 없이 corepack을 활성화하겠습니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=nx>corepack</span> <span class=nx>enable</span>
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>npm vs yarn vs pnpm</h1><div class=post-meta><time datetime=2022-11-18T16:42:55+09:00 itemprop=datePublished>2022. 11. 18.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#-tldr>🤷 TL;DR</a></li><li><a href=#-npm>🎁 npm</a></li><li><a href=#-yarn>🐈 Yarn</a></li><li><a href=#-pnpm>🧊 pnpm</a></li><li><a href=#-뭐가-다를까요>🤨 뭐가 다를까요..?</a></li><li><a href=#-refs>📖 Refs.</a></li></ul></nav></details><div class=page-content><p>지금까지 저는 아무 의심 없이 npm을 사용해왔습니다. 이따금씩 <code>node_modules</code> 폴더가 저를 고통스럽게 했던 시간들이 있었지만, 프로젝트 초기화에 정말 이상한 행동만 하지 않으면 <code>npm i</code> 한 줄과 커피 한 잔으로 모든게 문제 없이 동작했으니까요. 하지만 우리는 슬랙의 어떤 분을 통해, npm보다 좋은 방법이 있음을 알고 있습니다. 이번 포스트에서는 <code>yarn</code>과 <code>pnpm</code>을 체험해 보도록 하겠습니다.</p><h2 id=-tldr>🤷 TL;DR</h2><ul><li>npm의 의존성 관리는 사실 매우 비효율적이다.</li><li>이 문제를 보완한 패키지 매니저가 yarn, pnpm이다.</li><li>각 패키지 매니저로의 마이그레이션은 매우 쉽다. 긍정적으로 고려해보자.</li></ul><h2 id=-npm>🎁 npm</h2><p><img src=/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_01.png alt=Untitled></p><p>우선 npm입니다. npm에 대해 더 할 이야기는 없지만, 우선 비교를 하기 위해 기준이 될 프로젝트의 의존성을 설치하고 실행까지 진행해 보겠습니다. 이번 글에서 실험할 프로젝트는 제가 개인적으로 사용하는 React boilerplate입니다. 어떤 것들을 포함하는지는 <a href=https://github.com/prayinforrain/ReactTS_Boilerplate_v2>레포지토리의 README.md</a>를 참고해 주세요.</p><p><img src=/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_02.png alt=Untitled></p><p>설치가 되었습니다. 이대로 <code>package.json</code>에 정의된 dev 명령어를 실행하면 리액트 서버에 접속할 수 있게 됩니다.</p><p><img src=/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_03.png alt=Untitled></p><p>무난하게 진행이 되었습니다.</p><h2 id=-yarn>🐈 Yarn</h2><p>Yarn의 가장 큰 특징은, 비교적 최근에 나온 버전인 Yarn berry의 PnP 전략을 통한 파일 관리입니다. npm은 기본적으로 패키지 A, B가 C를 참조한다면 프로젝트가 C를 직접 사용하지 않는다고 해도 C를 <code>node_modules</code> 디렉토리 최상위로 호이스팅하여 최적화를 진행합니다. 하지만 이 때 A, B가 참조하는 C의 버전이 다르다면 두 버전 중 하나만이 호이스팅되며, 이후 호이스팅되지 않은 버전을 참조하는 패키지가 많아지더라도 이 구조는 변경되지 않습니다. 즉 완전한 최적화는 되지 않습니다.</p><p>반면 Yarn berry에서는 패키지의 각 버전마다 하나의 .zip 파일로 설치되고, 앞서 말한 중복 설치 문제가 발생하지 않습니다. .zip 파일로 압축되면서 얻는 용량 상의 이점도 챙길 수 있습니다. 자세한 설명은 <a href=https://toss.tech/article/node-modules-and-yarn-berry>토스 기술 블로그</a>를 읽어보세요!</p><p>그럼 이제 <a href=https://yarnpkg.com/getting-started/install>Yarn 공식 문서</a>의 설명을 따라서 설치를 진행해 보겠습니다. NodeJS의 <code>Corepack</code> 기능을 이용해야 하는 모양인데, 노드 버전 16.10을 기준으로 추가 조치가 필요한 것 같습니다. 저는 NodeJS v16.16.0을 사용중이므로 별도 설치 없이 corepack을 활성화하겠습니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=nx>corepack</span> <span class=nx>enable</span>
 </span></span><span class=line><span class=cl><span class=nx>corepack</span> <span class=nx>prepare</span> <span class=nx>yarn</span><span class=kd>@3</span><span class=p>.</span><span class=mf>2.4</span> <span class=o>--</span><span class=nx>activate</span> <span class=c1>// yarn@stable 도 가능하다고 함
 </span></span></span><span class=line><span class=cl><span class=c1></span><span class=nx>yarn</span> <span class=nx>init</span> <span class=o>-</span><span class=mi>2</span>
-</span></span></code></pre></div><blockquote><p>💡 yarn init 뒤의 <code>-2</code> 라는 플래그가 <a href=https://yarnpkg.com/features/zero-installs>Zero-Installs</a>를 위한 템플릿으로 초기화해 주는 모양인데요, Yarn2 (Berry)의 가장 큰 특징 중 하나인 <code>node_modules</code>를 대체하는 PnP 패키지 관리를 사용하기 위해 해당 플래그를 사용하는 모양입니다. <code>-2</code>를 빼고 초기화해보니 <code>node_modules</code> 폴더를 사용하도록 되더라구요. Zero-Installs에 대한 내용은 <a href=https://www.zigae.com/yarn2/>여기</a>에 나와 있습니다.</p></blockquote><p>npm으로 했던 것처럼 boilerplate 파일을 방금 초기화한 yarn 디렉토리에 복사하고 <code>yarn install</code>을 실행합니다.</p><p><img src=/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_04.png alt=Untitled></p><p>뭔가 여러 단계를 거치는 듯한 메시지를 보여주다가 설치가 완료되었습니다. <code>.yarn/cache</code> 디렉토리에 패키지들이 .zip 파일로 압축되어 들어있네요.</p><p><img src=/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_05.png alt=Untitled></p><p><img src=/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_06.png alt=Untitled></p><p>음, 그런데 이 상태로 바로 서버를 실행시킬 수가 없습니다. ESLint 플러그인도 어디가 불편한지 비명을 지르고 있구요. 이유는 모르겠지만 <code>package.json</code>에는 명시되지 않은 peer-dependency 패키지들이 빠져 있어서 그런 것 같습니다. 다행히도 <code>package.json</code>에서 자동완성과 함께 버전까지 알아서 채워주어서 적당히 적어서 <code>yarn install</code>을 다시 진행했습니다. <a href=https://github.com/yarnpkg/yarn/issues/1503>이 문제</a>에 대한 이슈를 발견했지만 답을 구하지 못하고 결국 직접 하나씩 설치하는 식으로 해결했습니다.</p><p><img src=/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_07.png alt=Untitled></p><h1 id=-pnpm>🧊 pnpm</h1><p><img src=/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_08.png alt=Untitled></p><p><a href=https://pnpm.io/ko/installation>공식 문서</a>를 참고하였고, yarn과 별 차이 없이 corepack을 통해 설치했습니다. 명령어만 보면서 했는데 문득 보니 공식 문서가 영어가 반, 한국어가 반으로 되어 있었네요. 위 사진은 글을 읽지 않고 무작정 명령어 실행하면서 찍은 사진인데, Powershell이 뭔가 해해킹킹이이 되되ㄴ는 기분이 들어서 올렸습니다.</p><p><img src=/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_09.png alt=Untitled></p><p><code>pnpm install</code>을 실행하니, peer dependency 이슈에 대한 메시지를 띄워줍니다. yarn을 사용했을 때와 같은 문제가 있네요. <a href=https://stackoverflow.com/questions/70597494/pnpm-does-not-resolve-dependencies>이 링크</a>에서 답을 찾아 <code>pnpm i --shamefully-hoist=true</code>로 설치하니 알아서 피어 의존성 패키지를 같이 설치해 줍니다.</p><p><img src=/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_10.png alt=Untitled></p><p><img src=/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_11.png alt=Untitled></p><h1 id=-뭐가-다를까요>🤨 뭐가 다를까요..?</h1><p><img src=/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_12.png alt=Untitled></p><p>사실 이 정도 테스트로 차이를 느끼기는 어렵습니다. 그래도 짧은 시간동안 각 패키지 매니저를 체험해 봤으니, 그나마 눈에 띄는 차이를 정리해보겠습니다.</p><ul><li><code>npm</code>은 <strong>독보적으로 의존성 설치가 느리고, 무거웠습니다</strong>.</li><li><code>yarn</code>의 <strong>패키지 용량이 정말 가벼웠습니다</strong>. <code>pnpm</code>은 프로젝트가 크지 않기 때문인지, <code>npm</code>과 눈에 띄는 차이는 없었습니다.</li><li><code>pnpm</code>은 <strong>peer-dependency 문제를 해결할 수 있는 플래그</strong>를 지원해 주는 것이 좋았습니다. 사실 제가 겪은 문제가 일반적인 케이스는 아닌 것 같긴 합니다.</li><li>걱정이 많았던 <code>ESLint</code>는 의외로 금방 적용되었습니다. 마이그레이션 하는데는 문제가 없을 것이다, 라는 생각이 듭니다.</li></ul><p>보안이라던지, 성능이라던지 비교를 할 수 있으면 좋겠지만, 제 실험용 프로젝트에서는 유의미한 차이를 보이지 않았습니다. 다만 <code>package.json</code>에 정의된 npm scripts를 문제없이 실행해 준다는 점이 인상 깊었습니다. javascript에서 typescript로 옮겨갈 때보다 훨씬 친절하네요.</p><h1 id=-refs>📖 Refs.</h1><p><a href=https://github.com/yarnpkg/yarn/issues/1503>https://github.com/yarnpkg/yarn/issues/1503</a><br><a href=https://toss.tech/article/node-modules-and-yarn-berry>node_modules로부터 우리를 구원해 줄 Yarn Berry</a><br><a href=https://stackoverflow.com/questions/70597494/pnpm-does-not-resolve-dependencies>pnpm does not resolve dependencies</a><br><a href=https://velog.io/@dev_boku/JavaScript-%ED%8C%A8%ED%82%A4%EC%A7%80-%EB%A7%A4%EB%8B%88%EC%A0%80-%EB%B9%84%EA%B5%90-npm-Yarn-%EB%98%90%EB%8A%94-pnpm#%EC%84%B1%EB%8A%A5-%EB%B0%8F-%EB%94%94%EC%8A%A4%ED%81%AC-%EA%B3%B5%EA%B0%84-%ED%9A%A8%EC%9C%A8%EC%84%B1>[번역] JavaScript 패키지 매니저 비교 - npm, Yarn 또는 pnpm?</a><br><a href=https://yceffort.kr/2022/05/npm-vs-yarn-vs-pnpm#%EA%B2%B0%EB%A1%A0>npm, yarn, pnpm 비교해보기</a><br><a href=https://pnpm.io/ko/installation>설치하기 | pnpm</a><br><a href=https://yarnpkg.com/getting-started/install>Installation</a><br><a href=https://www.zigae.com/yarn2/>yarn berry(yarn2) 마이그레이션 방법</a><br><a href=https://kasterra.github.io/setting-yarn-berry/>yarn berry로 React.js 프로젝트 시작하기 | Kasterra&rsquo;s Archive</a><br>그리고 부스트 컨퍼런스 테크톡에서 멋진 발표를 해 주신 <strong>J166 이휘찬</strong> 캠퍼님께 감사드립니다 🙇</p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+</span></span></code></pre></div><blockquote><p>💡 yarn init 뒤의 <code>-2</code> 라는 플래그가 <a href=https://yarnpkg.com/features/zero-installs>Zero-Installs</a>를 위한 템플릿으로 초기화해 주는 모양인데요, Yarn2 (Berry)의 가장 큰 특징 중 하나인 <code>node_modules</code>를 대체하는 PnP 패키지 관리를 사용하기 위해 해당 플래그를 사용하는 모양입니다. <code>-2</code>를 빼고 초기화해보니 <code>node_modules</code> 폴더를 사용하도록 되더라구요. Zero-Installs에 대한 내용은 <a href=https://www.zigae.com/yarn2/>여기</a>에 나와 있습니다.</p></blockquote><p>npm으로 했던 것처럼 boilerplate 파일을 방금 초기화한 yarn 디렉토리에 복사하고 <code>yarn install</code>을 실행합니다.</p><p><img src=/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_04.png alt=Untitled></p><p>뭔가 여러 단계를 거치는 듯한 메시지를 보여주다가 설치가 완료되었습니다. <code>.yarn/cache</code> 디렉토리에 패키지들이 .zip 파일로 압축되어 들어있네요.</p><p><img src=/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_05.png alt=Untitled></p><p><img src=/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_06.png alt=Untitled></p><p>음, 그런데 이 상태로 바로 서버를 실행시킬 수가 없습니다. ESLint 플러그인도 어디가 불편한지 비명을 지르고 있구요. 이유는 모르겠지만 <code>package.json</code>에는 명시되지 않은 peer-dependency 패키지들이 빠져 있어서 그런 것 같습니다. 다행히도 <code>package.json</code>에서 자동완성과 함께 버전까지 알아서 채워주어서 적당히 적어서 <code>yarn install</code>을 다시 진행했습니다. <a href=https://github.com/yarnpkg/yarn/issues/1503>이 문제</a>에 대한 이슈를 발견했지만 답을 구하지 못하고 결국 직접 하나씩 설치하는 식으로 해결했습니다.</p><p><img src=/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_07.png alt=Untitled></p><h2 id=-pnpm>🧊 pnpm</h2><p><img src=/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_08.png alt=Untitled></p><p><a href=https://pnpm.io/ko/installation>공식 문서</a>를 참고하였고, yarn과 별 차이 없이 corepack을 통해 설치했습니다. 명령어만 보면서 했는데 문득 보니 공식 문서가 영어가 반, 한국어가 반으로 되어 있었네요. 위 사진은 글을 읽지 않고 무작정 명령어 실행하면서 찍은 사진인데, Powershell이 뭔가 해해킹킹이이 되되ㄴ는 기분이 들어서 올렸습니다.</p><p><img src=/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_09.png alt=Untitled></p><p><code>pnpm install</code>을 실행하니, peer dependency 이슈에 대한 메시지를 띄워줍니다. yarn을 사용했을 때와 같은 문제가 있네요. <a href=https://stackoverflow.com/questions/70597494/pnpm-does-not-resolve-dependencies>이 링크</a>에서 답을 찾아 <code>pnpm i --shamefully-hoist=true</code>로 설치하니 알아서 피어 의존성 패키지를 같이 설치해 줍니다.</p><p><img src=/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_10.png alt=Untitled></p><p><img src=/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_11.png alt=Untitled></p><h2 id=-뭐가-다를까요>🤨 뭐가 다를까요..?</h2><p><img src=/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_12.png alt=Untitled></p><p>사실 이 정도 테스트로 차이를 느끼기는 어렵습니다. 그래도 짧은 시간동안 각 패키지 매니저를 체험해 봤으니, 그나마 눈에 띄는 차이를 정리해보겠습니다.</p><ul><li><code>npm</code>은 <strong>독보적으로 의존성 설치가 느리고, 무거웠습니다</strong>.</li><li><code>yarn</code>의 <strong>패키지 용량이 정말 가벼웠습니다</strong>. <code>pnpm</code>은 프로젝트가 크지 않기 때문인지, <code>npm</code>과 눈에 띄는 차이는 없었습니다.</li><li><code>pnpm</code>은 <strong>peer-dependency 문제를 해결할 수 있는 플래그</strong>를 지원해 주는 것이 좋았습니다. 사실 제가 겪은 문제가 일반적인 케이스는 아닌 것 같긴 합니다.</li><li>걱정이 많았던 <code>ESLint</code>는 의외로 금방 적용되었습니다. 마이그레이션 하는데는 문제가 없을 것이다, 라는 생각이 듭니다.</li></ul><p>보안이라던지, 성능이라던지 비교를 할 수 있으면 좋겠지만, 제 실험용 프로젝트에서는 유의미한 차이를 보이지 않았습니다. 다만 <code>package.json</code>에 정의된 npm scripts를 문제없이 실행해 준다는 점이 인상 깊었습니다. javascript에서 typescript로 옮겨갈 때보다 훨씬 친절하네요.</p><h2 id=-refs>📖 Refs.</h2><p><a href=https://github.com/yarnpkg/yarn/issues/1503>https://github.com/yarnpkg/yarn/issues/1503</a><br><a href=https://toss.tech/article/node-modules-and-yarn-berry>node_modules로부터 우리를 구원해 줄 Yarn Berry</a><br><a href=https://stackoverflow.com/questions/70597494/pnpm-does-not-resolve-dependencies>pnpm does not resolve dependencies</a><br><a href=https://velog.io/@dev_boku/JavaScript-%ED%8C%A8%ED%82%A4%EC%A7%80-%EB%A7%A4%EB%8B%88%EC%A0%80-%EB%B9%84%EA%B5%90-npm-Yarn-%EB%98%90%EB%8A%94-pnpm#%EC%84%B1%EB%8A%A5-%EB%B0%8F-%EB%94%94%EC%8A%A4%ED%81%AC-%EA%B3%B5%EA%B0%84-%ED%9A%A8%EC%9C%A8%EC%84%B1>[번역] JavaScript 패키지 매니저 비교 - npm, Yarn 또는 pnpm?</a><br><a href=https://yceffort.kr/2022/05/npm-vs-yarn-vs-pnpm#%EA%B2%B0%EB%A1%A0>npm, yarn, pnpm 비교해보기</a><br><a href=https://pnpm.io/ko/installation>설치하기 | pnpm</a><br><a href=https://yarnpkg.com/getting-started/install>Installation</a><br><a href=https://www.zigae.com/yarn2/>yarn berry(yarn2) 마이그레이션 방법</a><br><a href=https://kasterra.github.io/setting-yarn-berry/>yarn berry로 React.js 프로젝트 시작하기 | Kasterra&rsquo;s Archive</a><br>그리고 부스트 컨퍼런스 테크톡에서 멋진 발표를 해 주신 <strong>J166 이휘찬</strong> 캠퍼님께 감사드립니다 🙇</p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/2022/11/redux-vs-recoil/index.html b/posts/2022/11/redux-vs-recoil/index.html
index 13552f2..6209d68 100644
--- a/posts/2022/11/redux-vs-recoil/index.html
+++ b/posts/2022/11/redux-vs-recoil/index.html
@@ -1,7 +1,7 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Redux vs Recoil | PrayinForRain.dev</title>
-<meta property="og:title" content="Redux vs Recoil | PrayinForRain.dev"><meta name=twitter:title content="Redux vs Recoil | PrayinForRain.dev"><meta itemprop=name content="Redux vs Recoil | PrayinForRain.dev"><meta name=application-name content="Redux vs Recoil | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2022-11-18T16:42:55+0900><meta property="article:published_time" content=2022-11-18T16:42:55+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"Redux vs Recoil","author":{"@type":"Person","name":""},"datePublished":"2022-11-18","description":"","wordCount":1875,"mainEntityOfPage":"True","dateModified":"2022-11-18","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Redux vs Recoil | PrayinForRain.dev"><meta name=twitter:title content="Redux vs Recoil | PrayinForRain.dev"><meta itemprop=name content="Redux vs Recoil | PrayinForRain.dev"><meta name=application-name content="Redux vs Recoil | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2022-11-18T16:42:55+0900><meta property="article:published_time" content=2022-11-18T16:42:55+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"Redux vs Recoil","author":{"@type":"Person","name":""},"datePublished":"2022-11-18","description":"","wordCount":1875,"mainEntityOfPage":"True","dateModified":"2022-11-18","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>Redux vs Recoil</h1><div class=post-meta><time datetime=2022-11-18T16:42:55+09:00 itemprop=datePublished>2022. 11. 18.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#-tldr>🤷 TL;DR</a></li><li><a href=#-서론>🚪 서론</a><ul><li><a href=#-상태-관리-라이브러리는-왜-사용하나요>✅ 상태 관리 라이브러리는 왜 사용하나요?</a></li></ul></li><li><a href=#-redux>🏬 Redux</a><ul><li><a href=#redux에-대해araboja>Redux에 대해.araboja</a></li><li><a href=#사용해-봅시다>사용해 봅시다</a></li><li><a href=#그래서-redux-쓰나요>그래서 Redux 쓰나요?</a><ul><li><a href=#장점>장점</a></li><li><a href=#단점>단점</a></li></ul></li></ul></li><li><a href=#-recoil>🔋 Recoil</a><ul><li><a href=#리-하리코일-하이라는-뜻>리-하(리코일 하이라는 뜻)</a></li><li><a href=#사용해-봅시다-1>사용해 봅시다</a></li><li><a href=#그래서-recoil-쓰나요>그래서 Recoil 쓰나요?</a><ul><li><a href=#장점-1>장점</a></li><li><a href=#단점-1>단점</a></li></ul></li></ul></li><li><a href=#-그래서-뭐-쓰나요>❓ 그래서 뭐 쓰나요?</a></li><li><a href=#-refs>📖 Refs.</a></li></ul></nav></details><div class=page-content><h1 id=-tldr>🤷 TL;DR</h1><ul><li>Redux는 안정적이지만, 선언과 사용이 복잡하다.</li><li>Recoil은 사용이 매우 쉽지만 정식 버전이 없다.</li><li>프로젝트 규모에 따라 마음에 드는 라이브러리를 선택하자</li></ul><h1 id=-서론>🚪 서론</h1><p>우리는 React를 사용할 때 보통 <code>useState</code>를 통해 상태를 관리합니다. <code>useState</code>는 정말 섹시하지만, 한 가지 너무 큰 단점이 있습니다. 바로 컴포넌트끼리 데이터를 주고받는 데 사용하기가 힘들다는 점입니다. 그 일을 하기 위해 등장한 것이 바로 <strong>상태 관리 라이브러리</strong>입니다. 상태 관리 라이브러리의 필요성에 대해 공감하지 못하는 분들을 위해 짧은 토막글을 마련해 보았습니다.</p><h2 id=-상태-관리-라이브러리는-왜-사용하나요>✅ 상태 관리 라이브러리는 왜 사용하나요?</h2><p>유저가 로그인해 있는 정보를 담은 state가 있다고 가정하면 Root 컴포넌트를 아래와 같이 작성할 수 있습니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-jsx data-lang=jsx><span class=line><span class=cl><span class=kr>export</span> <span class=k>default</span> <span class=kd>function</span> <span class=nx>App</span><span class=p>()</span> <span class=p>{</span>
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>Redux vs Recoil</h1><div class=post-meta><time datetime=2022-11-18T16:42:55+09:00 itemprop=datePublished>2022. 11. 18.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#-tldr>🤷 TL;DR</a></li><li><a href=#-서론>🚪 서론</a><ul><li><a href=#-상태-관리-라이브러리는-왜-사용하나요>✅ 상태 관리 라이브러리는 왜 사용하나요?</a></li></ul></li><li><a href=#-redux>🏬 Redux</a><ul><li><a href=#redux에-대해araboja>Redux에 대해.araboja</a></li><li><a href=#사용해-봅시다>사용해 봅시다</a></li><li><a href=#그래서-redux-쓰나요>그래서 Redux 쓰나요?</a></li></ul></li><li><a href=#-recoil>🔋 Recoil</a><ul><li><a href=#리-하리코일-하이라는-뜻>리-하(리코일 하이라는 뜻)</a></li><li><a href=#사용해-봅시다-1>사용해 봅시다</a></li><li><a href=#그래서-recoil-쓰나요>그래서 Recoil 쓰나요?</a></li></ul></li><li><a href=#-그래서-뭐-쓰나요>❓ 그래서 뭐 쓰나요?</a></li><li><a href=#-refs>📖 Refs.</a></li></ul></nav></details><div class=page-content><h2 id=-tldr>🤷 TL;DR</h2><ul><li>Redux는 안정적이지만, 선언과 사용이 복잡하다.</li><li>Recoil은 사용이 매우 쉽지만 정식 버전이 없다.</li><li>프로젝트 규모에 따라 마음에 드는 라이브러리를 선택하자</li></ul><h2 id=-서론>🚪 서론</h2><p>우리는 React를 사용할 때 보통 <code>useState</code>를 통해 상태를 관리합니다. <code>useState</code>는 정말 섹시하지만, 한 가지 너무 큰 단점이 있습니다. 바로 컴포넌트끼리 데이터를 주고받는 데 사용하기가 힘들다는 점입니다. 그 일을 하기 위해 등장한 것이 바로 <strong>상태 관리 라이브러리</strong>입니다. 상태 관리 라이브러리의 필요성에 대해 공감하지 못하는 분들을 위해 짧은 토막글을 마련해 보았습니다.</p><h3 id=-상태-관리-라이브러리는-왜-사용하나요>✅ 상태 관리 라이브러리는 왜 사용하나요?</h3><p>유저가 로그인해 있는 정보를 담은 state가 있다고 가정하면 Root 컴포넌트를 아래와 같이 작성할 수 있습니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-jsx data-lang=jsx><span class=line><span class=cl><span class=kr>export</span> <span class=k>default</span> <span class=kd>function</span> <span class=nx>App</span><span class=p>()</span> <span class=p>{</span>
 </span></span><span class=line><span class=cl>  <span class=kr>const</span> <span class=p>[</span><span class=nx>userInfo</span><span class=p>,</span> <span class=nx>setUserInfo</span><span class=p>]</span> <span class=o>=</span> <span class=nx>useState</span><span class=p>(</span><span class=s2>&#34;not logged in&#34;</span><span class=p>);</span>
 </span></span><span class=line><span class=cl>  <span class=k>return</span> <span class=p>(</span>
 </span></span><span class=line><span class=cl>    <span class=p>&lt;</span><span class=nt>React.StrictMode</span><span class=p>&gt;</span>
@@ -75,7 +75,7 @@
 </span></span><span class=line><span class=cl>    <span class=p>&lt;/</span><span class=nt>React.StrictMode</span><span class=p>&gt;</span>
 </span></span><span class=line><span class=cl>  <span class=p>);</span>
 </span></span><span class=line><span class=cl><span class=p>}</span>
-</span></span></code></pre></div><p>아직도 버틸 만 하신가요? 그럼 마지막으로 <code>**Service3</code>의 하위 컴포넌트인 <code>ChildComponent1</code>에서 변경한 데이터 값을 <code>Service1</code>의 하위 컴포넌트인 <code>ChildComponent2</code>로 전달해 주려면 어떻게 해야 할까요?**</p><p>그래서 우리 팀은 상태 관리 라이브러리를 어떤 것을 사용할지 고민했습니다. 당장 회의에서 거론되었던 라이브러리는 Redux, Recoil, Context API, Mobx 정도가 있는데요, 오늘은 그 중에 Redux와 Recoil에 대해 가볍게 알아보고 비교해 보는 시간을 가졌습니다. 이 글에서는 작동 원리보다는 사용상의 장단점을 중심으로 정리해보겠습니다.</p><h1 id=-redux>🏬 Redux</h1><h2 id=redux에-대해araboja>Redux에 대해.araboja</h2><p><img src=/images/posts/2022/11/redux-vs-recoil/redux_vs_recoil_01.png alt=Untitled></p><p>Redux는 상태 관리 라이브러리 중에서도 가장 대중적인 친구입니다. 아마 recoil처럼 리액트에 종속적이지도 않고, mobx보다 오래되었기 때문이 아닐까요? 아무튼 npm trends에서 확인할 수 있는 것처럼 압도적인 커뮤니티 크기를 자랑합니다. 레퍼런스가 무척 많고, 음.. 레퍼런스가 무척 많습니다. 한글로 검색해도 당장 이 글을 쓸 이유가 있나 싶을 정도로 지나치게 많은 정리글이 나오네요.</p><p><img src=/images/posts/2022/11/redux-vs-recoil/redux_vs_recoil_02.png alt=Untitled></p><p>Redux는 Flux 아키텍쳐를 개선한 구조로 상태를 관리합니다. <strong>1) 읽기 전용인 상태를 2) 하나의 store가 3) 순수함수를 이용해 갱신한다</strong>는 세 가지 메인 컨셉이 있다고 하네요. 더 자세한 설명은 <a href=https://labs.tadigital.com/index.php/2020/04/20/getting-started-with-redux/>위 사진의 출처 링크</a>에 잘 설명이 되어 있습니다.</p><h2 id=사용해-봅시다>사용해 봅시다</h2><div class=highlight><pre tabindex=0 class=chroma><code class=language-powershell data-lang=powershell><span class=line><span class=cl><span class=n>npm</span> <span class=n>i</span> <span class=n>redux</span> <span class=nb>react-redux</span> <span class=nv>@reduxjs</span><span class=p>/</span><span class=n>toolkit</span>
+</span></span></code></pre></div><p>아직도 버틸 만 하신가요? 그럼 마지막으로 <code>**Service3</code>의 하위 컴포넌트인 <code>ChildComponent1</code>에서 변경한 데이터 값을 <code>Service1</code>의 하위 컴포넌트인 <code>ChildComponent2</code>로 전달해 주려면 어떻게 해야 할까요?**</p><p>그래서 우리 팀은 상태 관리 라이브러리를 어떤 것을 사용할지 고민했습니다. 당장 회의에서 거론되었던 라이브러리는 Redux, Recoil, Context API, Mobx 정도가 있는데요, 오늘은 그 중에 Redux와 Recoil에 대해 가볍게 알아보고 비교해 보는 시간을 가졌습니다. 이 글에서는 작동 원리보다는 사용상의 장단점을 중심으로 정리해보겠습니다.</p><h2 id=-redux>🏬 Redux</h2><h3 id=redux에-대해araboja>Redux에 대해.araboja</h3><p><img src=/images/posts/2022/11/redux-vs-recoil/redux_vs_recoil_01.png alt=Untitled></p><p>Redux는 상태 관리 라이브러리 중에서도 가장 대중적인 친구입니다. 아마 recoil처럼 리액트에 종속적이지도 않고, mobx보다 오래되었기 때문이 아닐까요? 아무튼 npm trends에서 확인할 수 있는 것처럼 압도적인 커뮤니티 크기를 자랑합니다. 레퍼런스가 무척 많고, 음.. 레퍼런스가 무척 많습니다. 한글로 검색해도 당장 이 글을 쓸 이유가 있나 싶을 정도로 지나치게 많은 정리글이 나오네요.</p><p><img src=/images/posts/2022/11/redux-vs-recoil/redux_vs_recoil_02.png alt=Untitled></p><p>Redux는 Flux 아키텍쳐를 개선한 구조로 상태를 관리합니다. <strong>1) 읽기 전용인 상태를 2) 하나의 store가 3) 순수함수를 이용해 갱신한다</strong>는 세 가지 메인 컨셉이 있다고 하네요. 더 자세한 설명은 <a href=https://labs.tadigital.com/index.php/2020/04/20/getting-started-with-redux/>위 사진의 출처 링크</a>에 잘 설명이 되어 있습니다.</p><h3 id=사용해-봅시다>사용해 봅시다</h3><div class=highlight><pre tabindex=0 class=chroma><code class=language-powershell data-lang=powershell><span class=line><span class=cl><span class=n>npm</span> <span class=n>i</span> <span class=n>redux</span> <span class=nb>react-redux</span> <span class=nv>@reduxjs</span><span class=p>/</span><span class=n>toolkit</span>
 </span></span></code></pre></div><p>우선 세 가지 패키지를 설치하겠습니다. <code>@reduxjs/toolkit</code> 이라는 패키지는 redux를 조금 더 편하게 사용할 수 있도록 도와주는 도구인데요, 개인적으로 RTK 없이 리덕스를 처음 시작하기가 굉장히 어려웠기 때문에 사용하는 쪽으로 길을 틀었습니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=c1>// count.ts
 </span></span></span><span class=line><span class=cl><span class=c1></span><span class=kr>import</span> <span class=p>{</span> <span class=nx>createSlice</span><span class=p>,</span> <span class=nx>PayloadAction</span> <span class=p>}</span> <span class=kr>from</span> <span class=s2>&#34;@reduxjs/toolkit&#34;</span><span class=p>;</span>
 </span></span><span class=line><span class=cl>
@@ -165,7 +165,7 @@
 </span></span><span class=line><span class=cl>	<span class=p>...</span>
 </span></span><span class=line><span class=cl>	<span class=p>);</span>
 </span></span><span class=line><span class=cl><span class=p>}</span>
-</span></span></code></pre></div><p>실제 사용은 위와 같이 합니다. 참조할 상태는 <code>useSelector</code>로, action은 <code>useDispatch</code>를 이용해 발생시킵니다. 개인적으로는 action 메소드를 import해왔는데 그걸 바로 사용하지 못하고 <code>useDispatch</code>를 통해 사용해야 한다는 점이 조금 이상하게 느껴졌습니다. 또 타입 오류가 있었는데, 이를 위해 <code>RootState</code>라는 반환 타입을 선언해서 사용해야 합니다. <code>store.ts</code> 코드에 보이는 것처럼 아무데나 사용해도 될 만큼 추상화가 되어있는 타입인데 기본으로 지원해주지 않는 것은 조금 아쉽습니다.</p><p><img src=/images/posts/2022/11/redux-vs-recoil/redux_vs_recoil_04.gif alt=리덕스.gif></p><p>아주 무쌩긴 컴포넌트를 통해 제대로 작동함을 확인할 수 있었습니다.</p><h2 id=그래서-redux-쓰나요>그래서 Redux 쓰나요?</h2><h3 id=장점>장점</h3><ul><li>레퍼런스가 매우 많습니다.</li><li>글에는 언급하지 않았지만 Redux Devtools를 통해 디버깅을 지원해 준다고 합니다.</li><li>(Recoil과 비교해서) 안정적이고, 믿을 수 있습니다. 저만 잘 사용한다면요.</li></ul><h3 id=단점>단점</h3><ul><li>reducer, store, type 등등 상태 하나를 추가하기 위한 코드가 정말 깁니다.</li><li>레퍼런스가 <strong>너무</strong> 많습니다.</li><li>위의 두 문제점으로 인해 진입장벽이 굉장히 높았습니다.</li></ul><p>Redux에 대한 첫 인상은 굉장히 불친절했습니다. 커뮤니티가 큰 것은 좋은데, 진짜 너무 대박 크다보니 레퍼런스들이 서로 반대 방향으로 저를 이끄는 경우가 꽤 많았습니다. 실제로 저도 대학교 프로젝트를 하면서 이런 점 때문에 Redux를 포기하고 props를 마구 내렸다 올렸다 하는 원시적인 방법을 선택하기도 했구요.</p><p>그럼에도 불구하고 Redux를 사용할 줄 아는 것은 중요합니다. 커뮤니티가 크니까요. 기회가 될 때마다 상태 관리 라이브러리에 대한 질문을 해 보면, 큰 프로젝트에서는 아직 Redux를 사용하는 경우가 많다는 답변을 듣곤 합니다. 또 주변의 Redux맨들에게 물어보면 몇 번 겪어보면 금방 익숙해진다고 하니, 첫 고비를 넘기고 나면 잘 사용할 수 있지 않을까.. 그런 기대를 해 봅니다.</p><h1 id=-recoil>🔋 Recoil</h1><h2 id=리-하리코일-하이라는-뜻>리-하(리코일 하이라는 뜻)</h2><p>이번엔 Recoil을 체험해 볼 차례입니다. Recoil로 말할 것 같으면 리액트를 만든 페이스북이 직접 공개한 상태 관리 라이브러리입니다.</p><p>우리 모두가 React가 자바스크립트로 동작한다는 것을 알고 있지만, 리액트와 자바스크립트가 조금 다른 세계처럼 느껴지는 분들이 있을 것입니다. 이를테면, React를 위해 만들어진 패키지는 React에서 사용하고, VanilaJS를 위해 만들어진 패키지는 VanilaJS에서밖에 쓸 수 없는 것처럼 생각하는 분들이 있죠.</p><p><img src=/images/posts/2022/11/redux-vs-recoil/redux_vs_recoil_05.png alt=Untitled></p><p>이런 거리감때문에 많은 라이브러리에서 직접 <strong>‘React스러운’</strong> 방식으로 사용할 수 있도록 지원하기도 합니다. 위 사진은 저번 프로젝트에서 사용했던 캔버스 라이브러리 <code>konva</code>의 리액트 버전, <code>react-konva</code> 코드 일부입니다.</p><p>제가 이 이야기를 왜 하는 것일까요? <code>Recoil</code>은, 오직 <strong>React만을 위해 만들어진 React 상태 관리 라이브러리</strong>이기 때문입니다. 이 점을 가장 큰 특징으로 말씀드릴 수 있겠네요. 그 외에도 atom 구조를 통해서 상태를 관리 어쩌구.. 하는 작동 방식에 대한 내용이 있습니다. 이 글에서 하지 않기로 한 이야기네요.</p><h2 id=사용해-봅시다-1>사용해 봅시다</h2><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=nx>npm</span> <span class=nx>i</span> <span class=nx>recoil</span>
+</span></span></code></pre></div><p>실제 사용은 위와 같이 합니다. 참조할 상태는 <code>useSelector</code>로, action은 <code>useDispatch</code>를 이용해 발생시킵니다. 개인적으로는 action 메소드를 import해왔는데 그걸 바로 사용하지 못하고 <code>useDispatch</code>를 통해 사용해야 한다는 점이 조금 이상하게 느껴졌습니다. 또 타입 오류가 있었는데, 이를 위해 <code>RootState</code>라는 반환 타입을 선언해서 사용해야 합니다. <code>store.ts</code> 코드에 보이는 것처럼 아무데나 사용해도 될 만큼 추상화가 되어있는 타입인데 기본으로 지원해주지 않는 것은 조금 아쉽습니다.</p><p><img src=/images/posts/2022/11/redux-vs-recoil/redux_vs_recoil_04.gif alt=리덕스.gif></p><p>아주 무쌩긴 컴포넌트를 통해 제대로 작동함을 확인할 수 있었습니다.</p><h3 id=그래서-redux-쓰나요>그래서 Redux 쓰나요?</h3><h4 id=장점>장점</h4><ul><li>레퍼런스가 매우 많습니다.</li><li>글에는 언급하지 않았지만 Redux Devtools를 통해 디버깅을 지원해 준다고 합니다.</li><li>(Recoil과 비교해서) 안정적이고, 믿을 수 있습니다. 저만 잘 사용한다면요.</li></ul><h4 id=단점>단점</h4><ul><li>reducer, store, type 등등 상태 하나를 추가하기 위한 코드가 정말 깁니다.</li><li>레퍼런스가 <strong>너무</strong> 많습니다.</li><li>위의 두 문제점으로 인해 진입장벽이 굉장히 높았습니다.</li></ul><p>Redux에 대한 첫 인상은 굉장히 불친절했습니다. 커뮤니티가 큰 것은 좋은데, 진짜 너무 대박 크다보니 레퍼런스들이 서로 반대 방향으로 저를 이끄는 경우가 꽤 많았습니다. 실제로 저도 대학교 프로젝트를 하면서 이런 점 때문에 Redux를 포기하고 props를 마구 내렸다 올렸다 하는 원시적인 방법을 선택하기도 했구요.</p><p>그럼에도 불구하고 Redux를 사용할 줄 아는 것은 중요합니다. 커뮤니티가 크니까요. 기회가 될 때마다 상태 관리 라이브러리에 대한 질문을 해 보면, 큰 프로젝트에서는 아직 Redux를 사용하는 경우가 많다는 답변을 듣곤 합니다. 또 주변의 Redux맨들에게 물어보면 몇 번 겪어보면 금방 익숙해진다고 하니, 첫 고비를 넘기고 나면 잘 사용할 수 있지 않을까.. 그런 기대를 해 봅니다.</p><h2 id=-recoil>🔋 Recoil</h2><h3 id=리-하리코일-하이라는-뜻>리-하(리코일 하이라는 뜻)</h3><p>이번엔 Recoil을 체험해 볼 차례입니다. Recoil로 말할 것 같으면 리액트를 만든 페이스북이 직접 공개한 상태 관리 라이브러리입니다.</p><p>우리 모두가 React가 자바스크립트로 동작한다는 것을 알고 있지만, 리액트와 자바스크립트가 조금 다른 세계처럼 느껴지는 분들이 있을 것입니다. 이를테면, React를 위해 만들어진 패키지는 React에서 사용하고, VanilaJS를 위해 만들어진 패키지는 VanilaJS에서밖에 쓸 수 없는 것처럼 생각하는 분들이 있죠.</p><p><img src=/images/posts/2022/11/redux-vs-recoil/redux_vs_recoil_05.png alt=Untitled></p><p>이런 거리감때문에 많은 라이브러리에서 직접 <strong>‘React스러운’</strong> 방식으로 사용할 수 있도록 지원하기도 합니다. 위 사진은 저번 프로젝트에서 사용했던 캔버스 라이브러리 <code>konva</code>의 리액트 버전, <code>react-konva</code> 코드 일부입니다.</p><p>제가 이 이야기를 왜 하는 것일까요? <code>Recoil</code>은, 오직 <strong>React만을 위해 만들어진 React 상태 관리 라이브러리</strong>이기 때문입니다. 이 점을 가장 큰 특징으로 말씀드릴 수 있겠네요. 그 외에도 atom 구조를 통해서 상태를 관리 어쩌구.. 하는 작동 방식에 대한 내용이 있습니다. 이 글에서 하지 않기로 한 이야기네요.</p><h3 id=사용해-봅시다-1>사용해 봅시다</h3><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=nx>npm</span> <span class=nx>i</span> <span class=nx>recoil</span>
 </span></span></code></pre></div><p>설치해 줍니다. redux와 비교했을 때 별다른 설치를 요구하지 않긴 한데, 흠.. 별 생각은 들지 않습니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=c1>// atom.ts
 </span></span></span><span class=line><span class=cl><span class=c1></span><span class=kr>import</span> <span class=p>{</span> <span class=nx>atom</span> <span class=p>}</span> <span class=kr>from</span> <span class=s2>&#34;recoil&#34;</span><span class=p>;</span>
 </span></span><span class=line><span class=cl>
@@ -208,10 +208,10 @@
 </span></span><span class=line><span class=cl>	<span class=p>...</span>
 </span></span><span class=line><span class=cl>	<span class=p>);</span>
 </span></span><span class=line><span class=cl><span class=p>}</span>
-</span></span></code></pre></div><p>Recoil은 <code>useState</code> 훅과 같은 사용법을 갖습니다. import만 잘 해줬다면, <code>useRecoilState</code>를 통해 atom을 사용하겠다 선언하고 바로 사용할 수 있습니다. Recoil의 강점이 드러나는 부분이네요. 참조만 하는 경우에는 <code>useRecoilValue</code>, 할당만 하는 경우에는 <code>useSetRecoilState</code> 를 통해 한 쪽만 사용할 수도 있습니다.</p><p><img src=/images/posts/2022/11/redux-vs-recoil/redux_vs_recoil_06.gif alt=리코일.gif></p><p>결과물은 Redux와 똑같이 동작합니다.</p><h2 id=그래서-recoil-쓰나요>그래서 Recoil 쓰나요?</h2><h3 id=장점-1>장점</h3><ul><li>React스러움</li><li>atom의 선언이 간단하다</li></ul><h3 id=단점-1>단점</h3><ul><li>아직 실험적 기능(experimental feature)이다</li><li>메모리 누수 문제</li><li>React에 종속적이다.</li></ul><p>그렇습니다. 요약만 봐도 느껴지지만 Recoil은 그렇게 <strong>안정적인 라이브러리가 아닙니다.</strong> 우선 레포지토리 자체가 facebookexperimental에 있고, <a href="https://github.com/facebookexperimental/Recoil/issues?q=is%3Aissue+is%3Aopen+memory">issue에 검색</a>해보면 메모리 누수에 대한 레포트가 꽤 많습니다. 이런 문제 때문에 Recoil은 아직까지도 ‘리액트스럽다’는 압도적인 강점을 가지고도 그렇게 좋은 성적을 내지 못하고 있습니다. 실제 서비스를 구현하는데 ‘실험적 기능’에 상태 관리를 믿고 맡길 수 있을까요? React를 위한 라이브러리이다 보니 React 생태계에서 벗어난다면 또 다른 라이브러리를 공부해야 한다는 점도 문제가 될 것 같네요. 메모리 누수 문제에 대해 더 자세히 알고 싶으시면 <a href=https://medium.com/@altoo/recoil%EC%9D%98-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EB%88%84%EC%88%98-%EB%AC%B8%EC%A0%9C-fb709973acf2>이 링크</a>를 참고하세요.</p><p>하지만 Recoil은 분명 매력적입니다. 특히 React를 통해 구현한다면 Recoil의 매력을 뿌리치기란 쉽지 않습니다. 왜냐면 Recoil은 <strong>React스러우니까요.</strong> useState를 쓰는 것과 완전 똑같이 전역 상태를 관리한다니, 이 특성 하나만으로도 선택할 이유는 충분해 보입니다.</p><h1 id=-그래서-뭐-쓰나요>❓ 그래서 뭐 쓰나요?</h1><p><img src=/images/posts/2022/11/redux-vs-recoil/redux_vs_recoil_07.png alt=Untitled></p><p>Redux와 Recoil에 대해 알아봤습니다. 사실 우리 프로젝트에 적용할 라이브러리를 선택하기 위해 공부했는데, 공부하고 나니 더 복잡해지네요. 하지만 어느 한 쪽이 ‘좋다’고 결론지을 수 있는 문제는 아니고 팥붕을 먹을지 슈붕을 먹을지, 그 날의 기분에 따라 달라지는 그런 선택일 것 같습니다. 참고로 저는 팥을 싫어합니다.</p><p>앞으로의 프로젝트에서 제가 라이브러리를 고른다면 어떤 기준으로 정할 수 있을까요? 저는 프로젝트의 규모를 기준으로 결정할 것 같습니다. 사실 Redux는 안정적이지만 토이 프로젝트에 적용하기에는 너무 많은 밑작업을 필요로 하거든요. 반면 커다란 프로젝트를 해야 한다면 Redux를 사용해야 할 날이 올 수도 있겠죠. 덧붙이자면 컴퍼니데이 때 어떤 기업에서는 Redux와 Recoil을 함께 사용한다는 답변을 주시기도 했습니다.</p><h1 id=-refs>📖 Refs.</h1><p><a href=https://stackoverflow.com/questions/61570021/typescript-and-redux-tool-kit-createslice-assignment-to-property-of-function>TypeScript and redux tool kit , createSlice: Assignment to property of function parameter &lsquo;state&rsquo;</a><br><a href=https://labs.tadigital.com/index.php/2020/04/20/getting-started-with-redux/>Getting Started with Redux</a><br><a href=https://mong-blog.tistory.com/entry/%EB%A7%A4%EA%B0%9C%EB%B3%80%EC%88%98-%EC%9E%AC%ED%95%A0%EB%8B%B9%EC%9D%84-%EC%A7%80%EC%96%91%ED%95%98%EC%9E%90no-param-reassign>매개변수 재할당을 지양하자(no-param-reassign)</a><br><a href=https://bluelight.co/blog/redux-toolkit-with-typescript>Redux Toolkit with Typescript: How to Get Started</a><br><a href=https://recoiljs.org/docs/api-reference/core/RecoilRoot/>RecoilRoot | Recoil</a><br><a href=https://leego.tistory.com/entry/React-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC%EC%9D%98-%EB%AF%B8%EB%9E%98-Recoil%EC%9D%84-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90>React스러운 상태관리 라이브러리, Recoil을 알아보자</a><br><a href=https://medium.com/@altoo/recoil%EC%9D%98-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EB%88%84%EC%88%98-%EB%AC%B8%EC%A0%9C-fb709973acf2>Recoil의 메모리 누수 문제</a><br>그리고 부스트캠프 컨퍼런스를 통해 Recoil에 대해 설명해 주신 <strong>J039 김성은</strong> 캠퍼님께 감사의 인사를 올립니다. 🙇</p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+</span></span></code></pre></div><p>Recoil은 <code>useState</code> 훅과 같은 사용법을 갖습니다. import만 잘 해줬다면, <code>useRecoilState</code>를 통해 atom을 사용하겠다 선언하고 바로 사용할 수 있습니다. Recoil의 강점이 드러나는 부분이네요. 참조만 하는 경우에는 <code>useRecoilValue</code>, 할당만 하는 경우에는 <code>useSetRecoilState</code> 를 통해 한 쪽만 사용할 수도 있습니다.</p><p><img src=/images/posts/2022/11/redux-vs-recoil/redux_vs_recoil_06.gif alt=리코일.gif></p><p>결과물은 Redux와 똑같이 동작합니다.</p><h3 id=그래서-recoil-쓰나요>그래서 Recoil 쓰나요?</h3><h4 id=장점-1>장점</h4><ul><li>React스러움</li><li>atom의 선언이 간단하다</li></ul><h4 id=단점-1>단점</h4><ul><li>아직 실험적 기능(experimental feature)이다</li><li>메모리 누수 문제</li><li>React에 종속적이다.</li></ul><p>그렇습니다. 요약만 봐도 느껴지지만 Recoil은 그렇게 <strong>안정적인 라이브러리가 아닙니다.</strong> 우선 레포지토리 자체가 facebookexperimental에 있고, <a href="https://github.com/facebookexperimental/Recoil/issues?q=is%3Aissue+is%3Aopen+memory">issue에 검색</a>해보면 메모리 누수에 대한 레포트가 꽤 많습니다. 이런 문제 때문에 Recoil은 아직까지도 ‘리액트스럽다’는 압도적인 강점을 가지고도 그렇게 좋은 성적을 내지 못하고 있습니다. 실제 서비스를 구현하는데 ‘실험적 기능’에 상태 관리를 믿고 맡길 수 있을까요? React를 위한 라이브러리이다 보니 React 생태계에서 벗어난다면 또 다른 라이브러리를 공부해야 한다는 점도 문제가 될 것 같네요. 메모리 누수 문제에 대해 더 자세히 알고 싶으시면 <a href=https://medium.com/@altoo/recoil%EC%9D%98-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EB%88%84%EC%88%98-%EB%AC%B8%EC%A0%9C-fb709973acf2>이 링크</a>를 참고하세요.</p><p>하지만 Recoil은 분명 매력적입니다. 특히 React를 통해 구현한다면 Recoil의 매력을 뿌리치기란 쉽지 않습니다. 왜냐면 Recoil은 <strong>React스러우니까요.</strong> useState를 쓰는 것과 완전 똑같이 전역 상태를 관리한다니, 이 특성 하나만으로도 선택할 이유는 충분해 보입니다.</p><h2 id=-그래서-뭐-쓰나요>❓ 그래서 뭐 쓰나요?</h2><p><img src=/images/posts/2022/11/redux-vs-recoil/redux_vs_recoil_07.png alt=Untitled></p><p>Redux와 Recoil에 대해 알아봤습니다. 사실 우리 프로젝트에 적용할 라이브러리를 선택하기 위해 공부했는데, 공부하고 나니 더 복잡해지네요. 하지만 어느 한 쪽이 ‘좋다’고 결론지을 수 있는 문제는 아니고 팥붕을 먹을지 슈붕을 먹을지, 그 날의 기분에 따라 달라지는 그런 선택일 것 같습니다. 참고로 저는 팥을 싫어합니다.</p><p>앞으로의 프로젝트에서 제가 라이브러리를 고른다면 어떤 기준으로 정할 수 있을까요? 저는 프로젝트의 규모를 기준으로 결정할 것 같습니다. 사실 Redux는 안정적이지만 토이 프로젝트에 적용하기에는 너무 많은 밑작업을 필요로 하거든요. 반면 커다란 프로젝트를 해야 한다면 Redux를 사용해야 할 날이 올 수도 있겠죠. 덧붙이자면 컴퍼니데이 때 어떤 기업에서는 Redux와 Recoil을 함께 사용한다는 답변을 주시기도 했습니다.</p><h2 id=-refs>📖 Refs.</h2><p><a href=https://stackoverflow.com/questions/61570021/typescript-and-redux-tool-kit-createslice-assignment-to-property-of-function>TypeScript and redux tool kit , createSlice: Assignment to property of function parameter &lsquo;state&rsquo;</a><br><a href=https://labs.tadigital.com/index.php/2020/04/20/getting-started-with-redux/>Getting Started with Redux</a><br><a href=https://mong-blog.tistory.com/entry/%EB%A7%A4%EA%B0%9C%EB%B3%80%EC%88%98-%EC%9E%AC%ED%95%A0%EB%8B%B9%EC%9D%84-%EC%A7%80%EC%96%91%ED%95%98%EC%9E%90no-param-reassign>매개변수 재할당을 지양하자(no-param-reassign)</a><br><a href=https://bluelight.co/blog/redux-toolkit-with-typescript>Redux Toolkit with Typescript: How to Get Started</a><br><a href=https://recoiljs.org/docs/api-reference/core/RecoilRoot/>RecoilRoot | Recoil</a><br><a href=https://leego.tistory.com/entry/React-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC%EC%9D%98-%EB%AF%B8%EB%9E%98-Recoil%EC%9D%84-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90>React스러운 상태관리 라이브러리, Recoil을 알아보자</a><br><a href=https://medium.com/@altoo/recoil%EC%9D%98-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EB%88%84%EC%88%98-%EB%AC%B8%EC%A0%9C-fb709973acf2>Recoil의 메모리 누수 문제</a><br>그리고 부스트캠프 컨퍼런스를 통해 Recoil에 대해 설명해 주신 <strong>J039 김성은</strong> 캠퍼님께 감사의 인사를 올립니다. 🙇</p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/2022/12/finishing-moheyum/index.html b/posts/2022/12/finishing-moheyum/index.html
index de124b1..d81eb66 100644
--- a/posts/2022/12/finishing-moheyum/index.html
+++ b/posts/2022/12/finishing-moheyum/index.html
@@ -1,11 +1,11 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>모헤윰 mo:heyum - 프로젝트 회고 | PrayinForRain.dev</title>
-<meta property="og:title" content="모헤윰 mo:heyum - 프로젝트 회고 | PrayinForRain.dev"><meta name=twitter:title content="모헤윰 mo:heyum - 프로젝트 회고 | PrayinForRain.dev"><meta itemprop=name content="모헤윰 mo:heyum - 프로젝트 회고 | PrayinForRain.dev"><meta name=application-name content="모헤윰 mo:heyum - 프로젝트 회고 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2022/12/finishing-moheyum/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2022-12-21T03:30:25+0900><meta property="article:published_time" content=2022-12-21T03:30:25+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"모헤윰 mo:heyum - 프로젝트 회고","author":{"@type":"Person","name":""},"datePublished":"2022-12-21","description":"","wordCount":1894,"mainEntityOfPage":"True","dateModified":"2022-12-21","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/posts/2022/12/finishing-moheyum/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="모헤윰 mo:heyum - 프로젝트 회고 | PrayinForRain.dev"><meta name=twitter:title content="모헤윰 mo:heyum - 프로젝트 회고 | PrayinForRain.dev"><meta itemprop=name content="모헤윰 mo:heyum - 프로젝트 회고 | PrayinForRain.dev"><meta name=application-name content="모헤윰 mo:heyum - 프로젝트 회고 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2022/12/finishing-moheyum/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2022-12-21T03:30:25+0900><meta property="article:published_time" content=2022-12-21T03:30:25+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"모헤윰 mo:heyum - 프로젝트 회고","author":{"@type":"Person","name":""},"datePublished":"2022-12-21","description":"","wordCount":1894,"mainEntityOfPage":"True","dateModified":"2022-12-21","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/2022/12/finishing-moheyum/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>모헤윰 mo:heyum - 프로젝트 회고</h1><div class=post-meta><time datetime=2022-12-21T03:30:25+09:00 itemprop=datePublished>2022. 12. 21.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#풀스택-경험을-위한-필드-스왑>풀스택 경험을 위한 필드 스왑</a><ul><li><a href=#pros>Pros.</a><ul><li><a href=#프론트엔드--백엔드가-서로를-이해하고-소통이-가능하다>프론트엔드 / 백엔드가 서로를 이해하고 소통이 가능하다.</a></li><li><a href=#팀원이-분야를-가리지-않고-모든-코드에-책임이-생긴다>팀원이 분야를 가리지 않고 모든 코드에 책임이 생긴다.</a></li><li><a href=#학습-공유가-훨씬-쉬워진다>학습 공유가 훨씬 쉬워진다.</a></li></ul></li><li><a href=#cons>Cons.</a><ul><li><a href=#코드-품질-저하가-일어났다>코드 품질 저하가 일어났다.</a></li><li><a href=#남의-영역이라는-부담이-생긴다내-기준>&lsquo;남의 영역&rsquo;이라는 부담이 생긴다.(내 기준)</a></li></ul></li></ul></li><li><a href=#기획-단계에서의-문제>기획 단계에서의 문제</a><ul><li><a href=#백로그-자체를-명확하게-하지-않았다>백로그 자체를 명확하게 하지 않았다.</a></li><li><a href=#기획과-계획을-충분히-디테일하게-정하지-못했다>기획과 계획을 충분히 디테일하게 정하지 못했다.</a></li><li><a href=#용어를-명확히-정하지-않았다>용어를 명확히 정하지 않았다.</a></li></ul></li><li><a href=#그라운드-룰과-컨벤션-문제>그라운드 룰과 컨벤션 문제</a><ul><li><a href=#커밋의-단위-자체가-제대로-나뉘지-않았다>커밋의 단위 자체가 제대로 나뉘지 않았다.</a></li><li><a href=#이슈나-pr의-템플릿을-명확하게-정하지-않았다>이슈나 PR의 템플릿을 명확하게 정하지 않았다.</a></li><li><a href=#그나마-정한-룰도-제대로-지켜지지-않았다>그나마 정한 룰도 제대로 지켜지지 않았다.</a></li><li><a href=#팀원들의-prettier가-제대로-적용되지-않았다>팀원들의 prettier가 제대로 적용되지 않았다.</a></li></ul></li><li><a href=#작업-과정에서의-문제>작업 과정에서의 문제</a><ul><li><a href=#내가-기대받는-역할을-해내지-못했다>내가 기대받는 역할을 해내지 못했다.</a></li><li><a href=#의사소통이-레포지토리-밖에서-이루어졌다>의사소통이 레포지토리 밖에서 이루어졌다.</a></li><li><a href=#정작-내가-기록을-많이-하지-않았다>정작 내가 기록을 많이 하지 않았다.</a></li><li><a href=#팀의-자원을-너무-낭비했다>팀의 자원을 너무 낭비했다.</a></li></ul></li></ul></nav></details><div class=page-content><blockquote><p>티스토리 블로그에 작성했던 부스트캠프 팀 프로젝트의 회고 글이다. <a href=https://prayinforrain.tistory.com/80>[원본 링크]</a></p></blockquote><figure><img src=/images/posts/2022/12/finishing-moheyum/moheyum_01.png alt=image><figcaption><p>내가 팀원들한테 이 얘길 했나 모르겠는데.. 이 페이지 좀 이쁘다. 잘만드셨다..</p></figcaption></figure><p>부스트캠프의 최종 팀 프로젝트로 나는 <strong>모헤윰</strong>이라는 SNS를 만들었다. 결과물은 꽤 괜찮다. <a href=https://youtu.be/9mVinynuUTw>[여기]</a>에 간단한 시연 영상이 있다. 사실 팀 구인을 하던 때부터 나는 무엇을 만드는지는 크게 중요하지 않았다. 여태까지의 학습 스프린트로 이미 개발이라는 과정은 어느정도 감을 익혔고, 내가 성장함에 따라 이 과정에서 사용하는 기술만 조금씩 변화할 뿐이라고 생각했다. 따라서 내가 팀 프로젝트에서 가장 중요하게 생각했던 포인트는 협업이었다.</p><p>오랜만에 진지한 글을 써보려고 한다. 주제는 <strong>모헤윰 협업 회고</strong> 정도가 될 것 같다.</p><p>첫 협업이라 아쉬운 부분이 많았어서 문제점만을 적었지만 <strong>모헤윰은 절대 실패한 프로젝트가 아니다.</strong> 모헤윰은 유저의 가입 → 서비스 이용 → 탈퇴까지 완전한 유저 시나리오를 구현하였으며, 컨테이너화를 통한 무중단 업데이트를 통해 유지보수까지 용이하게 한 완결성을 갖춘 프로젝트이다. 물론 팔은 안으로 굽는다고 내 새끼이기 때문에 나만 그렇게 느낄 수도 있다.</p><h1 id=풀스택-경험을-위한-필드-스왑>풀스택 경험을 위한 필드 스왑</h1><p>어쩌다 보니 이 아래로는 쭉 잘못한 부분만 있는데, 얘는 길기도 하고.. 장점도 적혀 있는게 조금 어색해서 접었다.</p><p>팀프로젝트에 앞서 부스트캠프 운영진 분들은 &lsquo;프론트엔드, 백엔드 분야를 나눌 수는 있어도 부스트캠프는 풀스택을 기본으로 생각한다&rsquo;라고 몇 번씩 강조하셨다. 나 역시 앞으로 백엔드 일을 할 지는 모르겠지만, 내가 자의적으로 백엔드 쪽의 작업을 할 것 같지는 않았기 때문에, 지금 기회가 왔을 때 최대한 경험해야 한다고 생각했다. 팀원들도 어느정도 공감한 듯 했고, 고민 끝에 우리는 매 주 프론트엔드와 백엔드에서 한 명씩을 교환하자는 이야기를 했다.</p><details><summary>더 보기</summary><h2 id=pros>Pros.</h2><h3 id=프론트엔드--백엔드가-서로를-이해하고-소통이-가능하다>프론트엔드 / 백엔드가 서로를 이해하고 소통이 가능하다.</h3><p>말 그대로다. 백엔드를 다녀오니 내가 얼마나 얼척 없는 이야기를 백엔드 팀원들에게 해왔는지 느낄 수 있었다. 문제는 우리 모두가 그 문제를 인지하지 못하고 있었고, 심지어 멘토님이 <em>백엔드가 너무 착한 것 같다</em>고 말씀하셨음에도 우리는 API가 보내준 결과물을 그대로 보여주기만 하면 되는 수준의 구조가 계속되었다.</p><h3 id=팀원이-분야를-가리지-않고-모든-코드에-책임이-생긴다>팀원이 분야를 가리지 않고 모든 코드에 책임이 생긴다.</h3><p>모든 코드가 내 손을 거쳐 갔다는 것은, <strong>내가 모든 코드에 일부분 책임을 갖게 됨</strong>을 의미한다.</p><h3 id=학습-공유가-훨씬-쉬워진다>학습 공유가 훨씬 쉬워진다.</h3><p>백엔드 코드 구조가 눈에 익다 보니, 서로가 쓴 학습 정리를 읽을 때 난이도가 무척 내려갔다. 그럼에도 모든 코드를 온전히 이해할 수는 없었다.</p><h2 id=cons>Cons.</h2><h3 id=코드-품질-저하가-일어났다>코드 품질 저하가 일어났다.</h3><p>이는 뒤에서 언급할 다른 이유가 있기도 하지만, PR 검토가 원활히 이루어지지 않았다. 이 부분을 우려해서 안전장치를 뒀지만 바쁜 일정 속에서 그마저도 지켜지지 않았다. 코드 일관성은 물론이고 안티패턴이 곳곳에 숨어 있었다. 결국 프론트 백 양 쪽이 어마어마한 양의 리팩토링을 진행해야 했다. 일을 두 번 씩 한 셈이다. 서로가 서로에게 죄송했다..</p><h3 id=남의-영역이라는-부담이-생긴다내-기준>&lsquo;남의 영역&rsquo;이라는 부담이 생긴다.(내 기준)</h3><p>내가 프론트에서 백 팀원을 받았을 때에는 내가 뭐든 도와드리고 싶었다. 하지만 그 분은 놀랍게도 월요일 반나절 동안 사라졌다가 리액트 마스터가 되어 돌아오셨다. 반면에 내가 백엔드로 갔을 때에는 &lsquo;내가 이걸 이렇게 짰다가 잘못 되어서 백엔드 분들이 고생하시면 어쩌지?&rsquo; 하는 고민이 하루에도 몇 번씩 들었다. 결국 결과물이 좋지도 못했고 양도 많이 않았다. 조금 더 적극적으로 참여했어야 하는데, 하는 아쉬움이 남는다.</p></details><h1 id=기획-단계에서의-문제>기획 단계에서의 문제</h1><p>기획자와 디자이너의 소중함을 절실하게 느낀 시간들이었다.</p><h2 id=백로그-자체를-명확하게-하지-않았다>백로그 자체를 명확하게 하지 않았다.</h2><figure><img src=/images/posts/2022/12/finishing-moheyum/moheyum_02.png alt=image><figcaption><p>딴소린데, 이거 closed 됐는데 opened로 표시되는 버그 짜증난다</p></figcaption></figure><p>딴소린데, 이거 closed 됐는데 opened로 표시되는 버그 짜증난다
-나는 소프트웨어공학 수업을 정말 재미있게 들었다. 실습이라곤 전혀 없던 우리 학교에서 유일하게 실제 결과물을 내는 프로젝트가 있었기 때문인데, 교수님이 (약간은 개발자 친화적인) 비개발자 고객 입장에서의 요구사항을 주시면 그것들을 우리끼리 백로그 문서를 작성하고, 일정을 계획하고 구현하는 식이었다. 나는 그 수업을 들으며 백로그를 어떻게 쓰면 되는지 너무 명확하게 알고 있었다.</p><p>그럼에도 불구하고 모헤윰의 백로그는 중구난방 그 자체였다. 어떤 것은 유저 입장에서 어떤 동작을 하면 무엇이 보여야 한다, 이렇게 내가 아는 것처럼 써 있기도 했지만, 어떤 것은 개발자가 구현해야 하는 함수나 모듈 단위로 있기도 했다. 그렇다보니 백로그 자체도 문제가 많았고, 이를 백엔드, 프론트엔드가 작은 단위로 나누어 이슈를 만드는 과정에서도 일관성이 없었다. <strong>왜 내가 아는 것을 적용하지 못했을까? 그건 내가 설명할 수 있을 만큼 알고 있지 않기 때문</strong>이라고 생각한다.</p><h2 id=기획과-계획을-충분히-디테일하게-정하지-못했다>기획과 계획을 충분히 디테일하게 정하지 못했다.</h2><p>사실 모헤윰은 비슷한 컨셉의 어떤 서비스에서, 한번 뒤집어졌다가, 그게 또 한 번 뒤집어지면서 지금의 결과물이 된 케이스다. 금요일이 기획 발표였고, 첫 전복이 수요일이었기 때문에, 세부 기획이 있기 어려운 상황이긴 했다. 그럼에도 기획이 똑바로 잡히지 않고, 팀원들이 이해한 바가 조금 씩 달라 중간중간 추가적인 토론이나 기능 변경(특히 DB 스키마)이 필요했다. 이를테면 &lsquo;회원 탈퇴&rsquo;를 구현하고 나니, 탈퇴한 회원은 검색이 되지 않아야 하고, 남긴 글은 보여야 하고, 등등.. 그런 시나리오를 생각해 보니 변경해야 할 부분이 너무나도 많았고 심지어 빠뜨린 경우도 있었다.</p><p>가장 큰 문제는 앞의 협업 규칙과 맞물려서 나는 다음 주에 백엔드 작업을 해야 하는데, 이번 주에 작업을 마치지 못해서 미완료 상태로 두고 가버리는, 그런 케이스가 발생하기도 했다. 이런 문제로 팀원에게 조금 날카롭게 말한 기억이 있다. 아니다, 지금 생각해 보니 날카롭게 생각만 하고 말은 안했던 것 같다. 우리 팀은 이야기 하면 다 들어줬으니까. 아무튼 이런 문제가 큰 결과로 이어지진 않아서 다행이었다.</p><h2 id=용어를-명확히-정하지-않았다>용어를 명확히 정하지 않았다.</h2><p>페이스북의 &lsquo;담벼락&rsquo;이라는 기능을 예시로 들어보자. 이름을 &lsquo;담벼락&rsquo;이라고 정했다면 사내의 모두가 이 기능을 &lsquo;프로필 페이지&rsquo; &lsquo;개인 피드&rsquo; 이따위 이름이 아닌 &lsquo;담벼락&rsquo;이라고만 불러야 한다. 이건 단순히 &lsquo;보기 불편해!&lsquo;의 문제가 아니라 팀의 의사소통을 원활하게 유지하기 위한 아주 중요하고 기본적인 문제라고 생각한다.</p><p>그런데 우리는 기획 단계에서 이걸 제대로 하지 않았다. <em>&lsquo;댓글&rsquo; &lsquo;답글&rsquo;, &lsquo;게시글 열람 페이지&rsquo; &lsquo;게시글 보기 페이지&rsquo; &lsquo;게시글 보는 페이지&rsquo;</em> 등등, 보기만 해도 한숨이 나오는 오만가지 이름들이 있었다. 이로 인해 발생한 불편함과 문제점이 정말 많았는데, 막상 쓰려니까 딱 대표적인 사례가 떠오르질 않는다. 아무튼 이걸 정했어야 하는데, 이미 나는 기획 단계에서 회의에 너무 많은 브레이크를 발생시켰기 때문에 이런 것까지 트집을 잡았다간 싸움이 났을 수도 ㅋㅋ..</p><h1 id=그라운드-룰과-컨벤션-문제>그라운드 룰과 컨벤션 문제</h1><p>당연히 작업을 시작할 때 우리가 한 일은, 그라운드 룰과 컨벤션 정립이었다. 우리 중 그 누구도 협업에 대한 경험이 없다보니, 무엇무엇을 정해야 하는가?에 대한 감각이 전혀 없는 상태였다. 그래도 나름의 커밋 규칙과 PR을 머지하는 방법 등에 대해 세워 나갔지만, 이 부분은 솔직히.. 전혀 잘한 점들이 없었다.</p><h2 id=커밋의-단위-자체가-제대로-나뉘지-않았다>커밋의 단위 자체가 제대로 나뉘지 않았다.</h2><p><figure><img src=/images/posts/2022/12/finishing-moheyum/moheyum_03.png alt=image><figcaption><p>(깊은 한숨)</p></figcaption></figure>우리는 모두 git의 staged 개념을 잘 알고 있었다. 그럼에도 불구하고 여러 수정이나 기능 구현을 하나의 커밋에 섞어서 올리거나, 커밋 컨벤션 자체를 지키지 않은 경우도 많았다. 나의 경우에는 프로젝트 내내 아무 생각 없이 커밋 메시지에 두 가지 이상의 작업내용을 몰아 써서 한 번에 커밋을 날려 오다가 마지막 리팩토링 기간이 문득 이 문제를 깨달았다. 우리 레포지토리의 커밋 내역을 보기 어려운 이유는 그저 <strong>커밋이 커밋의 단위를 갖지 않기 때문</strong>이었다.</p><h2 id=이슈나-pr의-템플릿을-명확하게-정하지-않았다>이슈나 PR의 템플릿을 명확하게 정하지 않았다.</h2><p>모헤윰의 이슈와 PR을 보면 3자 입장에서 보기 매우 힘들다. 우선 PR은 &lsquo;dev로 올리고, merge하자&rsquo; 정도만 정하고 <strong>PR의 제목이나 내용에 대한 컨벤션이 전혀 없었다.</strong> 그래서 제목은 깃허브가 정해주는 대로, 내용은 없는 경우도 많았다. 아차, 이걸 정했어야 하는데, 라고 느꼈을 때는 이미 늦었다. 나중에 어떤 PR을 이해하기 위해선 작업한 팀원에게 &lsquo;이거 어떤 PR이었죠?&rsquo; 하고 물어봐야 하는 얼탱이 없는 상황이 되어버렸다.</p><p>이슈 역시 그렇다. 앞의 백로그 문제와도 연결되지만, 하나의 백로그를 이슈화하고, 이를 위해 프론트엔드 - 백엔드가 구현할 기능들을 또 작은 이슈로 나누었다. 이 작은 이슈들이 백로그 이슈를 참조하도록 하자고 했지만 별로 직관적이진 않았고, Github Project의 사용 미숙으로 작은 이슈가 백로그에 올라가버리는 등의 문제가 있기도 했다. 다음엔 꼭 Jira, Trello라던지, 최소한 노션으로 정리하던가 하는게 좋을 것 같다.</p><p>음.. 그리고 git cz를 써 보고 싶다.</p><h2 id=그나마-정한-룰도-제대로-지켜지지-않았다>그나마 정한 룰도 제대로 지켜지지 않았다.</h2><p>가장 큰 문제였다. 앞서 언급했듯 우리 팀은 프로젝트의 모든 코드를, 모두가 책임지는 것을 최우선으로 여겼다. 이는 내가 백엔드 코드를 읽어야 하는 문제 뿐 아니라, 내가 백엔드 작업을 하는 주간에 올라오는 프론트 PR에도 똑같이 적용되었어야 하는 문제였다. 따라서 우리는 PR을 올릴 때 리뷰어로 서로를 지정하고, approve 되어야 dev 브랜치에 머지할 수 있도록 하자고 이야기했지만 그렇지 않았다.</p><p>첫째로 시간이 너무 없었다. 첫 기획에서 여러 번 뒤집으며 기능을 거의 반 이하로 줄였지만, 그래도 시간이 너무 모자랐다. 남의 코드 보기를 최고로 좋아하는 나도 그걸 다 읽는게 너무나 버거웠고, 이러다간 주간 마일스톤을 채우기 정말 어려워 보였다.</p><p>둘째로 이런 환경에서 팀원에게 리뷰요청을 거는 것이 부담이었는지 <strong>리뷰어가 없는 PR</strong>이 쥐도 새도 모르게 올라왔다가, 바로 머지되어 버리는 경우가 많았다. 조금 서운하기도 했고, 리팩토링 기간에 정말 말이 안되는 코드가 있어서 &lsquo;이게 어떻게 dev 브랜치로 왔지?&rsquo; 하고 보면 그런 PR이었던 경우가 대부분이었다.</p><p><figure><img src=/images/posts/2022/12/finishing-moheyum/moheyum_04.png alt=image><figcaption><p>벌칙을 같이 정했어야 하는데 ㅇㅇ..</p></figcaption></figure>그리고 룰 얘기를 하는 김에, 후반 갈수록 팀원들이 잠 안자기 대회를 하는 것 같아 보여서 3시 이후 게더타운 커밋 PR 이슈발행 금지라는 룰을 추가했는데, 그 시점부터 3시 이후로 엄청난 커밋과 이슈가 올라오기 시작했다. 님 그러다 죽어요</p><h2 id=팀원들의-prettier가-제대로-적용되지-않았다>팀원들의 prettier가 제대로 적용되지 않았다.</h2><p>yarn berry를 적용하면서, 또 VS코드의 문제가 중첩되어 만들어진 결과인데, lint 없이는 사람이 죽는 줄 아는 나를 제외하고 <strong>모든 팀원이 lint가 제대로 적용되지 않는 문제</strong>가 있었다. 심지어 이걸 맞추려고 따로 시간을 할애하기까지 했는데, 얼마 지나지 않아 또 같은 문제가 생겼다. 대체 왜였을까? 아무튼 그래서 대부분의 PR에는(내 것을 포함해서) CI 통과가 되지 않아 lint error를 수정하는 커밋이 하나씩 더 달려 있었고, prettier가 적용되지 않은 코드를 내가 구경할 때가 되어서야 적용되어 쓸데 없는 변경이 생겨 커밋이 막 커지기도 했다.</p><h1 id=작업-과정에서의-문제>작업 과정에서의 문제</h1><p>여기부터는 내가 개인적으로 겪은 아쉬움들이다.</p><h2 id=내가-기대받는-역할을-해내지-못했다>내가 기대받는 역할을 해내지 못했다.</h2><p>나중에 팀장님이 내게 제안을 한 이유가 대충 내가 프론트엔드 전반을 잘 잡고 팀원에게 공유할 수 있을 것이라는 기대를 했다, 이런 이야기를 했지만, 나는 그렇지 못했다고 생각한다. 우선 <strong>나는 기본이 없었고, 기본이 없다는 인지도 없었다.</strong> 코드를 읽으며 내가 느끼는 불편함이 정말 안티패턴이어서인지, 아니면 내가 하던 방식과 달라서인지 구분하지도 못했다. 오히려 나는 &lsquo;자기가 아무것도 모른다&rsquo;고 한 팀원에게 배운게 더 많다. 특히 Next.js는 리액트와 비슷하면서 다른 부분들이 있는데, 나는 팀원의 학습 정리에 의존하며 이 부분들을 채워나갔다. 그 외에도 말하기도 창피한 나의 무지함이 몇 번씩 터져 나왔다. 사실 프론트엔드 코드 일관성이 무너진 책임은 대부분 내게 있다. ㅎ;;</p><h2 id=의사소통이-레포지토리-밖에서-이루어졌다>의사소통이 레포지토리 밖에서 이루어졌다.</h2><p>코드리뷰, 수정요청, 그 외 기타등등이 슬랙이나 게더타운으로만 이루어졌다. 이게 뭐가 문제냐면, 레포지토리만 봐서는 작업의 과정이 전혀 개연성 없게 보인다. 더욱이 이 프로젝트는 누군가에게 보여주기 위한 프로젝트이기 때문에 절대 그래서는 안됐다. PR 코멘트의 경우 레포에서 지적을 하는 것이 부정적이게 느껴져서(나의 고질병이다) 게더타운이나 슬랙으로 이야기해서 고치곤 했다. <strong>PR에 &lsquo;피드백 반영&rsquo; 등의 이름을 갖는 커밋이 있으나 정작 그 PR에 달린 리뷰는 없게 되었다.</strong> 그냥 근거가 있다면 크게 지적으로 느낄 사람도 없었을 텐데 내가 괜히 그랬다. 이건 프로젝트가 모두 끝난 후에 갑자기 든 아쉬움이다.</p><h2 id=정작-내가-기록을-많이-하지-않았다>정작 내가 기록을 많이 하지 않았다.</h2><p><figure><img src=/images/posts/2022/12/finishing-moheyum/moheyum_05.png alt=image><figcaption><p>많이도 했다</p></figcaption></figure>우리 팀의 이름은 리코더이다. 처음 기획이 그룹 교환일기 컨셉이었어서, 기록을 하는 서비스라는 점에 착안하여 &lsquo;기록하는 사람들&rsquo;이라는 의미로 지은 이름이다. 그래서 우리도 학습정리를 열심히 하자, 기록을 많이 남기자 라는 제안을 했다. 이건 내가 팀에 들어가기 전에 팀장님께 제시한 조건이기도 했다. 제시한 조건이라니까 뭐라도 되는 것 같아 보인다.</p><p>아무튼 결과적으로 <strong>내가 정리한 TIL 문서 수는 꼴찌</strong>에 가까웠다. 거의 스스로를 갈아넣는 어떤 천재분이 독보적이었고*(솔직히 이 분 학습량이 말이 안된다)*, 팀장님이 두 번째, 나는 거의 꼴찌에 가까웠다. 나름 새롭게 배운 것들은 거의 썼지만, 내가 아는 범위 내에서 해결하려는 버릇과 느린 작업속도가 원인이라고 핑계를 댄다. 이 결과를 보고 지금도 좀 무안하다. 나는 그냥 회고에 넋두리만 오지게 적었다..</p><h2 id=팀의-자원을-너무-낭비했다>팀의 자원을 너무 낭비했다.</h2><p>우리 프로젝트의 주제를 놓고 보면 그렇게 개성있진 않지만, 굳이 꼽자면 마크다운 에디터가 있다. 내가 개인적인 욕심으로 고집한 컨셉이기도 하고, 팀원들이 이 것을 위해 나에게 많은 시간을 몰아 줬는데, 마크다운 문법을 파싱하는 부분을 만들기가 정말 어려웠다. 그냥 가볍게 정규식으로 치환하면 되겠거니 생각했지만 문법과 문법간의 포함 가능 여부가 각자 달랐고, 몇 가지 구조적 문제 때문에 완벽한 파싱을 위해서는 정말 문자열을 lexical analyze할 필요가 있었다. 이 벽에 가로막혀 포기하려다가 어떤 팀원의 격려로 어떻게든 몇 가지 눈속임을 거쳐 비슷한 모양을 만들어냈지만, <strong>결과물만 놓고 보면 투자한 시간이 아까운 수준</strong>이다. 여담으로 그 때 받은 격려로 진짜 울 뻔했다 ㅋㅋ..</p><p>그래도 나중에 멘토님한테 들어 보니, 애초에 완전한 파서를 만들기는 좀 힘들 것이고, 멘토님이 비슷한 일을 하셨을 때에도 우리의 결과물과 비슷한 구조로 구현하셨다고 한다. 최고는 아니어도 나름 최선의 결과를 낸 것 같다.</p><hr><p><figure><img src=/images/posts/2022/12/finishing-moheyum/moheyum_06.png alt=image><figcaption><p>솔직히 글쓰는 거 재미있었음</p></figcaption></figure><em>첫 협업이니까</em> 라는 이야기는 좀 그렇다. 왜냐면 다음 협업때는 또 다음 협업의 아쉬움이 이 만큼 쌓일 것이고, 나는 &lsquo;처음이니까&rsquo;라는 이유를 정말 싫어하기 때문이다. 이번엔 처음이라고 치고, 다음 번에는 어떤 변명을 할 수 있을까? 그냥 이 문제들로 인해 내가 느낀 슬픔을 머릿속에 새기고 다시는 같은 실수를 반복하지 않도록 감각을 익히는 것이 중요한 것 같다. 이번에 이렇게 힘들었는데 또 같은 실수를 하면 정말 슬플 것 같다.</p><p>아쉬움만 적었지만 정작 우리의 협업은 정말 재밌었다. 새벽까지 게더타운에서 잡담을 하기도 하고, 월드컵도 보고, 테트리스를 하면서 놀기도 했다. 어설프던 시절만 기억해서 그렇지 결과물만 놓고 보면 꽤 멋있는 앱이기도 하다. 이 글은 나의 문제를 채찍질 하는 글이 아니라, 그저 내가 부스트캠프 내내 해왔던 것처럼 <strong>&lsquo;다음에는 이렇게 해야지!&rsquo;</strong> 계획을 세우는 글이다. 우리 팀은 대단하다. 우리니까 이 정도 한거야 ^^..</p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>모헤윰 mo:heyum - 프로젝트 회고</h1><div class=post-meta><time datetime=2022-12-21T03:30:25+09:00 itemprop=datePublished>2022. 12. 21.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#풀스택-경험을-위한-필드-스왑>풀스택 경험을 위한 필드 스왑</a><ul><li><a href=#pros>Pros.</a></li><li><a href=#cons>Cons.</a></li></ul></li><li><a href=#기획-단계에서의-문제>기획 단계에서의 문제</a><ul><li><a href=#백로그-자체를-명확하게-하지-않았다>백로그 자체를 명확하게 하지 않았다.</a></li><li><a href=#기획과-계획을-충분히-디테일하게-정하지-못했다>기획과 계획을 충분히 디테일하게 정하지 못했다.</a></li><li><a href=#용어를-명확히-정하지-않았다>용어를 명확히 정하지 않았다.</a></li></ul></li><li><a href=#그라운드-룰과-컨벤션-문제>그라운드 룰과 컨벤션 문제</a><ul><li><a href=#커밋의-단위-자체가-제대로-나뉘지-않았다>커밋의 단위 자체가 제대로 나뉘지 않았다.</a></li><li><a href=#이슈나-pr의-템플릿을-명확하게-정하지-않았다>이슈나 PR의 템플릿을 명확하게 정하지 않았다.</a></li><li><a href=#그나마-정한-룰도-제대로-지켜지지-않았다>그나마 정한 룰도 제대로 지켜지지 않았다.</a></li><li><a href=#팀원들의-prettier가-제대로-적용되지-않았다>팀원들의 prettier가 제대로 적용되지 않았다.</a></li></ul></li><li><a href=#작업-과정에서의-문제>작업 과정에서의 문제</a><ul><li><a href=#내가-기대받는-역할을-해내지-못했다>내가 기대받는 역할을 해내지 못했다.</a></li><li><a href=#의사소통이-레포지토리-밖에서-이루어졌다>의사소통이 레포지토리 밖에서 이루어졌다.</a></li><li><a href=#정작-내가-기록을-많이-하지-않았다>정작 내가 기록을 많이 하지 않았다.</a></li><li><a href=#팀의-자원을-너무-낭비했다>팀의 자원을 너무 낭비했다.</a></li></ul></li></ul></nav></details><div class=page-content><blockquote><p>티스토리 블로그에 작성했던 부스트캠프 팀 프로젝트의 회고 글이다. <a href=https://prayinforrain.tistory.com/80>[원본 링크]</a></p></blockquote><figure><img src=/images/posts/2022/12/finishing-moheyum/moheyum_01.png alt=image><figcaption><p>내가 팀원들한테 이 얘길 했나 모르겠는데.. 이 페이지 좀 이쁘다. 잘만드셨다..</p></figcaption></figure><p>부스트캠프의 최종 팀 프로젝트로 나는 <strong>모헤윰</strong>이라는 SNS를 만들었다. 결과물은 꽤 괜찮다. <a href=https://youtu.be/9mVinynuUTw>[여기]</a>에 간단한 시연 영상이 있다. 사실 팀 구인을 하던 때부터 나는 무엇을 만드는지는 크게 중요하지 않았다. 여태까지의 학습 스프린트로 이미 개발이라는 과정은 어느정도 감을 익혔고, 내가 성장함에 따라 이 과정에서 사용하는 기술만 조금씩 변화할 뿐이라고 생각했다. 따라서 내가 팀 프로젝트에서 가장 중요하게 생각했던 포인트는 협업이었다.</p><p>오랜만에 진지한 글을 써보려고 한다. 주제는 <strong>모헤윰 협업 회고</strong> 정도가 될 것 같다.</p><p>첫 협업이라 아쉬운 부분이 많았어서 문제점만을 적었지만 <strong>모헤윰은 절대 실패한 프로젝트가 아니다.</strong> 모헤윰은 유저의 가입 → 서비스 이용 → 탈퇴까지 완전한 유저 시나리오를 구현하였으며, 컨테이너화를 통한 무중단 업데이트를 통해 유지보수까지 용이하게 한 완결성을 갖춘 프로젝트이다. 물론 팔은 안으로 굽는다고 내 새끼이기 때문에 나만 그렇게 느낄 수도 있다.</p><h2 id=풀스택-경험을-위한-필드-스왑>풀스택 경험을 위한 필드 스왑</h2><p>어쩌다 보니 이 아래로는 쭉 잘못한 부분만 있는데, 얘는 길기도 하고.. 장점도 적혀 있는게 조금 어색해서 접었다.</p><p>팀프로젝트에 앞서 부스트캠프 운영진 분들은 &lsquo;프론트엔드, 백엔드 분야를 나눌 수는 있어도 부스트캠프는 풀스택을 기본으로 생각한다&rsquo;라고 몇 번씩 강조하셨다. 나 역시 앞으로 백엔드 일을 할 지는 모르겠지만, 내가 자의적으로 백엔드 쪽의 작업을 할 것 같지는 않았기 때문에, 지금 기회가 왔을 때 최대한 경험해야 한다고 생각했다. 팀원들도 어느정도 공감한 듯 했고, 고민 끝에 우리는 매 주 프론트엔드와 백엔드에서 한 명씩을 교환하자는 이야기를 했다.</p><details><summary>더 보기</summary><h3 id=pros>Pros.</h3><h4 id=프론트엔드--백엔드가-서로를-이해하고-소통이-가능하다>프론트엔드 / 백엔드가 서로를 이해하고 소통이 가능하다.</h4><p>말 그대로다. 백엔드를 다녀오니 내가 얼마나 얼척 없는 이야기를 백엔드 팀원들에게 해왔는지 느낄 수 있었다. 문제는 우리 모두가 그 문제를 인지하지 못하고 있었고, 심지어 멘토님이 <em>백엔드가 너무 착한 것 같다</em>고 말씀하셨음에도 우리는 API가 보내준 결과물을 그대로 보여주기만 하면 되는 수준의 구조가 계속되었다.</p><h4 id=팀원이-분야를-가리지-않고-모든-코드에-책임이-생긴다>팀원이 분야를 가리지 않고 모든 코드에 책임이 생긴다.</h4><p>모든 코드가 내 손을 거쳐 갔다는 것은, <strong>내가 모든 코드에 일부분 책임을 갖게 됨</strong>을 의미한다.</p><h4 id=학습-공유가-훨씬-쉬워진다>학습 공유가 훨씬 쉬워진다.</h4><p>백엔드 코드 구조가 눈에 익다 보니, 서로가 쓴 학습 정리를 읽을 때 난이도가 무척 내려갔다. 그럼에도 모든 코드를 온전히 이해할 수는 없었다.</p><h3 id=cons>Cons.</h3><h4 id=코드-품질-저하가-일어났다>코드 품질 저하가 일어났다.</h4><p>이는 뒤에서 언급할 다른 이유가 있기도 하지만, PR 검토가 원활히 이루어지지 않았다. 이 부분을 우려해서 안전장치를 뒀지만 바쁜 일정 속에서 그마저도 지켜지지 않았다. 코드 일관성은 물론이고 안티패턴이 곳곳에 숨어 있었다. 결국 프론트 백 양 쪽이 어마어마한 양의 리팩토링을 진행해야 했다. 일을 두 번 씩 한 셈이다. 서로가 서로에게 죄송했다..</p><h4 id=남의-영역이라는-부담이-생긴다내-기준>&lsquo;남의 영역&rsquo;이라는 부담이 생긴다.(내 기준)</h4><p>내가 프론트에서 백 팀원을 받았을 때에는 내가 뭐든 도와드리고 싶었다. 하지만 그 분은 놀랍게도 월요일 반나절 동안 사라졌다가 리액트 마스터가 되어 돌아오셨다. 반면에 내가 백엔드로 갔을 때에는 &lsquo;내가 이걸 이렇게 짰다가 잘못 되어서 백엔드 분들이 고생하시면 어쩌지?&rsquo; 하는 고민이 하루에도 몇 번씩 들었다. 결국 결과물이 좋지도 못했고 양도 많이 않았다. 조금 더 적극적으로 참여했어야 하는데, 하는 아쉬움이 남는다.</p></details><h2 id=기획-단계에서의-문제>기획 단계에서의 문제</h2><p>기획자와 디자이너의 소중함을 절실하게 느낀 시간들이었다.</p><h3 id=백로그-자체를-명확하게-하지-않았다>백로그 자체를 명확하게 하지 않았다.</h3><figure><img src=/images/posts/2022/12/finishing-moheyum/moheyum_02.png alt=image><figcaption><p>딴소린데, 이거 closed 됐는데 opened로 표시되는 버그 짜증난다</p></figcaption></figure><p>딴소린데, 이거 closed 됐는데 opened로 표시되는 버그 짜증난다
+나는 소프트웨어공학 수업을 정말 재미있게 들었다. 실습이라곤 전혀 없던 우리 학교에서 유일하게 실제 결과물을 내는 프로젝트가 있었기 때문인데, 교수님이 (약간은 개발자 친화적인) 비개발자 고객 입장에서의 요구사항을 주시면 그것들을 우리끼리 백로그 문서를 작성하고, 일정을 계획하고 구현하는 식이었다. 나는 그 수업을 들으며 백로그를 어떻게 쓰면 되는지 너무 명확하게 알고 있었다.</p><p>그럼에도 불구하고 모헤윰의 백로그는 중구난방 그 자체였다. 어떤 것은 유저 입장에서 어떤 동작을 하면 무엇이 보여야 한다, 이렇게 내가 아는 것처럼 써 있기도 했지만, 어떤 것은 개발자가 구현해야 하는 함수나 모듈 단위로 있기도 했다. 그렇다보니 백로그 자체도 문제가 많았고, 이를 백엔드, 프론트엔드가 작은 단위로 나누어 이슈를 만드는 과정에서도 일관성이 없었다. <strong>왜 내가 아는 것을 적용하지 못했을까? 그건 내가 설명할 수 있을 만큼 알고 있지 않기 때문</strong>이라고 생각한다.</p><h3 id=기획과-계획을-충분히-디테일하게-정하지-못했다>기획과 계획을 충분히 디테일하게 정하지 못했다.</h3><p>사실 모헤윰은 비슷한 컨셉의 어떤 서비스에서, 한번 뒤집어졌다가, 그게 또 한 번 뒤집어지면서 지금의 결과물이 된 케이스다. 금요일이 기획 발표였고, 첫 전복이 수요일이었기 때문에, 세부 기획이 있기 어려운 상황이긴 했다. 그럼에도 기획이 똑바로 잡히지 않고, 팀원들이 이해한 바가 조금 씩 달라 중간중간 추가적인 토론이나 기능 변경(특히 DB 스키마)이 필요했다. 이를테면 &lsquo;회원 탈퇴&rsquo;를 구현하고 나니, 탈퇴한 회원은 검색이 되지 않아야 하고, 남긴 글은 보여야 하고, 등등.. 그런 시나리오를 생각해 보니 변경해야 할 부분이 너무나도 많았고 심지어 빠뜨린 경우도 있었다.</p><p>가장 큰 문제는 앞의 협업 규칙과 맞물려서 나는 다음 주에 백엔드 작업을 해야 하는데, 이번 주에 작업을 마치지 못해서 미완료 상태로 두고 가버리는, 그런 케이스가 발생하기도 했다. 이런 문제로 팀원에게 조금 날카롭게 말한 기억이 있다. 아니다, 지금 생각해 보니 날카롭게 생각만 하고 말은 안했던 것 같다. 우리 팀은 이야기 하면 다 들어줬으니까. 아무튼 이런 문제가 큰 결과로 이어지진 않아서 다행이었다.</p><h3 id=용어를-명확히-정하지-않았다>용어를 명확히 정하지 않았다.</h3><p>페이스북의 &lsquo;담벼락&rsquo;이라는 기능을 예시로 들어보자. 이름을 &lsquo;담벼락&rsquo;이라고 정했다면 사내의 모두가 이 기능을 &lsquo;프로필 페이지&rsquo; &lsquo;개인 피드&rsquo; 이따위 이름이 아닌 &lsquo;담벼락&rsquo;이라고만 불러야 한다. 이건 단순히 &lsquo;보기 불편해!&lsquo;의 문제가 아니라 팀의 의사소통을 원활하게 유지하기 위한 아주 중요하고 기본적인 문제라고 생각한다.</p><p>그런데 우리는 기획 단계에서 이걸 제대로 하지 않았다. <em>&lsquo;댓글&rsquo; &lsquo;답글&rsquo;, &lsquo;게시글 열람 페이지&rsquo; &lsquo;게시글 보기 페이지&rsquo; &lsquo;게시글 보는 페이지&rsquo;</em> 등등, 보기만 해도 한숨이 나오는 오만가지 이름들이 있었다. 이로 인해 발생한 불편함과 문제점이 정말 많았는데, 막상 쓰려니까 딱 대표적인 사례가 떠오르질 않는다. 아무튼 이걸 정했어야 하는데, 이미 나는 기획 단계에서 회의에 너무 많은 브레이크를 발생시켰기 때문에 이런 것까지 트집을 잡았다간 싸움이 났을 수도 ㅋㅋ..</p><h2 id=그라운드-룰과-컨벤션-문제>그라운드 룰과 컨벤션 문제</h2><p>당연히 작업을 시작할 때 우리가 한 일은, 그라운드 룰과 컨벤션 정립이었다. 우리 중 그 누구도 협업에 대한 경험이 없다보니, 무엇무엇을 정해야 하는가?에 대한 감각이 전혀 없는 상태였다. 그래도 나름의 커밋 규칙과 PR을 머지하는 방법 등에 대해 세워 나갔지만, 이 부분은 솔직히.. 전혀 잘한 점들이 없었다.</p><h3 id=커밋의-단위-자체가-제대로-나뉘지-않았다>커밋의 단위 자체가 제대로 나뉘지 않았다.</h3><p><figure><img src=/images/posts/2022/12/finishing-moheyum/moheyum_03.png alt=image><figcaption><p>(깊은 한숨)</p></figcaption></figure>우리는 모두 git의 staged 개념을 잘 알고 있었다. 그럼에도 불구하고 여러 수정이나 기능 구현을 하나의 커밋에 섞어서 올리거나, 커밋 컨벤션 자체를 지키지 않은 경우도 많았다. 나의 경우에는 프로젝트 내내 아무 생각 없이 커밋 메시지에 두 가지 이상의 작업내용을 몰아 써서 한 번에 커밋을 날려 오다가 마지막 리팩토링 기간이 문득 이 문제를 깨달았다. 우리 레포지토리의 커밋 내역을 보기 어려운 이유는 그저 <strong>커밋이 커밋의 단위를 갖지 않기 때문</strong>이었다.</p><h3 id=이슈나-pr의-템플릿을-명확하게-정하지-않았다>이슈나 PR의 템플릿을 명확하게 정하지 않았다.</h3><p>모헤윰의 이슈와 PR을 보면 3자 입장에서 보기 매우 힘들다. 우선 PR은 &lsquo;dev로 올리고, merge하자&rsquo; 정도만 정하고 <strong>PR의 제목이나 내용에 대한 컨벤션이 전혀 없었다.</strong> 그래서 제목은 깃허브가 정해주는 대로, 내용은 없는 경우도 많았다. 아차, 이걸 정했어야 하는데, 라고 느꼈을 때는 이미 늦었다. 나중에 어떤 PR을 이해하기 위해선 작업한 팀원에게 &lsquo;이거 어떤 PR이었죠?&rsquo; 하고 물어봐야 하는 얼탱이 없는 상황이 되어버렸다.</p><p>이슈 역시 그렇다. 앞의 백로그 문제와도 연결되지만, 하나의 백로그를 이슈화하고, 이를 위해 프론트엔드 - 백엔드가 구현할 기능들을 또 작은 이슈로 나누었다. 이 작은 이슈들이 백로그 이슈를 참조하도록 하자고 했지만 별로 직관적이진 않았고, Github Project의 사용 미숙으로 작은 이슈가 백로그에 올라가버리는 등의 문제가 있기도 했다. 다음엔 꼭 Jira, Trello라던지, 최소한 노션으로 정리하던가 하는게 좋을 것 같다.</p><p>음.. 그리고 git cz를 써 보고 싶다.</p><h3 id=그나마-정한-룰도-제대로-지켜지지-않았다>그나마 정한 룰도 제대로 지켜지지 않았다.</h3><p>가장 큰 문제였다. 앞서 언급했듯 우리 팀은 프로젝트의 모든 코드를, 모두가 책임지는 것을 최우선으로 여겼다. 이는 내가 백엔드 코드를 읽어야 하는 문제 뿐 아니라, 내가 백엔드 작업을 하는 주간에 올라오는 프론트 PR에도 똑같이 적용되었어야 하는 문제였다. 따라서 우리는 PR을 올릴 때 리뷰어로 서로를 지정하고, approve 되어야 dev 브랜치에 머지할 수 있도록 하자고 이야기했지만 그렇지 않았다.</p><p>첫째로 시간이 너무 없었다. 첫 기획에서 여러 번 뒤집으며 기능을 거의 반 이하로 줄였지만, 그래도 시간이 너무 모자랐다. 남의 코드 보기를 최고로 좋아하는 나도 그걸 다 읽는게 너무나 버거웠고, 이러다간 주간 마일스톤을 채우기 정말 어려워 보였다.</p><p>둘째로 이런 환경에서 팀원에게 리뷰요청을 거는 것이 부담이었는지 <strong>리뷰어가 없는 PR</strong>이 쥐도 새도 모르게 올라왔다가, 바로 머지되어 버리는 경우가 많았다. 조금 서운하기도 했고, 리팩토링 기간에 정말 말이 안되는 코드가 있어서 &lsquo;이게 어떻게 dev 브랜치로 왔지?&rsquo; 하고 보면 그런 PR이었던 경우가 대부분이었다.</p><p><figure><img src=/images/posts/2022/12/finishing-moheyum/moheyum_04.png alt=image><figcaption><p>벌칙을 같이 정했어야 하는데 ㅇㅇ..</p></figcaption></figure>그리고 룰 얘기를 하는 김에, 후반 갈수록 팀원들이 잠 안자기 대회를 하는 것 같아 보여서 3시 이후 게더타운 커밋 PR 이슈발행 금지라는 룰을 추가했는데, 그 시점부터 3시 이후로 엄청난 커밋과 이슈가 올라오기 시작했다. 님 그러다 죽어요</p><h3 id=팀원들의-prettier가-제대로-적용되지-않았다>팀원들의 prettier가 제대로 적용되지 않았다.</h3><p>yarn berry를 적용하면서, 또 VS코드의 문제가 중첩되어 만들어진 결과인데, lint 없이는 사람이 죽는 줄 아는 나를 제외하고 <strong>모든 팀원이 lint가 제대로 적용되지 않는 문제</strong>가 있었다. 심지어 이걸 맞추려고 따로 시간을 할애하기까지 했는데, 얼마 지나지 않아 또 같은 문제가 생겼다. 대체 왜였을까? 아무튼 그래서 대부분의 PR에는(내 것을 포함해서) CI 통과가 되지 않아 lint error를 수정하는 커밋이 하나씩 더 달려 있었고, prettier가 적용되지 않은 코드를 내가 구경할 때가 되어서야 적용되어 쓸데 없는 변경이 생겨 커밋이 막 커지기도 했다.</p><h2 id=작업-과정에서의-문제>작업 과정에서의 문제</h2><p>여기부터는 내가 개인적으로 겪은 아쉬움들이다.</p><h3 id=내가-기대받는-역할을-해내지-못했다>내가 기대받는 역할을 해내지 못했다.</h3><p>나중에 팀장님이 내게 제안을 한 이유가 대충 내가 프론트엔드 전반을 잘 잡고 팀원에게 공유할 수 있을 것이라는 기대를 했다, 이런 이야기를 했지만, 나는 그렇지 못했다고 생각한다. 우선 <strong>나는 기본이 없었고, 기본이 없다는 인지도 없었다.</strong> 코드를 읽으며 내가 느끼는 불편함이 정말 안티패턴이어서인지, 아니면 내가 하던 방식과 달라서인지 구분하지도 못했다. 오히려 나는 &lsquo;자기가 아무것도 모른다&rsquo;고 한 팀원에게 배운게 더 많다. 특히 Next.js는 리액트와 비슷하면서 다른 부분들이 있는데, 나는 팀원의 학습 정리에 의존하며 이 부분들을 채워나갔다. 그 외에도 말하기도 창피한 나의 무지함이 몇 번씩 터져 나왔다. 사실 프론트엔드 코드 일관성이 무너진 책임은 대부분 내게 있다. ㅎ;;</p><h3 id=의사소통이-레포지토리-밖에서-이루어졌다>의사소통이 레포지토리 밖에서 이루어졌다.</h3><p>코드리뷰, 수정요청, 그 외 기타등등이 슬랙이나 게더타운으로만 이루어졌다. 이게 뭐가 문제냐면, 레포지토리만 봐서는 작업의 과정이 전혀 개연성 없게 보인다. 더욱이 이 프로젝트는 누군가에게 보여주기 위한 프로젝트이기 때문에 절대 그래서는 안됐다. PR 코멘트의 경우 레포에서 지적을 하는 것이 부정적이게 느껴져서(나의 고질병이다) 게더타운이나 슬랙으로 이야기해서 고치곤 했다. <strong>PR에 &lsquo;피드백 반영&rsquo; 등의 이름을 갖는 커밋이 있으나 정작 그 PR에 달린 리뷰는 없게 되었다.</strong> 그냥 근거가 있다면 크게 지적으로 느낄 사람도 없었을 텐데 내가 괜히 그랬다. 이건 프로젝트가 모두 끝난 후에 갑자기 든 아쉬움이다.</p><h3 id=정작-내가-기록을-많이-하지-않았다>정작 내가 기록을 많이 하지 않았다.</h3><p><figure><img src=/images/posts/2022/12/finishing-moheyum/moheyum_05.png alt=image><figcaption><p>많이도 했다</p></figcaption></figure>우리 팀의 이름은 리코더이다. 처음 기획이 그룹 교환일기 컨셉이었어서, 기록을 하는 서비스라는 점에 착안하여 &lsquo;기록하는 사람들&rsquo;이라는 의미로 지은 이름이다. 그래서 우리도 학습정리를 열심히 하자, 기록을 많이 남기자 라는 제안을 했다. 이건 내가 팀에 들어가기 전에 팀장님께 제시한 조건이기도 했다. 제시한 조건이라니까 뭐라도 되는 것 같아 보인다.</p><p>아무튼 결과적으로 <strong>내가 정리한 TIL 문서 수는 꼴찌</strong>에 가까웠다. 거의 스스로를 갈아넣는 어떤 천재분이 독보적이었고*(솔직히 이 분 학습량이 말이 안된다)*, 팀장님이 두 번째, 나는 거의 꼴찌에 가까웠다. 나름 새롭게 배운 것들은 거의 썼지만, 내가 아는 범위 내에서 해결하려는 버릇과 느린 작업속도가 원인이라고 핑계를 댄다. 이 결과를 보고 지금도 좀 무안하다. 나는 그냥 회고에 넋두리만 오지게 적었다..</p><h3 id=팀의-자원을-너무-낭비했다>팀의 자원을 너무 낭비했다.</h3><p>우리 프로젝트의 주제를 놓고 보면 그렇게 개성있진 않지만, 굳이 꼽자면 마크다운 에디터가 있다. 내가 개인적인 욕심으로 고집한 컨셉이기도 하고, 팀원들이 이 것을 위해 나에게 많은 시간을 몰아 줬는데, 마크다운 문법을 파싱하는 부분을 만들기가 정말 어려웠다. 그냥 가볍게 정규식으로 치환하면 되겠거니 생각했지만 문법과 문법간의 포함 가능 여부가 각자 달랐고, 몇 가지 구조적 문제 때문에 완벽한 파싱을 위해서는 정말 문자열을 lexical analyze할 필요가 있었다. 이 벽에 가로막혀 포기하려다가 어떤 팀원의 격려로 어떻게든 몇 가지 눈속임을 거쳐 비슷한 모양을 만들어냈지만, <strong>결과물만 놓고 보면 투자한 시간이 아까운 수준</strong>이다. 여담으로 그 때 받은 격려로 진짜 울 뻔했다 ㅋㅋ..</p><p>그래도 나중에 멘토님한테 들어 보니, 애초에 완전한 파서를 만들기는 좀 힘들 것이고, 멘토님이 비슷한 일을 하셨을 때에도 우리의 결과물과 비슷한 구조로 구현하셨다고 한다. 최고는 아니어도 나름 최선의 결과를 낸 것 같다.</p><hr><p><figure><img src=/images/posts/2022/12/finishing-moheyum/moheyum_06.png alt=image><figcaption><p>솔직히 글쓰는 거 재미있었음</p></figcaption></figure><em>첫 협업이니까</em> 라는 이야기는 좀 그렇다. 왜냐면 다음 협업때는 또 다음 협업의 아쉬움이 이 만큼 쌓일 것이고, 나는 &lsquo;처음이니까&rsquo;라는 이유를 정말 싫어하기 때문이다. 이번엔 처음이라고 치고, 다음 번에는 어떤 변명을 할 수 있을까? 그냥 이 문제들로 인해 내가 느낀 슬픔을 머릿속에 새기고 다시는 같은 실수를 반복하지 않도록 감각을 익히는 것이 중요한 것 같다. 이번에 이렇게 힘들었는데 또 같은 실수를 하면 정말 슬플 것 같다.</p><p>아쉬움만 적었지만 정작 우리의 협업은 정말 재밌었다. 새벽까지 게더타운에서 잡담을 하기도 하고, 월드컵도 보고, 테트리스를 하면서 놀기도 했다. 어설프던 시절만 기억해서 그렇지 결과물만 놓고 보면 꽤 멋있는 앱이기도 하다. 이 글은 나의 문제를 채찍질 하는 글이 아니라, 그저 내가 부스트캠프 내내 해왔던 것처럼 <strong>&lsquo;다음에는 이렇게 해야지!&rsquo;</strong> 계획을 세우는 글이다. 우리 팀은 대단하다. 우리니까 이 정도 한거야 ^^..</p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/2022/12/making-editor-markdown/index.html b/posts/2022/12/making-editor-markdown/index.html
index 074df8e..2422748 100644
--- a/posts/2022/12/making-editor-markdown/index.html
+++ b/posts/2022/12/making-editor-markdown/index.html
@@ -1,7 +1,7 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>마크다운 만들기 - Markdown [3/3] | PrayinForRain.dev</title>
-<meta property="og:title" content="마크다운 만들기 - Markdown [3/3] | PrayinForRain.dev"><meta name=twitter:title content="마크다운 만들기 - Markdown [3/3] | PrayinForRain.dev"><meta itemprop=name content="마크다운 만들기 - Markdown [3/3] | PrayinForRain.dev"><meta name=application-name content="마크다운 만들기 - Markdown [3/3] | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2022-12-05T13:18:55+0900><meta property="article:published_time" content=2022-12-05T13:18:55+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"마크다운 만들기 - Markdown [3/3]","author":{"@type":"Person","name":""},"datePublished":"2022-12-05","description":"","wordCount":649,"mainEntityOfPage":"True","dateModified":"2022-12-05","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="마크다운 만들기 - Markdown [3/3] | PrayinForRain.dev"><meta name=twitter:title content="마크다운 만들기 - Markdown [3/3] | PrayinForRain.dev"><meta itemprop=name content="마크다운 만들기 - Markdown [3/3] | PrayinForRain.dev"><meta name=application-name content="마크다운 만들기 - Markdown [3/3] | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2022-12-05T13:18:55+0900><meta property="article:published_time" content=2022-12-05T13:18:55+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"마크다운 만들기 - Markdown [3/3]","author":{"@type":"Person","name":""},"datePublished":"2022-12-05","description":"","wordCount":649,"mainEntityOfPage":"True","dateModified":"2022-12-05","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>마크다운 만들기 - Markdown [3/3]</h1><div class=post-meta><time datetime=2022-12-05T13:18:55+09:00 itemprop=datePublished>2022. 12. 5.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#-어떻게-할까요>🤷 어떻게 할까요?</a></li><li><a href=#-뭐든-계획을-세우자>📝 뭐든 계획을 세우자</a></li><li><a href=#-좀-더-개선해보자>⚒ 좀 더 개선해보자</a></li><li><a href=#-마치며>🔥 마치며</a></li><li><a href=#-refs>📖 Refs.</a></li></ul></nav></details><div class=page-content><p><strong>모헤윰</strong>의 에디터 만들기 시리즈 모아보기<br><a href=https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/>에디터 만들기 - ContentEditable [1/3]</a><br><a href=https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/>에디터 만들기 - getSelection [2/3]</a><br><a href=https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/>에디터 만들기 - Markdown [3/3]</a></p><hr><p>마지막입니다. 입력하고, 게시할 수 있게 되었으니, 이제 남은 일은 서식을 적용하는 것 뿐입니다. 마크다운 문법을 이용해 어떻게 서식을 적용할 수 있을까요? 그 과정을 정리해 보겠습니다.</p><h1 id=-어떻게-할까요>🤷 어떻게 할까요?</h1><p>정말이지 어떻게 하면 좋을까요? 우선 제가 생각하는 가장 사용성이 좋은 마크다운은 깃허브의 그것이였습니다. <a href=https://github.github.com/gfm/>GFM(GitHub Flavored Markdown)</a>이라고 부르는 스펙이 있는데, 처음에는 이걸 부르는 이름이 있는 것조차 모르고 막무가내로 리버스 엔지니어링 마인드로 작업을 시작했습니다. 아래 사진처럼 아무 이슈나 들어가서 댓글 창에 실험을 하면서요.</p><p><img src=/images/posts/2022/12/making-editor-markdown/md_editor_3_01.png alt=Untitled></p><p>원래대로라면 입력을 토큰으로 분해하고, <code>Parse tree</code>를 구성하여야 겠지만, 마크다운이 느슨한 언어이기 때문에 토큰으로 분해하는 과정이 지나치게 어려울 것이라 판단하여 쉬운 길을 선택하기로 했습니다. 그래서 <code>자주 쓸 법한 마크다운 몇 가지만 적용할 수 있게 하면 되겠지?</code> 하는 생각으로 깃허브를 열어서 아무 텍스트를 마구 입력해 보기 시작했습니다. 가벼운 마음으로요.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=kd>function</span> <span class=nx>headers</span><span class=p>(</span><span class=nx>str</span>: <span class=kt>string</span><span class=p>)</span><span class=o>:</span> <span class=kt>string</span> <span class=p>{</span>
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>마크다운 만들기 - Markdown [3/3]</h1><div class=post-meta><time datetime=2022-12-05T13:18:55+09:00 itemprop=datePublished>2022. 12. 5.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#-어떻게-할까요>🤷 어떻게 할까요?</a></li><li><a href=#-뭐든-계획을-세우자>📝 뭐든 계획을 세우자</a></li><li><a href=#-좀-더-개선해보자>⚒ 좀 더 개선해보자</a></li><li><a href=#-마치며>🔥 마치며</a></li><li><a href=#-refs>📖 Refs.</a></li></ul></nav></details><div class=page-content><p><strong>모헤윰</strong>의 에디터 만들기 시리즈 모아보기<br><a href=https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/>에디터 만들기 - ContentEditable [1/3]</a><br><a href=https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/>에디터 만들기 - getSelection [2/3]</a><br><a href=https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/>에디터 만들기 - Markdown [3/3]</a></p><hr><p>마지막입니다. 입력하고, 게시할 수 있게 되었으니, 이제 남은 일은 서식을 적용하는 것 뿐입니다. 마크다운 문법을 이용해 어떻게 서식을 적용할 수 있을까요? 그 과정을 정리해 보겠습니다.</p><h2 id=-어떻게-할까요>🤷 어떻게 할까요?</h2><p>정말이지 어떻게 하면 좋을까요? 우선 제가 생각하는 가장 사용성이 좋은 마크다운은 깃허브의 그것이였습니다. <a href=https://github.github.com/gfm/>GFM(GitHub Flavored Markdown)</a>이라고 부르는 스펙이 있는데, 처음에는 이걸 부르는 이름이 있는 것조차 모르고 막무가내로 리버스 엔지니어링 마인드로 작업을 시작했습니다. 아래 사진처럼 아무 이슈나 들어가서 댓글 창에 실험을 하면서요.</p><p><img src=/images/posts/2022/12/making-editor-markdown/md_editor_3_01.png alt=Untitled></p><p>원래대로라면 입력을 토큰으로 분해하고, <code>Parse tree</code>를 구성하여야 겠지만, 마크다운이 느슨한 언어이기 때문에 토큰으로 분해하는 과정이 지나치게 어려울 것이라 판단하여 쉬운 길을 선택하기로 했습니다. 그래서 <code>자주 쓸 법한 마크다운 몇 가지만 적용할 수 있게 하면 되겠지?</code> 하는 생각으로 깃허브를 열어서 아무 텍스트를 마구 입력해 보기 시작했습니다. 가벼운 마음으로요.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=kd>function</span> <span class=nx>headers</span><span class=p>(</span><span class=nx>str</span>: <span class=kt>string</span><span class=p>)</span><span class=o>:</span> <span class=kt>string</span> <span class=p>{</span>
 </span></span><span class=line><span class=cl>  <span class=kd>let</span> <span class=nx>result</span> <span class=o>=</span> <span class=nx>str</span><span class=p>.</span><span class=nx>replace</span><span class=p>(</span><span class=sr>/^### ([\S ]+)$/gm</span><span class=p>,</span> <span class=s2>&#34;&lt;h3&gt;$1&lt;/h3&gt;&#34;</span><span class=p>);</span>
 </span></span><span class=line><span class=cl>  <span class=nx>result</span> <span class=o>=</span> <span class=nx>result</span><span class=p>.</span><span class=nx>replace</span><span class=p>(</span><span class=sr>/^## ([\S ]+)$/gm</span><span class=p>,</span> <span class=s2>&#34;&lt;h2&gt;$1&lt;/h2&gt;&#34;</span><span class=p>);</span>
 </span></span><span class=line><span class=cl>  <span class=nx>result</span> <span class=o>=</span> <span class=nx>result</span><span class=p>.</span><span class=nx>replace</span><span class=p>(</span><span class=sr>/^# ([\S ]+)$/gm</span><span class=p>,</span> <span class=s2>&#34;&lt;h1&gt;$1&lt;/h1&gt;&#34;</span><span class=p>);</span>
@@ -25,7 +25,7 @@
 </span></span><span class=line><span class=cl>  <span class=nx>result</span> <span class=o>=</span> <span class=nx>divideLines</span><span class=p>(</span><span class=nx>result</span><span class=p>);</span>
 </span></span><span class=line><span class=cl>  <span class=k>return</span> <span class=nx>result</span><span class=p>;</span>
 </span></span><span class=line><span class=cl><span class=p>}</span>
-</span></span></code></pre></div><p><img src=/images/posts/2022/12/making-editor-markdown/md_editor_3_02.png alt=Untitled></p><p>그렇게 만들어진 것이 저번 포스트의 마지막 사진입니다. 대충 이런 느낌으로 replace를 쌓아 나가면 되지 않을까요?</p><h1 id=-뭐든-계획을-세우자>📝 뭐든 계획을 세우자</h1><p>하지만 마크다운의 세계는 그렇게 만만하지 않았습니다. <code>replace</code>를 쌓아 나간다는 생각에는 변함이 없었지만 여러 줄에 걸친 문법이나 같은 식별자를 사용하는 문법을 어떻게 구별할 것인지와 같은 각종 예외 상황들을 어떻게 피해서 설계할 수 있을지 머리가 아파오기 시작했습니다. 특히 인용문은 아래처럼 다양한 경우에 대한 처리가 필요했죠.</p><p><img src=/images/posts/2022/12/making-editor-markdown/md_editor_3_03.png alt=Untitled></p><p>이런 복잡한 경우에 대한 해답을 매 번 깃허브에 직접 입력해 보면서 결과를 맞춰 튜닝을 하느니, 차라리 처음부터 체계를 잡고 가자는 생각이 들어 <a href=https://github.github.com/gfm/>GFM 스펙 문서</a>를 읽으며 문법들을 정리하기 시작했습니다.</p><p><img src=/images/posts/2022/12/making-editor-markdown/md_editor_3_04.png alt=Untitled></p><p>결과적으로 마크다운 문법은 크게 아래와 같이 분류할 수 있었습니다.</p><ul><li>줄 전체에 적용되는 <code>Block</code> 문법과 줄의 일부분에만 적용되는 <code>Inline</code> 문법이 존재합니다.</li><li><code>Block</code> 문법은 부분적으로 <code>Inline</code> 문법을 포함할 수 있습니다.</li><li><code>Block</code> 문법 역시 다른 <code>Block</code>을 포함할 수 있는 <code>Container Blocks</code>와 그렇지 않은 <code>Leaf Blocks</code>로 나뉩니다.</li></ul><p>그리고 사진에 보이는 것처럼 각 문법에 대한 간략한 규칙을 정리하고, 지나치게 복잡하거나 자주 사용되지 않는 규칙들을 따로 표시하였습니다. 이제 이것들을 이용해서 각 문법들을 구현하고, Container Blocks → Leaf Blocks → Inlines 순서대로 변환해 주면 될 것 같습니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=kr>export</span> <span class=kd>function</span> <span class=nx>doParse</span><span class=p>(</span><span class=nx>str</span>: <span class=kt>string</span><span class=p>)</span><span class=o>:</span> <span class=kt>string</span> <span class=p>{</span>
+</span></span></code></pre></div><p><img src=/images/posts/2022/12/making-editor-markdown/md_editor_3_02.png alt=Untitled></p><p>그렇게 만들어진 것이 저번 포스트의 마지막 사진입니다. 대충 이런 느낌으로 replace를 쌓아 나가면 되지 않을까요?</p><h2 id=-뭐든-계획을-세우자>📝 뭐든 계획을 세우자</h2><p>하지만 마크다운의 세계는 그렇게 만만하지 않았습니다. <code>replace</code>를 쌓아 나간다는 생각에는 변함이 없었지만 여러 줄에 걸친 문법이나 같은 식별자를 사용하는 문법을 어떻게 구별할 것인지와 같은 각종 예외 상황들을 어떻게 피해서 설계할 수 있을지 머리가 아파오기 시작했습니다. 특히 인용문은 아래처럼 다양한 경우에 대한 처리가 필요했죠.</p><p><img src=/images/posts/2022/12/making-editor-markdown/md_editor_3_03.png alt=Untitled></p><p>이런 복잡한 경우에 대한 해답을 매 번 깃허브에 직접 입력해 보면서 결과를 맞춰 튜닝을 하느니, 차라리 처음부터 체계를 잡고 가자는 생각이 들어 <a href=https://github.github.com/gfm/>GFM 스펙 문서</a>를 읽으며 문법들을 정리하기 시작했습니다.</p><p><img src=/images/posts/2022/12/making-editor-markdown/md_editor_3_04.png alt=Untitled></p><p>결과적으로 마크다운 문법은 크게 아래와 같이 분류할 수 있었습니다.</p><ul><li>줄 전체에 적용되는 <code>Block</code> 문법과 줄의 일부분에만 적용되는 <code>Inline</code> 문법이 존재합니다.</li><li><code>Block</code> 문법은 부분적으로 <code>Inline</code> 문법을 포함할 수 있습니다.</li><li><code>Block</code> 문법 역시 다른 <code>Block</code>을 포함할 수 있는 <code>Container Blocks</code>와 그렇지 않은 <code>Leaf Blocks</code>로 나뉩니다.</li></ul><p>그리고 사진에 보이는 것처럼 각 문법에 대한 간략한 규칙을 정리하고, 지나치게 복잡하거나 자주 사용되지 않는 규칙들을 따로 표시하였습니다. 이제 이것들을 이용해서 각 문법들을 구현하고, Container Blocks → Leaf Blocks → Inlines 순서대로 변환해 주면 될 것 같습니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=kr>export</span> <span class=kd>function</span> <span class=nx>doParse</span><span class=p>(</span><span class=nx>str</span>: <span class=kt>string</span><span class=p>)</span><span class=o>:</span> <span class=kt>string</span> <span class=p>{</span>
 </span></span><span class=line><span class=cl>  <span class=kd>let</span> <span class=nx>result</span> <span class=o>=</span> <span class=nx>str</span><span class=p>;</span>
 </span></span><span class=line><span class=cl>  <span class=nx>result</span> <span class=o>=</span> <span class=nx>blockQuote</span><span class=p>(</span><span class=nx>result</span><span class=p>);</span>
 </span></span><span class=line><span class=cl>  <span class=nx>result</span> <span class=o>=</span> <span class=nx>emptyLines</span><span class=p>(</span><span class=nx>result</span><span class=p>);</span>
@@ -41,7 +41,7 @@
 </span></span><span class=line><span class=cl>  <span class=nx>result</span> <span class=o>=</span> <span class=nx>link</span><span class=p>(</span><span class=nx>result</span><span class=p>);</span>
 </span></span><span class=line><span class=cl>  <span class=k>return</span> <span class=nx>result</span><span class=p>;</span>
 </span></span><span class=line><span class=cl><span class=p>}</span>
-</span></span></code></pre></div><h1 id=-좀-더-개선해보자>⚒ 좀 더 개선해보자</h1><p>적용 범위가 큰 문법부터 차례대로 적용해 나감으로써 inline문법 안에 block문법이 적용된다거나 하는 문제를 예방하였고, 각 줄을 <code>div</code> 태그로 변환하는 시점을 조절해서 정규표현식의 <code>div</code>가 필요한 부분에만 들어가도록 더 온전한 결과물을 만들 수 있었습니다.</p><p>그런데 <code>codeBlock</code>과 <code>link</code>, <code>image</code>의 URL은 마크다운의 영향을 받지 않아야 하는데 <code>underline</code>이나 <code>bold</code>같은 문법이 적용되고 있습니다. 이를 위해 첫 변환시 placeholder 역할을 하는, 일반적으로 입력할 수 없는 문자로 치환하고, 원본 텍스트를 마지막에 다시 재변환하는 작업을 진행하였습니다. 또 중간에 연속되는 변환 과정을 하나의 pipe 함수로 묶어주면 좋을 것 같네요.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=kr>export</span> <span class=kd>function</span> <span class=nx>doParse</span><span class=p>(</span><span class=nx>str</span>: <span class=kt>string</span><span class=p>)</span><span class=o>:</span> <span class=kt>string</span> <span class=p>{</span>
+</span></span></code></pre></div><h2 id=-좀-더-개선해보자>⚒ 좀 더 개선해보자</h2><p>적용 범위가 큰 문법부터 차례대로 적용해 나감으로써 inline문법 안에 block문법이 적용된다거나 하는 문제를 예방하였고, 각 줄을 <code>div</code> 태그로 변환하는 시점을 조절해서 정규표현식의 <code>div</code>가 필요한 부분에만 들어가도록 더 온전한 결과물을 만들 수 있었습니다.</p><p>그런데 <code>codeBlock</code>과 <code>link</code>, <code>image</code>의 URL은 마크다운의 영향을 받지 않아야 하는데 <code>underline</code>이나 <code>bold</code>같은 문법이 적용되고 있습니다. 이를 위해 첫 변환시 placeholder 역할을 하는, 일반적으로 입력할 수 없는 문자로 치환하고, 원본 텍스트를 마지막에 다시 재변환하는 작업을 진행하였습니다. 또 중간에 연속되는 변환 과정을 하나의 pipe 함수로 묶어주면 좋을 것 같네요.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=kr>export</span> <span class=kd>function</span> <span class=nx>doParse</span><span class=p>(</span><span class=nx>str</span>: <span class=kt>string</span><span class=p>)</span><span class=o>:</span> <span class=kt>string</span> <span class=p>{</span>
 </span></span><span class=line><span class=cl>  <span class=kd>let</span> <span class=nx>result</span> <span class=o>=</span> <span class=nx>str</span><span class=p>;</span>
 </span></span><span class=line><span class=cl>  <span class=kd>let</span> <span class=nx>codes</span>: <span class=kt>string</span><span class=p>[]</span> <span class=o>=</span> <span class=p>[];</span>
 </span></span><span class=line><span class=cl>  <span class=kd>let</span> <span class=nx>links</span>: <span class=kt>string</span><span class=p>[]</span> <span class=o>=</span> <span class=p>[];</span>
@@ -71,10 +71,10 @@
 </span></span><span class=line><span class=cl>
 </span></span><span class=line><span class=cl>  <span class=k>return</span> <span class=nx>result</span><span class=p>;</span>
 </span></span><span class=line><span class=cl><span class=p>}</span>
-</span></span></code></pre></div><h1 id=-마치며>🔥 마치며</h1><p><img src=/images/posts/2022/12/making-editor-markdown/md_editor_3_05.gif alt=dhkstjd.gif></p><p>처음에 시작할 때에는 무척 거창하게 시작했는데, 생각보다 투박한 결과물이 나왔습니다. 그래도 뭔가 라이브러리의 힘을 빌리지 않고 이 정도를 구현했다는 데 의의를 두고 싶습니다. 특히 에디터같은 부분은 찾아 볼수록 더 많은 기능이 필요하다는 것을 알게 되어서 아쉬움이 더 많이 생겼습니다. 나중에 시간이 되면 undo 기능도 구현하고, 이것저것 더 개선해 보고 싶네요.</p><p>지금까지 <strong>모헤윰</strong>의 마크다운 에디터를 구현한 과정이였습니다.</p><h1 id=-refs>📖 Refs.</h1><p><a href=https://github.github.com/gfm/>GitHub Flavored Markdown Spec</a><br><a href=https://github.com/markedjs/marked/tree/master/src>markedjs/marked</a></p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+</span></span></code></pre></div><h2 id=-마치며>🔥 마치며</h2><p><img src=/images/posts/2022/12/making-editor-markdown/md_editor_3_05.gif alt=dhkstjd.gif></p><p>처음에 시작할 때에는 무척 거창하게 시작했는데, 생각보다 투박한 결과물이 나왔습니다. 그래도 뭔가 라이브러리의 힘을 빌리지 않고 이 정도를 구현했다는 데 의의를 두고 싶습니다. 특히 에디터같은 부분은 찾아 볼수록 더 많은 기능이 필요하다는 것을 알게 되어서 아쉬움이 더 많이 생겼습니다. 나중에 시간이 되면 undo 기능도 구현하고, 이것저것 더 개선해 보고 싶네요.</p><p>지금까지 <strong>모헤윰</strong>의 마크다운 에디터를 구현한 과정이였습니다.</p><h2 id=-refs>📖 Refs.</h2><p><a href=https://github.github.com/gfm/>GitHub Flavored Markdown Spec</a><br><a href=https://github.com/markedjs/marked/tree/master/src>markedjs/marked</a></p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/2022/12/prevent-sidebar-blinking/index.html b/posts/2022/12/prevent-sidebar-blinking/index.html
index ac084af..8ceb3e5 100644
--- a/posts/2022/12/prevent-sidebar-blinking/index.html
+++ b/posts/2022/12/prevent-sidebar-blinking/index.html
@@ -1,7 +1,7 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>사이드바야 그만 깜빡여라 | PrayinForRain.dev</title>
-<meta property="og:title" content="사이드바야 그만 깜빡여라 | PrayinForRain.dev"><meta name=twitter:title content="사이드바야 그만 깜빡여라 | PrayinForRain.dev"><meta itemprop=name content="사이드바야 그만 깜빡여라 | PrayinForRain.dev"><meta name=application-name content="사이드바야 그만 깜빡여라 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2022/12/prevent-sidebar-blinking/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2022-12-06T02:11:55+0900><meta property="article:published_time" content=2022-12-06T02:11:55+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"사이드바야 그만 깜빡여라","author":{"@type":"Person","name":""},"datePublished":"2022-12-06","description":"","wordCount":744,"mainEntityOfPage":"True","dateModified":"2022-12-06","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/posts/2022/12/prevent-sidebar-blinking/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="사이드바야 그만 깜빡여라 | PrayinForRain.dev"><meta name=twitter:title content="사이드바야 그만 깜빡여라 | PrayinForRain.dev"><meta itemprop=name content="사이드바야 그만 깜빡여라 | PrayinForRain.dev"><meta name=application-name content="사이드바야 그만 깜빡여라 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2022/12/prevent-sidebar-blinking/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2022-12-06T02:11:55+0900><meta property="article:published_time" content=2022-12-06T02:11:55+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"사이드바야 그만 깜빡여라","author":{"@type":"Person","name":""},"datePublished":"2022-12-06","description":"","wordCount":744,"mainEntityOfPage":"True","dateModified":"2022-12-06","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/2022/12/prevent-sidebar-blinking/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>사이드바야 그만 깜빡여라</h1><div class=post-meta><time datetime=2022-12-06T02:11:55+09:00 itemprop=datePublished>2022. 12. 6.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#-tldr>🤷 TL;DR</a></li><li><a href=#-사이드바의-현재-상황>🤔 사이드바의 현재 상황</a></li><li><a href=#-메모야-도와줘>📝 메모야 도와줘</a></li><li><a href=#-next야-나는-너를-믿었어>➡️ Next야 나는 너를 믿었어</a></li><li><a href=#-refs>📖 Refs.</a></li></ul></nav></details><div class=page-content><p><strong>모헤윰</strong>의 프론트엔드 앱은 <code>Next.js</code>로 만들어져 있습니다. 팀원 그 누구도 사용해 본 적이 없음에도 굳이 선택한 이유는 <code>NestJS</code>를 써 보니 프레임워크를 사용하는 것이 협업 환경에서 코드 일관성을 지키는 데 도움을 줄 것이라는 막연한 기대와, <code>SSR</code>을 체험해 보고 싶은 학습적인 욕심이 있었습니다. 지금 돌아보니 ‘너와 함께 하길 잘 했어!’ 하는 감상은 없네요.</p><p>기왕 SSR을 체험한다고 시작한 프로젝트인 만큼, 성능에 신경을 쓰지 않을 수 없게 되었습니다. 그러다 제가 좋아하는 어떤 팀의 노션에서 <code>memoization</code>을 통한 컴포넌트 중복 렌더링 방지에 대한 글을 읽었는데요, 이 부분이 때 마침 <a href=https://www.notion.so/next-js-13-app-dir-11191a66a5564a25ba882c8a835afd13>Next.js 13을 적용하지 못해 포기해야만 했던</a> 아픈 상처를 자극하고 있어서 모헤윰에도 시도해 보기로 하였습니다.</p><h1 id=-tldr>🤷 TL;DR</h1><ul><li><code>useMemo</code>로 <code>memoization</code>하여도 context 값을 참조하면 리렌더링이 이루어진다.</li><li>크롬 개발자 도구나 React DevTools를 통해 리렌더링 정보를 확인할 수 있다.</li><li><code>Next.js</code>에서 <code>/pages/_app.tsx</code>에 들어간 컴포넌트는 리렌더링이 방지된다.</li></ul><h1 id=-사이드바의-현재-상황>🤔 사이드바의 현재 상황</h1><p>모헤윰은 Next.js가 요구하는 대로 pages 디렉토리에 각 페이지의 레이아웃을 컴포넌트의 조합으로 구성하고 있습니다. 아래 코드처럼요.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=c1>// index.tsx
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>사이드바야 그만 깜빡여라</h1><div class=post-meta><time datetime=2022-12-06T02:11:55+09:00 itemprop=datePublished>2022. 12. 6.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#-tldr>🤷 TL;DR</a></li><li><a href=#-사이드바의-현재-상황>🤔 사이드바의 현재 상황</a></li><li><a href=#-메모야-도와줘>📝 메모야 도와줘</a></li><li><a href=#-next야-나는-너를-믿었어>➡️ Next야 나는 너를 믿었어</a></li><li><a href=#-refs>📖 Refs.</a></li></ul></nav></details><div class=page-content><p><strong>모헤윰</strong>의 프론트엔드 앱은 <code>Next.js</code>로 만들어져 있습니다. 팀원 그 누구도 사용해 본 적이 없음에도 굳이 선택한 이유는 <code>NestJS</code>를 써 보니 프레임워크를 사용하는 것이 협업 환경에서 코드 일관성을 지키는 데 도움을 줄 것이라는 막연한 기대와, <code>SSR</code>을 체험해 보고 싶은 학습적인 욕심이 있었습니다. 지금 돌아보니 ‘너와 함께 하길 잘 했어!’ 하는 감상은 없네요.</p><p>기왕 SSR을 체험한다고 시작한 프로젝트인 만큼, 성능에 신경을 쓰지 않을 수 없게 되었습니다. 그러다 제가 좋아하는 어떤 팀의 노션에서 <code>memoization</code>을 통한 컴포넌트 중복 렌더링 방지에 대한 글을 읽었는데요, 이 부분이 때 마침 <a href=https://www.notion.so/next-js-13-app-dir-11191a66a5564a25ba882c8a835afd13>Next.js 13을 적용하지 못해 포기해야만 했던</a> 아픈 상처를 자극하고 있어서 모헤윰에도 시도해 보기로 하였습니다.</p><h2 id=-tldr>🤷 TL;DR</h2><ul><li><code>useMemo</code>로 <code>memoization</code>하여도 context 값을 참조하면 리렌더링이 이루어진다.</li><li>크롬 개발자 도구나 React DevTools를 통해 리렌더링 정보를 확인할 수 있다.</li><li><code>Next.js</code>에서 <code>/pages/_app.tsx</code>에 들어간 컴포넌트는 리렌더링이 방지된다.</li></ul><h2 id=-사이드바의-현재-상황>🤔 사이드바의 현재 상황</h2><p>모헤윰은 Next.js가 요구하는 대로 pages 디렉토리에 각 페이지의 레이아웃을 컴포넌트의 조합으로 구성하고 있습니다. 아래 코드처럼요.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=c1>// index.tsx
 </span></span></span><span class=line><span class=cl><span class=c1></span><span class=kr>export</span> <span class=k>default</span> <span class=kd>function</span> <span class=nx>Home() {</span>
 </span></span><span class=line><span class=cl>  <span class=k>return</span> <span class=p>(</span>
 </span></span><span class=line><span class=cl>    <span class=p>&lt;</span><span class=nt>AuthGuard</span><span class=p>&gt;</span>
@@ -12,7 +12,7 @@
 </span></span><span class=line><span class=cl>    <span class=p>&lt;/</span><span class=nt>AuthGuard</span><span class=p>&gt;</span>
 </span></span><span class=line><span class=cl>  <span class=p>);</span>
 </span></span><span class=line><span class=cl><span class=p>}</span>
-</span></span></code></pre></div><p>하지만 이런 식의 구현은 한 가지 결함이 있습니다. 아래 구현 결과를 보면..</p><p><img src=/images/posts/2022/12/prevent-sidebar-blinking/01-sidebar-blinking.gif alt=befe.gif></p><p>바로 사이드바가 각 페이지마다 하위 컴포넌트로 삽입되어 <strong>라우팅이 일어날 때 마다 새롭게 렌더링</strong>이 되고 있다는 문제인데요, 어차피 똑같이 생긴 사이드바인데 몇 번이고 다시 렌더링 하게 되는 것은 비효율 적일 뿐 아니라, 움짤에서 보이듯이 순간적인 깜빡임이 계속되고 있는 상황입니다. 아직 기능이 많지 않아 렌더링 몇 번 더 한다고 억울할 문제는 아니지만 깜빡임은 조금 참기가 힘들군요.</p><h1 id=-메모야-도와줘>📝 메모야 도와줘</h1><p>무엇이 문제일까요? 일단 저는 앞에서 언급한 글이 설명한 대로 <code>useMemo</code>를 통해 사이드바를 <code>memoize</code>하면 리렌더링을 멈추지 않을까 하는 생각에 사이드바 컴포넌트를 모조리 Memo로 변경하였습니다.</p><p>그러고 보니 리렌더링이 이루어지는 지를 조금 더 정확하게 확인할 방법이 없을까요? 리액트에서 제공하는 <code>React Devtools</code>를 사용하면 렌더링이 이루어지는 컴포넌트를 표시할 수 있다고 합니다. 한번 적용해서 같이 확인해 보겠습니다.</p><p><img src=/images/posts/2022/12/prevent-sidebar-blinking/02-sidebar-blinking.gif alt=memo.gif></p><p>음.. 초록 선이 마구 그어 지는 걸 보니 렌더링도 이루어지고 있고, 실제로도 깜빡임이 발생하고 있습니다. 우리는 결국 2022년에 사이드바가 깜빡이는 웹을 만드는 개발자가 될 수 밖에 없는 걸까요? 정말 속상하군요.</p><p>그런데 제가 봤던 글에는 이런 내용이 있었습니다.</p><blockquote><p><code>Context</code>의 값을 참조하고 있다면 <code>React.memo</code>로 컴포넌트를 <code>memoizaton</code>해도 리렌더링이 발생해요.</p></blockquote><p>사이드바에서 <code>Recoil</code>을 통해 전역 변수를 참조하는 부분이 있었지만 이를 제거하고 테스트해봐도 여전히 결과는 똑같았고, 저는 결국 <code>Next.js 13</code>때 <code>CSS-in-JS</code>가 <code>Context API</code>를 사용한다는 이야기를 들었던 기억이 떠올라, 결국 우리는 또 <code>Emotion</code>때문에 하나의 희망을 포기하게 되는구나, 하고 체념을 하게 되었습니다. 이모션 요놈 하나 때문에 잃게 되는 것이 정말 많군요.</p><h1 id=-next야-나는-너를-믿었어>➡️ Next야 나는 너를 믿었어</h1><p>하지만 여기서 포기하면 여태 쓴 글과 시간이 너무 아까웠습니다. 새 이슈를 처리하기엔 시간이 너무 애매했고 아쉬운 마음에 검색을 하던 중 몇 가지 글들을 발견했습니다.</p><blockquote><p>You can wrap your page component with your <code>Layout</code> component inside <code>_app.js</code>
+</span></span></code></pre></div><p>하지만 이런 식의 구현은 한 가지 결함이 있습니다. 아래 구현 결과를 보면..</p><p><img src=/images/posts/2022/12/prevent-sidebar-blinking/01-sidebar-blinking.gif alt=befe.gif></p><p>바로 사이드바가 각 페이지마다 하위 컴포넌트로 삽입되어 <strong>라우팅이 일어날 때 마다 새롭게 렌더링</strong>이 되고 있다는 문제인데요, 어차피 똑같이 생긴 사이드바인데 몇 번이고 다시 렌더링 하게 되는 것은 비효율 적일 뿐 아니라, 움짤에서 보이듯이 순간적인 깜빡임이 계속되고 있는 상황입니다. 아직 기능이 많지 않아 렌더링 몇 번 더 한다고 억울할 문제는 아니지만 깜빡임은 조금 참기가 힘들군요.</p><h2 id=-메모야-도와줘>📝 메모야 도와줘</h2><p>무엇이 문제일까요? 일단 저는 앞에서 언급한 글이 설명한 대로 <code>useMemo</code>를 통해 사이드바를 <code>memoize</code>하면 리렌더링을 멈추지 않을까 하는 생각에 사이드바 컴포넌트를 모조리 Memo로 변경하였습니다.</p><p>그러고 보니 리렌더링이 이루어지는 지를 조금 더 정확하게 확인할 방법이 없을까요? 리액트에서 제공하는 <code>React Devtools</code>를 사용하면 렌더링이 이루어지는 컴포넌트를 표시할 수 있다고 합니다. 한번 적용해서 같이 확인해 보겠습니다.</p><p><img src=/images/posts/2022/12/prevent-sidebar-blinking/02-sidebar-blinking.gif alt=memo.gif></p><p>음.. 초록 선이 마구 그어 지는 걸 보니 렌더링도 이루어지고 있고, 실제로도 깜빡임이 발생하고 있습니다. 우리는 결국 2022년에 사이드바가 깜빡이는 웹을 만드는 개발자가 될 수 밖에 없는 걸까요? 정말 속상하군요.</p><p>그런데 제가 봤던 글에는 이런 내용이 있었습니다.</p><blockquote><p><code>Context</code>의 값을 참조하고 있다면 <code>React.memo</code>로 컴포넌트를 <code>memoizaton</code>해도 리렌더링이 발생해요.</p></blockquote><p>사이드바에서 <code>Recoil</code>을 통해 전역 변수를 참조하는 부분이 있었지만 이를 제거하고 테스트해봐도 여전히 결과는 똑같았고, 저는 결국 <code>Next.js 13</code>때 <code>CSS-in-JS</code>가 <code>Context API</code>를 사용한다는 이야기를 들었던 기억이 떠올라, 결국 우리는 또 <code>Emotion</code>때문에 하나의 희망을 포기하게 되는구나, 하고 체념을 하게 되었습니다. 이모션 요놈 하나 때문에 잃게 되는 것이 정말 많군요.</p><h2 id=-next야-나는-너를-믿었어>➡️ Next야 나는 너를 믿었어</h2><p>하지만 여기서 포기하면 여태 쓴 글과 시간이 너무 아까웠습니다. 새 이슈를 처리하기엔 시간이 너무 애매했고 아쉬운 마음에 검색을 하던 중 몇 가지 글들을 발견했습니다.</p><blockquote><p>You can wrap your page component with your <code>Layout</code> component inside <code>_app.js</code>
 , it should prevent it from re-mounting.</p></blockquote><p>정답은 <code>Next.js</code>가 가지고 있었군요. 모든 페이지를 렌더링 할때 사용되는 <code>_app.tsx</code>에 달아 놓은 컴포넌트는 리렌더링이 이루어지지 않는다는 내용인 것 같습니다. 이를 적용하기 위해서는 모든 페이지에 각각 달려있는 <code>Frame</code>과 <code>SideBar</code> 컴포넌트를 제거하고 <code>_app.tsx</code>로 이전하는 작업이 필요한데요, 이렇게 하면 <strong>공통된 레이아웃을 적용하기 위해 불필요하게 반복되는 코드의 양을 줄일 수 있는 이점</strong>까지 챙길 수 있습니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=c1>// _app.tsx
 </span></span></span><span class=line><span class=cl><span class=c1></span><span class=kr>export</span> <span class=k>default</span> <span class=kd>function</span> <span class=nx>App</span><span class=p>({</span> <span class=nx>Component</span><span class=p>,</span> <span class=nx>pageProps</span> <span class=p>}</span><span class=o>:</span> <span class=nx>AppProps</span><span class=p>)</span> <span class=p>{</span>
 </span></span><span class=line><span class=cl>  <span class=k>return</span> <span class=p>(</span>
@@ -53,10 +53,10 @@
 </span></span><span class=line><span class=cl>    <span class=p>&lt;/</span><span class=nt>ThemeProvider</span><span class=p>&gt;</span>
 </span></span><span class=line><span class=cl>  <span class=p>);</span>
 </span></span><span class=line><span class=cl><span class=p>}</span>
-</span></span></code></pre></div><p><code>_app.tsx</code>를 수정하고, <code>pages</code> 디렉토리 안의 모든 <code>SideBar</code>를 import하는 부분을 제거했습니다. 페이지 수가 더 많아지고 나서 했으면 손목에 무리가 왔을 것 같다는 생각이 들었습니다.</p><blockquote><p>💡 <strong>CSS-in-JS는 React DevTools에서 렌더링 정보를 잘못 보여준다?</strong><br>정확하지는 않은 정보이지만, React DevTools가 보여주는 리렌더링 정보가 실제 브라우저의 리렌더링과 다를 수 있다는 글을 봤습니다. 실제 리렌더링 상황을 보기 위해서는 크롬 개발자 도구의 <code>렌더링 → 페인트 플래시</code>를 체크해서 확인하라고 하네요.<br>리액트 데브툴과의 차이는 리액트의 virtual render와 브라우저의 native rerender를 보여주는 차이라고 하는데, 좀 더 알아볼 필요가 있어 보입니다.<br><img src=/images/posts/2022/12/prevent-sidebar-blinking/03-sidebar-blinking.png alt=Untitled></p></blockquote><p><img src=/images/posts/2022/12/prevent-sidebar-blinking/04-sidebar-blinking.gif alt=aftr.gif></p><p>브라우저의 페인트 플래시를 체크하고 확인해 보았습니다. gif 파일을 계속 하이라이트해서 정신이 사납지만, 아무튼 우측의 메인 섹션이 계속 리렌더링 되는 동안 사이드바 만큼은 한 번의 깜빡거림 없이 깔끔하게 작동함을 확인하였습니다. 이제 좀 낫네요!</p><h1 id=-refs>📖 Refs.</h1><p><a href=https://velog.io/@gth1123/re-rendering-conditions>re rendering conditions</a><br><a href=https://stackoverflow.com/questions/70531347/next-js-how-to-avoid-re-rendering-of-common-components-between-routed-pages>Next js how to avoid re-rendering of common components between routed pages?</a><br><a href=https://stackoverflow.com/questions/59519286/next-js-how-to-prevent-layout-get-re-mounted>NEXT JS - How to prevent layout get re-mounted?</a><br><a href=https://stackoverflow.com/questions/58987174/how-to-prevent-parent-component-from-re-rendering-with-react-next-js-ssr-two-p>How to prevent parent component from re-rendering with React (next.js) SSR two-pass rendering?</a><br><a href=https://www.notion.so/Component-memoization-feat-context-a4a73e27d15343e6b518a77c0c9d92b3>네?? Component를 memoization해도 리렌더링이 발생한다구요..?? 💦 (feat. context)</a></p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+</span></span></code></pre></div><p><code>_app.tsx</code>를 수정하고, <code>pages</code> 디렉토리 안의 모든 <code>SideBar</code>를 import하는 부분을 제거했습니다. 페이지 수가 더 많아지고 나서 했으면 손목에 무리가 왔을 것 같다는 생각이 들었습니다.</p><blockquote><p>💡 <strong>CSS-in-JS는 React DevTools에서 렌더링 정보를 잘못 보여준다?</strong><br>정확하지는 않은 정보이지만, React DevTools가 보여주는 리렌더링 정보가 실제 브라우저의 리렌더링과 다를 수 있다는 글을 봤습니다. 실제 리렌더링 상황을 보기 위해서는 크롬 개발자 도구의 <code>렌더링 → 페인트 플래시</code>를 체크해서 확인하라고 하네요.<br>리액트 데브툴과의 차이는 리액트의 virtual render와 브라우저의 native rerender를 보여주는 차이라고 하는데, 좀 더 알아볼 필요가 있어 보입니다.<br><img src=/images/posts/2022/12/prevent-sidebar-blinking/03-sidebar-blinking.png alt=Untitled></p></blockquote><p><img src=/images/posts/2022/12/prevent-sidebar-blinking/04-sidebar-blinking.gif alt=aftr.gif></p><p>브라우저의 페인트 플래시를 체크하고 확인해 보았습니다. gif 파일을 계속 하이라이트해서 정신이 사납지만, 아무튼 우측의 메인 섹션이 계속 리렌더링 되는 동안 사이드바 만큼은 한 번의 깜빡거림 없이 깔끔하게 작동함을 확인하였습니다. 이제 좀 낫네요!</p><h2 id=-refs>📖 Refs.</h2><p><a href=https://velog.io/@gth1123/re-rendering-conditions>re rendering conditions</a><br><a href=https://stackoverflow.com/questions/70531347/next-js-how-to-avoid-re-rendering-of-common-components-between-routed-pages>Next js how to avoid re-rendering of common components between routed pages?</a><br><a href=https://stackoverflow.com/questions/59519286/next-js-how-to-prevent-layout-get-re-mounted>NEXT JS - How to prevent layout get re-mounted?</a><br><a href=https://stackoverflow.com/questions/58987174/how-to-prevent-parent-component-from-re-rendering-with-react-next-js-ssr-two-p>How to prevent parent component from re-rendering with React (next.js) SSR two-pass rendering?</a><br><a href=https://www.notion.so/Component-memoization-feat-context-a4a73e27d15343e6b518a77c0c9d92b3>네?? Component를 memoization해도 리렌더링이 발생한다구요..?? 💦 (feat. context)</a></p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/2023/01/browser-rendering-performance/index.html b/posts/2023/01/browser-rendering-performance/index.html
index 971f58b..e31f8d5 100644
--- a/posts/2023/01/browser-rendering-performance/index.html
+++ b/posts/2023/01/browser-rendering-performance/index.html
@@ -1,19 +1,19 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>브라우저 렌더링과 성능 | PrayinForRain.dev</title>
-<meta property="og:title" content="브라우저 렌더링과 성능 | PrayinForRain.dev"><meta name=twitter:title content="브라우저 렌더링과 성능 | PrayinForRain.dev"><meta itemprop=name content="브라우저 렌더링과 성능 | PrayinForRain.dev"><meta name=application-name content="브라우저 렌더링과 성능 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-01-16T16:38:15+0900><meta property="article:published_time" content=2023-01-16T16:38:15+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"브라우저 렌더링과 성능","author":{"@type":"Person","name":""},"datePublished":"2023-01-16","description":"","wordCount":428,"mainEntityOfPage":"True","dateModified":"2023-01-16","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="브라우저 렌더링과 성능 | PrayinForRain.dev"><meta name=twitter:title content="브라우저 렌더링과 성능 | PrayinForRain.dev"><meta itemprop=name content="브라우저 렌더링과 성능 | PrayinForRain.dev"><meta name=application-name content="브라우저 렌더링과 성능 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-01-16T16:38:15+0900><meta property="article:published_time" content=2023-01-16T16:38:15+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"브라우저 렌더링과 성능","author":{"@type":"Person","name":""},"datePublished":"2023-01-16","description":"","wordCount":428,"mainEntityOfPage":"True","dateModified":"2023-01-16","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>브라우저 렌더링과 성능</h1><div class=post-meta><time datetime=2023-01-16T16:38:15+09:00 itemprop=datePublished>2023. 1. 16.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#브라우저-렌더링>브라우저 렌더링</a></li><li><a href=#성능을-최적화하는-방법>성능을 최적화하는 방법</a><ul><li><a href=#documentfragment를-사용>DocumentFragment를 사용</a></li><li><a href=#canvas-사용>Canvas 사용</a></li></ul></li><li><a href=#refs>Refs.</a></li></ul></nav></details><div class=page-content><h1 id=브라우저-렌더링>브라우저 렌더링</h1><p>성능 최적화를 위해, 브라우저가 어떻게 HTML 문서를 화면에 그리는지 과정에 대해 이해할 필요가 있습니다. 브라우저 렌더링은 아래 사진과 같은 흐름으로 이루어집니다.</p><p><img src=/images/posts/2023/01/browser-rendering-performance/01.png alt=Untitled></p><ul><li>서버로부터 HTML, CSS, JavaScript 파일을 받아와 HTML → DOM, CSS → CSSOM으로 변환하고 Render Tree를 구성합니다.</li><li>Render Tree의 노드들에 대한 위치와 크기를 계산합니다. Render Tree의 루트부터 시작하여 모든 노드에 대해 계산을 수행합니다. (Layout)</li><li>계산된 결과물을 기반으로 화면에 실제 노드들을 그립니다. (Paint)</li><li>사용자의 상호작용이나 스크립트를 통한 제어 등으로 HTML 요소의 크기나 위치의 변경이 일어나면 <code>Reflow</code>라는 과정을 수행합니다.<ul><li>Reflow는 Render Tree 구성부터 <strong>모든 작업을 다시 수행</strong>합니다.</li><li>만약 레이아웃 자체에는 변화가 없고, 색상이나 visibility 등의 변경만 있는 경우에는 Paint 과정만을 다시 수행합니다. (Repaint)</li><li>따라서 비용이 큰 <strong>Reflow의 발생을 최대한 줄이는 것이 중요</strong>합니다.</li></ul></li></ul><iframe width=560 height=315 src=https://www.youtube.com/embed/TZz9VHjJzMk title="YouTube video player" frameborder=0 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe><p>이거 되게 좋은 내용인 것 같아요 CSS의 <code>will-change</code>를 통헤 불필요한 GPU 점유를 줄이는 방법도 소개하고 있네요!</p><h1 id=성능을-최적화하는-방법>성능을 최적화하는 방법</h1><h2 id=documentfragment를-사용>DocumentFragment를 사용</h2><p>앞에 정리한 내용과 같이 브라우저 성능에 가장 영향을 미치는 부분은 <code>Reflow</code> 과정입니다. 즉 Reflow의 발생을 줄이면 큰 성능 향상을 노릴 수 있는 것이다. 보통은 스크립트를 통해 요소의 레이아웃을 제어하는 코드는 한 번에 실행되지 않습니다. 즉 여러 줄에 걸쳐 레이아웃을 수정하는 경우 각 행에 대해 Reflow가 발생합니다. - <em>브라우저에 따라 일부 최적화가 이루어지는 경우가 있음</em></p><p>따라서 모든 수정이 완료된 후에 최종 결과물에 대해서만 Reflow를 수행할 필요가 있습니다. <code>DocumentFragment</code>가 그 해결책 중 하나인데, <code>DocumentFragment</code>란 React의 버추얼 DOM과 비슷한 개념으로, DOM과 비슷하게 동작하지만 실제 HTML DOM에는 영향을 주지 않는 <strong>Document의 가벼운 버전</strong>입니다.</p><p><code>DocumentFragment</code>은 렌더링 자체가 이루어지지 않기 때문에 Reflow 걱정 없이 변경이 가능합니다. 따라서 <code>DocumentFragment</code> 내부에서 레이아웃을 변경하고, 최종 결과물을 HTML DOM에 삽입하면 불필요한 Reflow 발생을 막을 수 있습니다. 아래는 간단한 사용 예시입니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-javascript data-lang=javascript><span class=line><span class=cl><span class=kr>const</span> <span class=nx>documentFragment</span> <span class=o>=</span> <span class=k>new</span> <span class=nx>DocumentFragment</span><span class=p>();</span>
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>브라우저 렌더링과 성능</h1><div class=post-meta><time datetime=2023-01-16T16:38:15+09:00 itemprop=datePublished>2023. 1. 16.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#브라우저-렌더링>브라우저 렌더링</a></li><li><a href=#성능을-최적화하는-방법>성능을 최적화하는 방법</a><ul><li><a href=#documentfragment를-사용>DocumentFragment를 사용</a></li><li><a href=#canvas-사용>Canvas 사용</a></li></ul></li><li><a href=#refs>Refs.</a></li></ul></nav></details><div class=page-content><h2 id=브라우저-렌더링>브라우저 렌더링</h2><p>성능 최적화를 위해, 브라우저가 어떻게 HTML 문서를 화면에 그리는지 과정에 대해 이해할 필요가 있습니다. 브라우저 렌더링은 아래 사진과 같은 흐름으로 이루어집니다.</p><p><img src=/images/posts/2023/01/browser-rendering-performance/01.png alt=Untitled></p><ul><li>서버로부터 HTML, CSS, JavaScript 파일을 받아와 HTML → DOM, CSS → CSSOM으로 변환하고 Render Tree를 구성합니다.</li><li>Render Tree의 노드들에 대한 위치와 크기를 계산합니다. Render Tree의 루트부터 시작하여 모든 노드에 대해 계산을 수행합니다. (Layout)</li><li>계산된 결과물을 기반으로 화면에 실제 노드들을 그립니다. (Paint)</li><li>사용자의 상호작용이나 스크립트를 통한 제어 등으로 HTML 요소의 크기나 위치의 변경이 일어나면 <code>Reflow</code>라는 과정을 수행합니다.<ul><li>Reflow는 Render Tree 구성부터 <strong>모든 작업을 다시 수행</strong>합니다.</li><li>만약 레이아웃 자체에는 변화가 없고, 색상이나 visibility 등의 변경만 있는 경우에는 Paint 과정만을 다시 수행합니다. (Repaint)</li><li>따라서 비용이 큰 <strong>Reflow의 발생을 최대한 줄이는 것이 중요</strong>합니다.</li></ul></li></ul><iframe width=560 height=315 src=https://www.youtube.com/embed/TZz9VHjJzMk title="YouTube video player" frameborder=0 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe><p>이거 되게 좋은 내용인 것 같아요 CSS의 <code>will-change</code>를 통헤 불필요한 GPU 점유를 줄이는 방법도 소개하고 있네요!</p><h2 id=성능을-최적화하는-방법>성능을 최적화하는 방법</h2><h3 id=documentfragment를-사용>DocumentFragment를 사용</h3><p>앞에 정리한 내용과 같이 브라우저 성능에 가장 영향을 미치는 부분은 <code>Reflow</code> 과정입니다. 즉 Reflow의 발생을 줄이면 큰 성능 향상을 노릴 수 있는 것이다. 보통은 스크립트를 통해 요소의 레이아웃을 제어하는 코드는 한 번에 실행되지 않습니다. 즉 여러 줄에 걸쳐 레이아웃을 수정하는 경우 각 행에 대해 Reflow가 발생합니다. - <em>브라우저에 따라 일부 최적화가 이루어지는 경우가 있음</em></p><p>따라서 모든 수정이 완료된 후에 최종 결과물에 대해서만 Reflow를 수행할 필요가 있습니다. <code>DocumentFragment</code>가 그 해결책 중 하나인데, <code>DocumentFragment</code>란 React의 버추얼 DOM과 비슷한 개념으로, DOM과 비슷하게 동작하지만 실제 HTML DOM에는 영향을 주지 않는 <strong>Document의 가벼운 버전</strong>입니다.</p><p><code>DocumentFragment</code>은 렌더링 자체가 이루어지지 않기 때문에 Reflow 걱정 없이 변경이 가능합니다. 따라서 <code>DocumentFragment</code> 내부에서 레이아웃을 변경하고, 최종 결과물을 HTML DOM에 삽입하면 불필요한 Reflow 발생을 막을 수 있습니다. 아래는 간단한 사용 예시입니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-javascript data-lang=javascript><span class=line><span class=cl><span class=kr>const</span> <span class=nx>documentFragment</span> <span class=o>=</span> <span class=k>new</span> <span class=nx>DocumentFragment</span><span class=p>();</span>
 </span></span><span class=line><span class=cl><span class=c1>// const documentFragment = document.createDocumentFragment();
 </span></span></span><span class=line><span class=cl><span class=c1></span>
 </span></span><span class=line><span class=cl><span class=kr>const</span> <span class=nx>div</span> <span class=o>=</span> <span class=nb>document</span><span class=p>.</span><span class=nx>createElement</span><span class=p>(</span><span class=s2>&#34;div&#34;</span><span class=p>);</span>
 </span></span><span class=line><span class=cl><span class=c1>// do something...
 </span></span></span><span class=line><span class=cl><span class=c1></span>
 </span></span><span class=line><span class=cl><span class=nb>document</span><span class=p>.</span><span class=nx>getElementById</span><span class=p>(</span><span class=s2>&#34;parent-to-append&#34;</span><span class=p>).</span><span class=nx>appendChild</span><span class=p>(</span><span class=nx>documentFragment</span><span class=p>);</span>
-</span></span></code></pre></div><h2 id=canvas-사용>Canvas 사용</h2><p>일반적으로 <strong>페이지 내의 요소가 많아질수록 레이아웃 계산 과정에서의 계산량이 많아집니다.</strong> 9개의 <code>div</code>가 3*3으로 나열되어 있다고 하면, 그 중 하나의 <code>div</code>의 크기가 변경됨에 따라 나머지 8개의 <code>div</code>도 레이아웃 재계산이 일어납니다. 크기가 고정된 부모 요소로 분리되어 있다면 그 내부의 요소들만 재계산이 일어나지만, 만약 그렇지 않은 경우 문서 전체를 다시 계산해야 할 가능성도 있습니다.</p><p>따라서 복잡한 시각 효과를 연출하거나, 많은 Element를 가진 요소들을 제어해야 하는 경우에는 <code>canvas</code>를 이용하여 렌더링하는 것이 효과적일 수 있습니다. <code>canvas</code>는 정해진 캔버스 영역 안에서만 렌더링이 일어나기 때문에 Reflow를 방지할 수 있기 때문이죠.</p><aside><p>💡 <strong>DOM과 canvas의 성능 차이</strong></p><p><img src=/images/posts/2023/01/browser-rendering-performance/02.png alt=Untitled></p><p>캔버스는 페인팅 영역이 정해져 있습니다.(<code>&lt;canvas></code> 태그의 영역이 정해져 있다) 따라서 <strong>그 안의 요소들 끼리만 계산이 이루어지고, 그 바깥의 HTML 요소들과는 상호작용하지 않기 때문</strong>에, 캔버스의 제어는 Reflow를 발생시키지 않습니다. 따라서 DOM에 직접 렌더링 하는 것보다 비용이 적습니다.</p></aside><h1 id=refs>Refs.</h1><p><a href=https://www.nextree.co.kr/p2081/>JavaScript 최적화: DOM 핸들링 속도 개선</a><br><a href=https://velog.io/@zaman17/%EA%B8%B0%EC%88%A0%EB%A9%B4%EC%A0%91%EB%8C%80%EB%B9%84-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%88%9C%EC%84%9C%EC%99%80-%EC%9B%90%EB%A6%AC>브라우저 렌더링 순서와 원리</a><br><a href=https://velog.io/@hoo00nn/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81>브라우저 렌더링</a><br><a href=https://velog.io/@tnehd1998/%EC%A3%BC%EC%86%8C%EC%B0%BD%EC%97%90-www.google.com%EC%9D%84-%EC%9E%85%EB%A0%A5%ED%96%88%EC%9D%84-%EB%95%8C-%EC%9D%BC%EC%96%B4%EB%82%98%EB%8A%94-%EA%B3%BC%EC%A0%95#-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95>주소창에 www.google.com을 입력했을 때 일어나는 과정</a><br><a href=https://developer.mozilla.org/ko/docs/Web/API/DocumentFragment>DocumentFragment - Web API | MDN</a><br><a href=https://7942yongdae.tistory.com/70>Javascript - DocumentFragment를 사용해보자 [성능 최적화]</a></p><iframe width=560 height=315 src=https://www.youtube.com/embed/ZTnIxIA5KGw title="YouTube video player" frameborder=0 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+</span></span></code></pre></div><h3 id=canvas-사용>Canvas 사용</h3><p>일반적으로 <strong>페이지 내의 요소가 많아질수록 레이아웃 계산 과정에서의 계산량이 많아집니다.</strong> 9개의 <code>div</code>가 3*3으로 나열되어 있다고 하면, 그 중 하나의 <code>div</code>의 크기가 변경됨에 따라 나머지 8개의 <code>div</code>도 레이아웃 재계산이 일어납니다. 크기가 고정된 부모 요소로 분리되어 있다면 그 내부의 요소들만 재계산이 일어나지만, 만약 그렇지 않은 경우 문서 전체를 다시 계산해야 할 가능성도 있습니다.</p><p>따라서 복잡한 시각 효과를 연출하거나, 많은 Element를 가진 요소들을 제어해야 하는 경우에는 <code>canvas</code>를 이용하여 렌더링하는 것이 효과적일 수 있습니다. <code>canvas</code>는 정해진 캔버스 영역 안에서만 렌더링이 일어나기 때문에 Reflow를 방지할 수 있기 때문이죠.</p><aside><p>💡 <strong>DOM과 canvas의 성능 차이</strong></p><p><img src=/images/posts/2023/01/browser-rendering-performance/02.png alt=Untitled></p><p>캔버스는 페인팅 영역이 정해져 있습니다.(<code>&lt;canvas></code> 태그의 영역이 정해져 있다) 따라서 <strong>그 안의 요소들 끼리만 계산이 이루어지고, 그 바깥의 HTML 요소들과는 상호작용하지 않기 때문</strong>에, 캔버스의 제어는 Reflow를 발생시키지 않습니다. 따라서 DOM에 직접 렌더링 하는 것보다 비용이 적습니다.</p></aside><h2 id=refs>Refs.</h2><p><a href=https://www.nextree.co.kr/p2081/>JavaScript 최적화: DOM 핸들링 속도 개선</a><br><a href=https://velog.io/@zaman17/%EA%B8%B0%EC%88%A0%EB%A9%B4%EC%A0%91%EB%8C%80%EB%B9%84-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%88%9C%EC%84%9C%EC%99%80-%EC%9B%90%EB%A6%AC>브라우저 렌더링 순서와 원리</a><br><a href=https://velog.io/@hoo00nn/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81>브라우저 렌더링</a><br><a href=https://velog.io/@tnehd1998/%EC%A3%BC%EC%86%8C%EC%B0%BD%EC%97%90-www.google.com%EC%9D%84-%EC%9E%85%EB%A0%A5%ED%96%88%EC%9D%84-%EB%95%8C-%EC%9D%BC%EC%96%B4%EB%82%98%EB%8A%94-%EA%B3%BC%EC%A0%95#-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95>주소창에 www.google.com을 입력했을 때 일어나는 과정</a><br><a href=https://developer.mozilla.org/ko/docs/Web/API/DocumentFragment>DocumentFragment - Web API | MDN</a><br><a href=https://7942yongdae.tistory.com/70>Javascript - DocumentFragment를 사용해보자 [성능 최적화]</a></p><iframe width=560 height=315 src=https://www.youtube.com/embed/ZTnIxIA5KGw title="YouTube video player" frameborder=0 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
 <iframe width=560 height=315 src=https://www.youtube.com/embed/rm756h1Pr6Y title="YouTube video player" frameborder=0 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
-<iframe width=560 height=315 src=https://www.youtube.com/embed/ZHxbs5WEQzE title="YouTube video player" frameborder=0 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<iframe width=560 height=315 src=https://www.youtube.com/embed/ZHxbs5WEQzE title="YouTube video player" frameborder=0 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/2023/01/css-display/index.html b/posts/2023/01/css-display/index.html
index 7793074..be8f089 100644
--- a/posts/2023/01/css-display/index.html
+++ b/posts/2023/01/css-display/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>CSS의 display 속성 | PrayinForRain.dev</title>
-<meta property="og:title" content="CSS의 display 속성 | PrayinForRain.dev"><meta name=twitter:title content="CSS의 display 속성 | PrayinForRain.dev"><meta itemprop=name content="CSS의 display 속성 | PrayinForRain.dev"><meta name=application-name content="CSS의 display 속성 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/01/css-display/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-01-16T16:38:15+0900><meta property="article:published_time" content=2023-01-16T16:38:15+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"CSS의 display 속성","author":{"@type":"Person","name":""},"datePublished":"2023-01-16","description":"","wordCount":510,"mainEntityOfPage":"True","dateModified":"2023-01-16","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/01/css-display/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="CSS의 display 속성 | PrayinForRain.dev"><meta name=twitter:title content="CSS의 display 속성 | PrayinForRain.dev"><meta itemprop=name content="CSS의 display 속성 | PrayinForRain.dev"><meta name=application-name content="CSS의 display 속성 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/01/css-display/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-01-16T16:38:15+0900><meta property="article:published_time" content=2023-01-16T16:38:15+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"CSS의 display 속성","author":{"@type":"Person","name":""},"datePublished":"2023-01-16","description":"","wordCount":510,"mainEntityOfPage":"True","dateModified":"2023-01-16","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/01/css-display/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>CSS의 display 속성</h1><div class=post-meta><time datetime=2023-01-16T16:38:15+09:00 itemprop=datePublished>2023. 1. 16.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#display>display:</a><ul><li><a href=#바깥쪽>바깥쪽</a></li><li><a href=#안쪽>안쪽</a></li></ul></li><li><a href=#궁금증들>궁금증들</a><ul><li><a href=#inline-block은-왜-레거시가-되었을까>inline-block은 왜 레거시가 되었을까?</a></li><li><a href=#visibility-hidden과-display-none의-차이는><code>visibility: hidden;</code>과 <code>display: none;</code>의 차이는?</a></li></ul></li><li><a href=#refs>Refs.</a></li></ul></nav></details><div class=page-content><p>CSS의 <code>display</code> 속성은 HTML element가 block인지, inline인지, 그리고 자식 element들을 어떤 식으로 표시할지를 정하는 속성입니다. 다시 말해 요소 자체가 형제 요소와 배치되는 방법과, 자식 요소를 배치하는 방법을 함께 정의하기 때문에 ‘<strong>안쪽</strong>’과 ‘<strong>바깥쪽</strong>’으로 속성을 나눌 수 있습니다.</p><h1 id=display>display:</h1><h2 id=바깥쪽>바깥쪽</h2><p><img src=/images/posts/2023/01/css-display/01.png alt=Untitled></p><ul><li><code>block</code><ul><li>한 줄에는 한 요소만 올 수 있게 하는 속성입니다.</li></ul></li><li><code>inline</code><ul><li>요소가 한 줄에 여러 개 표시 될 수 있음을 의미합니다. 만약 <code>inline</code>이 적용된 요소의 전후에 <code>inline</code> 요소를 표시할 공간이 있다면 한 줄에 표시됩니다.</li></ul></li></ul><p>사진의 div들은 각각 <code>inline</code>, <code>block</code> 속성을 지정하였습니다. 보이는 것과 같이 <code>block</code> 속성의 요소는 한 줄에 하나만 존재할 수 있으며, <code>inline</code> 속성은 충분한 공간이 있으면 한 줄에 표시됩니다. <code>span</code>과 <code>p</code>태그의 차이와 비슷합니다.</p><p>또 <code>inline</code>의 경우에는 크기가 항상 포함하는 내용의 크기만큼만을 갖기 때문에, 따로 <code>width</code>나 <code>height</code>를 지정해도 제어가 불가능합니다. 예제의 <code>inline div</code>는 <code>width: 500%;</code>를 지정한 상태이지만 포함한 텍스트의 크기만큼만을 가집니다. 크기를 조절할 수 있으면서 inline 속성의 특성을 갖도록 하는 <code>inline-block</code> 속성이 존재했으나, 이는 현재 레거시로 분류되어 <code>inline flow-root</code>로 대체할 수 있다고 합니다.</p><h2 id=안쪽>안쪽</h2><p>요소가 포함하는 자식 요소들의 배치 방법을 정하는 속성입니다. 이 외에도 실험적 기능으로 <code>flow</code>, <code>ruby</code>가 존재합니다.</p><ul><li><code>flow-root</code><ul><li>외부에 <code>block</code>, 내부에 <code>float</code>이 적용된 것과 같이 동작합니다.</li></ul></li><li><code>table</code><ul><li><code>&lt;table></code> 태그의 내부인 것처럼 동작합니다.</li></ul></li><li><code>flex</code><ul><li>Flexbox model에 따라서 <code>block</code> 요소처럼 동작합니다. 단방향 레이아웃에 적합합니다.<br><a href=https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout>CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN</a></li></ul></li><li><code>grid</code><ul><li>Grid layout을 형성합니다.<br><a href=https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_concepts_of_grid_layout>Basic concepts of grid layout - CSS: Cascading Style Sheets | MDN</a></li></ul></li></ul><h1 id=궁금증들>궁금증들</h1><h2 id=inline-block은-왜-레거시가-되었을까>inline-block은 왜 레거시가 되었을까?</h2><p>앞에서 언급했던 바와 같이 <code>inline-block</code>은 <code>inline flow-root</code>로 대체되어 레거시로 분류되었습니다. 그렇지만 <code>inline flow-root</code>라는 속성은 굉장히 생소합니다. 왜 이런 식으로 변경되었을까요?</p><p><code>CSS2</code>까지의 스펙에서는 <code>display</code>에 두 개 이상의 값을 지정할 수 없었습니다. 그래서 바깥쪽에 <code>inline</code>, 안쪽에 <code>flex</code>를 지정하기 위해서 <code>inline-flex</code>같은 값을 따로 정해 두고 사용해야 했는데요, <code>inline-block</code> 역시 그런 케이스입니다. 그러다가 <code>CSS3</code>이 나오면서 <code>display</code>에 두 개 이상의 값을 지정할 수 있게 되면서 이런 값들이 사라진 것이죠.</p><p>그렇다고 해서 이제 <strong>inline-block을 사용하지 않는 것이 좋은 것은 아니</strong>라고 합니다. MDN에서는 <code>display</code>에 여러 개의 값을 지정하는 <code>CSS3</code>의 스펙에 대해 아래와 같은 언급을 추가하고 있습니다.</p><blockquote><p>The Level 3 specification details two values for the <code>display</code> property — enabling the specification of the outer and inner display type explicitly — but this is not yet well-supported by browsers.</p></blockquote><p>즉, 아직 모든 브라우저에서 완전히 호환되고 있지 않기 때문에 <strong>deprecated가 아닌 legacy</strong>로 분류된 것이라고 할 수 있겠네요.</p><h2 id=visibility-hidden과-display-none의-차이는><code>visibility: hidden;</code>과 <code>display: none;</code>의 차이는?</h2><p><code>visibility: hidden;</code>과 <code>display: none;</code>은 둘 다 사용자의 브라우저에서 요소를 보이지 않게 하는 방법입니다. 같은 동작을 하는 속성이 두 개 씩이나 필요할까요? 둘의 차이점은 크게 두 가지가 있습니다.</p><ul><li><code>visibility: hidden;</code>은 요소가 차지하는 공간은 보존된다.<ul><li>display: none;은 아예 페이지 내에서 요소가 없는 것처럼 간주합니다. 따라서 레이아웃을 구성할 때에도 해당 요소는 고려하지 않는데요, 반면 <code>visibility: hidden</code>은 해당 요소가 차지하는 공간은 그대로 둔 채 레이아웃을 구성하므로, 해당 부분은 빈 공간으로 남게 됩니다.</li></ul></li><li><code>innerText</code>로 접근했을 때의 차이<br><img src=/images/posts/2023/01/css-display/02.png alt=Untitled><ul><li><code>innerText</code>로 텍스트를 가져오면 위 사진과 같이 차이가 있습니다. 첫 번째는 일반적인(보이는) 상태에서, 두 번째는 <code>display: none;</code>, 세 번째는 <code>visibility: hidden;</code>을 적용한 상태입니다. 반면 <code>innerHTML</code>은 셋 다 같은 결과를 냅니다.</li></ul></li></ul><p>두 방법 외에도 브라우저에서 요소를 숨기는 방법은 여러 가지가 있는데요, 관심이 있으신 분은 접근성 문제도 엮여 있기 때문에 <a href=https://mulder21c.github.io/2019/03/22/screen-hide-text/>[이 포스트]</a>를 참고해 보시길 추천합니다.</p><h1 id=refs>Refs.</h1><p><a href=https://developer.mozilla.org/ko/docs/Web/CSS/display>display - CSS: Cascading Style Sheets | MDN</a></p><p><a href=https://www.w3.org/TR/css-display-3/>CSS Display Module Level 3</a></p><p><a href=https://mulder21c.github.io/2019/03/22/screen-hide-text/>접근 가능한 숨김 텍스트</a></p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>CSS의 display 속성</h1><div class=post-meta><time datetime=2023-01-16T16:38:15+09:00 itemprop=datePublished>2023. 1. 16.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#display>display:</a><ul><li><a href=#바깥쪽>바깥쪽</a></li><li><a href=#안쪽>안쪽</a></li></ul></li><li><a href=#궁금증들>궁금증들</a><ul><li><a href=#inline-block은-왜-레거시가-되었을까>inline-block은 왜 레거시가 되었을까?</a></li><li><a href=#visibility-hidden과-display-none의-차이는><code>visibility: hidden;</code>과 <code>display: none;</code>의 차이는?</a></li></ul></li><li><a href=#refs>Refs.</a></li></ul></nav></details><div class=page-content><p>CSS의 <code>display</code> 속성은 HTML element가 block인지, inline인지, 그리고 자식 element들을 어떤 식으로 표시할지를 정하는 속성입니다. 다시 말해 요소 자체가 형제 요소와 배치되는 방법과, 자식 요소를 배치하는 방법을 함께 정의하기 때문에 ‘<strong>안쪽</strong>’과 ‘<strong>바깥쪽</strong>’으로 속성을 나눌 수 있습니다.</p><h2 id=display>display:</h2><h3 id=바깥쪽>바깥쪽</h3><p><img src=/images/posts/2023/01/css-display/01.png alt=Untitled></p><ul><li><code>block</code><ul><li>한 줄에는 한 요소만 올 수 있게 하는 속성입니다.</li></ul></li><li><code>inline</code><ul><li>요소가 한 줄에 여러 개 표시 될 수 있음을 의미합니다. 만약 <code>inline</code>이 적용된 요소의 전후에 <code>inline</code> 요소를 표시할 공간이 있다면 한 줄에 표시됩니다.</li></ul></li></ul><p>사진의 div들은 각각 <code>inline</code>, <code>block</code> 속성을 지정하였습니다. 보이는 것과 같이 <code>block</code> 속성의 요소는 한 줄에 하나만 존재할 수 있으며, <code>inline</code> 속성은 충분한 공간이 있으면 한 줄에 표시됩니다. <code>span</code>과 <code>p</code>태그의 차이와 비슷합니다.</p><p>또 <code>inline</code>의 경우에는 크기가 항상 포함하는 내용의 크기만큼만을 갖기 때문에, 따로 <code>width</code>나 <code>height</code>를 지정해도 제어가 불가능합니다. 예제의 <code>inline div</code>는 <code>width: 500%;</code>를 지정한 상태이지만 포함한 텍스트의 크기만큼만을 가집니다. 크기를 조절할 수 있으면서 inline 속성의 특성을 갖도록 하는 <code>inline-block</code> 속성이 존재했으나, 이는 현재 레거시로 분류되어 <code>inline flow-root</code>로 대체할 수 있다고 합니다.</p><h3 id=안쪽>안쪽</h3><p>요소가 포함하는 자식 요소들의 배치 방법을 정하는 속성입니다. 이 외에도 실험적 기능으로 <code>flow</code>, <code>ruby</code>가 존재합니다.</p><ul><li><code>flow-root</code><ul><li>외부에 <code>block</code>, 내부에 <code>float</code>이 적용된 것과 같이 동작합니다.</li></ul></li><li><code>table</code><ul><li><code>&lt;table></code> 태그의 내부인 것처럼 동작합니다.</li></ul></li><li><code>flex</code><ul><li>Flexbox model에 따라서 <code>block</code> 요소처럼 동작합니다. 단방향 레이아웃에 적합합니다.<br><a href=https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout>CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN</a></li></ul></li><li><code>grid</code><ul><li>Grid layout을 형성합니다.<br><a href=https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_concepts_of_grid_layout>Basic concepts of grid layout - CSS: Cascading Style Sheets | MDN</a></li></ul></li></ul><h2 id=궁금증들>궁금증들</h2><h3 id=inline-block은-왜-레거시가-되었을까>inline-block은 왜 레거시가 되었을까?</h3><p>앞에서 언급했던 바와 같이 <code>inline-block</code>은 <code>inline flow-root</code>로 대체되어 레거시로 분류되었습니다. 그렇지만 <code>inline flow-root</code>라는 속성은 굉장히 생소합니다. 왜 이런 식으로 변경되었을까요?</p><p><code>CSS2</code>까지의 스펙에서는 <code>display</code>에 두 개 이상의 값을 지정할 수 없었습니다. 그래서 바깥쪽에 <code>inline</code>, 안쪽에 <code>flex</code>를 지정하기 위해서 <code>inline-flex</code>같은 값을 따로 정해 두고 사용해야 했는데요, <code>inline-block</code> 역시 그런 케이스입니다. 그러다가 <code>CSS3</code>이 나오면서 <code>display</code>에 두 개 이상의 값을 지정할 수 있게 되면서 이런 값들이 사라진 것이죠.</p><p>그렇다고 해서 이제 <strong>inline-block을 사용하지 않는 것이 좋은 것은 아니</strong>라고 합니다. MDN에서는 <code>display</code>에 여러 개의 값을 지정하는 <code>CSS3</code>의 스펙에 대해 아래와 같은 언급을 추가하고 있습니다.</p><blockquote><p>The Level 3 specification details two values for the <code>display</code> property — enabling the specification of the outer and inner display type explicitly — but this is not yet well-supported by browsers.</p></blockquote><p>즉, 아직 모든 브라우저에서 완전히 호환되고 있지 않기 때문에 <strong>deprecated가 아닌 legacy</strong>로 분류된 것이라고 할 수 있겠네요.</p><h3 id=visibility-hidden과-display-none의-차이는><code>visibility: hidden;</code>과 <code>display: none;</code>의 차이는?</h3><p><code>visibility: hidden;</code>과 <code>display: none;</code>은 둘 다 사용자의 브라우저에서 요소를 보이지 않게 하는 방법입니다. 같은 동작을 하는 속성이 두 개 씩이나 필요할까요? 둘의 차이점은 크게 두 가지가 있습니다.</p><ul><li><code>visibility: hidden;</code>은 요소가 차지하는 공간은 보존된다.<ul><li>display: none;은 아예 페이지 내에서 요소가 없는 것처럼 간주합니다. 따라서 레이아웃을 구성할 때에도 해당 요소는 고려하지 않는데요, 반면 <code>visibility: hidden</code>은 해당 요소가 차지하는 공간은 그대로 둔 채 레이아웃을 구성하므로, 해당 부분은 빈 공간으로 남게 됩니다.</li></ul></li><li><code>innerText</code>로 접근했을 때의 차이<br><img src=/images/posts/2023/01/css-display/02.png alt=Untitled><ul><li><code>innerText</code>로 텍스트를 가져오면 위 사진과 같이 차이가 있습니다. 첫 번째는 일반적인(보이는) 상태에서, 두 번째는 <code>display: none;</code>, 세 번째는 <code>visibility: hidden;</code>을 적용한 상태입니다. 반면 <code>innerHTML</code>은 셋 다 같은 결과를 냅니다.</li></ul></li></ul><p>두 방법 외에도 브라우저에서 요소를 숨기는 방법은 여러 가지가 있는데요, 관심이 있으신 분은 접근성 문제도 엮여 있기 때문에 <a href=https://mulder21c.github.io/2019/03/22/screen-hide-text/>[이 포스트]</a>를 참고해 보시길 추천합니다.</p><h2 id=refs>Refs.</h2><p><a href=https://developer.mozilla.org/ko/docs/Web/CSS/display>display - CSS: Cascading Style Sheets | MDN</a></p><p><a href=https://www.w3.org/TR/css-display-3/>CSS Display Module Level 3</a></p><p><a href=https://mulder21c.github.io/2019/03/22/screen-hide-text/>접근 가능한 숨김 텍스트</a></p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/2023/01/ecmascript/index.html b/posts/2023/01/ecmascript/index.html
index af6e565..a614150 100644
--- a/posts/2023/01/ecmascript/index.html
+++ b/posts/2023/01/ecmascript/index.html
@@ -1,11 +1,11 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>ECMAScript | PrayinForRain.dev</title>
-<meta property="og:title" content="ECMAScript | PrayinForRain.dev"><meta name=twitter:title content="ECMAScript | PrayinForRain.dev"><meta itemprop=name content="ECMAScript | PrayinForRain.dev"><meta name=application-name content="ECMAScript | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/01/ecmascript/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-01-25T16:35:01+0900><meta property="article:published_time" content=2023-01-25T16:35:01+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"ECMAScript","author":{"@type":"Person","name":""},"datePublished":"2023-01-25","description":"","wordCount":699,"mainEntityOfPage":"True","dateModified":"2023-01-25","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/01/ecmascript/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="ECMAScript | PrayinForRain.dev"><meta name=twitter:title content="ECMAScript | PrayinForRain.dev"><meta itemprop=name content="ECMAScript | PrayinForRain.dev"><meta name=application-name content="ECMAScript | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/01/ecmascript/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-01-25T16:35:01+0900><meta property="article:published_time" content=2023-01-25T16:35:01+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"ECMAScript","author":{"@type":"Person","name":""},"datePublished":"2023-01-25","description":"","wordCount":699,"mainEntityOfPage":"True","dateModified":"2023-01-25","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/01/ecmascript/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>ECMAScript</h1><div class=post-meta><time datetime=2023-01-25T16:35:01+09:00 itemprop=datePublished>2023. 1. 25.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#ecma-international>Ecma international</a></li><li><a href=#ecmascript>ECMAScript</a><ul><li><a href=#자바스크립트의-탄생>자바스크립트의 탄생</a></li><li><a href=#jscript의-등장과-자바스크립트의-파편화>JScript의 등장과 자바스크립트의 파편화</a></li><li><a href=#ecmascript-변천사>ECMAScript 변천사</a></li></ul></li><li><a href=#궁금증들>궁금증들</a><ul><li><a href=#commonjs는-무엇일까>CommonJS는 무엇일까?</a></li></ul></li><li><a href=#refs>Refs.</a></li></ul></nav></details><div class=page-content><p><img src=/images/posts/2023/01/ecmascript/01.png alt=untitled></p><h1 id=ecma-international>Ecma international</h1><blockquote><p><strong>Ecma International</strong> is an industry association dedicated to the standardization of information and communication systems
-<em>Emca International은 정보통신 시스템의 표준화를 위한 국제 표준화 기구입니다.</em> > <a href=https://www.ecma-international.org/>https://www.ecma-international.org/</a></p></blockquote><p>Ecma International은 Ecma 사이트에서 소개하듯, 정보통신 시스템의 표준을 만들기 위한 국제 기구입니다. C#, JSON, .u3d 확장자 등 여러 방면에서의 표준안을 제시하였으며, 개발자를 위한 IEEE같은 존재로 이해하면 될 것 같습니다.(제 생각)</p><p>유럽에서 컴퓨터 시스템을 표준화하기 위해 설립되어서 <strong>ECMA</strong>(<em>European Computer Manufacturers Association</em>)라는 이름을 가지고 있으나 유럽국가 뿐 아니라 전세계의 표준으로 활용되기 위해 <strong>Ecma International</strong>로 이름을 변경하였습니다. <strong>ECMA</strong> 자체는 두문자어이지만 지금의 이름은 하나의 고유명사로 사용되는 셈이죠. 따라서 <strong>Ecma</strong>로 표기하는 것이 맞습니다.</p><p>Ecma가 정의한 표준에 대해서는 아래 링크에서 볼 수 있습니다.</p><p><a href=https://www.ecma-international.org/publications-and-standards/standards/>Standards - Ecma International</a></p><h1 id=ecmascript>ECMAScript</h1><p>ECMA스크립트란 앞에서 설명한 Ecma 인터내셔널이 정의하는 <strong>스크립트 프로그래밍 언어</strong>(≒인터프리터 언어) 중 하나입니다. 그리고 이 언어는 곧 자바스크립트를 가리킵니다. 즉 <strong>ECMAScript(<em>ECMA-262</em>)에 의해 표준화된 자바스크립트의 이름</strong>입니다.</p><p>얼마 전에 면접에서 <em>자바스크립트가 ECMAScript의 표준을 준수한 언어</em>라고 이야기했는데, 이는 틀린 표현입니다. 이를 이해하기 위해서는 자바스크립트의 역사에 대해 이해할 필요가 있습니다.</p><h2 id=자바스크립트의-탄생>자바스크립트의 탄생</h2><p><img src=/images/posts/2023/01/ecmascript/02.png alt=untitled></p><p><code>넷스케이프</code>를 아시나요? Internet Explorer가 세상을 지배하기 전에 주로 사용되었던 인터넷 브라우저입니다. 지금은 파이어폭스가 넷스케이프의 역사를 이어가고 있는데요, 당시 유료였던 넷스케이프는 무료로 마구마구 배포되는 IE에게 밀려나게 됩니다.</p><p>우리가 알고 있는 바와 같이 HTML과 CSS만으로 웹페이지를 표현하는 데에는 명확한 제한이 있습니다. 동적인 페이지를 만들 수 없다는 점이죠. 이러한 한계를 극복하기 위해 넷스케이프는 1995년, 간단한 프로그래밍 언어를 도입하기로 했고, 이 것이 <strong>브렌던 아이크</strong>가 개발한 자바스크립트의 전신, <code>모카(Mocha)</code>입니다. 모카의 이름은 LiveScript를 거쳐 지금의 <code>JavaScript</code>가 되었습니다. 당시 유행한 Java와 문법이 비슷하다는 점을 강조하여 마케팅 전략을 세운 것이죠.</p><h2 id=jscript의-등장과-자바스크립트의-파편화>JScript의 등장과 자바스크립트의 파편화</h2><p>그 이후 1996년에 마이크로소프트 역시 IE에서 자바스크립트를 지원하기 시작했습니다. 단순 지원 뿐 아니라 IE만의 독자적인 기능을 추가해서 비슷하지만 차이가 있는 언어를 구현했죠. 이 언어는 <code>JScript</code>라고 부르고, 가장 큰 특징으로는 윈도우에 종속적이며 악명높은 <code>ActiveX</code>를 사용할 수 있는 기반이 된다는 점이 있습니다. JavaScript와 호환이 되지 않는 것은 아니지만 그렇다고 완전하게 지원하는 것은 또 아니였습니다.</p><p>JavaScript와 JScript의 차이가 생기면서, 사용자는 환경에 따라 다른 페이지를 보게 되었습니다. <strong>크로스 브라우징 이슈</strong>가 생겨난 것이죠. 더군다나 마이크로소프트의 공격적인 마케팅 전략으로 인해 JScript의 점유율은 점점 높아지고 있었습니다. 파편화 문제가 점점 심화되자 모든 브라우저에서 같은 결과물을 보여주는 자바스크립트 표준이 필요해졌습니다. 이에 따라 넷스케이프는 Ecma International(당시 ECMA)에 자바스크립트 표준화를 요청하였고, 그렇게 <code>ECMA-262</code>라는 표준이 탄생했습니다.</p><p>즉, <strong>JavaScript가 생겨나고, 파편화 현상이 일어나자 이를 표준화하기 위해 ECMAScript가 등장한 것</strong>이라고 요약할 수 있겠습니다.</p><h2 id=ecmascript-변천사>ECMAScript 변천사</h2><p>ECMAScript는 지금에 와서는 거의 매 년 새 버전이 배포되고 있습니다. 2015년까지는 ES6와 같은 네이밍을 사용했지만, 배포 주기가 연단위로 빨라지는 상황에 맞추어 ES2020과 같은 네이밍을 사용하게 되었습니다. 넘버링은 대충 <code>ES6 = ES2015</code>이후로 1년에 1씩 버전이 오른다고 알고 계시면 되겠습니다.</p><table><thead><tr><th>판</th><th>출판일</th><th>이름</th><th>이전 판과의 차이점</th></tr></thead><tbody><tr><td>1</td><td>1997년 6월</td><td></td><td>초판</td></tr><tr><td>2</td><td>1998년 6월</td><td></td><td>ISO/IEC 16262 국제 표준과 완전히 동일한 규격을 적용하기 위한 변경.</td></tr><tr><td>3</td><td>1999년 12월</td><td></td><td>강력한 정규 표현식, 향상된 문자열 처리, 새로운 제어문 , try/catch 예외 처리, 엄격한 오류 정의, 수치형 출력의 포매팅 등.</td></tr><tr><td>4</td><td>버려짐</td><td></td><td>4번째 판은 언어에 얽힌 정치적 차이로 인해 버려졌다. 이 판을 작업 가운데 일부는 5번째 판을 이루는 기본이 되고 다른 일부는 ECMA스크립트의 기본을 이루고 있다.</td></tr><tr><td>5</td><td>2009년 12월</td><td></td><td>더 철저한 오류 검사를 제공하고 오류 경향이 있는 구조를 피하는 하부집합인 &ldquo;strict mode"를 추가한다. 3번째 판의 규격에 있던 수많은 애매한 부분을 명확히 한다.</td></tr><tr><td>5.1</td><td>2011년 6월</td><td></td><td>ECMA스크립트 표준의 제 5.1판은 ISO/IEC 16262:2011 국제 표준 제3판과 함께 한다.</td></tr><tr><td>6</td><td>2015년 6월</td><td>ECMAScript 2015 (ES2015)</td><td>6판에는 클래스와 모듈 같은 복잡한 응용 프로그램을 작성하기 위한 새로운 문법이 추가되었다. 하지만 이러한 문법의 의미는 5판의 strict mode와 같은 방법으로 정의된다. 이 판은 &ldquo;ECMAScript Harmony&rdquo; 혹은 &ldquo;ES6 Harmony&rdquo; 등으로 불리기도 한다.</td></tr><tr><td>7</td><td>2016년 6월</td><td>ECMAScript 2016 (ES2016)</td><td>제곱연산자 추가, Array.prototype.includes</td></tr><tr><td>8</td><td>2017년 6월</td><td>ECMAScript 2017 (ES2017)</td><td>함수 표현식의 인자에서 trailing commas 허용, Object values/entries 메소드, async/await 등.</td></tr><tr><td>9</td><td>2018년 6월</td><td>ECMAScript 2018 (ES2018)</td><td>Promise.finally, Async iteration, object rest/spread property 등.</td></tr><tr><td>10</td><td>2019년 6월</td><td>ECMAScript 2019 (ES2019)</td><td>Object.fromEntries, flat, flatMap, Symbol.description, optional catch 등.</td></tr></tbody></table><h1 id=궁금증들>궁금증들</h1><h2 id=commonjs는-무엇일까>CommonJS는 무엇일까?</h2><p>지금까지 이야기한 자바스크립트는 모두 브라우저에서 사용하기 위한 표준이였습니다. 하지만 우리는 지금 브라우저 없이도 자바스크립트를 사용하고 있습니다. 자바스크립트를 브라우저 밖에서 사용하기 위한 논의가 계속해서 이루어졌고, 이를 위해 <strong>자바스크립트를 모듈화</strong>할 수 있는 표준이 제시되었습니다. 이 것이 <code>CommonJS</code>이고, 이를 이용해 만들어진 것이 <code>Node.js</code>입니다.</p><p>아.. 복잡해요 아래 글 좋은 것 같아요.. 나중에 더 찾아보고 정리할게요.. 근데 사실 이게 다라서 더 정리해야 할 내용이 있는지 모르겠어요. ES도 모듈화를 챙기기 위해 ESM이라는 표준이 있다는 것 정도?</p><p><a href=https://velog.io/@jjunyjjuny/ES-Modules-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0>[ JavaScript ] ES Modules 정리하기</a></p><h1 id=refs>Refs.</h1><p><a href=https://ko.wikipedia.org/wiki/Ecma_%EC%9D%B8%ED%84%B0%EB%82%B4%EC%85%94%EB%84%90>Ecma 인터내셔널 - 위키백과</a><br><a href=https://www.ecma-international.org/>Ecma International</a><br><a href=https://poiemaweb.com/js-introduction>Introduction | PoiemaWeb</a><br><a href=https://velog.io/@leobit/CommonJS>CommonJS</a><br><a href=https://ui.toast.com/fe-guide/ko_ES5-TO-ES6>ES5 to ES6+</a><br><a href=https://www.howdy-mj.me/javascript/how-to-read-ecmascript>ECMAScript 스펙 읽는법</a></p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>ECMAScript</h1><div class=post-meta><time datetime=2023-01-25T16:35:01+09:00 itemprop=datePublished>2023. 1. 25.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#ecma-international>Ecma international</a></li><li><a href=#ecmascript>ECMAScript</a><ul><li><a href=#자바스크립트의-탄생>자바스크립트의 탄생</a></li><li><a href=#jscript의-등장과-자바스크립트의-파편화>JScript의 등장과 자바스크립트의 파편화</a></li><li><a href=#ecmascript-변천사>ECMAScript 변천사</a></li></ul></li><li><a href=#궁금증들>궁금증들</a><ul><li><a href=#commonjs는-무엇일까>CommonJS는 무엇일까?</a></li></ul></li><li><a href=#refs>Refs.</a></li></ul></nav></details><div class=page-content><p><img src=/images/posts/2023/01/ecmascript/01.png alt=untitled></p><h2 id=ecma-international>Ecma international</h2><blockquote><p><strong>Ecma International</strong> is an industry association dedicated to the standardization of information and communication systems
+<em>Emca International은 정보통신 시스템의 표준화를 위한 국제 표준화 기구입니다.</em> > <a href=https://www.ecma-international.org/>https://www.ecma-international.org/</a></p></blockquote><p>Ecma International은 Ecma 사이트에서 소개하듯, 정보통신 시스템의 표준을 만들기 위한 국제 기구입니다. C#, JSON, .u3d 확장자 등 여러 방면에서의 표준안을 제시하였으며, 개발자를 위한 IEEE같은 존재로 이해하면 될 것 같습니다.(제 생각)</p><p>유럽에서 컴퓨터 시스템을 표준화하기 위해 설립되어서 <strong>ECMA</strong>(<em>European Computer Manufacturers Association</em>)라는 이름을 가지고 있으나 유럽국가 뿐 아니라 전세계의 표준으로 활용되기 위해 <strong>Ecma International</strong>로 이름을 변경하였습니다. <strong>ECMA</strong> 자체는 두문자어이지만 지금의 이름은 하나의 고유명사로 사용되는 셈이죠. 따라서 <strong>Ecma</strong>로 표기하는 것이 맞습니다.</p><p>Ecma가 정의한 표준에 대해서는 아래 링크에서 볼 수 있습니다.</p><p><a href=https://www.ecma-international.org/publications-and-standards/standards/>Standards - Ecma International</a></p><h2 id=ecmascript>ECMAScript</h2><p>ECMA스크립트란 앞에서 설명한 Ecma 인터내셔널이 정의하는 <strong>스크립트 프로그래밍 언어</strong>(≒인터프리터 언어) 중 하나입니다. 그리고 이 언어는 곧 자바스크립트를 가리킵니다. 즉 <strong>ECMAScript(<em>ECMA-262</em>)에 의해 표준화된 자바스크립트의 이름</strong>입니다.</p><p>얼마 전에 면접에서 <em>자바스크립트가 ECMAScript의 표준을 준수한 언어</em>라고 이야기했는데, 이는 틀린 표현입니다. 이를 이해하기 위해서는 자바스크립트의 역사에 대해 이해할 필요가 있습니다.</p><h3 id=자바스크립트의-탄생>자바스크립트의 탄생</h3><p><img src=/images/posts/2023/01/ecmascript/02.png alt=untitled></p><p><code>넷스케이프</code>를 아시나요? Internet Explorer가 세상을 지배하기 전에 주로 사용되었던 인터넷 브라우저입니다. 지금은 파이어폭스가 넷스케이프의 역사를 이어가고 있는데요, 당시 유료였던 넷스케이프는 무료로 마구마구 배포되는 IE에게 밀려나게 됩니다.</p><p>우리가 알고 있는 바와 같이 HTML과 CSS만으로 웹페이지를 표현하는 데에는 명확한 제한이 있습니다. 동적인 페이지를 만들 수 없다는 점이죠. 이러한 한계를 극복하기 위해 넷스케이프는 1995년, 간단한 프로그래밍 언어를 도입하기로 했고, 이 것이 <strong>브렌던 아이크</strong>가 개발한 자바스크립트의 전신, <code>모카(Mocha)</code>입니다. 모카의 이름은 LiveScript를 거쳐 지금의 <code>JavaScript</code>가 되었습니다. 당시 유행한 Java와 문법이 비슷하다는 점을 강조하여 마케팅 전략을 세운 것이죠.</p><h3 id=jscript의-등장과-자바스크립트의-파편화>JScript의 등장과 자바스크립트의 파편화</h3><p>그 이후 1996년에 마이크로소프트 역시 IE에서 자바스크립트를 지원하기 시작했습니다. 단순 지원 뿐 아니라 IE만의 독자적인 기능을 추가해서 비슷하지만 차이가 있는 언어를 구현했죠. 이 언어는 <code>JScript</code>라고 부르고, 가장 큰 특징으로는 윈도우에 종속적이며 악명높은 <code>ActiveX</code>를 사용할 수 있는 기반이 된다는 점이 있습니다. JavaScript와 호환이 되지 않는 것은 아니지만 그렇다고 완전하게 지원하는 것은 또 아니였습니다.</p><p>JavaScript와 JScript의 차이가 생기면서, 사용자는 환경에 따라 다른 페이지를 보게 되었습니다. <strong>크로스 브라우징 이슈</strong>가 생겨난 것이죠. 더군다나 마이크로소프트의 공격적인 마케팅 전략으로 인해 JScript의 점유율은 점점 높아지고 있었습니다. 파편화 문제가 점점 심화되자 모든 브라우저에서 같은 결과물을 보여주는 자바스크립트 표준이 필요해졌습니다. 이에 따라 넷스케이프는 Ecma International(당시 ECMA)에 자바스크립트 표준화를 요청하였고, 그렇게 <code>ECMA-262</code>라는 표준이 탄생했습니다.</p><p>즉, <strong>JavaScript가 생겨나고, 파편화 현상이 일어나자 이를 표준화하기 위해 ECMAScript가 등장한 것</strong>이라고 요약할 수 있겠습니다.</p><h3 id=ecmascript-변천사>ECMAScript 변천사</h3><p>ECMAScript는 지금에 와서는 거의 매 년 새 버전이 배포되고 있습니다. 2015년까지는 ES6와 같은 네이밍을 사용했지만, 배포 주기가 연단위로 빨라지는 상황에 맞추어 ES2020과 같은 네이밍을 사용하게 되었습니다. 넘버링은 대충 <code>ES6 = ES2015</code>이후로 1년에 1씩 버전이 오른다고 알고 계시면 되겠습니다.</p><table><thead><tr><th style=text-align:left>판</th><th style=text-align:left>출판일</th><th style=text-align:left>이름</th><th style=text-align:left>이전 판과의 차이점</th></tr></thead><tbody><tr><td style=text-align:left>1</td><td style=text-align:left>1997년 6월</td><td style=text-align:left></td><td style=text-align:left>초판</td></tr><tr><td style=text-align:left>2</td><td style=text-align:left>1998년 6월</td><td style=text-align:left></td><td style=text-align:left>ISO/IEC 16262 국제 표준과 완전히 동일한 규격을 적용하기 위한 변경.</td></tr><tr><td style=text-align:left>3</td><td style=text-align:left>1999년 12월</td><td style=text-align:left></td><td style=text-align:left>강력한 정규 표현식, 향상된 문자열 처리, 새로운 제어문 , try/catch 예외 처리, 엄격한 오류 정의, 수치형 출력의 포매팅 등.</td></tr><tr><td style=text-align:left>4</td><td style=text-align:left>버려짐</td><td style=text-align:left></td><td style=text-align:left>4번째 판은 언어에 얽힌 정치적 차이로 인해 버려졌다. 이 판을 작업 가운데 일부는 5번째 판을 이루는 기본이 되고 다른 일부는 ECMA스크립트의 기본을 이루고 있다.</td></tr><tr><td style=text-align:left>5</td><td style=text-align:left>2009년 12월</td><td style=text-align:left></td><td style=text-align:left>더 철저한 오류 검사를 제공하고 오류 경향이 있는 구조를 피하는 하부집합인 &ldquo;strict mode"를 추가한다. 3번째 판의 규격에 있던 수많은 애매한 부분을 명확히 한다.</td></tr><tr><td style=text-align:left>5.1</td><td style=text-align:left>2011년 6월</td><td style=text-align:left></td><td style=text-align:left>ECMA스크립트 표준의 제 5.1판은 ISO/IEC 16262:2011 국제 표준 제3판과 함께 한다.</td></tr><tr><td style=text-align:left>6</td><td style=text-align:left>2015년 6월</td><td style=text-align:left>ECMAScript 2015 (ES2015)</td><td style=text-align:left>6판에는 클래스와 모듈 같은 복잡한 응용 프로그램을 작성하기 위한 새로운 문법이 추가되었다. 하지만 이러한 문법의 의미는 5판의 strict mode와 같은 방법으로 정의된다. 이 판은 &ldquo;ECMAScript Harmony&rdquo; 혹은 &ldquo;ES6 Harmony&rdquo; 등으로 불리기도 한다.</td></tr><tr><td style=text-align:left>7</td><td style=text-align:left>2016년 6월</td><td style=text-align:left>ECMAScript 2016 (ES2016)</td><td style=text-align:left>제곱연산자 추가, Array.prototype.includes</td></tr><tr><td style=text-align:left>8</td><td style=text-align:left>2017년 6월</td><td style=text-align:left>ECMAScript 2017 (ES2017)</td><td style=text-align:left>함수 표현식의 인자에서 trailing commas 허용, Object values/entries 메소드, async/await 등.</td></tr><tr><td style=text-align:left>9</td><td style=text-align:left>2018년 6월</td><td style=text-align:left>ECMAScript 2018 (ES2018)</td><td style=text-align:left>Promise.finally, Async iteration, object rest/spread property 등.</td></tr><tr><td style=text-align:left>10</td><td style=text-align:left>2019년 6월</td><td style=text-align:left>ECMAScript 2019 (ES2019)</td><td style=text-align:left>Object.fromEntries, flat, flatMap, Symbol.description, optional catch 등.</td></tr></tbody></table><h2 id=궁금증들>궁금증들</h2><h3 id=commonjs는-무엇일까>CommonJS는 무엇일까?</h3><p>지금까지 이야기한 자바스크립트는 모두 브라우저에서 사용하기 위한 표준이였습니다. 하지만 우리는 지금 브라우저 없이도 자바스크립트를 사용하고 있습니다. 자바스크립트를 브라우저 밖에서 사용하기 위한 논의가 계속해서 이루어졌고, 이를 위해 <strong>자바스크립트를 모듈화</strong>할 수 있는 표준이 제시되었습니다. 이 것이 <code>CommonJS</code>이고, 이를 이용해 만들어진 것이 <code>Node.js</code>입니다.</p><p>아.. 복잡해요 아래 글 좋은 것 같아요.. 나중에 더 찾아보고 정리할게요.. 근데 사실 이게 다라서 더 정리해야 할 내용이 있는지 모르겠어요. ES도 모듈화를 챙기기 위해 ESM이라는 표준이 있다는 것 정도?</p><p><a href=https://velog.io/@jjunyjjuny/ES-Modules-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0>[ JavaScript ] ES Modules 정리하기</a></p><h2 id=refs>Refs.</h2><p><a href=https://ko.wikipedia.org/wiki/Ecma_%EC%9D%B8%ED%84%B0%EB%82%B4%EC%85%94%EB%84%90>Ecma 인터내셔널 - 위키백과</a><br><a href=https://www.ecma-international.org/>Ecma International</a><br><a href=https://poiemaweb.com/js-introduction>Introduction | PoiemaWeb</a><br><a href=https://velog.io/@leobit/CommonJS>CommonJS</a><br><a href=https://ui.toast.com/fe-guide/ko_ES5-TO-ES6>ES5 to ES6+</a><br><a href=https://www.howdy-mj.me/javascript/how-to-read-ecmascript>ECMAScript 스펙 읽는법</a></p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/2023/01/migrating-to-hugo/index.html b/posts/2023/01/migrating-to-hugo/index.html
index 8a5b5f2..6f8761e 100644
--- a/posts/2023/01/migrating-to-hugo/index.html
+++ b/posts/2023/01/migrating-to-hugo/index.html
@@ -1,12 +1,12 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Hugo로 블로그를 옮기자 | PrayinForRain.dev</title>
-<meta property="og:title" content="Hugo로 블로그를 옮기자 | PrayinForRain.dev"><meta name=twitter:title content="Hugo로 블로그를 옮기자 | PrayinForRain.dev"><meta itemprop=name content="Hugo로 블로그를 옮기자 | PrayinForRain.dev"><meta name=application-name content="Hugo로 블로그를 옮기자 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-01-30T19:17:55+0900><meta property="article:published_time" content=2023-01-30T19:17:55+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"Hugo로 블로그를 옮기자","author":{"@type":"Person","name":""},"datePublished":"2023-01-30","description":"","wordCount":887,"mainEntityOfPage":"True","dateModified":"2023-01-30","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Hugo로 블로그를 옮기자 | PrayinForRain.dev"><meta name=twitter:title content="Hugo로 블로그를 옮기자 | PrayinForRain.dev"><meta itemprop=name content="Hugo로 블로그를 옮기자 | PrayinForRain.dev"><meta name=application-name content="Hugo로 블로그를 옮기자 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-01-30T19:17:55+0900><meta property="article:published_time" content=2023-01-30T19:17:55+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"Hugo로 블로그를 옮기자","author":{"@type":"Person","name":""},"datePublished":"2023-01-30","description":"","wordCount":887,"mainEntityOfPage":"True","dateModified":"2023-01-30","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>Hugo로 블로그를 옮기자</h1><div class=post-meta><time datetime=2023-01-30T19:17:55+09:00 itemprop=datePublished>2023. 1. 30.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#블로그를-이전하게-된-계기>블로그를 이전하게 된 계기</a></li><li><a href=#why-hugo>Why Hugo?</a></li><li><a href=#그래서-좋은가요>그래서 좋은가요?</a><ul><li><a href=#익명-댓글이-불가능합니다>익명 댓글이 불가능합니다.</a></li><li><a href=#방대하지만-어딘가-나사빠진-테마>방대하지만 어딘가 나사빠진 테마</a></li><li><a href=#toc의-문제>TOC의 문제</a></li></ul></li><li><a href=#앞으로의-계획>앞으로의 계획</a></li><li><a href=#refs>Refs.</a></li></ul></nav></details><div class=page-content><p>알음알음 티스푼 공사로 티스토리에서 이 곳으로 블로그를 옮겼습니다. 티스토리에 있던 컨텐츠 대부분은 옮기지 않았습니다. 별 의미도 없고 너무 사적인 내용이 많았기 때문입니다. 또 티스토리만의 감성이라고 해야 하나.. 약간 그 곳에 더 맞는 포인트들이 있어서 아카이브같은 느낌으로 그냥 티스토리에 두기로 했습니다. 곳곳에 티스토리 링크가 있으니 시간을 효율적으로 버리고 싶은 분이 있다면 읽어주셔도 감사할 것 같습니다.
-아무튼 옮겨야 하는 컨텐츠도 없으면서 정말 오랜 기간 삽질을 했는데, 그 과정에 대해 이야기해보려고 합니다.</p><h1 id=블로그를-이전하게-된-계기>블로그를 이전하게 된 계기</h1><p><figure><img src=/images/posts/2023/01/migrating-to-hugo/01.png alt=image><figcaption><p>아직도 저 Main Page라는 글자의 의미를 모르겠습니다..</p></figcaption></figure>사실 저는 티스토리를 무척 잘 쓰고 있었습니다. 적당한 커스터마이징이 되면서, 어릴 때 사용하던 네이버 블로그와 거의 유사하고, 각종 분석 기능까지 알아서 제공해 주었기 때문이죠. 그런데 부스트캠프를 겪으면서 많은 것들이 달라졌습니다. 가장 큰 문제는 <strong>마크다운</strong>이었습니다.</p><p>사실 처음 부스트캠프를 시작할 때 각종 문서를 마크다운으로 작성해야 하는 상황이었어서 자바스크립트보다도 마크다운을 먼저 배워야 했습니다. 개인적으로는 마크다운의 첫 인상이 너무 투박하고 별로였는데.. 반년동안 지독하게 엮이고 <code>hackmd</code>나 <code>Notion</code>같은 툴에 익숙해 지면서 마크다운과 사랑에 빠지기 시작했습니다. 생각해 보니 노션도 정말 별로였는데 지금은 용케 잘 쓰고 있네요.<figure><img src=/images/posts/2023/01/migrating-to-hugo/02.png alt=image><figcaption><p>결국 제 부스트캠프는 마크다운에서 시작해서 마크다운으로 끝났습니다.</p></figcaption></figure>하다하다 저는 마지막 팀 프로젝트 주제를 마크다운 에디터로 잡기에 이릅니다. 이유는 적당히 어려웠고, 적당히 도전적이었고, GitHub PR과 노션을 활용하면서 마크다운 뽕(?)에 취해 있었기 때문입니다. 하다 보니, 대충 써도 일관성 있는 서식으로 가독성을 보장해 주는 점도 너무 마음에 들었습니다.</p><p>여기까지 오니 문제가 있었습니다. 제가 학습정리를 위해 활용하던 노션은 마크다운 기반이었고, 그 외에 다른 툴들도 마크다운에 반쯤 걸쳐 있었는데, 네이버, 다음을 필두로 하는 한국형 블로그들은 그렇지 않았습니다. <a href=https://prayinforrain.tistory.com/68>노션으로 작성했던 TIL 문서를 티스토리로 옮기는 시도</a>를 해 보았지만 초안 작성과 비슷한 만큼의 시간이 걸렸습니다. 티스토리에서도 마크다운 에디터를 지원하고 있었지만 티스토리 스스로가 일부 지원하지 않는 기능이 있음을 경고하고 있어서 마음에 들지 않았습니다. 아마 기본 에디터와의 변환이 원활하지 않음을 의미하는 문구겠지만, 그 외에도 마크다운으로 작성한 글을 미리보기 하는 과정이 너무 번거로운 문제도 있었습니다.</p><h1 id=why-hugo>Why Hugo?</h1><p>그렇게 저는 주변 사람들에게 블로그 옮긴다~ 옮긴다 노래를 부르다가 결국 새해가 되어서야 이주를 준비합니다. <code>velog</code>나 <code>medium</code>같은 선택지도 있었지만 저는 기왕 하는 거 깃허브 페이지를 사용해 보자는 생각을 했습니다. 왜냐면 <code>prayinforrain.github.io</code>라는 URL이 너무 멋있었기 때문입니다. 아무튼 이를 위해 Javascript, API, Markup의 요소를 이루는 <code>Jamstack</code>이라는 패턴에 대해서 배웠고, 대충 알아보니 Jamstack 사이트 생성기의 <a href=https://jamstack.org/generators/>순위를 제공하는 사이트</a>가 있었습니다. 이미 프로젝트에 사용했고, 많은.. 작업이 필요함을 알고 있는 <code>Next.js</code>를 제외하고 <code>Jekyll</code>, <code>Hugo</code>, <code>Gatsby</code> 세 가지 선택지가 눈에 띕니다. 저는 <code>Hugo</code>를 선택했고, 이유는 다음과 같습니다.</p><ul><li><code>Jekyll</code>은 <code>GitHub Pages</code>에서 직접 추천하는 SSG이지만, 맞는 테마를 찾기가 어려웠습니다.<ul><li>다양한 사이트에, 다양한 양식으로 테마 리스트가 있었고, 이 중에서 무료이면서 제가 원하는 테마를 찾기가 너무 괴로웠습니다. 코어 부분이 <code>Ruby</code>로 작성되어 있었기 때문에, 제가 원하는 기능을 최대한 갖춘 테마를 고르는 것이 중요했습니다. 또.. 일부 테마 리스트는 사이트 자체의 관리가 되지 않아 아예 레거시인 것도 있었습니다.</li></ul></li><li><code>Gatsby</code>는 레퍼런스를 찾기가 어려웠습니다.<ul><li><strong>React로 만들어졌다</strong>는 절대로 무시하지 못할 최고의 강점이 있었음에도 제가 만족할만한 레퍼런스를 찾지 못했습니다. 사실 Gatsby로 블로그를 만드는 한글 레퍼런스야 무척 많았지만.. 글을 쓰는 지금에 와서는 기억이 잘 나지 않는 어떤 문제에 대한 답을 찾지 못했습니다.(억까 아님)</li><li>사실 최근에 <a href=https://www.inflearn.com/course/gatsby-%EA%B8%B0%EC%88%A0%EB%B8%94%EB%A1%9C%EA%B7%B8>인프런의 Gatsby 강의</a>를 발견해서 공부하기 싫을 때 조금씩 읽고 있는데 충분히 마음에 들었다 생각되면 금세 여기로 옮길 지도 모르겠습니다.</li></ul></li><li><code>Hugo</code>는 테마 목록을 <a href=https://themes.gohugo.io/>공식 사이트</a>에서 제공해주고 있었습니다.</li><li><code>Gatsby</code>를 제외하고 나니, <code>Jekyll</code>과 <code>Hugo</code>중에서는 <code>Hugo</code>의 빌드 속도가 빠르다는 평이 많았습니다.<ul><li>이 것도 포스트가 몇 백 개 쌓이고 나서의 문제이지만 그냥 괜히 성능을 중시하고 싶었습니다.</li></ul></li></ul><p>대충 이 정도까지 정리하고 나서, 문서들을 쭉 읽어본 후에 Hugo를 사용중인 지인분께 이런저런 질문을 드렸습니다.</p><figure><img src=/images/posts/2023/01/migrating-to-hugo/03.png alt=image><figcaption><p>제가 사람 복 하나는.. 끝내줍니다.</p></figcaption></figure><p>아무튼 이런 과정을 거쳐 <code>Hugo</code>로 블로그를 만들었습니다. 그 과정에 대한 내용은 나중에 또 따로 쓸 수도 있겠네요. 안 쓸 확률이 조금 더 클 것 같아요.</p><h1 id=그래서-좋은가요>그래서 좋은가요?</h1><p><figure><img src=/images/posts/2023/01/migrating-to-hugo/04.png alt=image><figcaption><p>아니 이걸 뭘 한 달 씩이나..</p></figcaption></figure>사실 1월 초에 레포지토리를 만들어서.. 지금은 나름 많은 부분을 고치고 어쩌고 하고 있습니다. 그렇지만 마음에 들지 않는 부분이 너무 많습니다.</p><h2 id=익명-댓글이-불가능합니다>익명 댓글이 불가능합니다.</h2><p>제가 무언가의 학습 정리를 마구마구 했다고 치고, 거기에 잘못된 정보가 적혀있다고 가정합시다. 그걸 발견한 누군가는 저에게 잘못을 바로잡아주고 싶어서 댓글 창을 보지만 로그인이 필요해서 귀찮아서 그냥 지나가기로 합니다.
-그런 상황이 생기면 안되니 익명 댓글 기능이 필요한데 SSG 특성상 그게 어렵습니다. 나중에 <code>Firebase</code>를 이용해서 연동할 수도 있을 것 같은데.. 나중에 제가 직접 <code>Next.js</code>로 블로그를 만들면 꼭 반영하겠습니다.</p><h2 id=방대하지만-어딘가-나사빠진-테마>방대하지만 어딘가 나사빠진 테마</h2><p>제가 쓰고 있는 <a href=https://github.com/xianmin/hugo-theme-jane>Jane</a>이라는 테마는 기본이 꽤 충실합니다. 레이아웃의 변경을 거의 거치지 않고 사용 중인데, 이 녀석의 Quick Start 문서를 따라하니 빌드된 결과물 파일이 ignore되지 않는다던가, 페이지네이션을 위한 버튼들의 정렬이나 크기가 제각각이라던가, 이해 불가능한 일부 폴더 구조라던가.. 잔수정을 정말정말 많이 했습니다.</p><h2 id=toc의-문제>TOC의 문제</h2><p><figure><img src=/images/posts/2023/01/migrating-to-hugo/05.png alt=image><figcaption><p>왜 특정 depth만 파랗게 칠하는지..</p></figcaption></figure>스크롤을 내리면 우측에 Floating TOC(Table of Contents)가 표시되는데, 이 녀석이 문제가 많습니다. 생긴 것도 조금 문제고, <code>h2</code> 내지는 <code>h3</code> 태그만 파싱하는 모양입니다. <code>h1</code>도 안되고, 더 깊어도 목차에 나오지 않습니다. <code>h1</code>은 찾아보니 Hugo 엔진이 고의적으로 그렇게 구현한 모양인데, 더 깊이는 왜 안되는지 잘 모르겠습니다. 꼭 넣고 싶은 기능이었는데 너무 못생기고 작동방식이 별로여서 눈물을 머금고 하루의 수정사항을 모두 날렸습니다.</p><aside><p>(23/03/19 수정) 이 부분은 해결되었습니다. <a href=https://github.com/gohugoio/hugo/releases/tag/v0.60.0>Hugo v0.60.0</a>에 이 부분을 커스터마이징할 수 있는 옵션들을 제공하고 있다고 하네요. 덕분에 지금과 같은 멋★진 TOC를 만들 수 있었습니다.<br><img src=/images/posts/2023/01/migrating-to-hugo/07.png alt=untitled></p></aside><h1 id=앞으로의-계획>앞으로의 계획</h1><p><figure><img src=/images/posts/2023/01/migrating-to-hugo/06.png alt=image><figcaption><p>음흉한 야망이 담긴 요구사항 리스트</p></figcaption></figure>우선은 지금까지 수정한 테마가 아깝기도 하고, 엄청 흉악한 수준의 못생김은 아니기 때문에, 일단 이대로 사용하기로 했습니다. 그렇지만 다음 블로그로 갈아탈 준비가 되면 주저하지 않을 것 같습니다. Gatsby를 쓸 것인지는 잘 모르겠고, 언젠가 직접 블로그 엔진을 만들어 볼 생각은 있습니다. 앞서 말한 익명 댓글 문제를 해결하기 위해서라두요. 그러려면 엄청 공부를 많이 해야 할 것 같네요.. 주변 분들에겐 5년 계획이라고 말했는데 좀 더 길게 부를 걸 그랬습니다.</p><h1 id=refs>Refs.</h1><p><a href=https://jamstack.org/generators/>Site Generators - A List of Static Site Generators for Jamstack Sites</a><br><a href=https://wcho21.github.io/2022/08/30/how-to-create-a-hugo-blog/>휴고 블로그 만들기</a><br><a href=https://www.inflearn.com/course/gatsby-%EA%B8%B0%EC%88%A0%EB%B8%94%EB%A1%9C%EA%B7%B8>React 기반 Gatsby로 기술 블로그 개발하기</a><br>그리고.. 저의 뜬금없고 깐깐한 질문에 친절하게 답해주신 <code>@wcho21</code>님, 언제나 블로그에 있어서 프로 마인드이신 <code>@kasterra</code>님께 감사 인사 드립니다.</p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>Hugo로 블로그를 옮기자</h1><div class=post-meta><time datetime=2023-01-30T19:17:55+09:00 itemprop=datePublished>2023. 1. 30.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#블로그를-이전하게-된-계기>블로그를 이전하게 된 계기</a></li><li><a href=#why-hugo>Why Hugo?</a></li><li><a href=#그래서-좋은가요>그래서 좋은가요?</a><ul><li><a href=#익명-댓글이-불가능합니다>익명 댓글이 불가능합니다.</a></li><li><a href=#방대하지만-어딘가-나사빠진-테마>방대하지만 어딘가 나사빠진 테마</a></li><li><a href=#toc의-문제>TOC의 문제</a></li></ul></li><li><a href=#앞으로의-계획>앞으로의 계획</a></li><li><a href=#refs>Refs.</a></li></ul></nav></details><div class=page-content><p>알음알음 티스푼 공사로 티스토리에서 이 곳으로 블로그를 옮겼습니다. 티스토리에 있던 컨텐츠 대부분은 옮기지 않았습니다. 별 의미도 없고 너무 사적인 내용이 많았기 때문입니다. 또 티스토리만의 감성이라고 해야 하나.. 약간 그 곳에 더 맞는 포인트들이 있어서 아카이브같은 느낌으로 그냥 티스토리에 두기로 했습니다. 곳곳에 티스토리 링크가 있으니 시간을 효율적으로 버리고 싶은 분이 있다면 읽어주셔도 감사할 것 같습니다.
+아무튼 옮겨야 하는 컨텐츠도 없으면서 정말 오랜 기간 삽질을 했는데, 그 과정에 대해 이야기해보려고 합니다.</p><h2 id=블로그를-이전하게-된-계기>블로그를 이전하게 된 계기</h2><p><figure><img src=/images/posts/2023/01/migrating-to-hugo/01.png alt=image><figcaption><p>아직도 저 Main Page라는 글자의 의미를 모르겠습니다..</p></figcaption></figure>사실 저는 티스토리를 무척 잘 쓰고 있었습니다. 적당한 커스터마이징이 되면서, 어릴 때 사용하던 네이버 블로그와 거의 유사하고, 각종 분석 기능까지 알아서 제공해 주었기 때문이죠. 그런데 부스트캠프를 겪으면서 많은 것들이 달라졌습니다. 가장 큰 문제는 <strong>마크다운</strong>이었습니다.</p><p>사실 처음 부스트캠프를 시작할 때 각종 문서를 마크다운으로 작성해야 하는 상황이었어서 자바스크립트보다도 마크다운을 먼저 배워야 했습니다. 개인적으로는 마크다운의 첫 인상이 너무 투박하고 별로였는데.. 반년동안 지독하게 엮이고 <code>hackmd</code>나 <code>Notion</code>같은 툴에 익숙해 지면서 마크다운과 사랑에 빠지기 시작했습니다. 생각해 보니 노션도 정말 별로였는데 지금은 용케 잘 쓰고 있네요.<figure><img src=/images/posts/2023/01/migrating-to-hugo/02.png alt=image><figcaption><p>결국 제 부스트캠프는 마크다운에서 시작해서 마크다운으로 끝났습니다.</p></figcaption></figure>하다하다 저는 마지막 팀 프로젝트 주제를 마크다운 에디터로 잡기에 이릅니다. 이유는 적당히 어려웠고, 적당히 도전적이었고, GitHub PR과 노션을 활용하면서 마크다운 뽕(?)에 취해 있었기 때문입니다. 하다 보니, 대충 써도 일관성 있는 서식으로 가독성을 보장해 주는 점도 너무 마음에 들었습니다.</p><p>여기까지 오니 문제가 있었습니다. 제가 학습정리를 위해 활용하던 노션은 마크다운 기반이었고, 그 외에 다른 툴들도 마크다운에 반쯤 걸쳐 있었는데, 네이버, 다음을 필두로 하는 한국형 블로그들은 그렇지 않았습니다. <a href=https://prayinforrain.tistory.com/68>노션으로 작성했던 TIL 문서를 티스토리로 옮기는 시도</a>를 해 보았지만 초안 작성과 비슷한 만큼의 시간이 걸렸습니다. 티스토리에서도 마크다운 에디터를 지원하고 있었지만 티스토리 스스로가 일부 지원하지 않는 기능이 있음을 경고하고 있어서 마음에 들지 않았습니다. 아마 기본 에디터와의 변환이 원활하지 않음을 의미하는 문구겠지만, 그 외에도 마크다운으로 작성한 글을 미리보기 하는 과정이 너무 번거로운 문제도 있었습니다.</p><h2 id=why-hugo>Why Hugo?</h2><p>그렇게 저는 주변 사람들에게 블로그 옮긴다~ 옮긴다 노래를 부르다가 결국 새해가 되어서야 이주를 준비합니다. <code>velog</code>나 <code>medium</code>같은 선택지도 있었지만 저는 기왕 하는 거 깃허브 페이지를 사용해 보자는 생각을 했습니다. 왜냐면 <code>prayinforrain.github.io</code>라는 URL이 너무 멋있었기 때문입니다. 아무튼 이를 위해 Javascript, API, Markup의 요소를 이루는 <code>Jamstack</code>이라는 패턴에 대해서 배웠고, 대충 알아보니 Jamstack 사이트 생성기의 <a href=https://jamstack.org/generators/>순위를 제공하는 사이트</a>가 있었습니다. 이미 프로젝트에 사용했고, 많은.. 작업이 필요함을 알고 있는 <code>Next.js</code>를 제외하고 <code>Jekyll</code>, <code>Hugo</code>, <code>Gatsby</code> 세 가지 선택지가 눈에 띕니다. 저는 <code>Hugo</code>를 선택했고, 이유는 다음과 같습니다.</p><ul><li><code>Jekyll</code>은 <code>GitHub Pages</code>에서 직접 추천하는 SSG이지만, 맞는 테마를 찾기가 어려웠습니다.<ul><li>다양한 사이트에, 다양한 양식으로 테마 리스트가 있었고, 이 중에서 무료이면서 제가 원하는 테마를 찾기가 너무 괴로웠습니다. 코어 부분이 <code>Ruby</code>로 작성되어 있었기 때문에, 제가 원하는 기능을 최대한 갖춘 테마를 고르는 것이 중요했습니다. 또.. 일부 테마 리스트는 사이트 자체의 관리가 되지 않아 아예 레거시인 것도 있었습니다.</li></ul></li><li><code>Gatsby</code>는 레퍼런스를 찾기가 어려웠습니다.<ul><li><strong>React로 만들어졌다</strong>는 절대로 무시하지 못할 최고의 강점이 있었음에도 제가 만족할만한 레퍼런스를 찾지 못했습니다. 사실 Gatsby로 블로그를 만드는 한글 레퍼런스야 무척 많았지만.. 글을 쓰는 지금에 와서는 기억이 잘 나지 않는 어떤 문제에 대한 답을 찾지 못했습니다.(억까 아님)</li><li>사실 최근에 <a href=https://www.inflearn.com/course/gatsby-%EA%B8%B0%EC%88%A0%EB%B8%94%EB%A1%9C%EA%B7%B8>인프런의 Gatsby 강의</a>를 발견해서 공부하기 싫을 때 조금씩 읽고 있는데 충분히 마음에 들었다 생각되면 금세 여기로 옮길 지도 모르겠습니다.</li></ul></li><li><code>Hugo</code>는 테마 목록을 <a href=https://themes.gohugo.io/>공식 사이트</a>에서 제공해주고 있었습니다.</li><li><code>Gatsby</code>를 제외하고 나니, <code>Jekyll</code>과 <code>Hugo</code>중에서는 <code>Hugo</code>의 빌드 속도가 빠르다는 평이 많았습니다.<ul><li>이 것도 포스트가 몇 백 개 쌓이고 나서의 문제이지만 그냥 괜히 성능을 중시하고 싶었습니다.</li></ul></li></ul><p>대충 이 정도까지 정리하고 나서, 문서들을 쭉 읽어본 후에 Hugo를 사용중인 지인분께 이런저런 질문을 드렸습니다.</p><figure><img src=/images/posts/2023/01/migrating-to-hugo/03.png alt=image><figcaption><p>제가 사람 복 하나는.. 끝내줍니다.</p></figcaption></figure><p>아무튼 이런 과정을 거쳐 <code>Hugo</code>로 블로그를 만들었습니다. 그 과정에 대한 내용은 나중에 또 따로 쓸 수도 있겠네요. 안 쓸 확률이 조금 더 클 것 같아요.</p><h2 id=그래서-좋은가요>그래서 좋은가요?</h2><p><figure><img src=/images/posts/2023/01/migrating-to-hugo/04.png alt=image><figcaption><p>아니 이걸 뭘 한 달 씩이나..</p></figcaption></figure>사실 1월 초에 레포지토리를 만들어서.. 지금은 나름 많은 부분을 고치고 어쩌고 하고 있습니다. 그렇지만 마음에 들지 않는 부분이 너무 많습니다.</p><h3 id=익명-댓글이-불가능합니다>익명 댓글이 불가능합니다.</h3><p>제가 무언가의 학습 정리를 마구마구 했다고 치고, 거기에 잘못된 정보가 적혀있다고 가정합시다. 그걸 발견한 누군가는 저에게 잘못을 바로잡아주고 싶어서 댓글 창을 보지만 로그인이 필요해서 귀찮아서 그냥 지나가기로 합니다.
+그런 상황이 생기면 안되니 익명 댓글 기능이 필요한데 SSG 특성상 그게 어렵습니다. 나중에 <code>Firebase</code>를 이용해서 연동할 수도 있을 것 같은데.. 나중에 제가 직접 <code>Next.js</code>로 블로그를 만들면 꼭 반영하겠습니다.</p><h3 id=방대하지만-어딘가-나사빠진-테마>방대하지만 어딘가 나사빠진 테마</h3><p>제가 쓰고 있는 <a href=https://github.com/xianmin/hugo-theme-jane>Jane</a>이라는 테마는 기본이 꽤 충실합니다. 레이아웃의 변경을 거의 거치지 않고 사용 중인데, 이 녀석의 Quick Start 문서를 따라하니 빌드된 결과물 파일이 ignore되지 않는다던가, 페이지네이션을 위한 버튼들의 정렬이나 크기가 제각각이라던가, 이해 불가능한 일부 폴더 구조라던가.. 잔수정을 정말정말 많이 했습니다.</p><h3 id=toc의-문제>TOC의 문제</h3><p><figure><img src=/images/posts/2023/01/migrating-to-hugo/05.png alt=image><figcaption><p>왜 특정 depth만 파랗게 칠하는지..</p></figcaption></figure>스크롤을 내리면 우측에 Floating TOC(Table of Contents)가 표시되는데, 이 녀석이 문제가 많습니다. 생긴 것도 조금 문제고, <code>h2</code> 내지는 <code>h3</code> 태그만 파싱하는 모양입니다. <code>h1</code>도 안되고, 더 깊어도 목차에 나오지 않습니다. <code>h1</code>은 찾아보니 Hugo 엔진이 고의적으로 그렇게 구현한 모양인데, 더 깊이는 왜 안되는지 잘 모르겠습니다. 꼭 넣고 싶은 기능이었는데 너무 못생기고 작동방식이 별로여서 눈물을 머금고 하루의 수정사항을 모두 날렸습니다.</p><aside><p>(23/03/19 수정) 이 부분은 해결되었습니다. <a href=https://github.com/gohugoio/hugo/releases/tag/v0.60.0>Hugo v0.60.0</a>에 이 부분을 커스터마이징할 수 있는 옵션들을 제공하고 있다고 하네요. 덕분에 지금과 같은 멋★진 TOC를 만들 수 있었습니다.<br><img src=/images/posts/2023/01/migrating-to-hugo/07.png alt=untitled></p></aside><h2 id=앞으로의-계획>앞으로의 계획</h2><p><figure><img src=/images/posts/2023/01/migrating-to-hugo/06.png alt=image><figcaption><p>음흉한 야망이 담긴 요구사항 리스트</p></figcaption></figure>우선은 지금까지 수정한 테마가 아깝기도 하고, 엄청 흉악한 수준의 못생김은 아니기 때문에, 일단 이대로 사용하기로 했습니다. 그렇지만 다음 블로그로 갈아탈 준비가 되면 주저하지 않을 것 같습니다. Gatsby를 쓸 것인지는 잘 모르겠고, 언젠가 직접 블로그 엔진을 만들어 볼 생각은 있습니다. 앞서 말한 익명 댓글 문제를 해결하기 위해서라두요. 그러려면 엄청 공부를 많이 해야 할 것 같네요.. 주변 분들에겐 5년 계획이라고 말했는데 좀 더 길게 부를 걸 그랬습니다.</p><h2 id=refs>Refs.</h2><p><a href=https://jamstack.org/generators/>Site Generators - A List of Static Site Generators for Jamstack Sites</a><br><a href=https://wcho21.github.io/2022/08/30/how-to-create-a-hugo-blog/>휴고 블로그 만들기</a><br><a href=https://www.inflearn.com/course/gatsby-%EA%B8%B0%EC%88%A0%EB%B8%94%EB%A1%9C%EA%B7%B8>React 기반 Gatsby로 기술 블로그 개발하기</a><br>그리고.. 저의 뜬금없고 깐깐한 질문에 친절하게 답해주신 <code>@wcho21</code>님, 언제나 블로그에 있어서 프로 마인드이신 <code>@kasterra</code>님께 감사 인사 드립니다.</p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/2023/01/size-units-in-css/index.html b/posts/2023/01/size-units-in-css/index.html
index b46e358..0615020 100644
--- a/posts/2023/01/size-units-in-css/index.html
+++ b/posts/2023/01/size-units-in-css/index.html
@@ -1,7 +1,7 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>CSS의 크기 단위 | PrayinForRain.dev</title>
-<meta property="og:title" content="CSS의 크기 단위 | PrayinForRain.dev"><meta name=twitter:title content="CSS의 크기 단위 | PrayinForRain.dev"><meta itemprop=name content="CSS의 크기 단위 | PrayinForRain.dev"><meta name=application-name content="CSS의 크기 단위 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/01/size-units-in-css/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-01-13T23:39:15+0900><meta property="article:published_time" content=2023-01-13T23:39:15+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"CSS의 크기 단위","author":{"@type":"Person","name":""},"datePublished":"2023-01-13","description":"","wordCount":807,"mainEntityOfPage":"True","dateModified":"2023-01-13","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/01/size-units-in-css/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="CSS의 크기 단위 | PrayinForRain.dev"><meta name=twitter:title content="CSS의 크기 단위 | PrayinForRain.dev"><meta itemprop=name content="CSS의 크기 단위 | PrayinForRain.dev"><meta name=application-name content="CSS의 크기 단위 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/01/size-units-in-css/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-01-13T23:39:15+0900><meta property="article:published_time" content=2023-01-13T23:39:15+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"CSS의 크기 단위","author":{"@type":"Person","name":""},"datePublished":"2023-01-13","description":"","wordCount":807,"mainEntityOfPage":"True","dateModified":"2023-01-13","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/01/size-units-in-css/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>CSS의 크기 단위</h1><div class=post-meta><time datetime=2023-01-13T23:39:15+09:00 itemprop=datePublished>2023. 1. 13.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#css의-크기-단위>CSS의 크기 단위</a></li><li><a href=#상대-단위와-절대-단위>상대 단위와 절대 단위</a><ul><li><a href=#절대-단위>절대 단위</a></li><li><a href=#상대-단위>상대 단위</a><ul><li><a href=#em과-rem><code>em</code>과 <code>rem</code></a></li></ul></li></ul></li><li><a href=#궁금증들>궁금증들</a><ul><li><a href=#1cm는-정말-1-센티미터일까>1<em>cm</em>는 정말 1 <em>센티미터</em>일까?</a></li><li><a href=#em과-의-차이는-무엇일까><code>em</code>과 <code>%</code>의 차이는 무엇일까?</a></li></ul></li><li><a href=#refs>Refs.</a></li></ul></nav></details><div class=page-content><h1 id=css의-크기-단위>CSS의 크기 단위</h1><p><img src=/images/posts/2023/01/size-units-in-css/01.png alt=Untitled></p><p>CSS에는 다양한 단위가 존재합니다. 우리가 잘 아는 <code>px</code>와 <code>%</code>부터, <code>em</code>, <code>rem</code>, <code>pt</code>, <code>vh</code>, <code>vw</code> 등등 다양한 단위가 존재하는데요, 이 크기 단위들을 언제 어떻게 사용하면 좋을지에 대해 정리해 보았습니다.</p><h1 id=상대-단위와-절대-단위>상대 단위와 절대 단위</h1><p><code>px</code>과 <code>%</code>를 먼저 비교해 보면, <code>px</code>은 우리가 알고 있는 컴퓨터 화면의 1픽셀을 의미합니다. 이는 어느 화면에서나 같은 크기를 나타내므로 <strong>절대 단위</strong>에 해당합니다. 반면 <code>%</code>는 보통 부모 element의 크기를 상속받아 그의 정해진 비율만큼을 나타냅니다. 즉 <code>width: 10px;</code>인 부모를 가진 element에 <code>width: 50%;</code>를 주면 5px이 되겠죠. 이렇게 상황에 따라서 다른 값을 갖는 단위를 <strong>상대 단위</strong>라고 부릅니다.</p><h2 id=절대-단위>절대 단위</h2><p>절대 단위는 인치에 해당하는 <code>in</code>을 기준으로 MDN에 정의되어 있으며, 편의상 웹에서 가장 자주 사용하는 단위인 <code>px</code>을 기준으로 다시 계산하였습니다.</p><table><thead><tr><th>단위</th><th>이름</th><th>크기</th></tr></thead><tbody><tr><td>in</td><td>인치</td><td>1in = 2.54cm = 96px</td></tr><tr><td>px</td><td>픽셀</td><td>96px = 1in</td></tr><tr><td>pt</td><td>포인트</td><td>3pt = 4px</td></tr><tr><td>1pt = 1.33px</td><td></td><td></td></tr><tr><td>cm</td><td>센티미터</td><td>1cm = 96px/2.54 = 37.795…px</td></tr><tr><td>mm</td><td>밀리미터</td><td>1mm = 96px/25.4 = 3.7795…px</td></tr><tr><td>Q</td><td>1/4 mm(quater)</td><td>1Q = 96px/25.4/4 = 0.94488..px</td></tr><tr><td>pc</td><td>Picas</td><td></td></tr><tr><td>(파이카 라고 부르는 단위)</td><td>1pc = 16px</td><td></td></tr></tbody></table><h2 id=상대-단위>상대 단위</h2><p>상대 단위는 부모 요소나 viewport 크기 등에 비례한 길이를 나타내는 단위로, 화면 크기에 맞추어 각 요소가 비율을 맞추어 공간을 차지하도록 조절할 수 있는 유용한 단위입니다.</p><table><thead><tr><th>단위</th><th>설명</th></tr></thead><tbody><tr><td>em</td><td>요소의 글꼴 크기</td></tr><tr><td>ex</td><td>요소 글꼴의 x-height(대충 소문자가 차지하는 높이)</td></tr><tr><td>ch</td><td>요소 글꼴의 glyph “0”의 사전 길이(너비); 즉 요소의 글꼴에서 0이 차지하는 width</td></tr><tr><td>rem</td><td>루트 요소의 글꼴 크기</td></tr><tr><td>lh</td><td>요소의 라인 높이</td></tr><tr><td>vw</td><td>viewport width의 퍼센트 비율</td></tr><tr><td>vh</td><td>viewport height의 퍼센트 비율</td></tr><tr><td>vmax</td><td>vw, vh 중 큰 쪽</td></tr><tr><td>vmin</td><td>vw, vh 중 작은 쪽</td></tr></tbody></table><p><code>em</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>는 자주 사용되는 단위이니 감각을 익혀 두는 것이 좋아 보입니다.</p><h3 id=em과-rem><code>em</code>과 <code>rem</code></h3><p><code>em</code>은 현재 요소의 글꼴 크기를 참조한다. 즉 현재 요소의 글꼴 크기가 <code>10px</code>인 요소의 <code>1em</code>은 <code>10px</code>이 됩니다. 이를 이용해 <code>h</code>나 <code>em</code>태그같은 강조 태그의 글꼴 크기를 상대적으로 조절할 수 있습니다.</p><p><code>rem</code>은 문서의 최상위 노드의 <code>font-size</code> 값을 참조합니다. 그 외에는 <code>em</code>과 같은 식으로 동작합니다. HTML 문서에서의 최상위 노드는 <code>&lt;html></code> 태그이므로 이 요소의 <code>font-size</code> 값이 되겠습니다.</p><h1 id=궁금증들>궁금증들</h1><h2 id=1cm는-정말-1-센티미터일까>1<em>cm</em>는 정말 1 <em>센티미터</em>일까?</h2><p>모니터에는 해상도 말고도 PPI*(Pixel per Inch)*라는 스펙이 있습니다. 이 스펙에 따라, 1px을 실제 길이로 치환하면 디스플레이의 DPI에 따라 다른 실제 길이를 가질 수 있게 됩니다. 그럼 1cm 역시 상대 단위인 것이 아닐까요? 실험을 위해 <code>height: 6.8cm;</code>를 준 div에 지폐를 갖다 대 보았습니다. 참고로 우리나라 모든 지폐의 높이는 <em>6.8cm</em>입니다.</p><p><img src=/images/posts/2023/01/size-units-in-css/02.png alt=Untitled></p><p>24” FHD 모니터와 15” FHD 모니터에서 실험해 보았습니다. 24”에서는 정확하게 지폐의 크기와 일치했지만 15”에서는 한참 작음을 확인할 수 있었습니다. 즉 <strong>1cm가 정확히 1센티미터를 의미하지는 않음</strong>을 의미합니다. 그럼 <code>cm</code>라는 단위는 왜 존재하는 것일까? 답은 <a href=https://www.w3.org/Style/Examples/007/units.en.html#units>이 링크</a>에서 찾을 수 있었습니다.</p><aside><p>The so-called <em>absolute</em> units (<strong><code>cm</code></strong>, <strong><code>mm</code></strong>, <strong><code>in</code></strong>, <strong><code>pt</code></strong> and <strong><code>pc</code></strong>) mean the same in CSS as everywhere else, <em>but only if your output device has a high enough resolution.</em> On a laser printer, 1cm should be exactly 1 centimeter. But on low-resolution devices, such as computer screens, CSS doesn&rsquo;t require that. And indeed, the result tends to be different from one device to another and from one CSS implementation to another. It&rsquo;s better to reserve these units for high-resolution devices and in particular for printed output. On computer screens and handheld devices, you&rsquo;ll probably not get what you expect.</p><hr><p>In the past, CSS required that implementations display absolute units correctly even on computer screens. But as the number of incorrect implementations outnumbered correct ones and the situation didn&rsquo;t seem to improve, CSS abandoned that requirement in 2011. Currently, absolute units must work correctly only on printed output and on high-resolution devices.</p><p>CSS doesn&rsquo;t define what “high resolution” means. But as low-end printers nowadays start at 300 dpi and high-end screens are at 200 dpi, the cut-off is probably somewhere in between.</p></aside><p>요약하자면 현재는 인쇄물과 같이 높은 해상도에서는 cm, in같은 단위가 정확한 실제 길이를 갖도록 출력되지만, 디스플레이와 같이 상대적으로 <strong>낮은 해상도의 출력에서는 이것이 보장되지 않는다</strong>는 내용입니다. 과거에는 디스플레이에서도 이 부분이 보장되도록 요구되었지만 2011년에 이런 요구사항이 삭제되었다고 합니다.</p><p>따라서 이런 실제 길이 단위는 인쇄를 목적으로 작성되는 문서에서만 사용하고, 디스플레이에 출력하기 위한 목적의 페이지가 사용하는 절대 단위는 <code>px</code>만 사용할 것을 권장하고 있습니다. <code>pt</code> 역시 스프레드시트나 워드에서 사용하는 단위로 실제 길이 단위에 기반하므로 인쇄물에 적합한 단위입니다.</p><h2 id=em과-의-차이는-무엇일까><code>em</code>과 <code>%</code>의 차이는 무엇일까?</h2><p>아래 예제에서 두 child 요소들은 모두 같은 글자 크기를 갖습니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-jsx data-lang=jsx><span class=line><span class=cl><span class=c1>// html
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>CSS의 크기 단위</h1><div class=post-meta><time datetime=2023-01-13T23:39:15+09:00 itemprop=datePublished>2023. 1. 13.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#css의-크기-단위>CSS의 크기 단위</a></li><li><a href=#상대-단위와-절대-단위>상대 단위와 절대 단위</a><ul><li><a href=#절대-단위>절대 단위</a></li><li><a href=#상대-단위>상대 단위</a></li></ul></li><li><a href=#궁금증들>궁금증들</a><ul><li><a href=#1cm는-정말-1-센티미터일까>1<em>cm</em>는 정말 1 <em>센티미터</em>일까?</a></li><li><a href=#em과-의-차이는-무엇일까><code>em</code>과 <code>%</code>의 차이는 무엇일까?</a></li></ul></li><li><a href=#refs>Refs.</a></li></ul></nav></details><div class=page-content><h2 id=css의-크기-단위>CSS의 크기 단위</h2><p><img src=/images/posts/2023/01/size-units-in-css/01.png alt=Untitled></p><p>CSS에는 다양한 단위가 존재합니다. 우리가 잘 아는 <code>px</code>와 <code>%</code>부터, <code>em</code>, <code>rem</code>, <code>pt</code>, <code>vh</code>, <code>vw</code> 등등 다양한 단위가 존재하는데요, 이 크기 단위들을 언제 어떻게 사용하면 좋을지에 대해 정리해 보았습니다.</p><h2 id=상대-단위와-절대-단위>상대 단위와 절대 단위</h2><p><code>px</code>과 <code>%</code>를 먼저 비교해 보면, <code>px</code>은 우리가 알고 있는 컴퓨터 화면의 1픽셀을 의미합니다. 이는 어느 화면에서나 같은 크기를 나타내므로 <strong>절대 단위</strong>에 해당합니다. 반면 <code>%</code>는 보통 부모 element의 크기를 상속받아 그의 정해진 비율만큼을 나타냅니다. 즉 <code>width: 10px;</code>인 부모를 가진 element에 <code>width: 50%;</code>를 주면 5px이 되겠죠. 이렇게 상황에 따라서 다른 값을 갖는 단위를 <strong>상대 단위</strong>라고 부릅니다.</p><h3 id=절대-단위>절대 단위</h3><p>절대 단위는 인치에 해당하는 <code>in</code>을 기준으로 MDN에 정의되어 있으며, 편의상 웹에서 가장 자주 사용하는 단위인 <code>px</code>을 기준으로 다시 계산하였습니다.</p><table><thead><tr><th style=text-align:left>단위</th><th style=text-align:left>이름</th><th style=text-align:left>크기</th></tr></thead><tbody><tr><td style=text-align:left>in</td><td style=text-align:left>인치</td><td style=text-align:left>1in = 2.54cm = 96px</td></tr><tr><td style=text-align:left>px</td><td style=text-align:left>픽셀</td><td style=text-align:left>96px = 1in</td></tr><tr><td style=text-align:left>pt</td><td style=text-align:left>포인트</td><td style=text-align:left>3pt = 4px</td></tr><tr><td style=text-align:left>1pt = 1.33px</td><td style=text-align:left></td><td style=text-align:left></td></tr><tr><td style=text-align:left>cm</td><td style=text-align:left>센티미터</td><td style=text-align:left>1cm = 96px/2.54 = 37.795…px</td></tr><tr><td style=text-align:left>mm</td><td style=text-align:left>밀리미터</td><td style=text-align:left>1mm = 96px/25.4 = 3.7795…px</td></tr><tr><td style=text-align:left>Q</td><td style=text-align:left>1/4 mm(quater)</td><td style=text-align:left>1Q = 96px/25.4/4 = 0.94488..px</td></tr><tr><td style=text-align:left>pc</td><td style=text-align:left>Picas</td><td style=text-align:left></td></tr><tr><td style=text-align:left>(파이카 라고 부르는 단위)</td><td style=text-align:left>1pc = 16px</td><td style=text-align:left></td></tr></tbody></table><h3 id=상대-단위>상대 단위</h3><p>상대 단위는 부모 요소나 viewport 크기 등에 비례한 길이를 나타내는 단위로, 화면 크기에 맞추어 각 요소가 비율을 맞추어 공간을 차지하도록 조절할 수 있는 유용한 단위입니다.</p><table><thead><tr><th style=text-align:left>단위</th><th style=text-align:left>설명</th></tr></thead><tbody><tr><td style=text-align:left>em</td><td style=text-align:left>요소의 글꼴 크기</td></tr><tr><td style=text-align:left>ex</td><td style=text-align:left>요소 글꼴의 x-height(대충 소문자가 차지하는 높이)</td></tr><tr><td style=text-align:left>ch</td><td style=text-align:left>요소 글꼴의 glyph “0”의 사전 길이(너비); 즉 요소의 글꼴에서 0이 차지하는 width</td></tr><tr><td style=text-align:left>rem</td><td style=text-align:left>루트 요소의 글꼴 크기</td></tr><tr><td style=text-align:left>lh</td><td style=text-align:left>요소의 라인 높이</td></tr><tr><td style=text-align:left>vw</td><td style=text-align:left>viewport width의 퍼센트 비율</td></tr><tr><td style=text-align:left>vh</td><td style=text-align:left>viewport height의 퍼센트 비율</td></tr><tr><td style=text-align:left>vmax</td><td style=text-align:left>vw, vh 중 큰 쪽</td></tr><tr><td style=text-align:left>vmin</td><td style=text-align:left>vw, vh 중 작은 쪽</td></tr></tbody></table><p><code>em</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>는 자주 사용되는 단위이니 감각을 익혀 두는 것이 좋아 보입니다.</p><h4 id=em과-rem><code>em</code>과 <code>rem</code></h4><p><code>em</code>은 현재 요소의 글꼴 크기를 참조한다. 즉 현재 요소의 글꼴 크기가 <code>10px</code>인 요소의 <code>1em</code>은 <code>10px</code>이 됩니다. 이를 이용해 <code>h</code>나 <code>em</code>태그같은 강조 태그의 글꼴 크기를 상대적으로 조절할 수 있습니다.</p><p><code>rem</code>은 문서의 최상위 노드의 <code>font-size</code> 값을 참조합니다. 그 외에는 <code>em</code>과 같은 식으로 동작합니다. HTML 문서에서의 최상위 노드는 <code>&lt;html></code> 태그이므로 이 요소의 <code>font-size</code> 값이 되겠습니다.</p><h2 id=궁금증들>궁금증들</h2><h3 id=1cm는-정말-1-센티미터일까>1<em>cm</em>는 정말 1 <em>센티미터</em>일까?</h3><p>모니터에는 해상도 말고도 PPI*(Pixel per Inch)*라는 스펙이 있습니다. 이 스펙에 따라, 1px을 실제 길이로 치환하면 디스플레이의 DPI에 따라 다른 실제 길이를 가질 수 있게 됩니다. 그럼 1cm 역시 상대 단위인 것이 아닐까요? 실험을 위해 <code>height: 6.8cm;</code>를 준 div에 지폐를 갖다 대 보았습니다. 참고로 우리나라 모든 지폐의 높이는 <em>6.8cm</em>입니다.</p><p><img src=/images/posts/2023/01/size-units-in-css/02.png alt=Untitled></p><p>24” FHD 모니터와 15” FHD 모니터에서 실험해 보았습니다. 24”에서는 정확하게 지폐의 크기와 일치했지만 15”에서는 한참 작음을 확인할 수 있었습니다. 즉 <strong>1cm가 정확히 1센티미터를 의미하지는 않음</strong>을 의미합니다. 그럼 <code>cm</code>라는 단위는 왜 존재하는 것일까? 답은 <a href=https://www.w3.org/Style/Examples/007/units.en.html#units>이 링크</a>에서 찾을 수 있었습니다.</p><aside><p>The so-called <em>absolute</em> units (<strong><code>cm</code></strong>, <strong><code>mm</code></strong>, <strong><code>in</code></strong>, <strong><code>pt</code></strong> and <strong><code>pc</code></strong>) mean the same in CSS as everywhere else, <em>but only if your output device has a high enough resolution.</em> On a laser printer, 1cm should be exactly 1 centimeter. But on low-resolution devices, such as computer screens, CSS doesn&rsquo;t require that. And indeed, the result tends to be different from one device to another and from one CSS implementation to another. It&rsquo;s better to reserve these units for high-resolution devices and in particular for printed output. On computer screens and handheld devices, you&rsquo;ll probably not get what you expect.</p><hr><p>In the past, CSS required that implementations display absolute units correctly even on computer screens. But as the number of incorrect implementations outnumbered correct ones and the situation didn&rsquo;t seem to improve, CSS abandoned that requirement in 2011. Currently, absolute units must work correctly only on printed output and on high-resolution devices.</p><p>CSS doesn&rsquo;t define what “high resolution” means. But as low-end printers nowadays start at 300 dpi and high-end screens are at 200 dpi, the cut-off is probably somewhere in between.</p></aside><p>요약하자면 현재는 인쇄물과 같이 높은 해상도에서는 cm, in같은 단위가 정확한 실제 길이를 갖도록 출력되지만, 디스플레이와 같이 상대적으로 <strong>낮은 해상도의 출력에서는 이것이 보장되지 않는다</strong>는 내용입니다. 과거에는 디스플레이에서도 이 부분이 보장되도록 요구되었지만 2011년에 이런 요구사항이 삭제되었다고 합니다.</p><p>따라서 이런 실제 길이 단위는 인쇄를 목적으로 작성되는 문서에서만 사용하고, 디스플레이에 출력하기 위한 목적의 페이지가 사용하는 절대 단위는 <code>px</code>만 사용할 것을 권장하고 있습니다. <code>pt</code> 역시 스프레드시트나 워드에서 사용하는 단위로 실제 길이 단위에 기반하므로 인쇄물에 적합한 단위입니다.</p><h3 id=em과-의-차이는-무엇일까><code>em</code>과 <code>%</code>의 차이는 무엇일까?</h3><p>아래 예제에서 두 child 요소들은 모두 같은 글자 크기를 갖습니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-jsx data-lang=jsx><span class=line><span class=cl><span class=c1>// html
 </span></span></span><span class=line><span class=cl><span class=c1></span><span class=p>&lt;</span><span class=nt>div</span> <span class=na>id</span><span class=o>=</span><span class=s>&#34;parent&#34;</span><span class=p>&gt;</span>
 </span></span><span class=line><span class=cl>  <span class=nx>parent</span>
 </span></span><span class=line><span class=cl>  <span class=p>&lt;</span><span class=nt>p</span> <span class=na>id</span><span class=o>=</span><span class=s>&#34;child1&#34;</span><span class=p>&gt;</span><span class=nx>Hello</span> <span class=nx>World</span><span class=o>!</span><span class=p>&lt;/</span><span class=nt>p</span><span class=p>&gt;</span>
@@ -15,10 +15,10 @@
 </span></span><span class=line><span class=cl><span class=err>#</span><span class=nx>child2</span> <span class=p>{</span>
 </span></span><span class=line><span class=cl>  <span class=nx>font</span><span class=o>-</span><span class=nx>size</span><span class=o>:</span> <span class=mi>150</span><span class=o>%</span><span class=p>;</span>
 </span></span><span class=line><span class=cl><span class=p>}</span>
-</span></span></code></pre></div><p>기본적으로 <code>font-size</code>는 부모 요소의 값을 상속받으므로, 현재 요소의 <code>font-size</code>를 참조하는 <code>em</code>이나, 부모 요소의 값을 참조하는 <code>%</code>나 같은 기준 값을 갖는 것이죠. 즉 두 요소는 대부분의 경우 같은 결과값을 갖습니다. 그럼 이 둘의 차이는 무엇일까요?</p><p>가장 큰 차이는, <code>em</code>은 항상 <code>font-size</code>를 참조한다는 것입니다. 모든 단위는 모든 요소에 적용할 수 있습니다. 만약 <code>width</code>나 <code>height</code>같은 요소에 <code>em</code>을 사용하더라도, <code>em</code>은 항상 <code>font-size</code>를 기준으로 값을 계산합니다. 반면 <code>%</code>는 부모 요소의 해당 property 값을 참조하기 때문에, <code>width</code>에 <code>%</code>를 사용하면 언제나 부모 요소의 <code>width</code>에 대한 비율을 나타냅니다.</p><h1 id=refs>Refs.</h1><p><a href=https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Values_and_units>CSS 값 과 단위 - Web 개발 학습하기 | MDN</a></p><p><a href=https://www.w3.org/Style/Examples/007/units.en.html#units>CSS: em, px, pt, cm, in&mldr;</a></p><p><a href=https://stackoverflow.com/questions/609517/why-em-instead-of-px>Why em instead of px?</a></p><p><a href=https://stackoverflow.com/questions/16990608/when-to-use-ems-instead-of-percentage-in-css>When to use ems instead of percentage in CSS?</a></p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+</span></span></code></pre></div><p>기본적으로 <code>font-size</code>는 부모 요소의 값을 상속받으므로, 현재 요소의 <code>font-size</code>를 참조하는 <code>em</code>이나, 부모 요소의 값을 참조하는 <code>%</code>나 같은 기준 값을 갖는 것이죠. 즉 두 요소는 대부분의 경우 같은 결과값을 갖습니다. 그럼 이 둘의 차이는 무엇일까요?</p><p>가장 큰 차이는, <code>em</code>은 항상 <code>font-size</code>를 참조한다는 것입니다. 모든 단위는 모든 요소에 적용할 수 있습니다. 만약 <code>width</code>나 <code>height</code>같은 요소에 <code>em</code>을 사용하더라도, <code>em</code>은 항상 <code>font-size</code>를 기준으로 값을 계산합니다. 반면 <code>%</code>는 부모 요소의 해당 property 값을 참조하기 때문에, <code>width</code>에 <code>%</code>를 사용하면 언제나 부모 요소의 <code>width</code>에 대한 비율을 나타냅니다.</p><h2 id=refs>Refs.</h2><p><a href=https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Values_and_units>CSS 값 과 단위 - Web 개발 학습하기 | MDN</a></p><p><a href=https://www.w3.org/Style/Examples/007/units.en.html#units>CSS: em, px, pt, cm, in&mldr;</a></p><p><a href=https://stackoverflow.com/questions/609517/why-em-instead-of-px>Why em instead of px?</a></p><p><a href=https://stackoverflow.com/questions/16990608/when-to-use-ems-instead-of-percentage-in-css>When to use ems instead of percentage in CSS?</a></p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/2023/01/tree-shaking/index.html b/posts/2023/01/tree-shaking/index.html
index 0d40d44..e1e3b31 100644
--- a/posts/2023/01/tree-shaking/index.html
+++ b/posts/2023/01/tree-shaking/index.html
@@ -1,7 +1,7 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Tree Shaking | PrayinForRain.dev</title>
-<meta property="og:title" content="Tree Shaking | PrayinForRain.dev"><meta name=twitter:title content="Tree Shaking | PrayinForRain.dev"><meta itemprop=name content="Tree Shaking | PrayinForRain.dev"><meta name=application-name content="Tree Shaking | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/01/tree-shaking/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-01-25T17:17:15+0900><meta property="article:published_time" content=2023-01-25T17:17:15+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"Tree Shaking","author":{"@type":"Person","name":""},"datePublished":"2023-01-25","description":"","wordCount":694,"mainEntityOfPage":"True","dateModified":"2023-01-25","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/01/tree-shaking/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Tree Shaking | PrayinForRain.dev"><meta name=twitter:title content="Tree Shaking | PrayinForRain.dev"><meta itemprop=name content="Tree Shaking | PrayinForRain.dev"><meta name=application-name content="Tree Shaking | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/01/tree-shaking/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-01-25T17:17:15+0900><meta property="article:published_time" content=2023-01-25T17:17:15+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"Tree Shaking","author":{"@type":"Person","name":""},"datePublished":"2023-01-25","description":"","wordCount":694,"mainEntityOfPage":"True","dateModified":"2023-01-25","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/01/tree-shaking/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>Tree Shaking</h1><div class=post-meta><time datetime=2023-01-25T17:17:15+09:00 itemprop=datePublished>2023. 1. 25.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#용량을-절약하는-방법>용량을 절약하는 방법</a></li><li><a href=#트리-쉐이킹>트리 쉐이킹</a><ul><li><a href=#실행해보기>실행해보기</a></li><li><a href=#필요한-것만-import하기>필요한 것만 import하기</a></li><li><a href=#결과물-확인하기>결과물 확인하기</a></li></ul></li><li><a href=#궁금증들>궁금증들</a><ul><li><a href=#특정-패키지의-트리-쉐이킹이-되지-않는-이유는>특정 패키지의 트리 쉐이킹이 되지 않는 이유는?</a></li><li><a href=#babel의-modules-false란-무엇일까>Babel의 <code>“modules”: false</code>란 무엇일까?</a></li></ul></li><li><a href=#refs>Refs.</a></li></ul></nav></details><div class=page-content><h1 id=용량을-절약하는-방법>용량을 절약하는 방법</h1><p><img src=/images/posts/2023/01/tree-shaking/01.png alt=bundle_map></p><p>웹페이지의 성능을 이야기하는 가장 직관적인 지표는 아마 페이지에 사용되는 <strong>파일의 크기</strong>일 것입니다. 파일의 크기가 무겁다면 파일을 다운받는 데 시간이 오래 걸리고, 다운로드한 파일을 읽고 렌더링 하는데도 시간이 오래 걸릴 것입니다. 따라서 번들 파일의 용량을 다이어트 하는 것은 사이트 성능에 꽤 중요한 역할을 합니다.</p><p>위 사진은 팀 프로젝트를 하던 중 <code>@next/bundle-analyzer</code> 패키지를 이용해 번들 맵을 그렸던 것입니다. 클수록 번들 용량이 크다는 뜻이니 커다란 청크 위주로 최적화를 시도하면 될 것 같습니다. 그런데 어떻게 용량을 줄일 수 있을까요? gzip을 통해 파일을 압축해서 보내는 방법도 있겠지만, 코드적으로 최적화할 수 있는 방법은 <code>Tree-shaking</code>입니다.</p><h1 id=트리-쉐이킹>트리 쉐이킹</h1><p><img src=/images/posts/2023/01/tree-shaking/02.gif alt=tree-shaking></p><p>나무를 마구마구 흔들면 어떻게 나뭇잎이나 열매같은 것들이 조금씩 떨어지면서 나무가 점점 앙상해 질 것입니다. 트리 쉐이킹은 이와 비슷하게 <strong>사용하지 않는 코드들이 번들에 포함되는 것들을 지워서 파일 크기를 줄이는 일</strong>입니다. 말 그대로 <strong>나무(파일)를 마구 흔들어서 나뭇잎(미사용 코드)을 덜어내는 개념</strong>이죠. 어떤 과정을 통해 이루어 질까요? 아래 예제를 통해 알아보겠습니다.</p><p><img src=/images/posts/2023/01/tree-shaking/03.png alt=example-app></p><p><a href=https://github.com/malchata/webpack-tree-shaking-example>https://github.com/malchata/webpack-tree-shaking-example</a></p><h2 id=실행해보기>실행해보기</h2><p>우선 <code>npm run build</code>후 <code>npm run start</code>를 통해 실행해 보겠습니다. 아래와 같은 결과물이 보입니다.</p><p><img src=/images/posts/2023/01/tree-shaking/04.png alt="bundle size before tree shaking"></p><p>번들된 파일 두개를 다운받았고, 38.4KB, 21.6KB의 크기를 갖습니다. 객관적으로 가볍긴 하지만 여기서 굳이 트리 쉐이킹을 통해 용량을 더 줄여 보겠습니다.</p><h2 id=필요한-것만-import하기>필요한 것만 import하기</h2><p><img src=/images/posts/2023/01/tree-shaking/05.png alt="analyzing scripts"></p><p>이 앱의 컴포넌트인 <code>FilterablePedalList.js</code>를 보면 <code>utils.js</code> 파일을 import해오는 것을 알 수 있습니다. 그런데 <code>utils.js</code> 파일은 1300여 줄이 되는 아주 긴 코드입니다. 각종 정렬과, 배열을 다루는 유틸리티 함수를 포함하고 있는데, 정작 컴포넌트에서는 <code>simpleSort</code>만을 사용하고 있습니다. 첫 13줄 아래로는 모두 사용하지 않는 함수들인데도 불러오고 있는 것이죠. 실제로 번들 파일에서도 <code>simpleSort</code> 외에 <code>uasort</code>, <code>uksort</code> 등 여러 함수들이 같이 번들링된 것을 알 수 있습니다.</p><p>따라서 import문을 아래와 같이 변경하겠습니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-javascript data-lang=javascript><span class=line><span class=cl><span class=c1>// FilterablePedalList.js
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>Tree Shaking</h1><div class=post-meta><time datetime=2023-01-25T17:17:15+09:00 itemprop=datePublished>2023. 1. 25.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#용량을-절약하는-방법>용량을 절약하는 방법</a></li><li><a href=#트리-쉐이킹>트리 쉐이킹</a><ul><li><a href=#실행해보기>실행해보기</a></li><li><a href=#필요한-것만-import하기>필요한 것만 import하기</a></li><li><a href=#결과물-확인하기>결과물 확인하기</a></li></ul></li><li><a href=#궁금증들>궁금증들</a><ul><li><a href=#특정-패키지의-트리-쉐이킹이-되지-않는-이유는>특정 패키지의 트리 쉐이킹이 되지 않는 이유는?</a></li><li><a href=#babel의-modules-false란-무엇일까>Babel의 <code>“modules”: false</code>란 무엇일까?</a></li></ul></li><li><a href=#refs>Refs.</a></li></ul></nav></details><div class=page-content><h2 id=용량을-절약하는-방법>용량을 절약하는 방법</h2><p><img src=/images/posts/2023/01/tree-shaking/01.png alt=bundle_map></p><p>웹페이지의 성능을 이야기하는 가장 직관적인 지표는 아마 페이지에 사용되는 <strong>파일의 크기</strong>일 것입니다. 파일의 크기가 무겁다면 파일을 다운받는 데 시간이 오래 걸리고, 다운로드한 파일을 읽고 렌더링 하는데도 시간이 오래 걸릴 것입니다. 따라서 번들 파일의 용량을 다이어트 하는 것은 사이트 성능에 꽤 중요한 역할을 합니다.</p><p>위 사진은 팀 프로젝트를 하던 중 <code>@next/bundle-analyzer</code> 패키지를 이용해 번들 맵을 그렸던 것입니다. 클수록 번들 용량이 크다는 뜻이니 커다란 청크 위주로 최적화를 시도하면 될 것 같습니다. 그런데 어떻게 용량을 줄일 수 있을까요? gzip을 통해 파일을 압축해서 보내는 방법도 있겠지만, 코드적으로 최적화할 수 있는 방법은 <code>Tree-shaking</code>입니다.</p><h2 id=트리-쉐이킹>트리 쉐이킹</h2><p><img src=/images/posts/2023/01/tree-shaking/02.gif alt=tree-shaking></p><p>나무를 마구마구 흔들면 어떻게 나뭇잎이나 열매같은 것들이 조금씩 떨어지면서 나무가 점점 앙상해 질 것입니다. 트리 쉐이킹은 이와 비슷하게 <strong>사용하지 않는 코드들이 번들에 포함되는 것들을 지워서 파일 크기를 줄이는 일</strong>입니다. 말 그대로 <strong>나무(파일)를 마구 흔들어서 나뭇잎(미사용 코드)을 덜어내는 개념</strong>이죠. 어떤 과정을 통해 이루어 질까요? 아래 예제를 통해 알아보겠습니다.</p><p><img src=/images/posts/2023/01/tree-shaking/03.png alt=example-app></p><p><a href=https://github.com/malchata/webpack-tree-shaking-example>https://github.com/malchata/webpack-tree-shaking-example</a></p><h3 id=실행해보기>실행해보기</h3><p>우선 <code>npm run build</code>후 <code>npm run start</code>를 통해 실행해 보겠습니다. 아래와 같은 결과물이 보입니다.</p><p><img src=/images/posts/2023/01/tree-shaking/04.png alt="bundle size before tree shaking"></p><p>번들된 파일 두개를 다운받았고, 38.4KB, 21.6KB의 크기를 갖습니다. 객관적으로 가볍긴 하지만 여기서 굳이 트리 쉐이킹을 통해 용량을 더 줄여 보겠습니다.</p><h3 id=필요한-것만-import하기>필요한 것만 import하기</h3><p><img src=/images/posts/2023/01/tree-shaking/05.png alt="analyzing scripts"></p><p>이 앱의 컴포넌트인 <code>FilterablePedalList.js</code>를 보면 <code>utils.js</code> 파일을 import해오는 것을 알 수 있습니다. 그런데 <code>utils.js</code> 파일은 1300여 줄이 되는 아주 긴 코드입니다. 각종 정렬과, 배열을 다루는 유틸리티 함수를 포함하고 있는데, 정작 컴포넌트에서는 <code>simpleSort</code>만을 사용하고 있습니다. 첫 13줄 아래로는 모두 사용하지 않는 함수들인데도 불러오고 있는 것이죠. 실제로 번들 파일에서도 <code>simpleSort</code> 외에 <code>uasort</code>, <code>uksort</code> 등 여러 함수들이 같이 번들링된 것을 알 수 있습니다.</p><p>따라서 import문을 아래와 같이 변경하겠습니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-javascript data-lang=javascript><span class=line><span class=cl><span class=c1>// FilterablePedalList.js
 </span></span></span><span class=line><span class=cl><span class=c1>// ...
 </span></span></span><span class=line><span class=cl><span class=c1></span><span class=kr>import</span> <span class=o>*</span> <span class=nx>as</span> <span class=nx>utils</span> <span class=nx>from</span> <span class=s2>&#34;../../utils/utils&#34;</span><span class=p>;</span> <span class=c1>// before
 </span></span></span><span class=line><span class=cl><span class=c1></span><span class=kr>import</span> <span class=p>{</span> <span class=nx>simpleSort</span> <span class=p>}</span> <span class=nx>from</span> <span class=s2>&#34;../../utils/utils&#34;</span><span class=p>;</span> <span class=c1>// after
@@ -12,12 +12,12 @@
 </span></span><span class=line><span class=cl>    <span class=p>}]</span>
 </span></span><span class=line><span class=cl>  <span class=p>]</span><span class=err>,</span>
 </span></span><span class=line><span class=cl><span class=c1>// ...
-</span></span></span></code></pre></div><p>modules 옵션은 ES Modules 문법을 다른 문법으로 트랜스파일링 할 것인지에 대한 옵션입니다. 그렇다고 CommonJS 환경에서 사용이 불가능해 지는 것은 아닙니다. 왜냐면 webpack이 한번 더 트랜스파일 과정을 거치거든요!</p><h2 id=결과물-확인하기>결과물 확인하기</h2><p>그럼 이제 앱을 다시 빌드하고 결과물을 확인해 보겠습니다.</p><p><img src=/images/posts/2023/01/tree-shaking/06.png alt="after tree shaking"></p><p><code>main.js</code> 청크가 <code>21.6KB → 9KB</code>로 크게 줄어들었습니다. 큰 의미는 없지만 로드 시간도 줄어들었네요. 트리 쉐이킹이 어떤 과정을 거쳐 이루어 지는지 알아봤습니다. 굿..</p><h1 id=궁금증들>궁금증들</h1><h2 id=특정-패키지의-트리-쉐이킹이-되지-않는-이유는>특정 패키지의 트리 쉐이킹이 되지 않는 이유는?</h2><p>대부분은 위의 과정을 통해 트리 쉐이킹이 가능하나, 일부 패키지에서 <code>import</code>해오는 경우에는 트리 쉐이킹이 일어나지 않습니다. 배열이나 Date 등을 다룰 때 유틸리티 함수를 제공해 주는 <code>lodash</code> 패키지가 그런 경우인데요, 패키지 자체가 CommonJS 모듈 문법으로 작성되어 있어서 그렇습니다. lodash는 이런 문제를 해결하기 위해 다양한 문법에 맞추어 작성된 빌드를 제공합니다. <a href=https://github.com/lodash/lodash#module-formats>[링크]</a></p><p>만약 이런 식으로도 지원하지 않는 라이브러리라면 <a href=https://github.com/indutny/webpack-common-shake>webpack-common-shake</a>같은 플러그인을 활용해야 합니다. <code>webpack-common-shake</code>는 CommonJS의 문법으로 <code>module.export</code>를 사용한 패키지를 트리쉐이킹 해주는 플러그인인데요, README에 나와 있듯이 결국 완전한 해결책은 아닙니다.</p><h2 id=babel의-modules-false란-무엇일까>Babel의 <code>“modules”: false</code>란 무엇일까?</h2><p>babel의 <code>modules</code> 옵션은 ES modules 문법을 다른 문법에 맞추어 트랜스파일하는 옵션인데요, <code>false</code>를 지정할 경우 트랜스파일이 이루어지지 않습니다. 그런데 앞서 말했듯이 <code>babel</code>에서 굳이 변환하지 않더라도 <code>webpack</code>이 해주는데, 이걸 굳이 <code>false</code>로 지정해야 할 이유가 있을까요?</p><p>Babel의 <a href=https://babeljs.io/docs/en/babel-preset-env#modules>documentation</a>을 보면 modules 옵션은 아래와 같이 설명되어 있습니다.</p><blockquote><p><code>"amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false</code>, defaults to <code>"auto"</code>.</p><p>Enable transformation of ES module syntax to another module type. Note that <code>cjs</code> is just an alias for <code>commonjs</code>.
+</span></span></span></code></pre></div><p>modules 옵션은 ES Modules 문법을 다른 문법으로 트랜스파일링 할 것인지에 대한 옵션입니다. 그렇다고 CommonJS 환경에서 사용이 불가능해 지는 것은 아닙니다. 왜냐면 webpack이 한번 더 트랜스파일 과정을 거치거든요!</p><h3 id=결과물-확인하기>결과물 확인하기</h3><p>그럼 이제 앱을 다시 빌드하고 결과물을 확인해 보겠습니다.</p><p><img src=/images/posts/2023/01/tree-shaking/06.png alt="after tree shaking"></p><p><code>main.js</code> 청크가 <code>21.6KB → 9KB</code>로 크게 줄어들었습니다. 큰 의미는 없지만 로드 시간도 줄어들었네요. 트리 쉐이킹이 어떤 과정을 거쳐 이루어 지는지 알아봤습니다. 굿..</p><h2 id=궁금증들>궁금증들</h2><h3 id=특정-패키지의-트리-쉐이킹이-되지-않는-이유는>특정 패키지의 트리 쉐이킹이 되지 않는 이유는?</h3><p>대부분은 위의 과정을 통해 트리 쉐이킹이 가능하나, 일부 패키지에서 <code>import</code>해오는 경우에는 트리 쉐이킹이 일어나지 않습니다. 배열이나 Date 등을 다룰 때 유틸리티 함수를 제공해 주는 <code>lodash</code> 패키지가 그런 경우인데요, 패키지 자체가 CommonJS 모듈 문법으로 작성되어 있어서 그렇습니다. lodash는 이런 문제를 해결하기 위해 다양한 문법에 맞추어 작성된 빌드를 제공합니다. <a href=https://github.com/lodash/lodash#module-formats>[링크]</a></p><p>만약 이런 식으로도 지원하지 않는 라이브러리라면 <a href=https://github.com/indutny/webpack-common-shake>webpack-common-shake</a>같은 플러그인을 활용해야 합니다. <code>webpack-common-shake</code>는 CommonJS의 문법으로 <code>module.export</code>를 사용한 패키지를 트리쉐이킹 해주는 플러그인인데요, README에 나와 있듯이 결국 완전한 해결책은 아닙니다.</p><h3 id=babel의-modules-false란-무엇일까>Babel의 <code>“modules”: false</code>란 무엇일까?</h3><p>babel의 <code>modules</code> 옵션은 ES modules 문법을 다른 문법에 맞추어 트랜스파일하는 옵션인데요, <code>false</code>를 지정할 경우 트랜스파일이 이루어지지 않습니다. 그런데 앞서 말했듯이 <code>babel</code>에서 굳이 변환하지 않더라도 <code>webpack</code>이 해주는데, 이걸 굳이 <code>false</code>로 지정해야 할 이유가 있을까요?</p><p>Babel의 <a href=https://babeljs.io/docs/en/babel-preset-env#modules>documentation</a>을 보면 modules 옵션은 아래와 같이 설명되어 있습니다.</p><blockquote><p><code>"amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false</code>, defaults to <code>"auto"</code>.</p><p>Enable transformation of ES module syntax to another module type. Note that <code>cjs</code> is just an alias for <code>commonjs</code>.
 <em>ES 모듈 문법을 다른 모듈 타입으로 트랜스파일하도록 합니다. <code>cjs</code>는 <code>CommonJS</code>를 의미합니다.</em></p><p>Setting this to <code>false</code> will preserve ES modules. Use this only if you intend to ship native ES Modules to browsers. If you are using a bundler with Babel, the default <code>modules: "auto"</code> is always preferred.
-<code>*false</code>로 지정하면 ES 모듈의 문법을 유지합니다. 앱을 ES 모듈로만 제공하고 싶은 경우에만 사용하세요. Babel에 번들러를 추가로 사용하는 경우, <code>modules: “auto”</code>를 사용할 것을 추천합니다.*</p></blockquote><p>사실 <code>modules</code>에는 <code>auto</code>라는 값이 존재합니다. 이는 <code>Babel 7.x</code> 버전부터 생긴 <code>caller</code> 옵션을 활용하여 추가된 값인데요, <code>auto</code>로 설정할 경우 바벨은 callerData를 이용하여 ES 모듈 문법이 사용 가능한지 판단하고, 이에 맞추어 트랜스파일 할 지를 자동으로 판단합니다. 사용한 예제에서는 낮은 버전의 바벨을 사용하고 있었기 때문에 <code>false</code>를 지정했지만, 지금은 기본값이 <code>auto</code>로 되어 있어 <code>import</code> 범위만 조절하면 알아서 트리 쉐이킹이 이루어질 것으로 보입니다.</p><h1 id=refs>Refs.</h1><p><a href=https://darrengwon.tistory.com/833>Next 배포를 위한 준비(bundle-analyzer, tree shaking, gzip)</a><br><a href=https://helloinyong.tistory.com/305>웹 성능 최적화를 위한 Tree Shaking 소개</a><br><a href=https://web.dev/reduce-javascript-payloads-with-tree-shaking/#go_shake_some_trees>Reduce JavaScript payloads with tree shaking</a><br><a href=https://webpack.kr/guides/tree-shaking/>Tree Shaking | 웹팩</a><br><a href=https://babeljs.io/docs/en/babel-preset-env#modules>@babel/preset-env · Babel</a><br><a href=https://github.com/babel/babel-loader/issues/521>https://github.com/babel/babel-loader/issues/521</a><br><a href=https://github.com/babel/babel-loader/pull/660>https://github.com/babel/babel-loader/pull/660</a></p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<code>*false</code>로 지정하면 ES 모듈의 문법을 유지합니다. 앱을 ES 모듈로만 제공하고 싶은 경우에만 사용하세요. Babel에 번들러를 추가로 사용하는 경우, <code>modules: “auto”</code>를 사용할 것을 추천합니다.*</p></blockquote><p>사실 <code>modules</code>에는 <code>auto</code>라는 값이 존재합니다. 이는 <code>Babel 7.x</code> 버전부터 생긴 <code>caller</code> 옵션을 활용하여 추가된 값인데요, <code>auto</code>로 설정할 경우 바벨은 callerData를 이용하여 ES 모듈 문법이 사용 가능한지 판단하고, 이에 맞추어 트랜스파일 할 지를 자동으로 판단합니다. 사용한 예제에서는 낮은 버전의 바벨을 사용하고 있었기 때문에 <code>false</code>를 지정했지만, 지금은 기본값이 <code>auto</code>로 되어 있어 <code>import</code> 범위만 조절하면 알아서 트리 쉐이킹이 이루어질 것으로 보입니다.</p><h2 id=refs>Refs.</h2><p><a href=https://darrengwon.tistory.com/833>Next 배포를 위한 준비(bundle-analyzer, tree shaking, gzip)</a><br><a href=https://helloinyong.tistory.com/305>웹 성능 최적화를 위한 Tree Shaking 소개</a><br><a href=https://web.dev/reduce-javascript-payloads-with-tree-shaking/#go_shake_some_trees>Reduce JavaScript payloads with tree shaking</a><br><a href=https://webpack.kr/guides/tree-shaking/>Tree Shaking | 웹팩</a><br><a href=https://babeljs.io/docs/en/babel-preset-env#modules>@babel/preset-env · Babel</a><br><a href=https://github.com/babel/babel-loader/issues/521>https://github.com/babel/babel-loader/issues/521</a><br><a href=https://github.com/babel/babel-loader/pull/660>https://github.com/babel/babel-loader/pull/660</a></p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/2023/02/firebase-with-typescript/index.html b/posts/2023/02/firebase-with-typescript/index.html
index 3e2a00f..88ecc1b 100644
--- a/posts/2023/02/firebase-with-typescript/index.html
+++ b/posts/2023/02/firebase-with-typescript/index.html
@@ -1,7 +1,7 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Firebase를 TypeScript에서 사용하기 | PrayinForRain.dev</title>
-<meta property="og:title" content="Firebase를 TypeScript에서 사용하기 | PrayinForRain.dev"><meta name=twitter:title content="Firebase를 TypeScript에서 사용하기 | PrayinForRain.dev"><meta itemprop=name content="Firebase를 TypeScript에서 사용하기 | PrayinForRain.dev"><meta name=application-name content="Firebase를 TypeScript에서 사용하기 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-02-15T15:17:00+0900><meta property="article:published_time" content=2023-02-15T15:17:00+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"Firebase를 TypeScript에서 사용하기","author":{"@type":"Person","name":""},"datePublished":"2023-02-15","description":"","wordCount":912,"mainEntityOfPage":"True","dateModified":"2023-02-15","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Firebase를 TypeScript에서 사용하기 | PrayinForRain.dev"><meta name=twitter:title content="Firebase를 TypeScript에서 사용하기 | PrayinForRain.dev"><meta itemprop=name content="Firebase를 TypeScript에서 사용하기 | PrayinForRain.dev"><meta name=application-name content="Firebase를 TypeScript에서 사용하기 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-02-15T15:17:00+0900><meta property="article:published_time" content=2023-02-15T15:17:00+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"Firebase를 TypeScript에서 사용하기","author":{"@type":"Person","name":""},"datePublished":"2023-02-15","description":"","wordCount":912,"mainEntityOfPage":"True","dateModified":"2023-02-15","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>Firebase를 TypeScript에서 사용하기</h1><div class=post-meta><time datetime=2023-02-15T15:17:00+09:00 itemprop=datePublished>2023. 2. 15.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><ul><li><a href=#붕대-감기>붕대 감기</a></li><li><a href=#타입-단언이-옳은가>타입 단언이 옳은가?</a></li><li><a href=#documentdata를-변환해보자>DocumentData를 변환해보자.</a><ul><li><a href=#converter를-제네릭하게-만들-수는-없을까>Converter를 제네릭하게 만들 수는 없을까?</a></li><li><a href=#애초에-이-부분에서-타입-단언을-사용하는-것이-그렇게-문제일까>애초에 이 부분에서 타입 단언을 사용하는 것이 그렇게 문제일까?</a></li></ul></li><li><a href=#refs>Refs.</a></li></ul></li></ul></nav></details><div class=page-content><p>최근에 들어서 Firebase가 필요한 일이 있었다. 대학교에서 써본 경험은 있었는데, 오랜만에 만난 Firebase는 예전같지 않았다. 가장 큰 문제는 Firebase가 제공하는 데이터베이스인 Firestore는 문서를 가져와도 타입을 제대로 정의할 수 없다는 것.</p><figure><img src=/images/posts/2023/02/firebase-with-typescript/01.png alt=image><figcaption><p>자동완성이 안되는 타입스크립트는.. 그.. 왜..?</p></figcaption></figure><p>물론 데이터스키마를 따로 정의하지 않기 때문에 Firebase 라이브러리가 <code>DocumentData</code> 타입을 개발자에게 맞춰줄 의무는 없지만, 적어도 <code>React.useState</code>처럼 제네릭으로 타입을 받아 어느정도 약속해 주기를 바랐다. 아니 바라는게 아니라 되어야 하는 거 아닌가..?</p><h2 id=붕대-감기>붕대 감기</h2><p>우선 Firebase의 쿼리 실행 결과로 오는 <code>DocumentData</code>는 다음과 같이 정의되어 있다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-typescript data-lang=typescript><span class=line><span class=cl><span class=kr>export</span> <span class=kr>declare</span> <span class=kr>interface</span> <span class=nx>DocumentData</span> <span class=p>{</span>
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>Firebase를 TypeScript에서 사용하기</h1><div class=post-meta><time datetime=2023-02-15T15:17:00+09:00 itemprop=datePublished>2023. 2. 15.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#붕대-감기>붕대 감기</a></li><li><a href=#타입-단언이-옳은가>타입 단언이 옳은가?</a></li><li><a href=#documentdata를-변환해보자>DocumentData를 변환해보자.</a><ul><li><a href=#converter를-제네릭하게-만들-수는-없을까>Converter를 제네릭하게 만들 수는 없을까?</a></li><li><a href=#애초에-이-부분에서-타입-단언을-사용하는-것이-그렇게-문제일까>애초에 이 부분에서 타입 단언을 사용하는 것이 그렇게 문제일까?</a></li></ul></li><li><a href=#refs>Refs.</a></li></ul></nav></details><div class=page-content><p>최근에 들어서 Firebase가 필요한 일이 있었다. 대학교에서 써본 경험은 있었는데, 오랜만에 만난 Firebase는 예전같지 않았다. 가장 큰 문제는 Firebase가 제공하는 데이터베이스인 Firestore는 문서를 가져와도 타입을 제대로 정의할 수 없다는 것.</p><figure><img src=/images/posts/2023/02/firebase-with-typescript/01.png alt=image><figcaption><p>자동완성이 안되는 타입스크립트는.. 그.. 왜..?</p></figcaption></figure><p>물론 데이터스키마를 따로 정의하지 않기 때문에 Firebase 라이브러리가 <code>DocumentData</code> 타입을 개발자에게 맞춰줄 의무는 없지만, 적어도 <code>React.useState</code>처럼 제네릭으로 타입을 받아 어느정도 약속해 주기를 바랐다. 아니 바라는게 아니라 되어야 하는 거 아닌가..?</p><h2 id=붕대-감기>붕대 감기</h2><p>우선 Firebase의 쿼리 실행 결과로 오는 <code>DocumentData</code>는 다음과 같이 정의되어 있다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-typescript data-lang=typescript><span class=line><span class=cl><span class=kr>export</span> <span class=kr>declare</span> <span class=kr>interface</span> <span class=nx>DocumentData</span> <span class=p>{</span>
 </span></span><span class=line><span class=cl>  <span class=cm>/** A mapping between a field and its value. */</span>
 </span></span><span class=line><span class=cl>  <span class=p>[</span><span class=nx>field</span>: <span class=kt>string</span><span class=p>]</span><span class=o>:</span> <span class=kt>any</span><span class=p>;</span>
 </span></span><span class=line><span class=cl><span class=p>}</span>
@@ -69,10 +69,10 @@
 </span></span><span class=line><span class=cl><span class=p>},</span>
 </span></span><span class=line><span class=cl><span class=c1>// ...
 </span></span></span></code></pre></div><p>&mldr; 정말 노력했다. 노력했는데, 더 이상 타입 단언을 떼낼 수가 없다.<br>생각해 보니 여태 사용했던 ORM이나 ODM에서도 아무 구조 정의 없이 데이터를 변환해 주지는 않았던 것 같다. 분명 model이든 schema든 하는 파일을 둬서 따로 정의해서 사용하도록 되어 있었다. 생각이 거기까지 미치니 데이터 구조를 클래스로 정의해서 클래스 인스턴스를 생성해 반환하도록 하면 되겠다.. 라는 결론을 얻었는데, 갑자기 의문이 들었다.</p><h3 id=애초에-이-부분에서-타입-단언을-사용하는-것이-그렇게-문제일까>애초에 이 부분에서 타입 단언을 사용하는 것이 그렇게 문제일까?</h3><p>공부하기 싫어서 그런게 아니라, 진짜 이런 의문이 들었다.</p><blockquote><p>Reminder: Because type assertions are removed at compile-time, there is no runtime checking associated with a type assertion. There won’t be an exception or null generated if the type assertion is wrong.<br><em>출처: <a href=https://www.typescriptlang.org/docs/handbook/2/everyday-types.html>https://www.typescriptlang.org/docs/handbook/2/everyday-types.html</a></em></p></blockquote><p><code>(docData: DocumentData): T => docData as T</code> 로 정의되었던 fromFirestore 함수에서, 만약에 <em>T</em> 타입에 <code>name</code> property가 있고 <em>docData</em>에는 없다면, 반환되는 객체의 <code>name</code>은 <em>undefined</em>가 된다. 그리고 뒤의 코드에서 이를 참조하게 되면 오류가 발생할 것이다. 타입 단언의 문제는 이것이다. 코딩하는 단계에서는 TypeScript가 오류로 보지 않았음에도 실제 실행에서 오류를 일으키는 케이스.<br>하지만 만약 Firestore에 접근, 제어를 수행하는 프로그램이 이 앱 하나 뿐이고, 앱 자체에서 콜렉션들의 타입을 정의하여 사용한다면 런타임 오류가 발생할까? 오히려 이 규칙만 지켜진다면 타입 단언을 사용하는 것이 더 합리적인 선택이 아닐까?</p><p>이 문제에 대한 정답은 상황에 따라 다를 것 같다. 다만 나는 아래와 같은 근거로 타입 단언을 사용하기로 했다.</p><ul><li>나는 아주 가벼운 규모의 토이 프로젝트에 Firestore를 사용하고 있다.</li><li>같은 콜렉션 내의 모든 문서의 구조를 통일할 필요가 있다.</li><li>1인 개발이기 때문에 구조 변경으로 인한 휴먼 에러가 발생할 가능성이 매우 낮다.</li><li>구조 변경이 일어날 일이 극히 적다. <em>(이미 대부분 구현을 마친 상태에서 고민하기 시작했다.)</em></li></ul><p>만약 나와 상황이 다르고, 타입을 보장받아야 할 필요가 있다면, 타입별로 컨버터를 직접 만들어서 util 함수로서 사용하거나, 확장성까지 고려한다면 애초에 문서 구조를 클래스를 이용해 기본값, 필수 여부까지 정의하여 Converter를 자동으로 만들도록 구현하던가, 방법은 여러 가지가 있을 것 같다.<br>다만 타입 단언을 사용한다면, 굳이 Converter까지 사용할 필요는 없을 것 같다. 어차피 변환한 결과물 끝에 <code>as Type</code>만 붙이면 그만이니 그냥 그렇게 사용하자. 음.. Converter 함수로 가리면 타입 단언을 내 눈에 띄지 않는 곳에 숨겨 죄책감이 덜하다는 장점은 있다.</p><h2 id=refs>Refs.</h2><p><a href=https://stackoverflow.com/questions/65673880/what-is-the-best-way-to-define-the-interface-of-a-document-in-firestore>What is the best way to define the interface of a document in firestore?</a><br><a href=https://www.typescriptlang.org/docs/handbook/2/everyday-types.html>Everyday Types</a>
-<a href=https://firebase.google.com/docs/reference/js/firestore_.firestoredataconverter>FirestoreDataConverter interface - Firebase JavaScript API</a></p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<a href=https://firebase.google.com/docs/reference/js/firestore_.firestoredataconverter>FirestoreDataConverter interface - Firebase JavaScript API</a></p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/2023/02/typescript-generic/index.html b/posts/2023/02/typescript-generic/index.html
index cfe3d53..1b26271 100644
--- a/posts/2023/02/typescript-generic/index.html
+++ b/posts/2023/02/typescript-generic/index.html
@@ -1,8 +1,8 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Typescript Generic | PrayinForRain.dev</title>
-<meta property="og:title" content="Typescript Generic | PrayinForRain.dev"><meta name=twitter:title content="Typescript Generic | PrayinForRain.dev"><meta itemprop=name content="Typescript Generic | PrayinForRain.dev"><meta name=application-name content="Typescript Generic | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/02/typescript-generic/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-02-01T02:01:15+0900><meta property="article:published_time" content=2023-02-01T02:01:15+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"Typescript Generic","author":{"@type":"Person","name":""},"datePublished":"2023-02-01","description":"","wordCount":710,"mainEntityOfPage":"True","dateModified":"2023-02-01","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/02/typescript-generic/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Typescript Generic | PrayinForRain.dev"><meta name=twitter:title content="Typescript Generic | PrayinForRain.dev"><meta itemprop=name content="Typescript Generic | PrayinForRain.dev"><meta name=application-name content="Typescript Generic | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/02/typescript-generic/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-02-01T02:01:15+0900><meta property="article:published_time" content=2023-02-01T02:01:15+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"Typescript Generic","author":{"@type":"Person","name":""},"datePublished":"2023-02-01","description":"","wordCount":710,"mainEntityOfPage":"True","dateModified":"2023-02-01","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/02/typescript-generic/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>Typescript Generic</h1><div class=post-meta><time datetime=2023-02-01T02:01:15+09:00 itemprop=datePublished>2023. 2. 1.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#any-타입의-문제>any 타입의 문제</a></li><li><a href=#제네릭이란>제네릭이란?</a><ul><li><a href=#사용해-보자>사용해 보자</a></li><li><a href=#더-써-보자>더 써 보자</a></li><li><a href=#더-더-써보자>더… 더 써보자</a></li></ul></li><li><a href=#refs>Refs.</a></li></ul></nav></details><div class=page-content><p>타입스크립트와 리액트를 같이 사용할 때, 우리는 <code>useState</code> 훅을 아래와 같이 사용합니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-typescript data-lang=typescript><span class=line><span class=cl><span class=kr>const</span> <span class=p>[</span><span class=nx>name</span><span class=p>,</span> <span class=nx>setName</span><span class=p>]</span> <span class=o>=</span> <span class=nx>useState</span><span class=p>&lt;</span><span class=nt>string</span><span class=p>&gt;(</span><span class=s2>&#34;지상렬&#34;</span><span class=p>);</span>
-</span></span></code></pre></div><p>뭔진 몰라도, 저 꺽쇠 괄호를 사용해서 state가 다룰 상태의 타입을 지정할 수가 있습니다. 사실 적지 않아도 알아서 추론해 주지만, 아무튼 <code>name.split('')</code>처럼 string 타입이 제공하는 메소드나 프로퍼티도 자동완성해주고, 아주 편하게 사용할 수 있습니다. 오늘은 저 꺽쇠괄호에 대해 알아볼거에요.</p><h1 id=any-타입의-문제>any 타입의 문제</h1><p>아무튼 이번에 가져온 예제는 스택(Stack) 자료구조입니다. 그냥 대충 만들게요.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-typescript data-lang=typescript><span class=line><span class=cl><span class=kr>class</span> <span class=nx>Stack</span> <span class=p>{</span>
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>Typescript Generic</h1><div class=post-meta><time datetime=2023-02-01T02:01:15+09:00 itemprop=datePublished>2023. 2. 1.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#any-타입의-문제>any 타입의 문제</a></li><li><a href=#제네릭이란>제네릭이란?</a><ul><li><a href=#사용해-보자>사용해 보자</a></li><li><a href=#더-써-보자>더 써 보자</a></li><li><a href=#더-더-써보자>더… 더 써보자</a></li></ul></li><li><a href=#refs>Refs.</a></li></ul></nav></details><div class=page-content><p>타입스크립트와 리액트를 같이 사용할 때, 우리는 <code>useState</code> 훅을 아래와 같이 사용합니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-typescript data-lang=typescript><span class=line><span class=cl><span class=kr>const</span> <span class=p>[</span><span class=nx>name</span><span class=p>,</span> <span class=nx>setName</span><span class=p>]</span> <span class=o>=</span> <span class=nx>useState</span><span class=p>&lt;</span><span class=nt>string</span><span class=p>&gt;(</span><span class=s2>&#34;지상렬&#34;</span><span class=p>);</span>
+</span></span></code></pre></div><p>뭔진 몰라도, 저 꺽쇠 괄호를 사용해서 state가 다룰 상태의 타입을 지정할 수가 있습니다. 사실 적지 않아도 알아서 추론해 주지만, 아무튼 <code>name.split('')</code>처럼 string 타입이 제공하는 메소드나 프로퍼티도 자동완성해주고, 아주 편하게 사용할 수 있습니다. 오늘은 저 꺽쇠괄호에 대해 알아볼거에요.</p><h2 id=any-타입의-문제>any 타입의 문제</h2><p>아무튼 이번에 가져온 예제는 스택(Stack) 자료구조입니다. 그냥 대충 만들게요.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-typescript data-lang=typescript><span class=line><span class=cl><span class=kr>class</span> <span class=nx>Stack</span> <span class=p>{</span>
 </span></span><span class=line><span class=cl>  <span class=nx>arr</span>: <span class=kt>any</span><span class=p>[]</span> <span class=o>=</span> <span class=p>[];</span>
 </span></span><span class=line><span class=cl>  <span class=nx>push</span><span class=p>(</span><span class=nx>element</span>: <span class=kt>any</span><span class=p>)</span> <span class=p>{</span>
 </span></span><span class=line><span class=cl>    <span class=k>this</span><span class=p>.</span><span class=nx>arr</span><span class=p>.</span><span class=nx>push</span><span class=p>(</span><span class=nx>element</span><span class=p>);</span>
@@ -19,7 +19,7 @@
 </span></span><span class=line><span class=cl><span class=kr>const</span> <span class=nx>numberStack</span> <span class=o>=</span> <span class=k>new</span> <span class=nx>Stack</span><span class=p>();</span>
 </span></span><span class=line><span class=cl><span class=nx>numberStack</span><span class=p>.</span><span class=nx>push</span><span class=p>(</span><span class=mi>0</span><span class=p>);</span>
 </span></span><span class=line><span class=cl><span class=nx>console</span><span class=p>.</span><span class=nx>log</span><span class=p>(</span><span class=nx>numberStack</span><span class=p>.</span><span class=nx>pop</span><span class=p>().</span><span class=nx>slice</span><span class=p>());</span> <span class=c1>// TypeError: numberStack.pop(...).slice is not a function
-</span></span></span></code></pre></div><p>당연히 <code>numberStack</code> 부분에서 에러가 나지만, 이 문제를 <strong>코드를 실행하기 전까진 알 수 없습니다</strong>. <code>Stack</code>이 관리하는 것은 <code>any</code> 타입의 배열이니까요.</p><p>또 지금의 <code>Stack</code>에서는 배열에 들어가는 원소의 타입에 상관 없이 해당 <strong>타입에 대한 메소드의 자동완성을 전혀 지원해주지 못합니다.</strong> 왜냐하면 스택의 원소들은 <code>any</code> 타입이기 때문이죠.</p><p>이 문제들을 해결하기 위해 <code>numberStack</code>이 관리하는 값을 <code>number[]</code>처럼 타입을 지정해주면 되겠지만, 그럼 <code>stringStack</code>을 사용하기 위해 <code>string[]</code> 타입의 <code>Stack</code>을 별도로 선언해야만 합니다. 그냥 <code>useState</code>처럼 <code>any</code>여도 알아서 타입을 추론해 주면 안되는 걸까요? 알잘딱깔센 해주면 되잖아요.</p><p>위의 문제들은 <code>any</code> 타입의 사용을 지양해야 하는 이유이기도 한데요, 이를 해결하기 위해 타입스크립트에서는 **제네릭(Generic)**의 개념을 지원합니다.</p><h1 id=제네릭이란>제네릭이란?</h1><p>제네릭은 다른 프로그래밍 언어(자바, C# 등)에서 사용되는 개념입니다. 자바를 위한 튜토리얼이긴 하지만, <strong>TCPSchool</strong>에 개념 설명이 잘 되어 있어 가져왔습니다.</p><blockquote><p>자바에서 제네릭(generic)이란 데이터의 타입(data type)을 일반화한다(generalize)는 것을 의미합니다.</p><p>제네릭은 클래스나 메소드에서 사용할 내부 데이터 타입을 컴파일 시에 미리 지정하는 방법입니다.</p><p>이렇게 컴파일 시에 미리 타입 검사(type check)를 수행하면 다음과 같은 장점을 가집니다.</p><ol><li>클래스나 메소드 내부에서 사용되는 객체의 타입 안정성을 높일 수 있습니다.</li><li>반환값에 대한 타입 변환 및 타입 검사에 들어가는 노력을 줄일 수 있습니다.</li></ol><p><em>Java - 제네릭의 개념, TCPSchool.com</em></p></blockquote><p>즉 제네릭은 우리가 여러 타입에 활용할 수 있는 함수나 클래스를 사용할 때 ‘<em>이번에는 이런 타입을 사용할거야</em>’라고 알려줄 수 있는 수단인 셈입니다. 그리고 맨 앞에서 들었던 <code>useState</code> 예시에 나온 꺽쇠가 바로 제네릭입니다.</p><h2 id=사용해-보자>사용해 보자</h2><p>제네릭은 다음과 같은 형태로 사용합니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-typescript data-lang=typescript><span class=line><span class=cl><span class=kd>function</span> <span class=err>대충</span><span class=nx>_함수이름</span><span class=p>&lt;</span><span class=nt>T</span><span class=p>&gt;(</span><span class=nx>arg</span>: <span class=kt>T</span><span class=p>)</span> <span class=p>{</span>
+</span></span></span></code></pre></div><p>당연히 <code>numberStack</code> 부분에서 에러가 나지만, 이 문제를 <strong>코드를 실행하기 전까진 알 수 없습니다</strong>. <code>Stack</code>이 관리하는 것은 <code>any</code> 타입의 배열이니까요.</p><p>또 지금의 <code>Stack</code>에서는 배열에 들어가는 원소의 타입에 상관 없이 해당 <strong>타입에 대한 메소드의 자동완성을 전혀 지원해주지 못합니다.</strong> 왜냐하면 스택의 원소들은 <code>any</code> 타입이기 때문이죠.</p><p>이 문제들을 해결하기 위해 <code>numberStack</code>이 관리하는 값을 <code>number[]</code>처럼 타입을 지정해주면 되겠지만, 그럼 <code>stringStack</code>을 사용하기 위해 <code>string[]</code> 타입의 <code>Stack</code>을 별도로 선언해야만 합니다. 그냥 <code>useState</code>처럼 <code>any</code>여도 알아서 타입을 추론해 주면 안되는 걸까요? 알잘딱깔센 해주면 되잖아요.</p><p>위의 문제들은 <code>any</code> 타입의 사용을 지양해야 하는 이유이기도 한데요, 이를 해결하기 위해 타입스크립트에서는 **제네릭(Generic)**의 개념을 지원합니다.</p><h2 id=제네릭이란>제네릭이란?</h2><p>#제네릭은 다른 프로그래밍 언어(자바, C# 등)에서 사용되는 개념입니다. 자바를 위한 튜토리얼이긴 하지만, <strong>TCPSchool</strong>에 개념 설명이 잘 되어 있어 가져왔습니다.</p><blockquote><p>자바에서 제네릭(generic)이란 데이터의 타입(data type)을 일반화한다(generalize)는 것을 의미합니다.</p><p>제네릭은 클래스나 메소드에서 사용할 내부 데이터 타입을 컴파일 시에 미리 지정하는 방법입니다.</p><p>이렇게 컴파일 시에 미리 타입 검사(type check)를 수행하면 다음과 같은 장점을 가집니다.</p><ol><li>클래스나 메소드 내부에서 사용되는 객체의 타입 안정성을 높일 수 있습니다.</li><li>반환값에 대한 타입 변환 및 타입 검사에 들어가는 노력을 줄일 수 있습니다.</li></ol><p><em>Java - 제네릭의 개념, TCPSchool.com</em></p></blockquote><p>즉 제네릭은 우리가 여러 타입에 활용할 수 있는 함수나 클래스를 사용할 때 ‘<em>이번에는 이런 타입을 사용할거야</em>’라고 알려줄 수 있는 수단인 셈입니다. 그리고 맨 앞에서 들었던 <code>useState</code> 예시에 나온 꺽쇠가 바로 제네릭입니다.</p><h3 id=사용해-보자>사용해 보자</h3><p>제네릭은 다음과 같은 형태로 사용합니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-typescript data-lang=typescript><span class=line><span class=cl><span class=kd>function</span> <span class=err>대충</span><span class=nx>_함수이름</span><span class=p>&lt;</span><span class=nt>T</span><span class=p>&gt;(</span><span class=nx>arg</span>: <span class=kt>T</span><span class=p>)</span> <span class=p>{</span>
 </span></span><span class=line><span class=cl>  <span class=c1>// ...
 </span></span></span><span class=line><span class=cl><span class=c1></span><span class=p>}</span>
 </span></span><span class=line><span class=cl><span class=err>대충</span><span class=nx>_함수이름</span><span class=p>&lt;</span><span class=nt>string</span><span class=p>&gt;(</span><span class=s2>&#34;아잉&#34;</span><span class=p>);</span> <span class=c1>// T = string
@@ -41,7 +41,7 @@
 </span></span><span class=line><span class=cl><span class=kr>const</span> <span class=nx>numberStack</span> <span class=o>=</span> <span class=k>new</span> <span class=nx>Stack</span><span class=p>&lt;</span><span class=nt>number</span><span class=p>&gt;();</span>
 </span></span><span class=line><span class=cl><span class=nx>numberStack</span><span class=p>.</span><span class=nx>push</span><span class=p>(</span><span class=mi>0</span><span class=p>);</span>
 </span></span><span class=line><span class=cl><span class=nx>console</span><span class=p>.</span><span class=nx>log</span><span class=p>(</span><span class=nx>numberStack</span><span class=p>.</span><span class=nx>pop</span><span class=p>()</span><span class=o>?</span><span class=p>.</span><span class=nx>slice</span><span class=p>());</span> <span class=c1>// Property &#39;slice&#39; does not exist on type &#39;number&#39;.
-</span></span></span></code></pre></div><p>제대로 자동완성도 지원하고, <code>numberStack</code>의 <code>slice</code> 역시 실행 전에 오류를 표시해 줍니다. 또 <code>Array.pop()</code> 함수가 <code>undefined</code>를 반환할 수 있기 때문에 오류를 뱉어 옵셔널 체이닝을 붙여 주었습니다. 이제 런타임에서 오류가 발생할 일은 없겠네요.</p><aside><p>💡 <strong>useState는 왜 제네릭으로 타입을 명시하지 않아도 추론이 될까요?</strong><br>useState는 <code>useState('하이룽');</code>처럼 타입을 명시하지 않아도 알아서 상태의 타입을 인식합니다. 그런데 방금 만든 스택 클래스는 제네릭으로 타입을 명시하지 않으면 에러를 뱉습니다. 둘의 차이는 무엇일까요?<br>바로 <strong>호출할 때 제네릭 <code>T</code>를 추론할 수 있냐의 차이</strong>가 있습니다. <code>useState</code>를 호출할 때에는 상태의 초기값에 따라 상태의 타입을 추론합니다. 우리가 만든 스택 클래스 역시 생성자 함수를 통해 초기값을 입력받으면 똑같이 타입 명시 없어도 추론이 가능합니다.<br>반대로 <code>useState</code>도 <code>useState()</code>와 같이 초기값을 호출 시 지정해주지 않으면 undefined 타입으로 인식하여 추론이 제대로 이뤄지지 않습니다.</p></aside><h2 id=더-써-보자>더 써 보자</h2><p>제네릭은 이게 끝일까요? 다음 사례를 통해 더 고민해봅시다.</p><p><code>string</code>과 <code>Array</code>는 <code>length</code> 공통적으로 프로퍼티를 갖습니다. 이렇게 타입은 다르지만 length 프로퍼티를 갖는 타입만을 인자로 받고 싶을 때는 어떻게 해야 할까요? 이를 위해서는 제네릭과 함께 <code>extends</code> 구문을 사용해야 합니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-typescript data-lang=typescript><span class=line><span class=cl><span class=kr>interface</span> <span class=nx>hasLength</span> <span class=p>{</span>
+</span></span></span></code></pre></div><p>제대로 자동완성도 지원하고, <code>numberStack</code>의 <code>slice</code> 역시 실행 전에 오류를 표시해 줍니다. 또 <code>Array.pop()</code> 함수가 <code>undefined</code>를 반환할 수 있기 때문에 오류를 뱉어 옵셔널 체이닝을 붙여 주었습니다. 이제 런타임에서 오류가 발생할 일은 없겠네요.</p><aside><p>💡 <strong>useState는 왜 제네릭으로 타입을 명시하지 않아도 추론이 될까요?</strong><br>useState는 <code>useState('하이룽');</code>처럼 타입을 명시하지 않아도 알아서 상태의 타입을 인식합니다. 그런데 방금 만든 스택 클래스는 제네릭으로 타입을 명시하지 않으면 에러를 뱉습니다. 둘의 차이는 무엇일까요?<br>바로 <strong>호출할 때 제네릭 <code>T</code>를 추론할 수 있냐의 차이</strong>가 있습니다. <code>useState</code>를 호출할 때에는 상태의 초기값에 따라 상태의 타입을 추론합니다. 우리가 만든 스택 클래스 역시 생성자 함수를 통해 초기값을 입력받으면 똑같이 타입 명시 없어도 추론이 가능합니다.<br>반대로 <code>useState</code>도 <code>useState()</code>와 같이 초기값을 호출 시 지정해주지 않으면 undefined 타입으로 인식하여 추론이 제대로 이뤄지지 않습니다.</p></aside><h3 id=더-써-보자>더 써 보자</h3><p>제네릭은 이게 끝일까요? 다음 사례를 통해 더 고민해봅시다.</p><p><code>string</code>과 <code>Array</code>는 <code>length</code> 공통적으로 프로퍼티를 갖습니다. 이렇게 타입은 다르지만 length 프로퍼티를 갖는 타입만을 인자로 받고 싶을 때는 어떻게 해야 할까요? 이를 위해서는 제네릭과 함께 <code>extends</code> 구문을 사용해야 합니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-typescript data-lang=typescript><span class=line><span class=cl><span class=kr>interface</span> <span class=nx>hasLength</span> <span class=p>{</span>
 </span></span><span class=line><span class=cl>  <span class=nx>length</span>: <span class=kt>number</span><span class=p>;</span>
 </span></span><span class=line><span class=cl><span class=p>}</span>
 </span></span><span class=line><span class=cl>
@@ -52,7 +52,7 @@
 </span></span><span class=line><span class=cl><span class=nx>console</span><span class=p>.</span><span class=nx>log</span><span class=p>(</span><span class=nx>getLength</span><span class=p>([</span><span class=mi>1</span><span class=p>,</span> <span class=mi>2</span><span class=p>]));</span>
 </span></span><span class=line><span class=cl><span class=nx>console</span><span class=p>.</span><span class=nx>log</span><span class=p>(</span><span class=nx>getLength</span><span class=p>(</span><span class=s2>&#34;12&#34;</span><span class=p>));</span>
 </span></span><span class=line><span class=cl><span class=nx>console</span><span class=p>.</span><span class=nx>log</span><span class=p>(</span><span class=nx>getLength</span><span class=p>(</span><span class=mi>1</span><span class=p>));</span> <span class=c1>// Argument of type &#39;number&#39; is not assignable to parameter of type &#39;hasLength&#39;.
-</span></span></span></code></pre></div><p>이런 식으로 함수를 구성하면 제네릭 타입 <code>T</code>는 <code>hasLength</code>의 특성을 갖는 타입만이 인자로 통과될 수 있습니다.</p><h2 id=더-더-써보자>더… 더 써보자</h2><p>조금 더 깊이 들어가 보겠습니다. length 프로퍼티를 갖는 타입의 <strong>스택에서 마지막 요소의 길이</strong>를 반환하는 함수를 만들어 보겠습니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-typescript data-lang=typescript><span class=line><span class=cl><span class=kd>function</span> <span class=nx>getLengthOfLastElement</span><span class=p>&lt;</span><span class=nt>T</span> <span class=na>extends</span> <span class=na>Stack</span><span class=err>&lt;</span><span class=na>U</span><span class=p>&gt;,</span> <span class=nx>U</span> <span class=kr>extends</span> <span class=nx>hasLength</span><span class=o>&gt;</span><span class=p>(</span>
+</span></span></span></code></pre></div><p>이런 식으로 함수를 구성하면 제네릭 타입 <code>T</code>는 <code>hasLength</code>의 특성을 갖는 타입만이 인자로 통과될 수 있습니다.</p><h3 id=더-더-써보자>더… 더 써보자</h3><p>조금 더 깊이 들어가 보겠습니다. length 프로퍼티를 갖는 타입의 <strong>스택에서 마지막 요소의 길이</strong>를 반환하는 함수를 만들어 보겠습니다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-typescript data-lang=typescript><span class=line><span class=cl><span class=kd>function</span> <span class=nx>getLengthOfLastElement</span><span class=p>&lt;</span><span class=nt>T</span> <span class=na>extends</span> <span class=na>Stack</span><span class=err>&lt;</span><span class=na>U</span><span class=p>&gt;,</span> <span class=nx>U</span> <span class=kr>extends</span> <span class=nx>hasLength</span><span class=o>&gt;</span><span class=p>(</span>
 </span></span><span class=line><span class=cl>  <span class=nx>stack</span>: <span class=kt>T</span>
 </span></span><span class=line><span class=cl><span class=p>)</span> <span class=p>{</span>
 </span></span><span class=line><span class=cl>  <span class=kr>const</span> <span class=nx>element</span> <span class=o>=</span> <span class=nx>stack</span><span class=p>.</span><span class=nx>pop</span><span class=p>();</span>
@@ -68,10 +68,10 @@
 </span></span><span class=line><span class=cl><span class=kr>const</span> <span class=nx>numberStack</span> <span class=o>=</span> <span class=k>new</span> <span class=nx>Stack</span><span class=p>&lt;</span><span class=nt>number</span><span class=p>&gt;();</span>
 </span></span><span class=line><span class=cl><span class=nx>numberStack</span><span class=p>.</span><span class=nx>push</span><span class=p>(</span><span class=mi>1</span><span class=p>);</span>
 </span></span><span class=line><span class=cl><span class=nx>getLengthOfLastElement</span><span class=p>(</span><span class=nx>numberStack</span><span class=p>);</span> <span class=c1>// TypeError
-</span></span></span></code></pre></div><p>위와 같이 제네릭을 이용해 선언된 타입이 사용하는 제네릭 타입을 다시 참조하는 것이 가능합니다.</p><h1 id=refs>Refs.</h1><p><a href=http://www.tcpschool.com/java/java_generic_concept>코딩교육 티씨피스쿨</a><br><a href=https://learn.microsoft.com/ko-kr/dotnet/csharp/fundamentals/types/generics>제네릭 클래스 및 메서드</a><br><a href=https://www.typescriptlang.org/ko/docs/handbook/2/generics.html>Documentation - Generics</a><br><a href=https://joshua1988.github.io/ts/guide/generics.html>제네릭 | 타입스크립트 핸드북</a></p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+</span></span></span></code></pre></div><p>위와 같이 제네릭을 이용해 선언된 타입이 사용하는 제네릭 타입을 다시 참조하는 것이 가능합니다.</p><h2 id=refs>Refs.</h2><p><a href=http://www.tcpschool.com/java/java_generic_concept>코딩교육 티씨피스쿨</a><br><a href=https://learn.microsoft.com/ko-kr/dotnet/csharp/fundamentals/types/generics>제네릭 클래스 및 메서드</a><br><a href=https://www.typescriptlang.org/ko/docs/handbook/2/generics.html>Documentation - Generics</a><br><a href=https://joshua1988.github.io/ts/guide/generics.html>제네릭 | 타입스크립트 핸드북</a></p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/2023/03/nodejs-for-baekjoon/index.html b/posts/2023/03/nodejs-for-baekjoon/index.html
index 078ffab..8a70818 100644
--- a/posts/2023/03/nodejs-for-baekjoon/index.html
+++ b/posts/2023/03/nodejs-for-baekjoon/index.html
@@ -1,7 +1,7 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>백준을 위한 node.js | PrayinForRain.dev</title>
-<meta property="og:title" content="백준을 위한 node.js  | PrayinForRain.dev"><meta name=twitter:title content="백준을 위한 node.js  | PrayinForRain.dev"><meta itemprop=name content="백준을 위한 node.js  | PrayinForRain.dev"><meta name=application-name content="백준을 위한 node.js  | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-03-30T15:17:00+0900><meta property="article:published_time" content=2023-03-30T15:17:00+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"백준을 위한 node.js ","author":{"@type":"Person","name":""},"datePublished":"2023-03-30","description":"","wordCount":156,"mainEntityOfPage":"True","dateModified":"2023-03-30","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="백준을 위한 node.js  | PrayinForRain.dev"><meta name=twitter:title content="백준을 위한 node.js  | PrayinForRain.dev"><meta itemprop=name content="백준을 위한 node.js  | PrayinForRain.dev"><meta name=application-name content="백준을 위한 node.js  | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-03-30T15:17:00+0900><meta property="article:published_time" content=2023-03-30T15:17:00+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"백준을 위한 node.js ","author":{"@type":"Person","name":""},"datePublished":"2023-03-30","description":"","wordCount":156,"mainEntityOfPage":"True","dateModified":"2023-03-30","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>백준을 위한 node.js</h1><div class=post-meta><time datetime=2023-03-30T15:17:00+09:00 itemprop=datePublished>2023. 3. 30.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><ul><li><a href=#js라도-백준이-하고싶어>JS라도 백준이 하고싶어</a></li><li><a href=#baekjoon-nodejs-template>Baekjoon Node.js template</a></li></ul></li></ul></nav></details><div class=page-content><h2 id=js라도-백준이-하고싶어>JS라도 백준이 하고싶어</h2><p><img src=/images/posts/2023/03/nodejs-for-baekjoon/01.png alt="Programmers IDE"></p><p>공채 시즌이다. 개인적으로 코딩 테스트를 정말정말 자신 없어했는데, 더 이상 미룰 수 없어 야금야금 공부를 시작했다.<br>불편한 점이 있다면, 백준은 자바스크립트에 아주 불친절하다는 점이다. 내가 학부생 때 잘 하지도 못하는 C++로 꾸역꾸역 문제를 풀었던 이유 중 하나이기도 했다. 그 때는 아는 PS 플랫폼이 백준 뿐이니, 자바스크립트의 어쩔 수 없는 한계인가보다 했다.</p><p>그런데 프로그래머스를 맛 보고 나니 머리가 커져서 자바스크립트가 백준에게 부당한 차별을 받는(?) 기분이 들었다. 진짜로 화가 난 건 아니지만 그래도 화가 났다. 용서할 수가 없어 보일러플레이트 코드를 작성했다.</p><p>한 4~5문제 테스트해 봤는데 제대로 작동하는 것 같다.<br>백준은 워낙 입력 형식도 출력 형식도 다양하기 때문에, 모든 문제에 대해 일반적으로 적용할 수 있는 코드는 아니지만.. 이 정도로 참고 쓸란다.</p><h2 id=baekjoon-nodejs-template>Baekjoon Node.js template</h2><div class=highlight><pre tabindex=0 class=chroma><code class=language-javascript data-lang=javascript><span class=line><span class=cl><span class=kd>function</span> <span class=nx>solution</span><span class=p>(</span><span class=nx>input</span><span class=p>)</span> <span class=p>{</span>
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>백준을 위한 node.js</h1><div class=post-meta><time datetime=2023-03-30T15:17:00+09:00 itemprop=datePublished>2023. 3. 30.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#js라도-백준이-하고싶어>JS라도 백준이 하고싶어</a></li><li><a href=#baekjoon-nodejs-template>Baekjoon Node.js template</a></li></ul></nav></details><div class=page-content><h2 id=js라도-백준이-하고싶어>JS라도 백준이 하고싶어</h2><p><img src=/images/posts/2023/03/nodejs-for-baekjoon/01.png alt="Programmers IDE"></p><p>공채 시즌이다. 개인적으로 코딩 테스트를 정말정말 자신 없어했는데, 더 이상 미룰 수 없어 야금야금 공부를 시작했다.<br>불편한 점이 있다면, 백준은 자바스크립트에 아주 불친절하다는 점이다. 내가 학부생 때 잘 하지도 못하는 C++로 꾸역꾸역 문제를 풀었던 이유 중 하나이기도 했다. 그 때는 아는 PS 플랫폼이 백준 뿐이니, 자바스크립트의 어쩔 수 없는 한계인가보다 했다.</p><p>그런데 프로그래머스를 맛 보고 나니 머리가 커져서 자바스크립트가 백준에게 부당한 차별을 받는(?) 기분이 들었다. 진짜로 화가 난 건 아니지만 그래도 화가 났다. 용서할 수가 없어 보일러플레이트 코드를 작성했다.</p><p>한 4~5문제 테스트해 봤는데 제대로 작동하는 것 같다.<br>백준은 워낙 입력 형식도 출력 형식도 다양하기 때문에, 모든 문제에 대해 일반적으로 적용할 수 있는 코드는 아니지만.. 이 정도로 참고 쓸란다.</p><h2 id=baekjoon-nodejs-template>Baekjoon Node.js template</h2><div class=highlight><pre tabindex=0 class=chroma><code class=language-javascript data-lang=javascript><span class=line><span class=cl><span class=kd>function</span> <span class=nx>solution</span><span class=p>(</span><span class=nx>input</span><span class=p>)</span> <span class=p>{</span>
 </span></span><span class=line><span class=cl>  <span class=kd>let</span> <span class=nx>answer</span> <span class=o>=</span> <span class=mi>0</span><span class=p>;</span>
 </span></span><span class=line><span class=cl>  <span class=c1>// Your code here ...
 </span></span></span><span class=line><span class=cl><span class=c1></span>
@@ -20,10 +20,10 @@
 </span></span><span class=line><span class=cl><span class=p>}</span> <span class=k>else</span> <span class=p>{</span>
 </span></span><span class=line><span class=cl>  <span class=nx>console</span><span class=p>.</span><span class=nx>log</span><span class=p>(</span><span class=nx>solution</span><span class=p>(</span><span class=nx>input</span><span class=p>));</span>
 </span></span><span class=line><span class=cl><span class=p>}</span>
-</span></span></code></pre></div></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+</span></span></code></pre></div></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/2023/03/npm-scripts-doesnt-work/index.html b/posts/2023/03/npm-scripts-doesnt-work/index.html
index 559e753..5726431 100644
--- a/posts/2023/03/npm-scripts-doesnt-work/index.html
+++ b/posts/2023/03/npm-scripts-doesnt-work/index.html
@@ -1,16 +1,16 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>VSCode의 NPM Scripts가 작동하지 않는 사람 | PrayinForRain.dev</title>
-<meta property="og:title" content="VSCode의 NPM Scripts가 작동하지 않는 사람 | PrayinForRain.dev"><meta name=twitter:title content="VSCode의 NPM Scripts가 작동하지 않는 사람 | PrayinForRain.dev"><meta itemprop=name content="VSCode의 NPM Scripts가 작동하지 않는 사람 | PrayinForRain.dev"><meta name=application-name content="VSCode의 NPM Scripts가 작동하지 않는 사람 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-03-29T15:17:00+0900><meta property="article:published_time" content=2023-03-29T15:17:00+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"VSCode의 NPM Scripts가 작동하지 않는 사람","author":{"@type":"Person","name":""},"datePublished":"2023-03-29","description":"","wordCount":411,"mainEntityOfPage":"True","dateModified":"2023-03-29","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="VSCode의 NPM Scripts가 작동하지 않는 사람 | PrayinForRain.dev"><meta name=twitter:title content="VSCode의 NPM Scripts가 작동하지 않는 사람 | PrayinForRain.dev"><meta itemprop=name content="VSCode의 NPM Scripts가 작동하지 않는 사람 | PrayinForRain.dev"><meta name=application-name content="VSCode의 NPM Scripts가 작동하지 않는 사람 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-03-29T15:17:00+0900><meta property="article:published_time" content=2023-03-29T15:17:00+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"VSCode의 NPM Scripts가 작동하지 않는 사람","author":{"@type":"Person","name":""},"datePublished":"2023-03-29","description":"","wordCount":411,"mainEntityOfPage":"True","dateModified":"2023-03-29","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>VSCode의 NPM Scripts가 작동하지 않는 사람</h1><div class=post-meta><time datetime=2023-03-29T15:17:00+09:00 itemprop=datePublished>2023. 3. 29.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#npm-scripts가-안-된다>NPM Scripts가 안 된다</a></li><li><a href=#해결-과정>해결 과정</a></li><li><a href=#refs>Refs.</a></li></ul></nav></details><div class=page-content><figure><img src=/images/posts/2023/03/npm-scripts-doesnt-work/01.jpeg alt=image><figcaption><p>늦잠자고 갓생사는 척 하는 삶이란&mldr;</p></figcaption></figure><p>맥북과 친해지기 시작한지 2달이 되었다. 윈도우 노트북을 사용하다가 갈아 탄 이유는, <em>맥에서 되는 것이 윈도우에서 되고, 윈도우에서 되는 것은 맥에서 안되는</em> 문제를 너무 많이 겪었기 때문이다. 주변의 맥 유저에게 계속해서 테스트를 요청하기도 눈치보이고, 언젠가는 마주해야겠다고 생각했던 녀석이기 때문에 과감한 투자를 했다. 그 과정에서 내가 윈도우에 지나치게 강결합(?) 되어 있다는 것을 깨달았고, 지금은 맥도 윈도우도 못 쓰는 그 어딘가의 지점에 있다.</p><p>그리고 최근에는 프로젝트를 하고 있다. 부스트캠프에서 만난 사람들과 스터디를 하다가, 디자인 시스템을 만들어 보자는 이야기가 나와서 다같이 티스푼 공사 중이다. 이 것에 대해서도 글을 써야 하는데 오늘 포스팅할 내용은 이 것도 아니다. 회고를 안 쓰니 이야기가 많이 밀려 횡설수설 하는구나..</p><p>아무튼&mldr; 프로젝트 환경 설정을 하면서 겪었던 문제를 기록하고자 한다.</p><h1 id=npm-scripts가-안-된다>NPM Scripts가 안 된다</h1><p><img src=/images/posts/2023/03/npm-scripts-doesnt-work/02.png alt="NPM Scripts"></p><p>VSCode는 레포지토리를 열었을 때 <code>package.json</code> 파일을 파싱하여 실행할 수 있는 스크립트들을 하단에 보여준다. 이게 원래는 익스텐션의 기능이었다가, 언젠가 익스텐션이 deprecated가 되고 기본 기능이 된 모양이다. 아무튼 저걸 사용하면 굳이 터미널을 열어서 명령어를 투닥투닥 입력하지 않아도 알아서 새 터미널을 열어서 명령어를 실행해 준다. 특히 FE와 BE를 같이 실행할 때 너무너무 편하다.</p><p>그런데 맥북에서 요놈이 실행이 안된다.</p><p><img src=/images/posts/2023/03/npm-scripts-doesnt-work/03.png alt="Error message"></p><p>다른 프로젝트도 안 된다. 이 프로젝트는 더더욱 안된다. 원래 그렇게 인식하지 못하고 사용하던 기능인데, 안 된다고 생각하니 갑자기 뭔가 족쇄를 찬 기분이고.. 어쩌고 저쩌고..<br>아무튼 메시지를 읽어 보고 처음에는 프로젝트가 yarn 1.22.19 버전을 사용하는데 내 글로벌에 yarn berry만 설치되어 있어서 그런가 하고 기본 버전을 바꿀 방법을 찾아 다녔다. 물론 정답이 아니었다.</p><h1 id=해결-과정>해결 과정</h1><p>나는 처음에 node와 yarn을 설치할 때, <code>~/.zshrc</code> 파일에 아래와 같이 설정을 넣었었다. 그 때는 하도 깔아야 하는 것이 많다보니 이것저것 찾아서 묻지도 따지지도 않고 마구 따라했었는데,</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-zsh data-lang=zsh><span class=line><span class=cl><span class=nb>export</span> <span class=nv>NVM_DIR</span><span class=o>=</span><span class=s2>&#34;</span><span class=nv>$HOME</span><span class=s2>/.nvm&#34;</span>
-</span></span><span class=line><span class=cl><span class=o>[</span> -s <span class=s2>&#34;/usr/local/opt/nvm/nvm.sh&#34;</span> <span class=o>]</span> <span class=o>&amp;&amp;</span> . <span class=s2>&#34;/usr/local/opt/nvm/nvm.sh&#34;</span>  <span class=c1># This loads nvm</span>
-</span></span><span class=line><span class=cl><span class=o>[</span> -s <span class=s2>&#34;/usr/local/opt/nvm/etc/bash_completion.d/nvm&#34;</span> <span class=o>]</span> <span class=o>&amp;&amp;</span> . <span class=s2>&#34;/usr/local/opt/nvm/etc/bash_completion.d/nvm&#34;</span>  <span class=c1># This loads nvm bash_completion</span>
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>VSCode의 NPM Scripts가 작동하지 않는 사람</h1><div class=post-meta><time datetime=2023-03-29T15:17:00+09:00 itemprop=datePublished>2023. 3. 29.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#npm-scripts가-안-된다>NPM Scripts가 안 된다</a></li><li><a href=#해결-과정>해결 과정</a></li><li><a href=#refs>Refs.</a></li></ul></nav></details><div class=page-content><figure><img src=/images/posts/2023/03/npm-scripts-doesnt-work/01.jpeg alt=image><figcaption><p>늦잠자고 갓생사는 척 하는 삶이란&mldr;</p></figcaption></figure><p>맥북과 친해지기 시작한지 2달이 되었다. 윈도우 노트북을 사용하다가 갈아 탄 이유는, <em>맥에서 되는 것이 윈도우에서 되고, 윈도우에서 되는 것은 맥에서 안되는</em> 문제를 너무 많이 겪었기 때문이다. 주변의 맥 유저에게 계속해서 테스트를 요청하기도 눈치보이고, 언젠가는 마주해야겠다고 생각했던 녀석이기 때문에 과감한 투자를 했다. 그 과정에서 내가 윈도우에 지나치게 강결합(?) 되어 있다는 것을 깨달았고, 지금은 맥도 윈도우도 못 쓰는 그 어딘가의 지점에 있다.</p><p>그리고 최근에는 프로젝트를 하고 있다. 부스트캠프에서 만난 사람들과 스터디를 하다가, 디자인 시스템을 만들어 보자는 이야기가 나와서 다같이 티스푼 공사 중이다. 이 것에 대해서도 글을 써야 하는데 오늘 포스팅할 내용은 이 것도 아니다. 회고를 안 쓰니 이야기가 많이 밀려 횡설수설 하는구나..</p><p>아무튼&mldr; 프로젝트 환경 설정을 하면서 겪었던 문제를 기록하고자 한다.</p><h2 id=npm-scripts가-안-된다>NPM Scripts가 안 된다</h2><p><img src=/images/posts/2023/03/npm-scripts-doesnt-work/02.png alt="NPM Scripts"></p><p>VSCode는 레포지토리를 열었을 때 <code>package.json</code> 파일을 파싱하여 실행할 수 있는 스크립트들을 하단에 보여준다. 이게 원래는 익스텐션의 기능이었다가, 언젠가 익스텐션이 deprecated가 되고 기본 기능이 된 모양이다. 아무튼 저걸 사용하면 굳이 터미널을 열어서 명령어를 투닥투닥 입력하지 않아도 알아서 새 터미널을 열어서 명령어를 실행해 준다. 특히 FE와 BE를 같이 실행할 때 너무너무 편하다.</p><p>그런데 맥북에서 요놈이 실행이 안된다.</p><p><img src=/images/posts/2023/03/npm-scripts-doesnt-work/03.png alt="Error message"></p><p>다른 프로젝트도 안 된다. 이 프로젝트는 더더욱 안된다. 원래 그렇게 인식하지 못하고 사용하던 기능인데, 안 된다고 생각하니 갑자기 뭔가 족쇄를 찬 기분이고.. 어쩌고 저쩌고..<br>아무튼 메시지를 읽어 보고 처음에는 프로젝트가 yarn 1.22.19 버전을 사용하는데 내 글로벌에 yarn berry만 설치되어 있어서 그런가 하고 기본 버전을 바꿀 방법을 찾아 다녔다. 물론 정답이 아니었다.</p><h2 id=해결-과정>해결 과정</h2><p>나는 처음에 node와 yarn을 설치할 때, <code>~/.zshrc</code> 파일에 아래와 같이 설정을 넣었었다. 그 때는 하도 깔아야 하는 것이 많다보니 이것저것 찾아서 묻지도 따지지도 않고 마구 따라했었는데,</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-zsh data-lang=zsh><span class=line><span class=cl><span class=nb>export</span> <span class=nv>NVM_DIR</span><span class=o>=</span><span class=s2>&#34;</span><span class=nv>$HOME</span><span class=s2>/.nvm&#34;</span>
+</span></span><span class=line><span class=cl><span class=c1>#[ -s &#34;/usr/local/opt/nvm/nvm.sh&#34; ] &amp;&amp; . &#34;/usr/local/opt/nvm/nvm.sh&#34;  # This loads nvm</span>
+</span></span><span class=line><span class=cl><span class=c1>#[ -s &#34;/usr/local/opt/nvm/etc/bash_completion.d/nvm&#34; ] &amp;&amp; . &#34;/usr/local/opt/nvm/etc/bash_completion.d/nvm&#34;  # This loads nvm bash_completion</span>
 </span></span></code></pre></div><p><code>NVM_DIR</code>라는 변수를 정의해 놓고 사용하지 않고 있었다. 왜일까? 싶어 아래와 같이 변경했더니 해결되었다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-zsh data-lang=zsh><span class=line><span class=cl><span class=nb>export</span> <span class=nv>NVM_DIR</span><span class=o>=</span><span class=s2>&#34;</span><span class=nv>$HOME</span><span class=s2>/.nvm&#34;</span>
-</span></span><span class=line><span class=cl><span class=o>[</span> -s <span class=s2>&#34;</span><span class=nv>$NVM_DIR</span><span class=s2>/nvm.sh&#34;</span> <span class=o>]</span> <span class=o>&amp;&amp;</span> <span class=se>\.</span> <span class=s2>&#34;</span><span class=nv>$NVM_DIR</span><span class=s2>/nvm.sh&#34;</span>  <span class=c1># This loads nvm</span>
-</span></span><span class=line><span class=cl><span class=o>[</span> -s <span class=s2>&#34;</span><span class=nv>$NVM_DIR</span><span class=s2>/bash_completion&#34;</span> <span class=o>]</span> <span class=o>&amp;&amp;</span> <span class=se>\.</span> <span class=s2>&#34;</span><span class=nv>$NVM_DIR</span><span class=s2>/bash_completion&#34;</span>  <span class=c1># This loads nvm bash_completion</span>
-</span></span></code></pre></div><p>음&mldr; 그 외에도 <code>~/.zshenv</code> 내용을 <code>source ~/.zshrc</code>로 변경해서 zshrc 파일의 내용을 참조하도록 수정했다.</p><p>그런데 저 설정 파일은 대체 어디서 작성된 것일까? <a href=https://github.com/nvm-sh/nvm/commit/e10705b896ee417e03512403df82e22d7a9b25ca>nvm의 공식 문서</a>에도 <code>$NVM_DIR</code>를 참조하도록 쓰여 있었고, 저 코드가 처음 나온 커밋을 찾아 보니 <a href=https://github.com/nvm-sh/nvm/commit/e10705b896ee417e03512403df82e22d7a9b25ca>역시 처음부터 NVM_DIR를 사용하게 되어 있었다.</a></p><p><img src=/images/posts/2023/03/npm-scripts-doesnt-work/04.png alt="Finding origin"><br>기원을 찾고 싶었으나 검색되는 가장 오래된 결과는 어느 gist에 저장된 bash_profile 코드였다. 내가 쉘에 대해 깊이 알고 있지 않아서 더 이상 깊이 원인을 찾으려면 많은 시간이 필요해 보인다. 2달만에 되찾은 NPM Scripts 메뉴에 무척 기분이 좋다.</p><h1 id=refs>Refs.</h1><p><a href=https://stackoverflow.com/questions/63502253/vscode-build-error-the-terminal-process-bin-zsh-c-yarn-run-watch-extensi>VSCODE build error `The terminal process &ldquo;/bin/zsh &lsquo;-c&rsquo;, &mldr; - stack overflow</a><br><a href=https://velog.io/@palette/zsh-command-not-found-nvm-%EC%98%A4%EB%A5%98%ED%95%B4%EA%B2%B0%EB%B2%95>zsh: command not found: nvm 오류해결법</a></p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+</span></span><span class=line><span class=cl><span class=c1>#[ -s &#34;$NVM_DIR/nvm.sh&#34; ] &amp;&amp; \. &#34;$NVM_DIR/nvm.sh&#34;  # This loads nvm</span>
+</span></span><span class=line><span class=cl><span class=c1>#[ -s &#34;$NVM_DIR/bash_completion&#34; ] &amp;&amp; \. &#34;$NVM_DIR/bash_completion&#34;  # This loads nvm bash_completion</span>
+</span></span></code></pre></div><p>음&mldr; 그 외에도 <code>~/.zshenv</code> 내용을 <code>source ~/.zshrc</code>로 변경해서 zshrc 파일의 내용을 참조하도록 수정했다.</p><p>그런데 저 설정 파일은 대체 어디서 작성된 것일까? <a href=https://github.com/nvm-sh/nvm/commit/e10705b896ee417e03512403df82e22d7a9b25ca>nvm의 공식 문서</a>에도 <code>$NVM_DIR</code>를 참조하도록 쓰여 있었고, 저 코드가 처음 나온 커밋을 찾아 보니 <a href=https://github.com/nvm-sh/nvm/commit/e10705b896ee417e03512403df82e22d7a9b25ca>역시 처음부터 NVM_DIR를 사용하게 되어 있었다.</a></p><p><img src=/images/posts/2023/03/npm-scripts-doesnt-work/04.png alt="Finding origin"><br>기원을 찾고 싶었으나 검색되는 가장 오래된 결과는 어느 gist에 저장된 bash_profile 코드였다. 내가 쉘에 대해 깊이 알고 있지 않아서 더 이상 깊이 원인을 찾으려면 많은 시간이 필요해 보인다. 2달만에 되찾은 NPM Scripts 메뉴에 무척 기분이 좋다.</p><h2 id=refs>Refs.</h2><p><a href=https://stackoverflow.com/questions/63502253/vscode-build-error-the-terminal-process-bin-zsh-c-yarn-run-watch-extensi>VSCODE build error `The terminal process &ldquo;/bin/zsh &lsquo;-c&rsquo;, &mldr; - stack overflow</a><br><a href=https://velog.io/@palette/zsh-command-not-found-nvm-%EC%98%A4%EB%A5%98%ED%95%B4%EA%B2%B0%EB%B2%95>zsh: command not found: nvm 오류해결법</a></p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/2023/04/nextjs-storybook-with-pnp/index.html b/posts/2023/04/nextjs-storybook-with-pnp/index.html
index 0af3dd9..b86ff79 100644
--- a/posts/2023/04/nextjs-storybook-with-pnp/index.html
+++ b/posts/2023/04/nextjs-storybook-with-pnp/index.html
@@ -1,23 +1,23 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Next.js Storybook에 Yarn PnP 적용하기 | PrayinForRain.dev</title>
-<meta property="og:title" content="Next.js Storybook에 Yarn PnP 적용하기 | PrayinForRain.dev"><meta name=twitter:title content="Next.js Storybook에 Yarn PnP 적용하기 | PrayinForRain.dev"><meta itemprop=name content="Next.js Storybook에 Yarn PnP 적용하기 | PrayinForRain.dev"><meta name=application-name content="Next.js Storybook에 Yarn PnP 적용하기 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-04-27T15:32:50+0900><meta property="article:published_time" content=2023-04-27T15:32:50+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"Next.js Storybook에 Yarn PnP 적용하기","author":{"@type":"Person","name":""},"datePublished":"2023-04-27","description":"","wordCount":937,"mainEntityOfPage":"True","dateModified":"2023-04-27","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Next.js Storybook에 Yarn PnP 적용하기 | PrayinForRain.dev"><meta name=twitter:title content="Next.js Storybook에 Yarn PnP 적용하기 | PrayinForRain.dev"><meta itemprop=name content="Next.js Storybook에 Yarn PnP 적용하기 | PrayinForRain.dev"><meta name=application-name content="Next.js Storybook에 Yarn PnP 적용하기 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-04-27T15:32:50+0900><meta property="article:published_time" content=2023-04-27T15:32:50+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"Next.js Storybook에 Yarn PnP 적용하기","author":{"@type":"Person","name":""},"datePublished":"2023-04-27","description":"","wordCount":937,"mainEntityOfPage":"True","dateModified":"2023-04-27","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>Next.js Storybook에 Yarn PnP 적용하기</h1><div class=post-meta><time datetime=2023-04-27T15:32:50+09:00 itemprop=datePublished>2023. 4. 27.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#storybook을-쓰려고-했는데>Storybook을 쓰려고 했는데</a></li><li><a href=#그럼-쓰세요>그럼 쓰세요</a><ul><li><a href=#create-next-app으로-프로젝트-준비>create-next-app으로 프로젝트 준비</a></li><li><a href=#storybook-설치하기>Storybook 설치하기</a><ul><li><a href=#initialize>Initialize</a></li><li><a href=#webpack의-설정을-고치기>Webpack의 설정을 고치기</a></li><li><a href=#maints의-타입-오류>main.ts의 타입 오류</a></li></ul></li><li><a href=#하지만-node_modules가-생기잖아요>하지만 node_modules가 생기잖아요</a></li></ul></li><li><a href=#내가-이겼다-스토리북아>내가 이겼다 스토리북아</a></li><li><a href=#refs>Refs.</a></li></ul></nav></details><div class=page-content><h1 id=storybook을-쓰려고-했는데>Storybook을 쓰려고 했는데</h1><p>최근 Storybook을 사용할 일이 무척 많았다. 언젠가는 포스팅을 해야 할 CDS 프로젝트부터 <a href=https://prayinforrain.github.io/posts/2023/04/numble-talk/>넘블 챌린지</a>도 있었고&mldr; 처음엔 너무 낯설었지만 공통된 컴포넌트들을 미리 설계해 두고 재사용하는 것이 좀 더 깔끔한 설계가 되는 것 같아 매력을 느꼈다.</p><p>그런데 문제는 내 작업 환경에 있었다. 꽤 연식이 된 윈도우 데스크탑에 수십가지 개발 환경을 섞어 놓고, 요새는 게임에도 못 쓰는 처참한 성능의 HDD에 레포를 두고 쓰니 종속성 패키지 설치도 커피 한 잔 타와야 하는 시간이 걸리니 Yarn Berry의 사용이 반필수가 되어버렸다. 넘블 챌린지 때 Yarn Berry를 사용하고 싶었지만 애석하게도 수 많은 문제에 시달려 포기했는데, 여유가 생긴 지금 마음을 다잡고 다시 시도해 보기로 했다.</p><blockquote><p>Yarn Berry의 가장 큰 변화는 Plug n Play 방식의 패키지 관리 방식을 지원한다는 점이지, <code>Yarn Berry = PnP</code>인 것은 아니다. Yarn Berry도 nodeLinker 옵션을 <code>node-modules</code>로 지정한다면 node_modules 디렉토리를 사용할 수 있기 때문에, 아래부터는 <em>Berry</em> 대신 <em>PnP</em> 라는 표현을 사용하였다.</p></blockquote><h1 id=그럼-쓰세요>그럼 쓰세요</h1><h2 id=create-next-app으로-프로젝트-준비>create-next-app으로 프로젝트 준비</h2><p>우선 Next.js 앱을 생성하고, Yarn PnP로 패키지 매니저를 변경해 보자.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-zsh data-lang=zsh><span class=line><span class=cl>yarn create next-app
-</span></span><span class=line><span class=cl>yarn <span class=nb>set</span> version berry <span class=c1># yarn pnp로 패키지 매니저 변경</span>
-</span></span></code></pre></div><p>PnP를 사용하기 위해 yarn의 설정을 변경해 주어야 한다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-zsh data-lang=zsh><span class=line><span class=cl><span class=c1># .yarnrc.yml</span>
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>Next.js Storybook에 Yarn PnP 적용하기</h1><div class=post-meta><time datetime=2023-04-27T15:32:50+09:00 itemprop=datePublished>2023. 4. 27.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#storybook을-쓰려고-했는데>Storybook을 쓰려고 했는데</a></li><li><a href=#그럼-쓰세요>그럼 쓰세요</a><ul><li><a href=#create-next-app으로-프로젝트-준비>create-next-app으로 프로젝트 준비</a></li><li><a href=#storybook-설치하기>Storybook 설치하기</a></li><li><a href=#하지만-node_modules가-생기잖아요>하지만 node_modules가 생기잖아요</a></li></ul></li><li><a href=#내가-이겼다-스토리북아>내가 이겼다 스토리북아</a></li><li><a href=#refs>Refs.</a></li></ul></nav></details><div class=page-content><h2 id=storybook을-쓰려고-했는데>Storybook을 쓰려고 했는데</h2><p>최근 Storybook을 사용할 일이 무척 많았다. 언젠가는 포스팅을 해야 할 CDS 프로젝트부터 <a href=https://prayinforrain.github.io/posts/2023/04/numble-talk/>넘블 챌린지</a>도 있었고&mldr; 처음엔 너무 낯설었지만 공통된 컴포넌트들을 미리 설계해 두고 재사용하는 것이 좀 더 깔끔한 설계가 되는 것 같아 매력을 느꼈다.</p><p>그런데 문제는 내 작업 환경에 있었다. 꽤 연식이 된 윈도우 데스크탑에 수십가지 개발 환경을 섞어 놓고, 요새는 게임에도 못 쓰는 처참한 성능의 HDD에 레포를 두고 쓰니 종속성 패키지 설치도 커피 한 잔 타와야 하는 시간이 걸리니 Yarn Berry의 사용이 반필수가 되어버렸다. 넘블 챌린지 때 Yarn Berry를 사용하고 싶었지만 애석하게도 수 많은 문제에 시달려 포기했는데, 여유가 생긴 지금 마음을 다잡고 다시 시도해 보기로 했다.</p><blockquote><p>Yarn Berry의 가장 큰 변화는 Plug n Play 방식의 패키지 관리 방식을 지원한다는 점이지, <code>Yarn Berry = PnP</code>인 것은 아니다. Yarn Berry도 nodeLinker 옵션을 <code>node-modules</code>로 지정한다면 node<em>modules 디렉토리를 사용할 수 있기 때문에, 아래부터는 _Berry</em> 대신 <em>PnP</em> 라는 표현을 사용하였다.</p></blockquote><h2 id=그럼-쓰세요>그럼 쓰세요</h2><h3 id=create-next-app으로-프로젝트-준비>create-next-app으로 프로젝트 준비</h3><p>우선 Next.js 앱을 생성하고, Yarn PnP로 패키지 매니저를 변경해 보자.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-zsh data-lang=zsh><span class=line><span class=cl>yarn create next-app
+</span></span><span class=line><span class=cl>yarn <span class=nb>set</span> version berry <span class=c1>## yarn pnp로 패키지 매니저 변경</span>
+</span></span></code></pre></div><p>PnP를 사용하기 위해 yarn의 설정을 변경해 주어야 한다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-zsh data-lang=zsh><span class=line><span class=cl><span class=c1>## .yarnrc.yml</span>
 </span></span><span class=line><span class=cl>nodeLinker: pnp
 </span></span><span class=line><span class=cl>
-</span></span><span class=line><span class=cl><span class=c1># terminal</span>
-</span></span><span class=line><span class=cl>yarn plugin import typescript <span class=c1># @types 패키지를 자동으로 설치해 주는 플러그인</span>
-</span></span><span class=line><span class=cl>yarn <span class=c1># 자동으로 node_modules가 삭제되고 패키지가 다시 설치된다.</span>
-</span></span><span class=line><span class=cl>yarn dlx @yarnpkg/sdks vscode <span class=c1># VSCode에서 Repository의 Typescript를 사용하기 위한 명령어</span>
-</span></span></code></pre></div><p>기본적인 환경 설정이 완료되었다.</p><h2 id=storybook-설치하기>Storybook 설치하기</h2><h3 id=initialize>Initialize</h3><p><a href=https://storybook.js.org/docs/react/migration-guide#automatic-upgrade>Storybook 공식 문서</a>를 따라서 설치해 보겠다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-zsh data-lang=zsh><span class=line><span class=cl>yarn dlx storybook@latest init
-</span></span></code></pre></div><p>설치는 제대로 되었지만, <code>yarn storybook</code>을 실행해 보면 오류가 난다. 이는 Yarn Berry의 엄격 모드(Strict mode)에서는 명시적으로 나열되지 않은 종속성을 자동으로 설치하지 않기 때문이다.<br>무슨 말일까? 대충 내 프로젝트에서 A 패키지를 설치하면, A 패키지에서 사용하는 B 패키지가 함께 설치되지 않을 수 있다는 뜻이다. 정확히 어떤 기준인지는 파악하지 못했지만 이 문제로 인해 babel을 포함한 일부 패키지들이 설치되지 않는다. 아마 React 앱의 경우 대부분 babel + webpack을 사용하고 있을테고 Storybook은 여기 달려있는 babel을 같이 사용하려고 하는 게 아닐까..(추상적인 생각)</p><p>이를 해결하기 위해서는 무한 리트를 하면서 요구하는 종속성을 하나씩 설치하거나, <code>.yarnrc.yml</code> 파일에 아래와 같은 설정을 추가하여 엄격 모드를 해제하여 해결할 수 있다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-zsh data-lang=zsh><span class=line><span class=cl><span class=c1># .yarnrc.yml</span>
+</span></span><span class=line><span class=cl><span class=c1>## terminal</span>
+</span></span><span class=line><span class=cl>yarn plugin import typescript <span class=c1>## @types 패키지를 자동으로 설치해 주는 플러그인</span>
+</span></span><span class=line><span class=cl>yarn <span class=c1>## 자동으로 node_modules가 삭제되고 패키지가 다시 설치된다.</span>
+</span></span><span class=line><span class=cl>yarn dlx @yarnpkg/sdks vscode <span class=c1>## VSCode에서 Repository의 Typescript를 사용하기 위한 명령어</span>
+</span></span></code></pre></div><p>기본적인 환경 설정이 완료되었다.</p><h3 id=storybook-설치하기>Storybook 설치하기</h3><h4 id=initialize>Initialize</h4><p><a href=https://storybook.js.org/docs/react/migration-guide#automatic-upgrade>Storybook 공식 문서</a>를 따라서 설치해 보겠다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-zsh data-lang=zsh><span class=line><span class=cl>yarn dlx storybook@latest init
+</span></span></code></pre></div><p>설치는 제대로 되었지만, <code>yarn storybook</code>을 실행해 보면 오류가 난다. 이는 Yarn Berry의 엄격 모드(Strict mode)에서는 명시적으로 나열되지 않은 종속성을 자동으로 설치하지 않기 때문이다.<br>무슨 말일까? 대충 내 프로젝트에서 A 패키지를 설치하면, A 패키지에서 사용하는 B 패키지가 함께 설치되지 않을 수 있다는 뜻이다. 정확히 어떤 기준인지는 파악하지 못했지만 이 문제로 인해 babel을 포함한 일부 패키지들이 설치되지 않는다. 아마 React 앱의 경우 대부분 babel + webpack을 사용하고 있을테고 Storybook은 여기 달려있는 babel을 같이 사용하려고 하는 게 아닐까..(추상적인 생각)</p><p>이를 해결하기 위해서는 무한 리트를 하면서 요구하는 종속성을 하나씩 설치하거나, <code>.yarnrc.yml</code> 파일에 아래와 같은 설정을 추가하여 엄격 모드를 해제하여 해결할 수 있다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-zsh data-lang=zsh><span class=line><span class=cl><span class=c1>## .yarnrc.yml</span>
 </span></span><span class=line><span class=cl>pnpMode: loose
 </span></span><span class=line><span class=cl>
-</span></span><span class=line><span class=cl><span class=c1># 다시 종속성 패키지 설치</span>
+</span></span><span class=line><span class=cl><span class=c1>## 다시 종속성 패키지 설치</span>
 </span></span><span class=line><span class=cl>yarn
 </span></span></code></pre></div><p>그리고 어째서인지 느슨한 모드로 재설치를 해도 오류를 일으키는 <code>styled-jsx</code>와 <code>@babel/core</code>를 설치해 주겠다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-zsh data-lang=zsh><span class=line><span class=cl>yarn add -D @babel/core styled-jsx
-</span></span></code></pre></div><h3 id=webpack의-설정을-고치기>Webpack의 설정을 고치기</h3><p>다시 실행해 보면 스토리북 화면이 나타난다. 하지만 무언가의 오류가 표시되며 스토리북 dev server가 꺼져 버린다.</p><p><img src=/images/posts/2023/04/nextjs-storybook-with-pnp/02.png alt="css loader error"></p><p><code>@storybook/nextjs</code>의 번들러인 webpack에서 css-loader와 기타등등 플러그인을 불러오면서 오류가 생기는 모양이다. 특이하게도 이 오류는 PnP 환경에서만 발생하는 오류인데, 대충 이 빌더에서 <a href=https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/src/css/webpack.ts#L71>webpack의 css-loader 관련 설정을 만드는 부분</a>을 살펴보면 이런 추측을 할 수 있다.</p><ol><li><code>configureCss</code> 함수에서 <code>options.url</code>을 포함한 기타등등을 담은 설정 객체를 만든다.</li><li>이 과정에서 <code>getImportAndUrlCssLoaderOptions</code>함수를 거쳐 <code>getUrlResolver</code> 함수가 호출된다.</li><li><code>getUrlResolver</code>는 NextConfig 객체의 experimental property를 참조한다. experimental은 아래와 같은 타입을 갖는다.</li></ol><div class=highlight><pre tabindex=0 class=chroma><code class=language-ts data-lang=ts><span class=line><span class=cl><span class=kr>interface</span> <span class=nx>ExperimentalConfig</span> <span class=p>{</span>
+</span></span></code></pre></div><h4 id=webpack의-설정을-고치기>Webpack의 설정을 고치기</h4><p>다시 실행해 보면 스토리북 화면이 나타난다. 하지만 무언가의 오류가 표시되며 스토리북 dev server가 꺼져 버린다.</p><p><img src=/images/posts/2023/04/nextjs-storybook-with-pnp/02.png alt="css loader error"></p><p><code>@storybook/nextjs</code>의 번들러인 webpack에서 css-loader와 기타등등 플러그인을 불러오면서 오류가 생기는 모양이다. 특이하게도 이 오류는 PnP 환경에서만 발생하는 오류인데, 대충 이 빌더에서 <a href=https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/src/css/webpack.ts#L71>webpack의 css-loader 관련 설정을 만드는 부분</a>을 살펴보면 이런 추측을 할 수 있다.</p><ol><li><code>configureCss</code> 함수에서 <code>options.url</code>을 포함한 기타등등을 담은 설정 객체를 만든다.</li><li>이 과정에서 <code>getImportAndUrlCssLoaderOptions</code>함수를 거쳐 <code>getUrlResolver</code> 함수가 호출된다.</li><li><code>getUrlResolver</code>는 NextConfig 객체의 experimental property를 참조한다. experimental은 아래와 같은 타입을 갖는다.</li></ol><div class=highlight><pre tabindex=0 class=chroma><code class=language-ts data-lang=ts><span class=line><span class=cl><span class=kr>interface</span> <span class=nx>ExperimentalConfig</span> <span class=p>{</span>
 </span></span><span class=line><span class=cl>  <span class=c1>// ...
 </span></span></span><span class=line><span class=cl><span class=c1></span>  <span class=nx>urlImports?</span>: <span class=kt>NonNullable</span><span class=p>&lt;</span><span class=nt>webpack.Configuration</span><span class=err>[&#34;</span><span class=na>experiments</span><span class=err>&#34;]</span><span class=p>&gt;[</span><span class=s2>&#34;buildHttp&#34;</span><span class=p>];</span>
 </span></span><span class=line><span class=cl>  <span class=c1>// ...
@@ -32,17 +32,17 @@
 </span></span></span><span class=line><span class=cl><span class=c1></span>  <span class=s2>&#34;@storybook/preset-scss&#34;</span><span class=p>,</span>
 </span></span><span class=line><span class=cl><span class=p>];</span>
 </span></span><span class=line><span class=cl><span class=c1>// ...
-</span></span></span></code></pre></div><p><img src=/images/posts/2023/04/nextjs-storybook-with-pnp/03.png alt="storybook launched"><br>이제 정상적으로 스토리북이 실행될 것이다.</p><h3 id=maints의-타입-오류>main.ts의 타입 오류</h3><p><img src=/images/posts/2023/04/nextjs-storybook-with-pnp/01.png alt="framework name type error"></p><p>처음 init 했을 때부터 계속 거슬렸는데, <code>@storybook/nextjs</code> 템플릿이 <code>.storybook/main.ts</code> 파일을 생성할 때 프레임워크명을 절대경로를 포함해서 생성하면서 타입 오류가 나는 문제가 있다. 모순적이게도 <code>@storybook/nextjs</code>의 <code>StorybookConfig</code> 객체 타입은 이 부분에 무조건 <code>@storybook/nextjs</code>라는 문자열만을 허용하고 있다. 물론 그냥 실행이 되긴 하는데, 계속 붉은 줄이 그어져 있으면 몹시 곤란하니 이것도 바꿔 주겠다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-typescript data-lang=typescript><span class=line><span class=cl><span class=c1>// main.ts
+</span></span></span></code></pre></div><p><img src=/images/posts/2023/04/nextjs-storybook-with-pnp/03.png alt="storybook launched"><br>이제 정상적으로 스토리북이 실행될 것이다.</p><h4 id=maints의-타입-오류>main.ts의 타입 오류</h4><p><img src=/images/posts/2023/04/nextjs-storybook-with-pnp/01.png alt="framework name type error"></p><p>처음 init 했을 때부터 계속 거슬렸는데, <code>@storybook/nextjs</code> 템플릿이 <code>.storybook/main.ts</code> 파일을 생성할 때 프레임워크명을 절대경로를 포함해서 생성하면서 타입 오류가 나는 문제가 있다. 모순적이게도 <code>@storybook/nextjs</code>의 <code>StorybookConfig</code> 객체 타입은 이 부분에 무조건 <code>@storybook/nextjs</code>라는 문자열만을 허용하고 있다. 물론 그냥 실행이 되긴 하는데, 계속 붉은 줄이 그어져 있으면 몹시 곤란하니 이것도 바꿔 주겠다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-typescript data-lang=typescript><span class=line><span class=cl><span class=c1>// main.ts
 </span></span></span><span class=line><span class=cl><span class=c1>// ...
 </span></span></span><span class=line><span class=cl><span class=c1></span>  <span class=nx>framework</span><span class=o>:</span> <span class=p>{</span>
 </span></span><span class=line><span class=cl>    <span class=nx>name</span><span class=o>:</span> <span class=s2>&#34;@storybook/nextjs&#34;</span><span class=p>,</span>
 </span></span><span class=line><span class=cl>    <span class=nx>options</span><span class=o>:</span> <span class=p>{},</span>
 </span></span><span class=line><span class=cl>  <span class=p>},</span>
 </span></span><span class=line><span class=cl><span class=c1>// ...
-</span></span></span></code></pre></div><h2 id=하지만-node_modules가-생기잖아요>하지만 node_modules가 생기잖아요</h2><p><img src=/images/posts/2023/04/nextjs-storybook-with-pnp/04.png alt="node_modules folder"></p><p>storybook 뿐 아니라 여러 패키지에서 발생하는 일인데, PnP모드에서도 스토리북을 실행하면 node_modules 디렉토리가 생성되는 것을 볼 수 있다. 이 안에는 대충&mldr; 스토리북 dev 서버 실행에 필요한 임시 파일들이 저장되어 있다. 나를 포함해서 많은 Yarn PnP 사용자들이 이 현상에 대해 불편함(?)을 겪고 있는데, Storybook의 기여자가 <a href=https://github.com/storybookjs/storybook/issues/11113#issuecomment-642851848>이슈 댓글</a>에서 다음과 같은 근거를 이야기해 주었다.</p><ul><li><code>node_modules/.cache/package-name</code>에 임시 파일을 저장하는 것은 여러 라이브러리에서 사용하고 있는 패턴이다.</li><li><code>node_modules</code>는 모든 Javascript/Typescript 프로젝트에서 <code>.gitignore</code>로 무시되고 있다.</li><li><code>node_modules</code>에는 보통 언제든 <em>지울 수 있는</em> 파일들이 들어가 있고, 문제 발생 시 이를 해결하기 위해 자주 삭제된다.</li><li>현재 시점에서 NPM, Yarn(PnP 사용 여부에 관계 없이) 모두에서 제대로 작동하고 있다.</li></ul><p>따라서 이 것이 문제가 되는 <em>버그</em> 는 아니고, <strong>기대된 동작(Expected Behavior)</strong> 으로 생각할 수 있다는 듯 하다. 댓글에 보면 Yarn 레포지토리 이슈에 이 캐시 파일들을 제거하기 위한 내용이 올라와 있는데, 3년이 지난 지금까지 참조 또는 갱신되지 않는 것으로 보아 급한 문제가 아니어서 잠정 보류된 모양이다. 좀 해 주면 좋을텐데..쩝..</p><h1 id=내가-이겼다-스토리북아>내가 이겼다 스토리북아</h1><p>앞서 말한 내 상황 때문에 나는 주변에 꽤나 Yarn berry 처돌이(?)로 퍼져 있는데 정작 프로젝트 할 때에는 한정된 시간 안에서 더 이상 지체할 수가 없어 node_modules를 사용해야 하는 것이 너무 아쉬웠다. 이미 프로젝트가 모두 정리된 후지만 그래도 지금에 와서나마 문제를 해결할 수 있어서 그래도 다행이다.</p><p>하나 속상한 에피소드가 있는데.. <a href=https://storybook.js.org/recipes/next>내가 처음에 봤던 instruction</a>에서 <code>npx</code> 커맨드만을 이야기하고 있고, 나는 <code>npx</code>가 npm과 yarn 중 상황에 맞는 패키지 매니저를 알아서 선택해 준다고 알고 있었기 때문에 의심 없이 사용했다가 에러를 하나 더 만나 조금 더 고생했다.<br>그러다가 바로 얼마 전에 <a href=https://github.com/storybookjs/storybook/issues/21895>공식 문서에서 누락된 부분이 수정된 PR</a>을 발견했는데.. 스토리북 초기화는 <code>yarn dlx storybook</code> 명령어를 사용해야 하는 모양이다. npx로 해도 해결 과정에 큰 차이는 없지만 아이고 속터져</p><h1 id=refs>Refs.</h1><ul><li><a href=https://woong-jae.com/projects/220711-pnp-dependency-error>Yarn PnP 의존성 에러 해결기 | 햣 블로그</a></li><li><a href=https://storybook.js.org/recipes/next>Integrate Next.js and Storybook | Storybook</a></li><li><a href=https://storybook.js.org/docs/react/addons/install-addons#using-preset-addons>Install Addons | Storybook</a></li><li><a href=https://storybook.js.org/docs/react/builders/webpack>Webpack | Storybook</a></li><li><a href=https://github.com/storybookjs/storybook/issues/21895>[Bug]: <code>storybook init</code> (v7) fails with Yarn PnP · Issue #21895 · storybookjs/storybook · GitHub</a></li><li><a href=https://github.com/storybookjs/storybook/issues/11113>&lsquo;yarn start-storybook&rsquo; creates node_modules/.cache in Yarn 2 PnP project · Issue #11113 · storybookjs/storybook · GitHub</a></li></ul></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+</span></span></span></code></pre></div><h3 id=하지만-node_modules가-생기잖아요>하지만 node_modules가 생기잖아요</h3><p><img src=/images/posts/2023/04/nextjs-storybook-with-pnp/04.png alt="node_modules folder"></p><p>storybook 뿐 아니라 여러 패키지에서 발생하는 일인데, PnP모드에서도 스토리북을 실행하면 node_modules 디렉토리가 생성되는 것을 볼 수 있다. 이 안에는 대충&mldr; 스토리북 dev 서버 실행에 필요한 임시 파일들이 저장되어 있다. 나를 포함해서 많은 Yarn PnP 사용자들이 이 현상에 대해 불편함(?)을 겪고 있는데, Storybook의 기여자가 <a href=https://github.com/storybookjs/storybook/issues/11113#issuecomment-642851848>이슈 댓글</a>에서 다음과 같은 근거를 이야기해 주었다.</p><ul><li><code>node_modules/.cache/package-name</code>에 임시 파일을 저장하는 것은 여러 라이브러리에서 사용하고 있는 패턴이다.</li><li><code>node_modules</code>는 모든 Javascript/Typescript 프로젝트에서 <code>.gitignore</code>로 무시되고 있다.</li><li><code>node_modules</code>에는 보통 언제든 <em>지울 수 있는</em> 파일들이 들어가 있고, 문제 발생 시 이를 해결하기 위해 자주 삭제된다.</li><li>현재 시점에서 NPM, Yarn(PnP 사용 여부에 관계 없이) 모두에서 제대로 작동하고 있다.</li></ul><p>따라서 이 것이 문제가 되는 <em>버그</em> 는 아니고, <strong>기대된 동작(Expected Behavior)</strong> 으로 생각할 수 있다는 듯 하다. 댓글에 보면 Yarn 레포지토리 이슈에 이 캐시 파일들을 제거하기 위한 내용이 올라와 있는데, 3년이 지난 지금까지 참조 또는 갱신되지 않는 것으로 보아 급한 문제가 아니어서 잠정 보류된 모양이다. 좀 해 주면 좋을텐데..쩝..</p><h2 id=내가-이겼다-스토리북아>내가 이겼다 스토리북아</h2><p>앞서 말한 내 상황 때문에 나는 주변에 꽤나 Yarn berry 처돌이(?)로 퍼져 있는데 정작 프로젝트 할 때에는 한정된 시간 안에서 더 이상 지체할 수가 없어 node_modules를 사용해야 하는 것이 너무 아쉬웠다. 이미 프로젝트가 모두 정리된 후지만 그래도 지금에 와서나마 문제를 해결할 수 있어서 그래도 다행이다.</p><p>하나 속상한 에피소드가 있는데.. <a href=https://storybook.js.org/recipes/next>내가 처음에 봤던 instruction</a>에서 <code>npx</code> 커맨드만을 이야기하고 있고, 나는 <code>npx</code>가 npm과 yarn 중 상황에 맞는 패키지 매니저를 알아서 선택해 준다고 알고 있었기 때문에 의심 없이 사용했다가 에러를 하나 더 만나 조금 더 고생했다.<br>그러다가 바로 얼마 전에 <a href=https://github.com/storybookjs/storybook/issues/21895>공식 문서에서 누락된 부분이 수정된 PR</a>을 발견했는데.. 스토리북 초기화는 <code>yarn dlx storybook</code> 명령어를 사용해야 하는 모양이다. npx로 해도 해결 과정에 큰 차이는 없지만 아이고 속터져</p><h2 id=refs>Refs.</h2><ul><li><a href=https://woong-jae.com/projects/220711-pnp-dependency-error>Yarn PnP 의존성 에러 해결기 | 햣 블로그</a></li><li><a href=https://storybook.js.org/recipes/next>Integrate Next.js and Storybook | Storybook</a></li><li><a href=https://storybook.js.org/docs/react/addons/install-addons#using-preset-addons>Install Addons | Storybook</a></li><li><a href=https://storybook.js.org/docs/react/builders/webpack>Webpack | Storybook</a></li><li><a href=https://github.com/storybookjs/storybook/issues/21895>[Bug]: <code>storybook init</code> (v7) fails with Yarn PnP · Issue #21895 · storybookjs/storybook · GitHub</a></li><li><a href=https://github.com/storybookjs/storybook/issues/11113>&lsquo;yarn start-storybook&rsquo; creates node_modules/.cache in Yarn 2 PnP project · Issue #11113 · storybookjs/storybook · GitHub</a></li></ul></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/2023/04/numble-talk/index.html b/posts/2023/04/numble-talk/index.html
index bed8daa..fc49262 100644
--- a/posts/2023/04/numble-talk/index.html
+++ b/posts/2023/04/numble-talk/index.html
@@ -1,14 +1,14 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고 | PrayinForRain.dev</title>
-<meta property="og:title" content="넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고 | PrayinForRain.dev"><meta name=twitter:title content="넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고 | PrayinForRain.dev"><meta itemprop=name content="넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고 | PrayinForRain.dev"><meta name=application-name content="넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/04/numble-talk/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-04-23T04:05:58+0900><meta property="article:published_time" content=2023-04-23T04:05:58+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고","author":{"@type":"Person","name":""},"datePublished":"2023-04-23","description":"","wordCount":749,"mainEntityOfPage":"True","dateModified":"2023-04-23","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/04/numble-talk/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고 | PrayinForRain.dev"><meta name=twitter:title content="넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고 | PrayinForRain.dev"><meta itemprop=name content="넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고 | PrayinForRain.dev"><meta name=application-name content="넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/04/numble-talk/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-04-23T04:05:58+0900><meta property="article:published_time" content=2023-04-23T04:05:58+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고","author":{"@type":"Person","name":""},"datePublished":"2023-04-23","description":"","wordCount":749,"mainEntityOfPage":"True","dateModified":"2023-04-23","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/04/numble-talk/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고</h1><div class=post-meta><time datetime=2023-04-23T04:05:58+09:00 itemprop=datePublished>2023. 4. 23.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#시작하게-된-계기>시작하게 된 계기</a></li><li><a href=#맛을-보자>맛을 보자</a><ul><li><a href=#스토리북을-쓰자>스토리북을 쓰자</a></li><li><a href=#openai와-친해지자>OpenAI와 친해지자</a></li><li><a href=#좋은-팀>좋은 팀!</a></li></ul></li><li><a href=#마치며>마치며</a></li></ul></nav></details><div class=page-content><h1 id=시작하게-된-계기>시작하게 된 계기</h1><p><img src=/images/posts/2023/04/numble-talk/01.png alt="ui design"></p><p>3월에 정말 많은 일들이 있었다. 아직 뭔가 성과라고 내세울 결과물이 없긴 하지만 그래도 무의미하진 않았다(?)고 주장할 수 있는 그런 시간이었다. 점점 일이 정리가 되고 여유가 생기면서 번아웃이 온 사람처럼 푹 늘어지는 느낌이 있었는데, 그 와중에 누가 넘블을 소개해 주셨다.</p><p>대충.. 프로젝트 주제와 요구사항을 주고 구현을 해 보는? 프로세스의 활동으로 이해했다. 기간이 짧아 확 몰입하기 좋겠다는 생각을 해서 한 번 맛만 보기로 했다. OpenAI API를 활용해 보는 프로젝트라는 점이 관심을 끌기도 했다. 요새 챗쌤한테 이런저런 도움도 받았고 관련 아티클도 많이 보이고..</p><h1 id=맛을-보자>맛을 보자</h1><h2 id=스토리북을-쓰자>스토리북을 쓰자</h2><p>핵심 기능 외에도 storybook의 작성이 요구되었다. 다행히도 storybook은 지금 하고 있는 프로젝트에서 사용 경험이 있어서 비교적 가벼운 마음으로 접근할 수 있겠다 생각했는데.. storybook 설치부터 큰 문제가 있었다. 우선 프로젝트에서 요구하는 것이 Next.js였고, 내 개인적인 선호로 Yarn berry(PnP)를 사용하여 구성하려고 했었는데, Next.js 프로젝트에서 storybook을 사용하려면 특정 builder add-on을 사용해야 했고, 대충 이 근처 지점에서 오류가 발생해서 실행이 불가능했다. 내가 대충 짐작한 요인은 이랬다.</p><ul><li>최근에 업데이트된 storybook 7과 storybook/nextjs 빌더의 호환 문제</li><li>storybook 7과 yarn PnP의 호환 문제</li><li>Next.js 13에서 사용한다는 turbopack과의 호환 문제</li><li>내 컴퓨터 문제(이전에도 storybook 관련해서 내 컴퓨터 문제가 있었다)</li></ul><p>꽤 많은 레퍼런스를 찾아다니며 해결을 시도했지만 결국 Yarn PnP를 포기하는 것으로 해결되었다. PnP를 쓰지 않으면 지금 데스크탑이 꽤 느린 상태여서 조금 속상한 부분이 있었다. 이 내용은 나중에 정리가 된다면 다른 글로 정리하고 싶다.</p><aside><p><a href=https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/>Next.js Storybook에 Yarn PnP 적용하기</a></p></aside><h2 id=openai와-친해지자>OpenAI와 친해지자</h2><p><img src=/images/posts/2023/04/numble-talk/02.png alt="결과물 사진"></p><p>챗썜을 제대로 모시기 위해서는 <a href=https://platform.openai.com/docs/api-reference>API 문서</a>를 읽어야 했다. 내가 직접 맨땅에서 문서를 정독하며 무언가 시작해 본 경험이 있던가? 아무튼 가뜩이나 미지의 영역인데 영어로 써있다는 점이 큰 걸림돌이 되었다.</p><p>다행히 내가 읽어야 하는 부분이 명확했고, 먼저 문서를 읽어 보신 선발대(?) 팀원 분들의 후기를 통해 꽤 괜찮은 지점에서 시작할 수 있었다. 걱정했던 것보다 금방 ChatGPT를 쓰는 느낌처럼 대화를 주고 받을 수 있었다.<br>문제는 단순히 1:1 대화만 하는 챗쌤을 어떻게 1:N, 그리고 ai끼리도 대화를 할 수 있도록 구현을 할까 하는 문제였다. 이런저런 고민을 하다가 <a href=https://community.openai.com/t/managing-messages-array-for-multi-user-chat-with-gpt-3-5-turbo/85976>OpenAI 커뮤니티 글</a>에서 힌트를 얻었다. 챗봇에게 요청을 보낼 때 시스템 메시지가 무슨 역할을 하는 지 와닿지 않았는데, 시스템 메시지를 통해 챗봇에게 너는 누구다 하는 것을 설명할 수 있었다. 이 메시지를 통해 내가 원하는 답을 얻어내면 될 것이라 생각했다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-fallback data-lang=fallback><span class=line><span class=cl>You are chatbots in a chat room where one user and ${maxNumber} chatbots converse. Each message is in the format of number: content, where 0 represents the user&#39;s message and 1 to n represents the messages of the nth chatbot. You are responsible for assuming the role of all 1 to ${maxNumber} chatbots and participating actively in the conversation. Each chatbot can speak all at once, only a few at a time, or one chatbot can speak multiple times. Please format your response in number: content format, with each message separated by two line breaks.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고</h1><div class=post-meta><time datetime=2023-04-23T04:05:58+09:00 itemprop=datePublished>2023. 4. 23.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#시작하게-된-계기>시작하게 된 계기</a></li><li><a href=#맛을-보자>맛을 보자</a><ul><li><a href=#스토리북을-쓰자>스토리북을 쓰자</a></li><li><a href=#openai와-친해지자>OpenAI와 친해지자</a></li><li><a href=#좋은-팀>좋은 팀!</a></li></ul></li><li><a href=#마치며>마치며</a></li></ul></nav></details><div class=page-content><h2 id=시작하게-된-계기>시작하게 된 계기</h2><p><img src=/images/posts/2023/04/numble-talk/01.png alt="ui design"></p><p>3월에 정말 많은 일들이 있었다. 아직 뭔가 성과라고 내세울 결과물이 없긴 하지만 그래도 무의미하진 않았다(?)고 주장할 수 있는 그런 시간이었다. 점점 일이 정리가 되고 여유가 생기면서 번아웃이 온 사람처럼 푹 늘어지는 느낌이 있었는데, 그 와중에 누가 넘블을 소개해 주셨다.</p><p>대충.. 프로젝트 주제와 요구사항을 주고 구현을 해 보는? 프로세스의 활동으로 이해했다. 기간이 짧아 확 몰입하기 좋겠다는 생각을 해서 한 번 맛만 보기로 했다. OpenAI API를 활용해 보는 프로젝트라는 점이 관심을 끌기도 했다. 요새 챗쌤한테 이런저런 도움도 받았고 관련 아티클도 많이 보이고..</p><h2 id=맛을-보자>맛을 보자</h2><h3 id=스토리북을-쓰자>스토리북을 쓰자</h3><p>핵심 기능 외에도 storybook의 작성이 요구되었다. 다행히도 storybook은 지금 하고 있는 프로젝트에서 사용 경험이 있어서 비교적 가벼운 마음으로 접근할 수 있겠다 생각했는데.. storybook 설치부터 큰 문제가 있었다. 우선 프로젝트에서 요구하는 것이 Next.js였고, 내 개인적인 선호로 Yarn berry(PnP)를 사용하여 구성하려고 했었는데, Next.js 프로젝트에서 storybook을 사용하려면 특정 builder add-on을 사용해야 했고, 대충 이 근처 지점에서 오류가 발생해서 실행이 불가능했다. 내가 대충 짐작한 요인은 이랬다.</p><ul><li>최근에 업데이트된 storybook 7과 storybook/nextjs 빌더의 호환 문제</li><li>storybook 7과 yarn PnP의 호환 문제</li><li>Next.js 13에서 사용한다는 turbopack과의 호환 문제</li><li>내 컴퓨터 문제(이전에도 storybook 관련해서 내 컴퓨터 문제가 있었다)</li></ul><p>꽤 많은 레퍼런스를 찾아다니며 해결을 시도했지만 결국 Yarn PnP를 포기하는 것으로 해결되었다. PnP를 쓰지 않으면 지금 데스크탑이 꽤 느린 상태여서 조금 속상한 부분이 있었다. 이 내용은 나중에 정리가 된다면 다른 글로 정리하고 싶다.</p><aside><p><a href=https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/>Next.js Storybook에 Yarn PnP 적용하기</a></p></aside><h3 id=openai와-친해지자>OpenAI와 친해지자</h3><p><img src=/images/posts/2023/04/numble-talk/02.png alt="결과물 사진"></p><p>챗썜을 제대로 모시기 위해서는 <a href=https://platform.openai.com/docs/api-reference>API 문서</a>를 읽어야 했다. 내가 직접 맨땅에서 문서를 정독하며 무언가 시작해 본 경험이 있던가? 아무튼 가뜩이나 미지의 영역인데 영어로 써있다는 점이 큰 걸림돌이 되었다.</p><p>다행히 내가 읽어야 하는 부분이 명확했고, 먼저 문서를 읽어 보신 선발대(?) 팀원 분들의 후기를 통해 꽤 괜찮은 지점에서 시작할 수 있었다. 걱정했던 것보다 금방 ChatGPT를 쓰는 느낌처럼 대화를 주고 받을 수 있었다.<br>문제는 단순히 1:1 대화만 하는 챗쌤을 어떻게 1:N, 그리고 ai끼리도 대화를 할 수 있도록 구현을 할까 하는 문제였다. 이런저런 고민을 하다가 <a href=https://community.openai.com/t/managing-messages-array-for-multi-user-chat-with-gpt-3-5-turbo/85976>OpenAI 커뮤니티 글</a>에서 힌트를 얻었다. 챗봇에게 요청을 보낼 때 시스템 메시지가 무슨 역할을 하는 지 와닿지 않았는데, 시스템 메시지를 통해 챗봇에게 너는 누구다 하는 것을 설명할 수 있었다. 이 메시지를 통해 내가 원하는 답을 얻어내면 될 것이라 생각했다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-fallback data-lang=fallback><span class=line><span class=cl>You are chatbots in a chat room where one user and ${maxNumber} chatbots converse. Each message is in the format of number: content, where 0 represents the user&#39;s message and 1 to n represents the messages of the nth chatbot. You are responsible for assuming the role of all 1 to ${maxNumber} chatbots and participating actively in the conversation. Each chatbot can speak all at once, only a few at a time, or one chatbot can speak multiple times. Please format your response in number: content format, with each message separated by two line breaks.
 </span></span><span class=line><span class=cl>
 </span></span><span class=line><span class=cl>// 한글
 </span></span><span class=line><span class=cl>당신은 유저 한 명과 ${maxNumber}개의 챗봇이 대화하는 채팅방의 챗봇입니다. 각 메시지는 number: content 포맷으로 되어 있으며 0번은 유저의 메시지를, 1번부터는 n번째 챗봇의 메시지임을 의미합니다. 당신은 1 ~ ${maxNumber}번 챗봇의 역할을 모두 맡아 대화합니다. 모든 챗봇이 말을 하거나, 일부만 할 수도 있으며, 한 챗봇이 여러 마디를 할 수도 있습니다. 응답 역시 number: content 포맷으로, 각 메시지는 두 번의 줄바꿈으로 구분하여 작성해 주세요.
-</span></span></code></pre></div><p>한 번의 요청에서 주고받는 토큰 <em>(대충 메시지의 길이)</em> 수의 제한이 있어서, 지나치게 길지 않으면서도 내가 원하는 결과를 내도록 메시지를 넣었다. 학부생 때 <a href=https://www.gymlibrary.dev/>OpenAI Gym</a>을 해 본 경험이 조금 오버랩되면서 느낌이 묘했다. 얘야 이건 이렇게 답해야 한단다..<br>문제는 챗쌤이 기분에 따라 대답을 잘 해주기도, 기본적인 응답 포맷도 지키지 않는 일도 있어서 이런 예외를 발생시키지 않으려면 어떻게 해야 할지 고민을 많이 했다. 내가 시스템 메시지로 요구하는 내용 자체가 중의적으로 해석될 소지가 있는 것이 문제라고 생각해서 이것저것 바꾸면서 조절했다. 결과적으로는 항상 좋은 결과를 보여주진 않지만 적어도 메시지 포맷은 지켜서 이야기하도록 만드는데는 성공했다.</p><p>그리고 API 요청을 보낼 때.. 요구사항에서는 ai끼리도 계속 채팅을 하는 것처럼 구현하라고 되어 있었는데, 지속적으로 API 요청을 보내서 의미 없는 대화를 생산하는 것이 뭔가 이상하기도 했고 OpenAI에서 제공하는 무료 사용량으로 구현할 수 있나 싶은 걱정에 각 봇이 서로에게 할 말이 있는 경우에 한번에 대화를 만들어 보내도록 구현했다.</p><h2 id=좋은-팀>좋은 팀!</h2><p><img src=/images/posts/2023/04/numble-talk/03.png alt="bug issue"></p><p>과정을 혼자보다는 여럿이서 겪으면 더 얻는 게 있을 거란 생각에 팀에도 참여했다. 나와 비슷한 신입 분들이셨고, 정말 운 좋게도 서로 성격이 잘 맞아서 즐겁게 스크럼을 할 수 있었다. 다른 프로젝트와 겹치면서 막바지에 거의 해커톤 마인드(?)로 하다가 어떻게 스크럼 때 1차 배포까지 마치고 결과물을 보여드렸는데, 한 분이 버그까지 발견해 주기도 했다. 재밌는 경험이었다 ㅋㅋ..<br>너무 활기차고 적극적으로 함께 해 주셔서 너무 감사드려요!</p><h1 id=마치며>마치며</h1><p>생각보다 일정이 빡빡했고, 걱정보다는 할 만 했던 챌린지였다. 아쉬운 점이 있다면 챗쌤들이 기분에 따라 대화에 소극적으로 참여한다는 점과 <strong>API 테스트</strong>라는 것을 어떤 것을 어떻게 테스트해야 할지 감이 오지 않아서 구현하지 못한 것.. 어떻게 했어야 할까? 나중에 모범 사례라고 해야 하나.. 잘 하신 분들의 프로젝트가 공개된다면 한 번 보고 싶다.</p><p><a href=https://github.com/prayinforrain/numble-talk>넘블톡 레포지토리</a><br><a href=https://numble-talk.vercel.app/>넘블톡 배포 링크</a></p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+</span></span></code></pre></div><p>한 번의 요청에서 주고받는 토큰 <em>(대충 메시지의 길이)</em> 수의 제한이 있어서, 지나치게 길지 않으면서도 내가 원하는 결과를 내도록 메시지를 넣었다. 학부생 때 <a href=https://www.gymlibrary.dev/>OpenAI Gym</a>을 해 본 경험이 조금 오버랩되면서 느낌이 묘했다. 얘야 이건 이렇게 답해야 한단다..<br>문제는 챗쌤이 기분에 따라 대답을 잘 해주기도, 기본적인 응답 포맷도 지키지 않는 일도 있어서 이런 예외를 발생시키지 않으려면 어떻게 해야 할지 고민을 많이 했다. 내가 시스템 메시지로 요구하는 내용 자체가 중의적으로 해석될 소지가 있는 것이 문제라고 생각해서 이것저것 바꾸면서 조절했다. 결과적으로는 항상 좋은 결과를 보여주진 않지만 적어도 메시지 포맷은 지켜서 이야기하도록 만드는데는 성공했다.</p><p>그리고 API 요청을 보낼 때.. 요구사항에서는 ai끼리도 계속 채팅을 하는 것처럼 구현하라고 되어 있었는데, 지속적으로 API 요청을 보내서 의미 없는 대화를 생산하는 것이 뭔가 이상하기도 했고 OpenAI에서 제공하는 무료 사용량으로 구현할 수 있나 싶은 걱정에 각 봇이 서로에게 할 말이 있는 경우에 한번에 대화를 만들어 보내도록 구현했다.</p><h3 id=좋은-팀>좋은 팀!</h3><p><img src=/images/posts/2023/04/numble-talk/03.png alt="bug issue"></p><p>과정을 혼자보다는 여럿이서 겪으면 더 얻는 게 있을 거란 생각에 팀에도 참여했다. 나와 비슷한 신입 분들이셨고, 정말 운 좋게도 서로 성격이 잘 맞아서 즐겁게 스크럼을 할 수 있었다. 다른 프로젝트와 겹치면서 막바지에 거의 해커톤 마인드(?)로 하다가 어떻게 스크럼 때 1차 배포까지 마치고 결과물을 보여드렸는데, 한 분이 버그까지 발견해 주기도 했다. 재밌는 경험이었다 ㅋㅋ..<br>너무 활기차고 적극적으로 함께 해 주셔서 너무 감사드려요!</p><h2 id=마치며>마치며</h2><p>생각보다 일정이 빡빡했고, 걱정보다는 할 만 했던 챌린지였다. 아쉬운 점이 있다면 챗쌤들이 기분에 따라 대화에 소극적으로 참여한다는 점과 <strong>API 테스트</strong>라는 것을 어떤 것을 어떻게 테스트해야 할지 감이 오지 않아서 구현하지 못한 것.. 어떻게 했어야 할까? 나중에 모범 사례라고 해야 하나.. 잘 하신 분들의 프로젝트가 공개된다면 한 번 보고 싶다.</p><p><a href=https://github.com/prayinforrain/numble-talk>넘블톡 레포지토리</a><br><a href=https://numble-talk.vercel.app/>넘블톡 배포 링크</a></p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/2023/05/exploring-yarn-berry/index.html b/posts/2023/05/exploring-yarn-berry/index.html
index 7f47c00..68ef58e 100644
--- a/posts/2023/05/exploring-yarn-berry/index.html
+++ b/posts/2023/05/exploring-yarn-berry/index.html
@@ -1,7 +1,7 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>얀 베리 탐험하기 | PrayinForRain.dev</title>
-<meta property="og:title" content="얀 베리 탐험하기 | PrayinForRain.dev"><meta name=twitter:title content="얀 베리 탐험하기 | PrayinForRain.dev"><meta itemprop=name content="얀 베리 탐험하기 | PrayinForRain.dev"><meta name=application-name content="얀 베리 탐험하기 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/05/exploring-yarn-berry/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-05-30T02:27:49+0900><meta property="article:published_time" content=2023-05-30T02:27:49+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"얀 베리 탐험하기","author":{"@type":"Person","name":""},"datePublished":"2023-05-30","description":"","wordCount":1830,"mainEntityOfPage":"True","dateModified":"2023-05-30","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/05/exploring-yarn-berry/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="얀 베리 탐험하기 | PrayinForRain.dev"><meta name=twitter:title content="얀 베리 탐험하기 | PrayinForRain.dev"><meta itemprop=name content="얀 베리 탐험하기 | PrayinForRain.dev"><meta name=application-name content="얀 베리 탐험하기 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/05/exploring-yarn-berry/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-05-30T02:27:49+0900><meta property="article:published_time" content=2023-05-30T02:27:49+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"얀 베리 탐험하기","author":{"@type":"Person","name":""},"datePublished":"2023-05-30","description":"","wordCount":1830,"mainEntityOfPage":"True","dateModified":"2023-05-30","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/05/exploring-yarn-berry/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>얀 베리 탐험하기</h1><div class=post-meta><time datetime=2023-05-30T02:27:49+09:00 itemprop=datePublished>2023. 5. 30.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#내-레포의-위험한-녀석>내 레포의 위험한 녀석</a></li><li><a href=#우리가-아는-node_modules>우리가 아는 node_modules</a><ul><li><a href=#패키지를-찾아서-헤매기>패키지를 찾아서 헤매기</a></li><li><a href=#유령-의존성>유령 의존성</a></li></ul></li><li><a href=#yarn-berry>Yarn berry</a><ul><li><a href=#작동-방식>작동 방식</a></li><li><a href=#유령-의존성-금지>유령 의존성 금지</a></li><li><a href=#peer-dependency-문제>Peer dependency 문제</a></li></ul></li><li><a href=#부록>부록</a><ul><li><a href=#부록1---yarn-dlx와-pnpify>부록1 - yarn dlx와 pnpify</a></li><li><a href=#부록2---사실-모든-것이-pnp의-잘못은-아닙니다>부록2 - 사실 모든 것이 PnP의 잘못은 아닙니다</a></li></ul></li><li><a href=#마치며>마치며..</a></li><li><a href=#refs>Refs.</a></li></ul></nav></details><div class=page-content><h1 id=내-레포의-위험한-녀석>내 레포의 위험한 녀석</h1><p><img src=/images/posts/2023/05/exploring-yarn-berry/01.png alt="cds issue"></p><p>최근 <a href=https://github.com/c-h-w-h/cds>차가운 디자인 시스템(CDS)</a>의 패키지 매니저를 <strong>Yarn berry</strong>로 마이그레이션 하는 작업을 하고 있다. 이유는 후술할 <code>node_modules</code> 자체의 단점도 있고, 내 데스크탑이 HDD를 사용하기 때문에 <code>node_modules</code>의 수십만 개의 파일들을 다루는 것이 너무 느려서 강력 추천했다.</p><p>하지만 사실 나는 PnP가 어떻게 패키지들을 resolve하는지 전혀 모른다. 그저 어떻게 해야 오류 없이 쓸 수 있는지만 열심히 고민했는데, 팀원들에게 설명할 때 마다 막연히 얀베리가 잘못했겠죠~ 하는 스스로에게 자괴감을 느껴 이 기회에 한 번 Yarn PnP를 똑바로 마주해 보기로 했다.</p><h1 id=우리가-아는-node_modules>우리가 아는 node_modules</h1><h2 id=패키지를-찾아서-헤매기>패키지를 찾아서 헤매기</h2><p>Node.js에는 사실 패키지의 개념이 명시적으로 정의되어 있지 않았다. 따라서 다른 모듈을 사용할 때에 Node.js는 패키지가 아닌 파일 단위로 모듈을 찾아서 resolve하고 있었다.</p><p>기존 npm의 경우에는 패키지의 node_modules, npm이 설치된 디렉토리의 전역 폴더 등등 여러 곳을 차례로 패키지를 찾아 나갔다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>$ node
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>얀 베리 탐험하기</h1><div class=post-meta><time datetime=2023-05-30T02:27:49+09:00 itemprop=datePublished>2023. 5. 30.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#내-레포의-위험한-녀석>내 레포의 위험한 녀석</a></li><li><a href=#우리가-아는-node_modules>우리가 아는 node_modules</a><ul><li><a href=#패키지를-찾아서-헤매기>패키지를 찾아서 헤매기</a></li><li><a href=#유령-의존성>유령 의존성</a></li></ul></li><li><a href=#yarn-berry>Yarn berry</a><ul><li><a href=#작동-방식>작동 방식</a></li><li><a href=#유령-의존성-금지>유령 의존성 금지</a></li><li><a href=#peer-dependency-문제>Peer dependency 문제</a></li></ul></li><li><a href=#부록>부록</a><ul><li><a href=#부록1---yarn-dlx와-pnpify>부록1 - yarn dlx와 pnpify</a></li><li><a href=#부록2---사실-모든-것이-pnp의-잘못은-아닙니다>부록2 - 사실 모든 것이 PnP의 잘못은 아닙니다</a></li></ul></li><li><a href=#마치며>마치며..</a></li><li><a href=#refs>Refs.</a></li></ul></nav></details><div class=page-content><h2 id=내-레포의-위험한-녀석>내 레포의 위험한 녀석</h2><p><img src=/images/posts/2023/05/exploring-yarn-berry/01.png alt="cds issue"></p><p>최근 <a href=https://github.com/c-h-w-h/cds>차가운 디자인 시스템(CDS)</a>의 패키지 매니저를 <strong>Yarn berry</strong>로 마이그레이션 하는 작업을 하고 있다. 이유는 후술할 <code>node_modules</code> 자체의 단점도 있고, 내 데스크탑이 HDD를 사용하기 때문에 <code>node_modules</code>의 수십만 개의 파일들을 다루는 것이 너무 느려서 강력 추천했다.</p><p>하지만 사실 나는 PnP가 어떻게 패키지들을 resolve하는지 전혀 모른다. 그저 어떻게 해야 오류 없이 쓸 수 있는지만 열심히 고민했는데, 팀원들에게 설명할 때 마다 막연히 얀베리가 잘못했겠죠~ 하는 스스로에게 자괴감을 느껴 이 기회에 한 번 Yarn PnP를 똑바로 마주해 보기로 했다.</p><h2 id=우리가-아는-node_modules>우리가 아는 node_modules</h2><h3 id=패키지를-찾아서-헤매기>패키지를 찾아서 헤매기</h3><p>Node.js에는 사실 패키지의 개념이 명시적으로 정의되어 있지 않았다. 따라서 다른 모듈을 사용할 때에 Node.js는 패키지가 아닌 파일 단위로 모듈을 찾아서 resolve하고 있었다.</p><p>기존 npm의 경우에는 패키지의 node_modules, npm이 설치된 디렉토리의 전역 폴더 등등 여러 곳을 차례로 패키지를 찾아 나갔다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>$ node
 </span></span><span class=line><span class=cl>&gt; require.resolve.paths<span class=o>(</span><span class=s1>&#39;react-dom&#39;</span><span class=o>)</span>
 </span></span><span class=line><span class=cl><span class=o>[</span>
 </span></span><span class=line><span class=cl>  <span class=s1>&#39;E:\\workspace\\repl\\node_modules&#39;</span>,
@@ -17,7 +17,7 @@
 </span></span><span class=line><span class=cl><span class=o>]</span>
 </span></span><span class=line><span class=cl>&gt; require.resolve<span class=o>(</span><span class=s1>&#39;react-dom&#39;</span><span class=o>)</span>
 </span></span><span class=line><span class=cl><span class=s1>&#39;E:\\workspace\\node_modules\\react-dom\\index.js&#39;</span>
-</span></span></code></pre></div><p>이는 비효율적이다. <code>node_modules</code> 디렉토리는 가벼운 프로젝트에서도 만 개 단위의 파일들이 있어 탐색 속도가 느리고, <code>node_modules</code> 디렉토리 말고도 레포지토리의 상위 경로 등 탐색 범위가 매우 넓기 때문에 환경 의존적인 프로젝트가 될 수도 있다. 특히 이 과정은 런타임에서도 수시로 진행되어 매우 큰 성능 문제를 야기한다.</p><h2 id=유령-의존성>유령 의존성</h2><p>효율이야 어떻게 됐든 이런 식으로 패키지를 resolve한다고 치자. 그런데 문제가 또 있다.</p><p><img src=/images/posts/2023/05/exploring-yarn-berry/02.png alt="dependency hoisting"></p><p><em>출처: <a href=https://toss.tech/article/node-modules-and-yarn-berry>node_modules로부터 우리를 구원해 줄 Yarn Berry - 토스 기술블로그</a></em></p><p>위 사진에서 package-1은 A, C, D 패키지를 사용한다. 이 중 A와 C는 B(1.0)를 직, 간접적으로 의존하고 있기 때문에 결과적으로 B(1.0) 패키지도 필요한 상황이고, 결과적으로는 중복 파일을 줄여 용량을 절약하기 위해 B(1.0)을 호이스팅하여 <code>node_modules</code>에는 package-1이 요구하지 않은 B(1.0)이 추가로 설치된다.</p><p>이 후 Node는 package.json을 <strong>체크하지 않고</strong> node_modules 디렉토리에 있는 파일들을 기준으로 모듈을 resolve한다. 이렇게 되면 쥐도새도 모르게 package-1에서는 요구하지 않았던 B(1.0)의 모듈을 슬쩍 사용할 수 있게 된다. 분명 문제가 있다.</p><h1 id=yarn-berry>Yarn berry</h1><p>Yarn berry에서 나온 PnP 방식은 이런 문제들을 해결한다. <strong>Yarn PnP</strong>는 <code>package.json</code>을 기반으로 명시적인 의존성 트리를 생성하고, 모듈을 resolve하는 과정을 이 트리를 기반으로 처리하여 유령 의존성 문제를 해결하면서, 각각의 패키지를 하나의 <code>.zip</code> 압축 파일로 저장하기 때문에 파일 개수와 용량 측면에서 획기적인 절약을 이루어낸다.</p><h2 id=작동-방식>작동 방식</h2><p>yarn pnp가 생성하는 <code>.pnp.cjs</code> 파일에는 <code>readFileSync</code>같은 fs 모듈의 메서드가 구현되어 있고, 이 메서드들은 <code>.yarn/cache</code> 디렉토리의 zip 파일들을 참조할 수 있도록 연결한다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-jsx data-lang=jsx><span class=line><span class=cl><span class=kr>class</span> <span class=nx>NodeFS</span> <span class=kr>extends</span> <span class=nx>BasePortableFakeFS</span> <span class=p>{</span>
+</span></span></code></pre></div><p>이는 비효율적이다. <code>node_modules</code> 디렉토리는 가벼운 프로젝트에서도 만 개 단위의 파일들이 있어 탐색 속도가 느리고, <code>node_modules</code> 디렉토리 말고도 레포지토리의 상위 경로 등 탐색 범위가 매우 넓기 때문에 환경 의존적인 프로젝트가 될 수도 있다. 특히 이 과정은 런타임에서도 수시로 진행되어 매우 큰 성능 문제를 야기한다.</p><h3 id=유령-의존성>유령 의존성</h3><p>효율이야 어떻게 됐든 이런 식으로 패키지를 resolve한다고 치자. 그런데 문제가 또 있다.</p><p><img src=/images/posts/2023/05/exploring-yarn-berry/02.png alt="dependency hoisting"></p><p><em>출처: <a href=https://toss.tech/article/node-modules-and-yarn-berry>node_modules로부터 우리를 구원해 줄 Yarn Berry - 토스 기술블로그</a></em></p><p>위 사진에서 package-1은 A, C, D 패키지를 사용한다. 이 중 A와 C는 B(1.0)를 직, 간접적으로 의존하고 있기 때문에 결과적으로 B(1.0) 패키지도 필요한 상황이고, 결과적으로는 중복 파일을 줄여 용량을 절약하기 위해 B(1.0)을 호이스팅하여 <code>node_modules</code>에는 package-1이 요구하지 않은 B(1.0)이 추가로 설치된다.</p><p>이 후 Node는 package.json을 <strong>체크하지 않고</strong> node_modules 디렉토리에 있는 파일들을 기준으로 모듈을 resolve한다. 이렇게 되면 쥐도새도 모르게 package-1에서는 요구하지 않았던 B(1.0)의 모듈을 슬쩍 사용할 수 있게 된다. 분명 문제가 있다.</p><h2 id=yarn-berry>Yarn berry</h2><p>Yarn berry에서 나온 PnP 방식은 이런 문제들을 해결한다. <strong>Yarn PnP</strong>는 <code>package.json</code>을 기반으로 명시적인 의존성 트리를 생성하고, 모듈을 resolve하는 과정을 이 트리를 기반으로 처리하여 유령 의존성 문제를 해결하면서, 각각의 패키지를 하나의 <code>.zip</code> 압축 파일로 저장하기 때문에 파일 개수와 용량 측면에서 획기적인 절약을 이루어낸다.</p><h3 id=작동-방식>작동 방식</h3><p>yarn pnp가 생성하는 <code>.pnp.cjs</code> 파일에는 <code>readFileSync</code>같은 fs 모듈의 메서드가 구현되어 있고, 이 메서드들은 <code>.yarn/cache</code> 디렉토리의 zip 파일들을 참조할 수 있도록 연결한다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-jsx data-lang=jsx><span class=line><span class=cl><span class=kr>class</span> <span class=nx>NodeFS</span> <span class=kr>extends</span> <span class=nx>BasePortableFakeFS</span> <span class=p>{</span>
 </span></span><span class=line><span class=cl>  <span class=c1>// ...
 </span></span></span><span class=line><span class=cl><span class=c1></span>  <span class=nx>readFileSync</span><span class=p>(</span><span class=nx>p</span><span class=p>,</span> <span class=nx>encoding</span><span class=p>)</span> <span class=p>{</span>
 </span></span><span class=line><span class=cl>    <span class=kr>const</span> <span class=nx>fsNativePath</span> <span class=o>=</span> <span class=k>typeof</span> <span class=nx>p</span> <span class=o>===</span> <span class=sb>`string`</span> <span class=o>?</span> <span class=nx>npath</span><span class=p>.</span><span class=nx>fromPortablePath</span><span class=p>(</span><span class=nx>p</span><span class=p>)</span> <span class=o>:</span> <span class=nx>p</span><span class=p>;</span>
@@ -53,7 +53,7 @@
 </span></span></code></pre></div><p>그 이후 <code>.pnp.cjs</code>를 통해 재정의된 <code>fs.readFileSync</code>를 통해 디렉토리 내의 <code>index.js</code> 파일을 읽어올 수 있었다.</p><p>최종적으로 <code>react-dom</code>을 resolve하려면 이와 비슷한 과정을 통해 아래와 같은 경로로 연결되는 것이다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>$ yarn node
 </span></span><span class=line><span class=cl>&gt; require.resolve<span class=o>(</span><span class=s1>&#39;react-dom&#39;</span><span class=o>)</span>
 </span></span><span class=line><span class=cl><span class=s1>&#39;E:\\workspace\\.yarn\\__virtual__\\react-dom-virtual-67ee33d872\\0\\cache\\react-dom-npm-18.2.0-dd675bca1c-7d323310be.zip\\node_modules\\react-dom\\index.js&#39;</span>
-</span></span></code></pre></div><h2 id=유령-의존성-금지>유령 의존성 금지</h2><p>반면에, 프로젝트 의존성에는 명시되지 않았으면서 <code>react-dom</code>이 의존하는 패키지가 있다. <code>loose-envify</code>와 <code>scheduler</code> 두 개가 있는데, 실제로도 <code>react-dom</code>을 설치할 경우 <code>.yarn/cache</code> 디렉토리에 두 패키지가 함께 설치되는 것을 볼 수 있다. npm의 <code>node_modules</code>도 마찬가지다.</p><p>그런데 이들은 <code>require.resolve()</code>를 통해서 찾을 수 없는데, 이는 <code>.pnp.cjs</code>상에서 <strong>패키지의 가상 경로가 존재하지 않기 때문</strong>이다. 참고로 <code>.pnp.cjs</code>의 내용은 아래처럼 생겼다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-jsx data-lang=jsx><span class=line><span class=cl><span class=c1>// .pnp.cjs
+</span></span></code></pre></div><h3 id=유령-의존성-금지>유령 의존성 금지</h3><p>반면에, 프로젝트 의존성에는 명시되지 않았으면서 <code>react-dom</code>이 의존하는 패키지가 있다. <code>loose-envify</code>와 <code>scheduler</code> 두 개가 있는데, 실제로도 <code>react-dom</code>을 설치할 경우 <code>.yarn/cache</code> 디렉토리에 두 패키지가 함께 설치되는 것을 볼 수 있다. npm의 <code>node_modules</code>도 마찬가지다.</p><p>그런데 이들은 <code>require.resolve()</code>를 통해서 찾을 수 없는데, 이는 <code>.pnp.cjs</code>상에서 <strong>패키지의 가상 경로가 존재하지 않기 때문</strong>이다. 참고로 <code>.pnp.cjs</code>의 내용은 아래처럼 생겼다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-jsx data-lang=jsx><span class=line><span class=cl><span class=c1>// .pnp.cjs
 </span></span></span><span class=line><span class=cl><span class=c1></span><span class=kd>function</span> <span class=nx>$$SETUP_STATE</span><span class=p>(</span><span class=nx>hydrateRuntimeState</span><span class=p>,</span> <span class=nx>basePath</span><span class=p>)</span> <span class=p>{</span>
 </span></span><span class=line><span class=cl>  <span class=k>return</span> <span class=nx>hydrateRuntimeState</span><span class=p>(</span><span class=nx>JSON</span><span class=p>.</span><span class=nx>parse</span><span class=p>(</span><span class=err>&#39;</span><span class=p>{</span><span class=o>\</span>
 </span></span><span class=line><span class=cl>    <span class=c1>// ...
@@ -90,14 +90,14 @@
 </span></span><span class=line><span class=cl>        <span class=p>[</span><span class=s2>&#34;virtual:34069774f764f6c076c76cefb79f9c00ee35c2ecc2faeec6f1f046eac9e499da19f7441a38c80f3dc82287abf91ba64b7783b2e2d997751e40d1ad563ff4f78d#npm:18.2.0&#34;</span><span class=p>,</span> <span class=p>{</span>
 </span></span><span class=line><span class=cl>          <span class=s2>&#34;packageLocation&#34;</span><span class=o>:</span> <span class=s2>&#34;./.yarn/__virtual__/react-dom-virtual-67ee33d872/0/cache/react-dom-npm-18.2.0-dd675bca1c-7d323310be.zip/node_modules/react-dom/&#34;</span><span class=p>,</span>
 </span></span><span class=line><span class=cl>    <span class=c1>// ...
-</span></span></span></code></pre></div><p>앞에서 첨부했던 <code>.pnp.cjs</code> 파일의 일부다. 이 파일은 <code>package.json</code>을 기반으로 의존성 트리를 구성하여 갖고 있고, 물론 <code>react-dom</code> 패키지가 사용하는 <code>loose-envify</code> 역시 포함하고 있다. 하지만 프로젝트에 명시된 의존성(<code>react-dom</code>)은 다른 패키지들과 달리 <code>virtual:…</code>로 시작하는 가상 경로가 부여되어 있다. 이 가상 경로가 부여되지 않은 패키지는 resolve될 수 없다.</p><p>정확한 명칭은 <strong>가상 로케이터</strong>라고 부르는데, 자세한 내용은 <a href=https://yarnpkg.com/advanced/pnp-spec>Yarn의 PnP Specification</a> 페이지에서 알 수 있다.</p><p>이 과정을 통해 개인적인 이해를 위해 유추한 내용을 정리하자면,</p><ol><li><code>package.json</code>을 기반으로 <code>.pnp.cjs</code>에서 의존성 트리를 구성한다.</li><li>코드가 실행되면 Yarn PnP는 이를 통해 가상 <code>node_modules</code> 폴더를 구성한다.</li><li><code>react-dom</code>을 부여된 가상 경로에 존재하는 것처럼 연결한다.</li><li>해당 가상 경로에 <code>react-dom</code>이 참조하는 의존성 패키지들을 또 연결한다(<code>node_modules</code>처럼)</li><li><code>loose-envify</code>의 경우 <code>react-dom</code>의 하위 디렉토리에 있는 셈이니 가상 경로를 따로 부여할 필요가 없다,</li></ol><p>이렇게 <code>loose-envify</code>는 최상위 디렉토리로 hoist되지 않아 유령 의존성 문제도 발생하지 않고, 여러 번 참조될 경우 필요한 패키지들의 가상 경로에 같이 참조시키면 되므로 같은 파일을 여러 개 가질 필요도 없어진다. 최대한 이해하기 쉬우면서 틀리지 않도록 정리하려 노력했는데 제발 크게 틀린 부분이 없길 빈다.</p><h2 id=peer-dependency-문제>Peer dependency 문제</h2><aside><p>💡 <strong>아래 문제는 일반적이지 않습니다!</strong><br>재현할 수 있는 npm 패키지를 찾으려고 했지만, 대부분의 경우 peer dependency로만 명시된 의존성 패키지가 존재하지 않아 일반적인 문제가 아닙니다. 참고하세요~</p></aside><p><strong>Peer dependency</strong>란, 패키지가 다른 패키지와 상호작용함을 명시하는 종속성 필드다. 예를 들어 React 기반의 디자인 시스템은 React의 기능을 활용하지만, 패키지 자체에서 React를 포함할 필요는 없다. 이 경우 디자인 시스템에서 React를 Peer dependency로 지정하여 React의 어떤 버전이 필요함을 명시할 수 있는 것이다.</p><p>npm은 패키지를 설치할 때 peer dependency로 명시된 패키지를 같이 설치하려고 시도한다. 여태 꽤 많은 변화가 있었지만, 아무튼 npm 7.0 이후로는 설치하는 쪽으로 가닥을 잡은 모양이다. <a href=https://github.blog/2021-02-02-npm-7-is-now-generally-available/#peer-dependencies>[참고 링크]</a></p><p>반면에 Yarn PnP에서는 peer deps를 자동으로 설치하지 않는다. 예를 들어, <code>react</code>를 peer deps로 가진 <code>@chwh/cds</code> 패키지를 npm과 Yarn PnP에서 각각 설치하면 npm에는 <code>react</code>가 함께 설치되는 반면, Yarn PnP에서는 <code>cds</code>와 <code>cds</code>의 dependency의 일반 의존성 패키지(<code>lodash</code>)만이 설치된다.</p><p>단, <code>yarn install</code>을 했을 때 패키지가 요구하는 peer deps가 설치되지 않은 경우 아래와 같이 경고 메시지가 표시되며, 개발자는 이를 수동으로 설치함으로써 개발자가 직접 의존성에 대한 관리를 하도록 유도한다. 또 이러한 방식은 여러 패키지를 설치할 때의 의존성 그래프가 복잡해지는 현상을 방지한다고 한다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-powershell data-lang=powershell><span class=line><span class=cl><span class=p>&gt;</span> <span class=n>yarn</span>
+</span></span></span></code></pre></div><p>앞에서 첨부했던 <code>.pnp.cjs</code> 파일의 일부다. 이 파일은 <code>package.json</code>을 기반으로 의존성 트리를 구성하여 갖고 있고, 물론 <code>react-dom</code> 패키지가 사용하는 <code>loose-envify</code> 역시 포함하고 있다. 하지만 프로젝트에 명시된 의존성(<code>react-dom</code>)은 다른 패키지들과 달리 <code>virtual:…</code>로 시작하는 가상 경로가 부여되어 있다. 이 가상 경로가 부여되지 않은 패키지는 resolve될 수 없다.</p><p>정확한 명칭은 <strong>가상 로케이터</strong>라고 부르는데, 자세한 내용은 <a href=https://yarnpkg.com/advanced/pnp-spec>Yarn의 PnP Specification</a> 페이지에서 알 수 있다.</p><p>이 과정을 통해 개인적인 이해를 위해 유추한 내용을 정리하자면,</p><ol><li><code>package.json</code>을 기반으로 <code>.pnp.cjs</code>에서 의존성 트리를 구성한다.</li><li>코드가 실행되면 Yarn PnP는 이를 통해 가상 <code>node_modules</code> 폴더를 구성한다.</li><li><code>react-dom</code>을 부여된 가상 경로에 존재하는 것처럼 연결한다.</li><li>해당 가상 경로에 <code>react-dom</code>이 참조하는 의존성 패키지들을 또 연결한다(<code>node_modules</code>처럼)</li><li><code>loose-envify</code>의 경우 <code>react-dom</code>의 하위 디렉토리에 있는 셈이니 가상 경로를 따로 부여할 필요가 없다,</li></ol><p>이렇게 <code>loose-envify</code>는 최상위 디렉토리로 hoist되지 않아 유령 의존성 문제도 발생하지 않고, 여러 번 참조될 경우 필요한 패키지들의 가상 경로에 같이 참조시키면 되므로 같은 파일을 여러 개 가질 필요도 없어진다. 최대한 이해하기 쉬우면서 틀리지 않도록 정리하려 노력했는데 제발 크게 틀린 부분이 없길 빈다.</p><h3 id=peer-dependency-문제>Peer dependency 문제</h3><aside><p>💡 <strong>아래 문제는 일반적이지 않습니다!</strong><br>재현할 수 있는 npm 패키지를 찾으려고 했지만, 대부분의 경우 peer dependency로만 명시된 의존성 패키지가 존재하지 않아 일반적인 문제가 아닙니다. 참고하세요~</p></aside><p><strong>Peer dependency</strong>란, 패키지가 다른 패키지와 상호작용함을 명시하는 종속성 필드다. 예를 들어 React 기반의 디자인 시스템은 React의 기능을 활용하지만, 패키지 자체에서 React를 포함할 필요는 없다. 이 경우 디자인 시스템에서 React를 Peer dependency로 지정하여 React의 어떤 버전이 필요함을 명시할 수 있는 것이다.</p><p>npm은 패키지를 설치할 때 peer dependency로 명시된 패키지를 같이 설치하려고 시도한다. 여태 꽤 많은 변화가 있었지만, 아무튼 npm 7.0 이후로는 설치하는 쪽으로 가닥을 잡은 모양이다. <a href=https://github.blog/2021-02-02-npm-7-is-now-generally-available/#peer-dependencies>[참고 링크]</a></p><p>반면에 Yarn PnP에서는 peer deps를 자동으로 설치하지 않는다. 예를 들어, <code>react</code>를 peer deps로 가진 <code>@chwh/cds</code> 패키지를 npm과 Yarn PnP에서 각각 설치하면 npm에는 <code>react</code>가 함께 설치되는 반면, Yarn PnP에서는 <code>cds</code>와 <code>cds</code>의 dependency의 일반 의존성 패키지(<code>lodash</code>)만이 설치된다.</p><p>단, <code>yarn install</code>을 했을 때 패키지가 요구하는 peer deps가 설치되지 않은 경우 아래와 같이 경고 메시지가 표시되며, 개발자는 이를 수동으로 설치함으로써 개발자가 직접 의존성에 대한 관리를 하도록 유도한다. 또 이러한 방식은 여러 패키지를 설치할 때의 의존성 그래프가 복잡해지는 현상을 방지한다고 한다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-powershell data-lang=powershell><span class=line><span class=cl><span class=p>&gt;</span> <span class=n>yarn</span>
 </span></span><span class=line><span class=cl><span class=err>➤</span> <span class=n>YN0002</span><span class=err>:</span> <span class=err>│</span> <span class=n>berry</span><span class=nv>@workspace</span><span class=err>:</span><span class=p>.</span> <span class=n>doesn</span><span class=s1>&#39;t provide @emotion/react (p0d53b), requested by @chwh/cds
 </span></span></span><span class=line><span class=cl><span class=s1>➤ YN0002: │ berry@workspace:. doesn&#39;</span><span class=n>t</span> <span class=n>provide</span> <span class=nv>@emotion</span><span class=p>/</span><span class=n>styled</span> <span class=p>(</span><span class=n>pe7b02</span><span class=p>),</span> <span class=n>requested</span> <span class=n>by</span> <span class=nv>@chwh</span><span class=p>/</span><span class=n>cds</span>
-</span></span></code></pre></div><p>물론 예시로 든 <code>cds</code>를 사용하려면 리액트를 사용해야 하지만, 만약 peer dependency에만 명시된 패키지를 의존하면서 독립적으로 실행할 수 있을 것 <strong><em>처럼</em></strong> 보이는 패키지를 사용한다면, 수동으로 설치하지 않고서는 오류가 발생하게 될 것이다. 다만, 대부분의 경우 dependency로 명시된 패키지들 중에 peer dependency로 가지고 있는 패키지를 dependency로 갖는 식으로 의존성 트리가 채워지는 경우가 많기 때문에 자주 만나는 상황은 아니다.</p><h1 id=부록>부록</h1><h2 id=부록1---yarn-dlx와-pnpify>부록1 - yarn dlx와 pnpify</h2><p>Yarn PnP 환경에서 <code>npx</code>와 같은 명령어를 사용해야 할 때가 있고, 이에 대응하는 명령어가 <code>yarn dlx</code>이다. 예를 들어 <code>yarn dlx storybook init</code>을 실행하면 <code>npx storybook init</code>을 실행한 것과 같은 결과를, Yarn의 환경에 맞게 만들어 준다. <code>npx</code> 자체가 yarn과 npm 중 알맞은 패키지 매니저로 연결해 주지만, Yarn PnP는 그 외에도 추가적인 작업을 필요로 하기 때문에 제대로 작동하지 않기도 한다. Storybook에 Yarn PnP를 적용할 때가 대표적인 예시인데.. <a href=https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/#%EB%82%B4%EA%B0%80-%EC%9D%B4%EA%B2%BC%EB%8B%A4-%EC%8A%A4%ED%86%A0%EB%A6%AC%EB%B6%81%EC%95%84>이 내용도 아주아주 간단하게 언급한 적이 있다.</a></p><p>반면 Yarn에는 pnpify라는 패키지가 존재한다. 보통 <code>package.json</code>에 정의되는 명령어들은(tsc나 vite build같은..) 여전이 로컬 파일 기반으로 패키지를 resolve하려 시도하는데, 압축된 패키지들을 사용하는 PnP 환경에서 제대로 작동하지 않는다. 이 문제를 해결하기 위해 위에 나온 방식으로 <strong>패키지를 resolve하는 로직을 교체해 주는 것</strong>이 <code>pnpify</code>이다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-jsx data-lang=jsx><span class=line><span class=cl><span class=c1>// original
+</span></span></code></pre></div><p>물론 예시로 든 <code>cds</code>를 사용하려면 리액트를 사용해야 하지만, 만약 peer dependency에만 명시된 패키지를 의존하면서 독립적으로 실행할 수 있을 것 <strong><em>처럼</em></strong> 보이는 패키지를 사용한다면, 수동으로 설치하지 않고서는 오류가 발생하게 될 것이다. 다만, 대부분의 경우 dependency로 명시된 패키지들 중에 peer dependency로 가지고 있는 패키지를 dependency로 갖는 식으로 의존성 트리가 채워지는 경우가 많기 때문에 자주 만나는 상황은 아니다.</p><h2 id=부록>부록</h2><h3 id=부록1---yarn-dlx와-pnpify>부록1 - yarn dlx와 pnpify</h3><p>Yarn PnP 환경에서 <code>npx</code>와 같은 명령어를 사용해야 할 때가 있고, 이에 대응하는 명령어가 <code>yarn dlx</code>이다. 예를 들어 <code>yarn dlx storybook init</code>을 실행하면 <code>npx storybook init</code>을 실행한 것과 같은 결과를, Yarn의 환경에 맞게 만들어 준다. <code>npx</code> 자체가 yarn과 npm 중 알맞은 패키지 매니저로 연결해 주지만, Yarn PnP는 그 외에도 추가적인 작업을 필요로 하기 때문에 제대로 작동하지 않기도 한다. Storybook에 Yarn PnP를 적용할 때가 대표적인 예시인데.. <a href=https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/#%EB%82%B4%EA%B0%80-%EC%9D%B4%EA%B2%BC%EB%8B%A4-%EC%8A%A4%ED%86%A0%EB%A6%AC%EB%B6%81%EC%95%84>이 내용도 아주아주 간단하게 언급한 적이 있다.</a></p><p>반면 Yarn에는 pnpify라는 패키지가 존재한다. 보통 <code>package.json</code>에 정의되는 명령어들은(tsc나 vite build같은..) 여전이 로컬 파일 기반으로 패키지를 resolve하려 시도하는데, 압축된 패키지들을 사용하는 PnP 환경에서 제대로 작동하지 않는다. 이 문제를 해결하기 위해 위에 나온 방식으로 <strong>패키지를 resolve하는 로직을 교체해 주는 것</strong>이 <code>pnpify</code>이다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-jsx data-lang=jsx><span class=line><span class=cl><span class=c1>// original
 </span></span></span><span class=line><span class=cl><span class=c1></span><span class=s2>&#34;build&#34;</span><span class=o>:</span> <span class=s2>&#34;tsc -p tsconfig.publish.json &amp;&amp; vite build --config vite.publish.config.ts&#34;</span>
 </span></span><span class=line><span class=cl><span class=c1>// with pnp
 </span></span></span><span class=line><span class=cl><span class=c1></span><span class=s2>&#34;build&#34;</span><span class=o>:</span> <span class=s2>&#34;yarn pnpify tsc -p tsconfig.publish.json &amp;&amp; yarn pnpify vite build --config vite.publish.config.ts&#34;</span>
-</span></span></code></pre></div><p><code>dlx</code>와 <code>pnpify</code>는 둘 다 PnP 환경에 맞도록 스크립트를 실행한다는 공통점이 있다. 다만 <code>dlx</code>는 프로젝트에 명시되지 않은 패키지를 일회성으로 다운로드하여 실행하고, <code>pnpify</code>는 PnP 환경에 맞게 기존 스크립트를 변환하여 실행한다는 차이점이 있으므로 상황에 맞도록 사용하면 되겠다. 예를 들어 프로젝트 초기화를 <code>dlx</code>로 한다던가..</p><h2 id=부록2---사실-모든-것이-pnp의-잘못은-아닙니다>부록2 - 사실 모든 것이 PnP의 잘못은 아닙니다</h2><p><code>Yarn berry</code>에서의 storybook 세팅에서, 특정 패키지가 resolve되지 않는 문제가 있었다. 앞에서 링크한 블로그 글에서 이 것이 Yarn PnP의 resolve 기준의 잘못인 것처럼 썼는데, 사실 이게 유일한 이유는 아니었다.</p><p>cds는 <code>@storybook/builder-vite</code> 패키지의 0.4.2 버전을 사용하고 있었는데, 의존성 설치를 마치고 스토리북을 실행해 보면 아래와 같은 오류를 뱉었다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-powershell data-lang=powershell><span class=line><span class=cl><span class=n>오후</span> <span class=mf>10</span><span class=err>:</span><span class=mf>13</span><span class=err>:</span><span class=mf>52</span> <span class=p>[</span><span class=no>vite</span><span class=p>]</span> <span class=n>Internal</span> <span class=n>server</span> <span class=n>error</span><span class=err>:</span> <span class=n>Failed</span> <span class=n>to</span> <span class=n>resolve</span> <span class=n>import</span> <span class=s2>&#34;@storybook/preview-web&#34;</span> <span class=n>from</span> <span class=s2>&#34;..\..\virtual:\@storybook\builder-vite\vite-app.js&#34;</span><span class=p>.</span> <span class=n>Does</span> <span class=n>the</span> <span class=n>file</span> <span class=n>exist</span><span class=p>?</span>
+</span></span></code></pre></div><p><code>dlx</code>와 <code>pnpify</code>는 둘 다 PnP 환경에 맞도록 스크립트를 실행한다는 공통점이 있다. 다만 <code>dlx</code>는 프로젝트에 명시되지 않은 패키지를 일회성으로 다운로드하여 실행하고, <code>pnpify</code>는 PnP 환경에 맞게 기존 스크립트를 변환하여 실행한다는 차이점이 있으므로 상황에 맞도록 사용하면 되겠다. 예를 들어 프로젝트 초기화를 <code>dlx</code>로 한다던가..</p><h3 id=부록2---사실-모든-것이-pnp의-잘못은-아닙니다>부록2 - 사실 모든 것이 PnP의 잘못은 아닙니다</h3><p><code>Yarn berry</code>에서의 storybook 세팅에서, 특정 패키지가 resolve되지 않는 문제가 있었다. 앞에서 링크한 블로그 글에서 이 것이 Yarn PnP의 resolve 기준의 잘못인 것처럼 썼는데, 사실 이게 유일한 이유는 아니었다.</p><p>cds는 <code>@storybook/builder-vite</code> 패키지의 0.4.2 버전을 사용하고 있었는데, 의존성 설치를 마치고 스토리북을 실행해 보면 아래와 같은 오류를 뱉었다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-powershell data-lang=powershell><span class=line><span class=cl><span class=n>오후</span> <span class=mf>10</span><span class=err>:</span><span class=mf>13</span><span class=err>:</span><span class=mf>52</span> <span class=p>[</span><span class=no>vite</span><span class=p>]</span> <span class=n>Internal</span> <span class=n>server</span> <span class=n>error</span><span class=err>:</span> <span class=n>Failed</span> <span class=n>to</span> <span class=n>resolve</span> <span class=n>import</span> <span class=s2>&#34;@storybook/preview-web&#34;</span> <span class=n>from</span> <span class=s2>&#34;..\..\virtual:\@storybook\builder-vite\vite-app.js&#34;</span><span class=p>.</span> <span class=n>Does</span> <span class=n>the</span> <span class=n>file</span> <span class=n>exist</span><span class=p>?</span>
 </span></span><span class=line><span class=cl>  <span class=n>Plugin</span><span class=err>:</span> <span class=n>vite</span><span class=err>:</span><span class=nb>import-analysis</span>
 </span></span><span class=line><span class=cl>  <span class=n>File</span><span class=err>:</span> <span class=p>/</span><span class=n>virtual</span><span class=err>:</span><span class=p>/</span><span class=nv>@storybook</span><span class=p>/</span><span class=nb>builder-vite</span><span class=p>/</span><span class=nb>vite-app</span><span class=p>.</span><span class=n>js</span><span class=err>:</span><span class=mf>1</span><span class=err>:</span><span class=mf>45</span>
 </span></span><span class=line><span class=cl>  <span class=mf>1</span>  <span class=p>|</span>  <span class=n>import</span> <span class=p>{</span> <span class=n>composeConfigs</span><span class=p>,</span> <span class=n>PreviewWeb</span> <span class=p>}</span> <span class=n>from</span> <span class=s1>&#39;@storybook/preview-web&#39;</span><span class=p>;</span>
@@ -110,10 +110,10 @@
 </span></span></span><span class=line><span class=cl><span class=c1></span>  <span class=s2>&#34;@storybook/preview-web&#34;</span><span class=p>,</span>
 </span></span><span class=line><span class=cl>  <span class=c1>// ...
 </span></span></span><span class=line><span class=cl><span class=c1></span><span class=p>];</span>
-</span></span></code></pre></div><p><code>optimizeDeps.js</code>라는 파일에서 필요로 하는 외부 모듈들을 따로 적어 두고 있기 때문이었다. 아마 이 파일은 <code>vite</code>의 <a href=https://vitejs-kr.github.io/config/dep-optimization-options.html>디펜던시 최적화 옵션</a>을 설정하는 파일로 보인다.</p><p>스토리북은 리액트를 CRA를 통해 초기 설정을 하듯이 통상 <code>npx storybook init</code>을 통해 초기 설정을 진행하기 때문에 <code>package.json</code>에 의존성이 제대로 명시되어 있지 않은 듯 하다. 어찌 보면 유령 의존성 현상을 이용하는 셈이다.</p><p>이게 <code>@storybook/builder-vite@0.4.2</code> 버전의 코드인데, Storybook 7의 릴리즈 이후로 builder 플러그인들이 스토리북 메인 레포지토리에 모노레포 형태로 통합되던 시기 근처로 의존성 역시 제대로 명시되었다. <a href=https://github.com/storybookjs/storybook/commit/f80ef5f40ab5ecaf29e83f1435809de4c724d2fc>[관련 커밋]</a> 따라서 <strong>지금은 해당되지 않는 이슈</strong>이며, 빌더의 버전 역시 다른 addon과 마찬가지로 스토리북의 버전과 통일되었다.</p><h1 id=마치며>마치며..</h1><p><img src=/images/posts/2023/05/exploring-yarn-berry/03.png alt="cds issue"></p><p>사실 조금 뜬금없이 준비한 발표 자료인데, 가볍게만 해야지.. 하고 시작했다가 어렴풋이 예상했던 내용이 틀리고 틀리고를 반복해서 검증을 반복하다가 글이 태산으로 가버렸다. 마지막에는 내가 왜 이걸 보고 있었는지를 까먹어서 손을 놓고 다시 컨텍스트를 따라가기도 했다. 그러니까 음.. 매끄러운 글은 아닌 것 같다. 내용 없이 주제만 정하고 시작한 글이라 그런가..</p><p>이 글을 끝으로 더 이상 얀베리를 붙들고 씨름하는 일은 없었으면 좋겠지만 아마 그렇진 못할 것 같고.. 다음 프로젝트를 한다면 반드시 pnpm을 써 보고 싶다는 생각을 하고 있다. CDS를 하면서 pnpm을 사용하는 레퍼런스가 꽤 많다는 것을 알았고, Yarn에서도 <a href=https://github.com/yarnpkg/berry/pull/3338>pnpm 링커를 지원</a>하고 있으니 pnpm도 그만의 장점이 있겠구나 하는 막연한 생각 중.</p><h1 id=refs>Refs.</h1><p><a href=https://github.com/yarnpkg/berry>GitHub - yarnpkg/berry: 📦🐈 Active development trunk for Yarn ⚒</a><br><a href=https://yarnpkg.com/features/pnp>Plug&rsquo;n&rsquo;Play</a><br><a href=https://velog.io/@superlipbalm/everything-you-need-to-know-about-javascript-import-maps>(번역) 자바스크립트 Import Map에 대해 알아야 할 모든 것</a><br><a href=https://yceffort.kr/2021/10/debt-of-package-json>package.json에 쌓여있는 개발 부채</a><br><a href=https://toss.tech/article/node-modules-and-yarn-berry>node_modules로부터 우리를 구원해 줄 Yarn Berry</a><br><a href=https://github.blog/2021-02-02-npm-7-is-now-generally-available/#peer-dependencies>npm 7 is now generally available!</a><br><a href=https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp>Next.js Storybook에 Yarn PnP 적용하기 | PrayinForRain.dev</a><br><a href=https://vitejs-kr.github.io/config/dep-optimization-options.html>Vite</a><br><a href=https://woong-jae.com/projects/220711-pnp-dependency-error>Yarn PnP 의존성 에러 해결기</a><br><a href=https://github.com/nodejs/node>GitHub - nodejs/node: Node.js JavaScript runtime</a><br><a href=https://nodejs.org/api/esm.html#resolver-algorithm-specification>Modules: ECMAScript modules | Node.js v20.2.0 Documentation</a></p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+</span></span></code></pre></div><p><code>optimizeDeps.js</code>라는 파일에서 필요로 하는 외부 모듈들을 따로 적어 두고 있기 때문이었다. 아마 이 파일은 <code>vite</code>의 <a href=https://vitejs-kr.github.io/config/dep-optimization-options.html>디펜던시 최적화 옵션</a>을 설정하는 파일로 보인다.</p><p>스토리북은 리액트를 CRA를 통해 초기 설정을 하듯이 통상 <code>npx storybook init</code>을 통해 초기 설정을 진행하기 때문에 <code>package.json</code>에 의존성이 제대로 명시되어 있지 않은 듯 하다. 어찌 보면 유령 의존성 현상을 이용하는 셈이다.</p><p>이게 <code>@storybook/builder-vite@0.4.2</code> 버전의 코드인데, Storybook 7의 릴리즈 이후로 builder 플러그인들이 스토리북 메인 레포지토리에 모노레포 형태로 통합되던 시기 근처로 의존성 역시 제대로 명시되었다. <a href=https://github.com/storybookjs/storybook/commit/f80ef5f40ab5ecaf29e83f1435809de4c724d2fc>[관련 커밋]</a> 따라서 <strong>지금은 해당되지 않는 이슈</strong>이며, 빌더의 버전 역시 다른 addon과 마찬가지로 스토리북의 버전과 통일되었다.</p><h2 id=마치며>마치며..</h2><p><img src=/images/posts/2023/05/exploring-yarn-berry/03.png alt="cds issue"></p><p>사실 조금 뜬금없이 준비한 발표 자료인데, 가볍게만 해야지.. 하고 시작했다가 어렴풋이 예상했던 내용이 틀리고 틀리고를 반복해서 검증을 반복하다가 글이 태산으로 가버렸다. 마지막에는 내가 왜 이걸 보고 있었는지를 까먹어서 손을 놓고 다시 컨텍스트를 따라가기도 했다. 그러니까 음.. 매끄러운 글은 아닌 것 같다. 내용 없이 주제만 정하고 시작한 글이라 그런가..</p><p>이 글을 끝으로 더 이상 얀베리를 붙들고 씨름하는 일은 없었으면 좋겠지만 아마 그렇진 못할 것 같고.. 다음 프로젝트를 한다면 반드시 pnpm을 써 보고 싶다는 생각을 하고 있다. CDS를 하면서 pnpm을 사용하는 레퍼런스가 꽤 많다는 것을 알았고, Yarn에서도 <a href=https://github.com/yarnpkg/berry/pull/3338>pnpm 링커를 지원</a>하고 있으니 pnpm도 그만의 장점이 있겠구나 하는 막연한 생각 중.</p><h2 id=refs>Refs.</h2><p><a href=https://github.com/yarnpkg/berry>GitHub - yarnpkg/berry: 📦🐈 Active development trunk for Yarn ⚒</a><br><a href=https://yarnpkg.com/features/pnp>Plug&rsquo;n&rsquo;Play</a><br><a href=https://velog.io/@superlipbalm/everything-you-need-to-know-about-javascript-import-maps>(번역) 자바스크립트 Import Map에 대해 알아야 할 모든 것</a><br><a href=https://yceffort.kr/2021/10/debt-of-package-json>package.json에 쌓여있는 개발 부채</a><br><a href=https://toss.tech/article/node-modules-and-yarn-berry>node_modules로부터 우리를 구원해 줄 Yarn Berry</a><br><a href=https://github.blog/2021-02-02-npm-7-is-now-generally-available/#peer-dependencies>npm 7 is now generally available!</a><br><a href=https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp>Next.js Storybook에 Yarn PnP 적용하기 | PrayinForRain.dev</a><br><a href=https://vitejs-kr.github.io/config/dep-optimization-options.html>Vite</a><br><a href=https://woong-jae.com/projects/220711-pnp-dependency-error>Yarn PnP 의존성 에러 해결기</a><br><a href=https://github.com/nodejs/node>GitHub - nodejs/node: Node.js JavaScript runtime</a><br><a href=https://nodejs.org/api/esm.html#resolver-algorithm-specification>Modules: ECMAScript modules | Node.js v20.2.0 Documentation</a></p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/2023/06/cds-retrospect/index.html b/posts/2023/06/cds-retrospect/index.html
index 5900413..08b2d5c 100644
--- a/posts/2023/06/cds-retrospect/index.html
+++ b/posts/2023/06/cds-retrospect/index.html
@@ -1,11 +1,11 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>차가운 디자인 시스템(CDS) 회고 | PrayinForRain.dev</title>
-<meta property="og:title" content="차가운 디자인 시스템(CDS) 회고 | PrayinForRain.dev"><meta name=twitter:title content="차가운 디자인 시스템(CDS) 회고 | PrayinForRain.dev"><meta itemprop=name content="차가운 디자인 시스템(CDS) 회고 | PrayinForRain.dev"><meta name=application-name content="차가운 디자인 시스템(CDS) 회고 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="차가운 스터디의 디자인 시스템 프로젝트 CDS 회고"><meta itemprop=description content="차가운 스터디의 디자인 시스템 프로젝트 CDS 회고"><meta property="og:description" content="차가운 스터디의 디자인 시스템 프로젝트 CDS 회고"><meta name=twitter:description content="차가운 스터디의 디자인 시스템 프로젝트 CDS 회고"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/06/cds-retrospect/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-06-18T16:43:32+0900><meta property="article:published_time" content=2023-06-18T16:43:32+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"차가운 디자인 시스템(CDS) 회고","author":{"@type":"Person","name":""},"datePublished":"2023-06-18","description":"차가운 스터디의 디자인 시스템 프로젝트 CDS 회고","wordCount":1235,"mainEntityOfPage":"True","dateModified":"2023-08-14","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/06/cds-retrospect/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="차가운 디자인 시스템(CDS) 회고 | PrayinForRain.dev"><meta name=twitter:title content="차가운 디자인 시스템(CDS) 회고 | PrayinForRain.dev"><meta itemprop=name content="차가운 디자인 시스템(CDS) 회고 | PrayinForRain.dev"><meta name=application-name content="차가운 디자인 시스템(CDS) 회고 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="차가운 스터디의 디자인 시스템 프로젝트 CDS 회고"><meta itemprop=description content="차가운 스터디의 디자인 시스템 프로젝트 CDS 회고"><meta property="og:description" content="차가운 스터디의 디자인 시스템 프로젝트 CDS 회고"><meta name=twitter:description content="차가운 스터디의 디자인 시스템 프로젝트 CDS 회고"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/06/cds-retrospect/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-06-18T16:43:32+0900><meta property="article:published_time" content=2023-06-18T16:43:32+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"차가운 디자인 시스템(CDS) 회고","author":{"@type":"Person","name":""},"datePublished":"2023-06-18","description":"차가운 스터디의 디자인 시스템 프로젝트 CDS 회고","wordCount":1235,"mainEntityOfPage":"True","dateModified":"2023-08-14","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/06/cds-retrospect/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>차가운 디자인 시스템(CDS) 회고</h1><div class=post-meta><time datetime=2023-06-18T16:43:32+09:00 itemprop=datePublished>2023. 6. 18.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#-차가운-스터디>🥶 차가운 스터디</a></li><li><a href=#-cds>🧊 CDS</a><ul><li><a href=#고려한-요소들>고려한 요소들</a><ul><li><a href=#접근성>접근성</a></li><li><a href=#dxdeveloper-experiment>DX(Developer Experiment)</a></li></ul></li><li><a href=#잘-된-것들>잘 된 것들</a><ul><li><a href=#성공적인-협업>성공적인 협업</a></li></ul></li><li><a href=#아쉬운-것들>아쉬운 것들</a><ul><li><a href=#디자인-시스템은-왜-필요한가>디자인 시스템은 왜 필요한가?</a></li><li><a href=#스쿼시-머지>스쿼시 머지</a></li></ul></li></ul></li><li><a href=#맺는-말>맺는 말</a></li></ul></nav></details><div class=page-content><h1 id=-차가운-스터디>🥶 차가운 스터디</h1><p><img src=/images/posts/2023/06/cds-retrospect/01.png#block alt="cold meeting"><br>네이버 커넥트재단 부스트캠프를 수료하고, 이런저런 구구절절한 과정을 거쳐 <strong>차가운 스터디</strong>라는 스터디 그룹이 만들어졌다. 위 사진은 차스가 만들어지며 찍었던 사진인데, 사실 나는 저 자리에 없었고 저 자리에 계신 두 분이 맘대로 만들어서 나를 팀장으로 씌워버렸다. 어쨌든 나도 공부를 해야했고 좋아하는 사람들이니 큰 불만 없이(?) 참여했다.</p><h1 id=-cds>🧊 CDS</h1><p>나름 다양한 주제로 스터디를 진행하다가 프로젝트를 하고싶다는 공통된 생각이 모여 디자인 시스템을 직접 만들어 보기로 정했다. 가장 큰 원인은 부캠을 하며 기획이나 디자이너가 아예 없었기 때문에 그 과정에서 겪었던 고충으로 인한 발상이었던 것으로 기억한다. 사실 워낙 농담따먹기 식으로 진행했던 기획이라 세세한 과정은 잘 모르겠다.</p><figure><img src=/images/posts/2023/06/cds-retrospect/02.png alt=image><figcaption><p>정말 산만한 기획</p></figcaption></figure><p>아무튼 그렇게 2달 정도 티스푼 공사를 야금야금 진행해서 <a href=https://github.com/c-h-w-h/cds>차가운 디자인 시스템(CDS)</a>의 첫 버전을 릴리즈하였다. 원래 계획이라면 실제 프로젝트를 CDS를 사용해 개발해보고, 자체 피드백을 해 보는 과정까지 진행하려고 했는데 지금 차가운 스터디의 새 컨텐츠 준비와 일부 팀원들의 현생 이슈가 겹쳐 조금 쉬어가고 있어서.. 미리 회고를 써 보고자 한다.</p><h2 id=고려한-요소들>고려한 요소들</h2><h3 id=접근성>접근성</h3><blockquote><p>접근성은 가능한 한 많은 사람이 웹 사이트를 사용할 수 있도록 하는 방법입니다. 통상적으로 장애인만을 대상으로 한다고 생각하지만, 실제로는 모바일 장치나 느린 네트워크 연결을 사용하는 사람들 등 다른 사용자들에게도 도움을 줍니다.<br><em>- What is accessibility? - MDN</em></p></blockquote><p><img src=/images/posts/2023/06/cds-retrospect/03.png#block alt="a11y option icon in mac"><br>지금은 시간이 많이 흘러서(내가 회고 쓰기를 무시무시하게 미뤘기 때문에) 정확한 기억은 나지 않지만.. 나에게 접근성이라고 하는 단어에 대한 인식은 딱 위 사진과 같았다. 앉아있든 서있든 뭔가 사람의 형태를 한 픽토그램에.. 돋보기같은 나에겐 필요 없는 기능들을 제공하는? <del>요새는 필요할지도 모르겠다</del></p><p>아무튼 너무 막연하고 먼 이미지로만 느껴졌기 때문에, 팀원이 이걸 고려하자! 라고 처음 말했을 때에는 전혀 와닿는 것이 없었다. 왜? 어떻게? 무엇을? 모두 물음표 투성이였다. 그런데 팀원들이 하는 것을 보고 조금씩 흉내내다보니 접근성이 무엇이고, 왜 필요한지에 대해 조금씩 배워가기 시작했다.</p><p>단순히 내가 노션이나 VS Code에서 사용하는 무수히 많은 단축키들도 접근성을 고려한 기능의 하나였고, 탭, ESC, 방향키 등 마우스가 할 일을 키보드로 할 수 있는 모든 것이 접근성이였다. 접근성은 몸이 불편한 사람에게 필요한 기능 뿐 아니라, 단락 맨 위의 인용처럼 모든 <strong>사람</strong>이 모든 <strong>환경</strong>에서 앱을 이용할 수 있도록 하는 모든 요소를 포함하는 개념이었다. 평소에 나는 단축키를 꽤나 많이 사용하는 편이어서 페어 프로그래밍같은 것들을 하다보면 누군가 가끔 놀라곤 했는데, 이런 내가 접근성을 남의 일처럼 생각했다는게 아이러니하다.</p><p>아무튼 어떻게 고려했냐 한다면 그 답은 너무 단순했다. <strong>시맨틱한 태그 사용에서 출발했다</strong>. 목적에 맞는 HTML 요소를 사용하면 70%는 브라우저와 접근성 툴이 알아서 구현해 주고, 나머지 30%만 직접 코드를 추가하면 된다. 사실 7:3도 너무 소심하게 나눴다고 생각하는데.. 한 9:1?<br>이 원칙을 걸어 놓고 구현하다 보니 웹 표준에 대해서도 더 공부하게 되고, 평소에 몰랐던 HTML 요소의 속성도 알게 되고, 꽤나 깊은 공부가 되었다. 브라우저가 해주지 않는 나머지 부분을 구현할 때 <em>일반적으로 기대되는 동작이 무엇이고, 우리는 어떻게 구현할지</em> 의 생각이 각각 달라 토론하는 과정도 너무 유익하고 재미있었다.</p><h3 id=dxdeveloper-experiment>DX(Developer Experiment)</h3><p>일전에 컴포넌트 라이브러리를 사용해 볼 일이 있었다. 막연히 편하다더라~ 하는 얘기만 듣고 있다가 어딘가의 과제를 할 때 한 번 써 보자 하는 마음으로 시작했는데, 결과는 처참했다. 물론 문서도 제대로 읽지 않았고 무엇을 사용할 수 있는지 파악을 제대로 못했던 것이 원인이었다. 가장 큰 원인은 이 만큼 컴포넌트를 지원해 줘도 어떻게 배치할지 정하는 사람의 미적 감각이기도 했는데, 아무튼 직접 컴포넌트를 구현하는 것보다 불편했다.</p><p><figure><img src=/images/posts/2023/06/cds-retrospect/04.png alt="code reviews"><figcaption><p>앞으로 살면서 이토록 뜨거운 리뷰가 또 있을까..</p></figcaption></figure><br>지가 막무가내로 쓰고 DX가 어쩌고 얘기하는 것도 웃긴 일이지만&mldr; 어쨌든 디자인 시스템 자체가 <strong>개발자의 편의</strong>라는 맥락에서 출발한 요소라고 생각했다. 그래서 나는 개인적으로 어떻게 만들어야 이걸 사용하는 개발자가 편할지에 제일 관심이 많았다.<br>어떻게 DX를 고려했냐고? 나에게 맞췄다. 100% <em>나</em> 에게 맞추진 않았지만, 우선 각자가 생각하는 대로 구현하고, 사용 방법이 각자의 생각과 다르다고 하면 코드리뷰로 토론을 시작했다. 지금 보니 조금 집요했던 것 같아서 팀원들한테 미안해지는데.. 내가 이 과정에서 얻은 만큼 우리 팀원들도 얻어 가신 게 있길 기도해본다 ㅎㅎ..</p><h2 id=잘-된-것들>잘 된 것들</h2><h3 id=성공적인-협업>성공적인 협업</h3><figure><img src=/images/posts/2023/06/cds-retrospect/05.png alt="coldstudy gather town"><figcaption><p>약속 시간 전에 하나둘 모여서 잡담하다가 그자리에서 회의를 시작한 상황</p></figcaption></figure><p>우리 스터디를 한 마디로 표현하자면 <strong>조별과제 희망편</strong>이었다. 내 대학생활은 걸어다니는 절망에 가깝긴 했는데.. 아무튼 각자 열정과 욕심이 가득한 사람들이 모여서 각자 원하는 것들을 했다. 분업도 원하는 것들을 가져가니 남는 게 없었고, 공유도 잘 되었고, 공유를 하지 않아도 될만큼 남의 코드에 관심도 많았다.</p><p>그리고 <a href=https://prayinforrain.github.io/posts/2022/12/finishing-moheyum/>모헤윰 회고</a>때 가장 큰 아쉬움이였던 <strong>기록이 남지 않는 커뮤니케이션</strong>을 가장 경계했다. 슬랙과 게더타운 음성 회의를 자주 했지만, 최대한 모든 내용을 기록했고 그 덕분에 중간부터 함께 고민하는 팀원도, 주말동안 뇌를 비우고 온 나도 그 맥락을 유지할 수 있었다. 사실
-마지막 커밋으로부터 3달이나 지난 시점에 회고를 작성하는 것이 가능한 비결도 이 규칙이다.<br>그리고 이 규칙을 의식하다보니 깃허브 레포지토리에 남기는 코드 리뷰가 폭발적으로 늘었다. 이를 구직 과정에서 어필하기도 좋았고, 취업한 이후에도 관련된 내용을 사내에서 레퍼런스로 활용하는 일도 있어 두고두고 유용했다. 특히 학습을 목적으로 프로젝트를 하시는 분이 있다면 저장 강박증 환자(?)가 되시길 강력히 권하고 싶다.</p><h2 id=아쉬운-것들>아쉬운 것들</h2><h3 id=디자인-시스템은-왜-필요한가>디자인 시스템은 왜 필요한가?</h3><p>CDS를 만들며 가장 힘들었던 부분은 <em>디자인 시스템은 어디까지 해줘야 하는가?</em> 였다. 모든 컴포넌트의 디자인까지를 라이브러리에서 제공해 줄 수도 있고, 디자인을 제외한 컴포넌트의 business logic만을 제공하는 Headless 라이브러리도 존재한다. <del>디자인 없는 디자인 시스템</del> 아무튼 커스텀의 자유와 디자인의 일관성 사이의 줄다리기는 인터넷에서도 끝나지 않는 고민들이 이어져 왔고, 우리 팀 내부에서도 그 기준이 제대로 싱크가 맞지 않아 작업이 더뎌졌던 일이 드문드문 있었다. 사실 대부분 나의 지나친 상상(?)으로 인한 문제였던 것 같지만..<br>이 부분은 사실 프로젝트를 시작할 때 미리 명확하게 정했어야 하는데, 디자인 시스템에 대해 깊이 공부하지 않았던 나는 그걸 인지하지 못하고 으헤헤 몰라 재밌당 하며 개발하다가 관련된 문제가 발생할 때마다 케바케로 토론회를 소집했다. 재미는 있었는데 효율적이진 않았다 ㅋ..</p><p><strong>디자인 시스템은 왜 필요할까?</strong> 사실 이 근본적인 물음에는 아직도 답하기 어렵다. CDS의 경우에는 학습을 목적으로 만들어졌고, 기업의 입장에서는 결과물은 그대로이면서 공수만 많이 들어가는 아주 비효율적인 작업이다. 향후 유지보수 측면에서의 장점이 있다고는 하지만, 실작업자가 아닌 기업의 의사결정권자는 공감하기도 힘들고, 실제로 저울질을 해 보면 여전히 디자인 시스템을 구축하는 것이 비용이 더 큰 경우가 있다. 구직 활동 중 이런 종류의 질문을 몇 번 받았는데, 시원하게 대답하진 못한 것 같다. 이유를 대라면 댈 수는 있지만 더 깊은 고민과 철학이 있어야 채워질 것 같은 어딘가의 빈 공간이 자꾸 남더라.</p><h3 id=스쿼시-머지>스쿼시 머지</h3><p>CDS는 코딩 컨벤션으로 <em>브랜치를 스쿼시 머지로 병합할 것</em> 이라는 규칙이 있었다. 한 팀원 분이 이전 협업에서 아주 긍정적인 경험을 하셔서 제안해 주셨고, 우리는 새로운 체험이었기 때문에 오홍홍 조와용~~ 하고 통과되었다. 확실히 깃에 로그가 깔끔하게 남는 것은 편한데.. 다음에도 스쿼시 머지를 사용할 것이냐? 하면 나는 조금 고민이 될 것 같다.</p><p>우선 CDS 자체는 디자인시스템이라는 프로젝트 특성상 컴포넌트 단위로 작업이 완전히 분리되기 때문에, 머지되고 나면 그 컴포넌트가 어떤 히스토리를 갖고 만들어졌는지 알 필요가 별로 없다. 따라서 <code>feat: ooo 컴포넌트 구현</code> 처럼 하나의 커밋으로만 남아도 괜찮다고 생각했다. 그리고 실제로 스쿼시 머지로 인해 git graph가 엄청 깔끔하고 직관적이었다.<br>그런데 나중에 내가 작업한 컴포넌트에 뭔가 아쉬운 점이나 수정해야 할 일이 생기면, 수정해야 하는 line의 코드가 어떤 맥락으로 이렇게 짜여졌는지 알 수 없었다. 만약 그 코드가 어떤 필요에 의해 그렇게 구현되었던 코드라면? 내가 그 맥락을 기억하지 못하면 똑같은 시행착오를 반복해야 한다. 또는 이번에 수정하는 사람이 최초 작업자와 다른 사람이라면?<br>아무튼 위에 내가 저장 강박증이 어쩌고 했는데, 그 내용과 약간 대치하는 규칙이기도 해서, 잘 고민해 보고 선택해야 할 것 같다는 생각이 들었다. 결정 자체를 후회하거나 하진 않는다. 새로운 경험을 했고, 언급했듯 프로젝트 특성과도 적당히 들어맞는 방식이었다.</p><h1 id=맺는-말>맺는 말</h1><figure><img src=/images/posts/2023/06/cds-retrospect/06.png alt="cds v1.0 release"><figcaption><p>다른 분들의 깃허브 피드에 뜨는 걸 몰랐는데 무척 감사한 응원을 받았다.</p></figcaption></figure><p>사실 팀원들이 <em>CDS를 하면서 각자 블로그에 글 하나 씩은 씁시다!</em> 라고 했는데, 나만 안 썼다 ㅋㅋ.. 다들 뭔가 깊이 고민한 테마가 있었는데, 문득 생각해보면 나는 이것저것 다양하게 적당히 한 느낌? 좀 더 테마를 정하고 집중해서 할 걸 하는 생각도 들고 흠..</p><p>이전에 했던 프로젝트들은 정말 아쉬움이 강렬하게 남았는데, 그동안의 아쉬움을 모아서 벼르고 있었어서 + 부캠 때부터 내가 너무 좋아하던 사람들과 협업을 하게 되어서 뿌듯하고 행복한 협업이었다. 차스는 지금도 꾸준히 스터디를 이어가고 있는데, 이 사람들이 아직 도망치지 않았다는 건 나도 그들에게 나름 괜찮은 동료였기 때문이 아닐까?(내 생각) 그러니 1.2 버전 합시다 ^^</p><p>지금 쓰는 블로그 테마에는 수정일 표시가 안되는데.. 이 글을 쓰기 시작한게 <strong>6월 18일</strong>이고 지금이 <strong>8월 14일</strong>이다. 뭔 회고 쓰는 데 두 달이나 걸렸는지 하하 참 알 수가 없는 수준의 게으름이다. 뭐 누가 보는 블로그는 아니긴 한데 그래도 가끔은 글을 쓰려고 하자 ^ㅁ^</p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>차가운 디자인 시스템(CDS) 회고</h1><div class=post-meta><time datetime=2023-06-18T16:43:32+09:00 itemprop=datePublished>2023. 6. 18.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#-차가운-스터디>🥶 차가운 스터디</a></li><li><a href=#-cds>🧊 CDS</a><ul><li><a href=#고려한-요소들>고려한 요소들</a></li><li><a href=#잘-된-것들>잘 된 것들</a></li><li><a href=#아쉬운-것들>아쉬운 것들</a></li></ul></li><li><a href=#맺는-말>맺는 말</a></li></ul></nav></details><div class=page-content><h2 id=-차가운-스터디>🥶 차가운 스터디</h2><p><img src=/images/posts/2023/06/cds-retrospect/01.png#block alt="cold meeting"><br>네이버 커넥트재단 부스트캠프를 수료하고, 이런저런 구구절절한 과정을 거쳐 <strong>차가운 스터디</strong>라는 스터디 그룹이 만들어졌다. 위 사진은 차스가 만들어지며 찍었던 사진인데, 사실 나는 저 자리에 없었고 저 자리에 계신 두 분이 맘대로 만들어서 나를 팀장으로 씌워버렸다. 어쨌든 나도 공부를 해야했고 좋아하는 사람들이니 큰 불만 없이(?) 참여했다.</p><h2 id=-cds>🧊 CDS</h2><p>나름 다양한 주제로 스터디를 진행하다가 프로젝트를 하고싶다는 공통된 생각이 모여 디자인 시스템을 직접 만들어 보기로 정했다. 가장 큰 원인은 부캠을 하며 기획이나 디자이너가 아예 없었기 때문에 그 과정에서 겪었던 고충으로 인한 발상이었던 것으로 기억한다. 사실 워낙 농담따먹기 식으로 진행했던 기획이라 세세한 과정은 잘 모르겠다.</p><figure><img src=/images/posts/2023/06/cds-retrospect/02.png alt=image><figcaption><p>정말 산만한 기획</p></figcaption></figure><p>아무튼 그렇게 2달 정도 티스푼 공사를 야금야금 진행해서 <a href=https://github.com/c-h-w-h/cds>차가운 디자인 시스템(CDS)</a>의 첫 버전을 릴리즈하였다. 원래 계획이라면 실제 프로젝트를 CDS를 사용해 개발해보고, 자체 피드백을 해 보는 과정까지 진행하려고 했는데 지금 차가운 스터디의 새 컨텐츠 준비와 일부 팀원들의 현생 이슈가 겹쳐 조금 쉬어가고 있어서.. 미리 회고를 써 보고자 한다.</p><h3 id=고려한-요소들>고려한 요소들</h3><h4 id=접근성>접근성</h4><blockquote><p>접근성은 가능한 한 많은 사람이 웹 사이트를 사용할 수 있도록 하는 방법입니다. 통상적으로 장애인만을 대상으로 한다고 생각하지만, 실제로는 모바일 장치나 느린 네트워크 연결을 사용하는 사람들 등 다른 사용자들에게도 도움을 줍니다.<br><em>- What is accessibility? - MDN</em></p></blockquote><p><img src=/images/posts/2023/06/cds-retrospect/03.png#block alt="a11y option icon in mac"><br>지금은 시간이 많이 흘러서(내가 회고 쓰기를 무시무시하게 미뤘기 때문에) 정확한 기억은 나지 않지만.. 나에게 접근성이라고 하는 단어에 대한 인식은 딱 위 사진과 같았다. 앉아있든 서있든 뭔가 사람의 형태를 한 픽토그램에.. 돋보기같은 나에겐 필요 없는 기능들을 제공하는? <del>요새는 필요할지도 모르겠다</del></p><p>아무튼 너무 막연하고 먼 이미지로만 느껴졌기 때문에, 팀원이 이걸 고려하자! 라고 처음 말했을 때에는 전혀 와닿는 것이 없었다. 왜? 어떻게? 무엇을? 모두 물음표 투성이였다. 그런데 팀원들이 하는 것을 보고 조금씩 흉내내다보니 접근성이 무엇이고, 왜 필요한지에 대해 조금씩 배워가기 시작했다.</p><p>단순히 내가 노션이나 VS Code에서 사용하는 무수히 많은 단축키들도 접근성을 고려한 기능의 하나였고, 탭, ESC, 방향키 등 마우스가 할 일을 키보드로 할 수 있는 모든 것이 접근성이였다. 접근성은 몸이 불편한 사람에게 필요한 기능 뿐 아니라, 단락 맨 위의 인용처럼 모든 <strong>사람</strong>이 모든 <strong>환경</strong>에서 앱을 이용할 수 있도록 하는 모든 요소를 포함하는 개념이었다. 평소에 나는 단축키를 꽤나 많이 사용하는 편이어서 페어 프로그래밍같은 것들을 하다보면 누군가 가끔 놀라곤 했는데, 이런 내가 접근성을 남의 일처럼 생각했다는게 아이러니하다.</p><p>아무튼 어떻게 고려했냐 한다면 그 답은 너무 단순했다. <strong>시맨틱한 태그 사용에서 출발했다</strong>. 목적에 맞는 HTML 요소를 사용하면 70%는 브라우저와 접근성 툴이 알아서 구현해 주고, 나머지 30%만 직접 코드를 추가하면 된다. 사실 7:3도 너무 소심하게 나눴다고 생각하는데.. 한 9:1?<br>이 원칙을 걸어 놓고 구현하다 보니 웹 표준에 대해서도 더 공부하게 되고, 평소에 몰랐던 HTML 요소의 속성도 알게 되고, 꽤나 깊은 공부가 되었다. 브라우저가 해주지 않는 나머지 부분을 구현할 때 <em>일반적으로 기대되는 동작이 무엇이고, 우리는 어떻게 구현할지</em> 의 생각이 각각 달라 토론하는 과정도 너무 유익하고 재미있었다.</p><h4 id=dxdeveloper-experiment>DX(Developer Experiment)</h4><p>일전에 컴포넌트 라이브러리를 사용해 볼 일이 있었다. 막연히 편하다더라~ 하는 얘기만 듣고 있다가 어딘가의 과제를 할 때 한 번 써 보자 하는 마음으로 시작했는데, 결과는 처참했다. 물론 문서도 제대로 읽지 않았고 무엇을 사용할 수 있는지 파악을 제대로 못했던 것이 원인이었다. 가장 큰 원인은 이 만큼 컴포넌트를 지원해 줘도 어떻게 배치할지 정하는 사람의 미적 감각이기도 했는데, 아무튼 직접 컴포넌트를 구현하는 것보다 불편했다.</p><p><figure><img src=/images/posts/2023/06/cds-retrospect/04.png alt="code reviews"><figcaption><p>앞으로 살면서 이토록 뜨거운 리뷰가 또 있을까..</p></figcaption></figure><br>지가 막무가내로 쓰고 DX가 어쩌고 얘기하는 것도 웃긴 일이지만&mldr; 어쨌든 디자인 시스템 자체가 <strong>개발자의 편의</strong>라는 맥락에서 출발한 요소라고 생각했다. 그래서 나는 개인적으로 어떻게 만들어야 이걸 사용하는 개발자가 편할지에 제일 관심이 많았다.<br>어떻게 DX를 고려했냐고? 나에게 맞췄다. 100% <em>나</em> 에게 맞추진 않았지만, 우선 각자가 생각하는 대로 구현하고, 사용 방법이 각자의 생각과 다르다고 하면 코드리뷰로 토론을 시작했다. 지금 보니 조금 집요했던 것 같아서 팀원들한테 미안해지는데.. 내가 이 과정에서 얻은 만큼 우리 팀원들도 얻어 가신 게 있길 기도해본다 ㅎㅎ..</p><h3 id=잘-된-것들>잘 된 것들</h3><h4 id=성공적인-협업>성공적인 협업</h4><figure><img src=/images/posts/2023/06/cds-retrospect/05.png alt="coldstudy gather town"><figcaption><p>약속 시간 전에 하나둘 모여서 잡담하다가 그자리에서 회의를 시작한 상황</p></figcaption></figure><p>우리 스터디를 한 마디로 표현하자면 <strong>조별과제 희망편</strong>이었다. 내 대학생활은 걸어다니는 절망에 가깝긴 했는데.. 아무튼 각자 열정과 욕심이 가득한 사람들이 모여서 각자 원하는 것들을 했다. 분업도 원하는 것들을 가져가니 남는 게 없었고, 공유도 잘 되었고, 공유를 하지 않아도 될만큼 남의 코드에 관심도 많았다.</p><p>그리고 <a href=https://prayinforrain.github.io/posts/2022/12/finishing-moheyum/>모헤윰 회고</a>때 가장 큰 아쉬움이였던 <strong>기록이 남지 않는 커뮤니케이션</strong>을 가장 경계했다. 슬랙과 게더타운 음성 회의를 자주 했지만, 최대한 모든 내용을 기록했고 그 덕분에 중간부터 함께 고민하는 팀원도, 주말동안 뇌를 비우고 온 나도 그 맥락을 유지할 수 있었다. 사실
+마지막 커밋으로부터 3달이나 지난 시점에 회고를 작성하는 것이 가능한 비결도 이 규칙이다.<br>그리고 이 규칙을 의식하다보니 깃허브 레포지토리에 남기는 코드 리뷰가 폭발적으로 늘었다. 이를 구직 과정에서 어필하기도 좋았고, 취업한 이후에도 관련된 내용을 사내에서 레퍼런스로 활용하는 일도 있어 두고두고 유용했다. 특히 학습을 목적으로 프로젝트를 하시는 분이 있다면 저장 강박증 환자(?)가 되시길 강력히 권하고 싶다.</p><h3 id=아쉬운-것들>아쉬운 것들</h3><h4 id=디자인-시스템은-왜-필요한가>디자인 시스템은 왜 필요한가?</h4><p>CDS를 만들며 가장 힘들었던 부분은 <em>디자인 시스템은 어디까지 해줘야 하는가?</em> 였다. 모든 컴포넌트의 디자인까지를 라이브러리에서 제공해 줄 수도 있고, 디자인을 제외한 컴포넌트의 business logic만을 제공하는 Headless 라이브러리도 존재한다. <del>디자인 없는 디자인 시스템</del> 아무튼 커스텀의 자유와 디자인의 일관성 사이의 줄다리기는 인터넷에서도 끝나지 않는 고민들이 이어져 왔고, 우리 팀 내부에서도 그 기준이 제대로 싱크가 맞지 않아 작업이 더뎌졌던 일이 드문드문 있었다. 사실 대부분 나의 지나친 상상(?)으로 인한 문제였던 것 같지만..<br>이 부분은 사실 프로젝트를 시작할 때 미리 명확하게 정했어야 하는데, 디자인 시스템에 대해 깊이 공부하지 않았던 나는 그걸 인지하지 못하고 으헤헤 몰라 재밌당 하며 개발하다가 관련된 문제가 발생할 때마다 케바케로 토론회를 소집했다. 재미는 있었는데 효율적이진 않았다 ㅋ..</p><p><strong>디자인 시스템은 왜 필요할까?</strong> 사실 이 근본적인 물음에는 아직도 답하기 어렵다. CDS의 경우에는 학습을 목적으로 만들어졌고, 기업의 입장에서는 결과물은 그대로이면서 공수만 많이 들어가는 아주 비효율적인 작업이다. 향후 유지보수 측면에서의 장점이 있다고는 하지만, 실작업자가 아닌 기업의 의사결정권자는 공감하기도 힘들고, 실제로 저울질을 해 보면 여전히 디자인 시스템을 구축하는 것이 비용이 더 큰 경우가 있다. 구직 활동 중 이런 종류의 질문을 몇 번 받았는데, 시원하게 대답하진 못한 것 같다. 이유를 대라면 댈 수는 있지만 더 깊은 고민과 철학이 있어야 채워질 것 같은 어딘가의 빈 공간이 자꾸 남더라.</p><h4 id=스쿼시-머지>스쿼시 머지</h4><p>CDS는 코딩 컨벤션으로 <em>브랜치를 스쿼시 머지로 병합할 것</em> 이라는 규칙이 있었다. 한 팀원 분이 이전 협업에서 아주 긍정적인 경험을 하셔서 제안해 주셨고, 우리는 새로운 체험이었기 때문에 오홍홍 조와용~~ 하고 통과되었다. 확실히 깃에 로그가 깔끔하게 남는 것은 편한데.. 다음에도 스쿼시 머지를 사용할 것이냐? 하면 나는 조금 고민이 될 것 같다.</p><p>우선 CDS 자체는 디자인시스템이라는 프로젝트 특성상 컴포넌트 단위로 작업이 완전히 분리되기 때문에, 머지되고 나면 그 컴포넌트가 어떤 히스토리를 갖고 만들어졌는지 알 필요가 별로 없다. 따라서 <code>feat: ooo 컴포넌트 구현</code> 처럼 하나의 커밋으로만 남아도 괜찮다고 생각했다. 그리고 실제로 스쿼시 머지로 인해 git graph가 엄청 깔끔하고 직관적이었다.<br>그런데 나중에 내가 작업한 컴포넌트에 뭔가 아쉬운 점이나 수정해야 할 일이 생기면, 수정해야 하는 line의 코드가 어떤 맥락으로 이렇게 짜여졌는지 알 수 없었다. 만약 그 코드가 어떤 필요에 의해 그렇게 구현되었던 코드라면? 내가 그 맥락을 기억하지 못하면 똑같은 시행착오를 반복해야 한다. 또는 이번에 수정하는 사람이 최초 작업자와 다른 사람이라면?<br>아무튼 위에 내가 저장 강박증이 어쩌고 했는데, 그 내용과 약간 대치하는 규칙이기도 해서, 잘 고민해 보고 선택해야 할 것 같다는 생각이 들었다. 결정 자체를 후회하거나 하진 않는다. 새로운 경험을 했고, 언급했듯 프로젝트 특성과도 적당히 들어맞는 방식이었다.</p><h2 id=맺는-말>맺는 말</h2><figure><img src=/images/posts/2023/06/cds-retrospect/06.png alt="cds v1.0 release"><figcaption><p>다른 분들의 깃허브 피드에 뜨는 걸 몰랐는데 무척 감사한 응원을 받았다.</p></figcaption></figure><p>사실 팀원들이 <em>CDS를 하면서 각자 블로그에 글 하나 씩은 씁시다!</em> 라고 했는데, 나만 안 썼다 ㅋㅋ.. 다들 뭔가 깊이 고민한 테마가 있었는데, 문득 생각해보면 나는 이것저것 다양하게 적당히 한 느낌? 좀 더 테마를 정하고 집중해서 할 걸 하는 생각도 들고 흠..</p><p>이전에 했던 프로젝트들은 정말 아쉬움이 강렬하게 남았는데, 그동안의 아쉬움을 모아서 벼르고 있었어서 + 부캠 때부터 내가 너무 좋아하던 사람들과 협업을 하게 되어서 뿌듯하고 행복한 협업이었다. 차스는 지금도 꾸준히 스터디를 이어가고 있는데, 이 사람들이 아직 도망치지 않았다는 건 나도 그들에게 나름 괜찮은 동료였기 때문이 아닐까?(내 생각) 그러니 1.2 버전 합시다 ^^</p><p>지금 쓰는 블로그 테마에는 수정일 표시가 안되는데.. 이 글을 쓰기 시작한게 <strong>6월 18일</strong>이고 지금이 <strong>8월 14일</strong>이다. 뭔 회고 쓰는 데 두 달이나 걸렸는지 하하 참 알 수가 없는 수준의 게으름이다. 뭐 누가 보는 블로그는 아니긴 한데 그래도 가끔은 글을 쓰려고 하자 ^ㅁ^</p></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/2023/11/cell-refactoring/index.html b/posts/2023/11/cell-refactoring/index.html
index e1e30e0..61988b5 100644
--- a/posts/2023/11/cell-refactoring/index.html
+++ b/posts/2023/11/cell-refactoring/index.html
@@ -1,7 +1,7 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>스프레드시트를 최적화 하자 | PrayinForRain.dev</title>
-<meta property="og:title" content="스프레드시트를 최적화 하자 | PrayinForRain.dev"><meta name=twitter:title content="스프레드시트를 최적화 하자 | PrayinForRain.dev"><meta itemprop=name content="스프레드시트를 최적화 하자 | PrayinForRain.dev"><meta name=application-name content="스프레드시트를 최적화 하자 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="사내 React 프로젝트에서 발생한 성능 이슈 극복 과정을 공유합니다."><meta itemprop=description content="사내 React 프로젝트에서 발생한 성능 이슈 극복 과정을 공유합니다."><meta property="og:description" content="사내 React 프로젝트에서 발생한 성능 이슈 극복 과정을 공유합니다."><meta name=twitter:description content="사내 React 프로젝트에서 발생한 성능 이슈 극복 과정을 공유합니다."><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/11/cell-refactoring/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-11-07T16:43:32+0900><meta property="article:published_time" content=2023-11-07T16:43:32+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"스프레드시트를 최적화 하자","author":{"@type":"Person","name":""},"datePublished":"2023-11-07","description":"사내 React 프로젝트에서 발생한 성능 이슈 극복 과정을 공유합니다.","wordCount":770,"mainEntityOfPage":"True","dateModified":"2024-04-15","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/11/cell-refactoring/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="스프레드시트를 최적화 하자 | PrayinForRain.dev"><meta name=twitter:title content="스프레드시트를 최적화 하자 | PrayinForRain.dev"><meta itemprop=name content="스프레드시트를 최적화 하자 | PrayinForRain.dev"><meta name=application-name content="스프레드시트를 최적화 하자 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="사내 React 프로젝트에서 발생한 성능 이슈 극복 과정을 공유합니다."><meta itemprop=description content="사내 React 프로젝트에서 발생한 성능 이슈 극복 과정을 공유합니다."><meta property="og:description" content="사내 React 프로젝트에서 발생한 성능 이슈 극복 과정을 공유합니다."><meta name=twitter:description content="사내 React 프로젝트에서 발생한 성능 이슈 극복 과정을 공유합니다."><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2023/11/cell-refactoring/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-11-07T16:43:32+0900><meta property="article:published_time" content=2023-11-07T16:43:32+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"스프레드시트를 최적화 하자","author":{"@type":"Person","name":""},"datePublished":"2023-11-07","description":"사내 React 프로젝트에서 발생한 성능 이슈 극복 과정을 공유합니다.","wordCount":770,"mainEntityOfPage":"True","dateModified":"2024-04-15","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/2023/11/cell-refactoring/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>스프레드시트를 최적화 하자</h1><div class=post-meta><time datetime=2023-11-07T16:43:32+09:00 itemprop=datePublished>2023. 11. 7.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#성능을-언젠가는-고려해야-하지-않을까>성능을 언젠가는 고려해야 하지 않을까?</a></li><li><a href=#원인을-파악해-보자>원인을 파악해 보자</a><ul><li><a href=#react-devtool>React Devtool</a></li><li><a href=#크롬-개발자-도구>크롬 개발자 도구</a></li></ul></li><li><a href=#문제를-해결해-보자>문제를 해결해 보자</a><ul><li><a href=#이벤트-리스너-줄이기>이벤트 리스너 줄이기</a></li><li><a href=#노드-개수-줄이기>노드 개수 줄이기</a></li></ul></li><li><a href=#진짜로-좋아졌나요>진짜로 좋아졌나요?</a></li><li><a href=#마치며>마치며</a></li><li><a href=#refs>Refs.</a></li></ul></nav></details><div class=page-content><h1 id=성능을-언젠가는-고려해야-하지-않을까>성능을 언젠가는 고려해야 하지 않을까?</h1><blockquote><p>일단 성능은 따로 고려하지 말고 일단 만드세요. 그러고 나서 문제가 생기면 그 때 고민하면 됩니다.</p></blockquote><p>웹 개발 공부를 하면서 가장 많이 들었던 말이다. 실제로 요즘은 유저 기기 성능이 많이 올라왔고, 어지간한 부분은 패키지나 브라우저가 알아서 해 주기 때문에 개발자는 당장 성능에 대한 고려를 할 필요는 없어졌다.<br>그런데 회사에서 개발을 하던 중 진짜로 성능 문제를 해결해야 하는 시간이 찾아왔다. 꽤 오래된 일인데, 회고 글을 몇 번 씩 썼다 지웠다 하다가 이제라도 정리해 본다.</p><figure><img src=/images/posts/2023/11/cell-refactoring/01.png alt="레어데이터 소개"><figcaption><p>너무 즐거운 경험과 인사이트를 줬던 내 첫 프로젝트</p></figcaption></figure><p><a href=https://raredata.kr/>내가 참여하던 프로젝트</a>는 일종의 스프레드시트와 비슷한 솔루션이다. 데이터베이스 스키마를 정의하듯 열에 타입을 정의하고, 각각의 셀은 해당 타입에 맞는 입력 UI를 팝오버로 보여주는 식이다. <a href=https://tanstack.com/table/v7/>Tanstack Table</a>과 <a href=https://tanstack.com/virtual/latest>Tanstack Virtual</a>을 사용하여 레이아웃 구성 및 가상화를 적용하였고, 각 셀은 타입별 입력 UI 컴포넌트를 prop으로 지정된 타입에 따라서 조건부로 렌더링해 주도록 되어 있었다.</p><p>행과 열에 모두 가상화가 적용되어 있으니 괜찮으리라 생각했는데, 데이터의 규모가 커지면 입력은 커녕 탐색도 어려워지는 문제가 있었다. 일단 그 임계점이 지금 사용자들의 상황과는 멀었기 때문에 신경쓰지 않고 있었으나 제품이 점점 확장되면서 더 이상은 성능 문제를 외면할 수 없게 되었다.</p><h1 id=원인을-파악해-보자>원인을 파악해 보자</h1><p>성능 문제의 원인을 파악하기 위해 <a href=https://chrome.google.com/webstore/detail/fmkadmapgofadopljbjfkapdkoienihi>React Developer Tools</a>와 구글 크롬 개발자 도구를 사용했다.</p><h2 id=react-devtool>React Devtool</h2><figure><img src=/images/posts/2023/11/cell-refactoring/02.png alt="리액트 개발자 도구의 렌더링 하이라이트"><figcaption><p>체크하면 렌더링되는 컴포넌트가 빛난다.</p></figcaption></figure><p>리액트 개발자 도구의 옵션에는 리렌더링되는 컴포넌트의 테두리가 반짝이게 하는 옵션이 있다. 이 옵션을 켜고 성능 문제가 있는 시트를 탐색해 보았고, <a href=https://tanstack.com/virtual/latest/docs/framework/react/examples/table>Tanstack이 제공하는 예시</a>와 비교해서 리렌더링에 어떤 차이가 있는지 살펴보았다. 우선 Tanstack 예시는 스크롤 될 때 마다 스크롤 영역의 Container 부분만이 리렌더링되는 반면, 우리 프로젝트는 매 스크롤마다 모든 셀이 각각 리렌더링되었다.</p><p><img src=/images/posts/2023/11/cell-refactoring/04.png alt="Tanstack Virtual 예시"></p><h2 id=크롬-개발자-도구>크롬 개발자 도구</h2><p><img src=/images/posts/2023/11/cell-refactoring/03.png alt="크롬 개발자 도구 프로파일링"></p><p>또 개발자 도구의 Performance 탭에서 성능 프로파일링도 진행하였다. 자바스크립트의 GC(가비지 컬렉팅)는 제어가 불가능하고 불규칙하게 이루어지기 때문에 아주 정확한 지표는 아니지만, 노드 개수, 메모리 크기 등의 추세를 확인하고 병목 지점을 확인하는 데에는 도움이 된다.<br>이 보고서에서 내가 얻은 인사이트는 <strong>노드 개수와 이벤트 리스너 수가 지나치게 많다</strong>는 점이었다. 메모리 크기도 매우 높았지만 당장 개발 모드에서는 React와 Emotion이 실제 배포 환경과 다르게 동작해서 더 심각하게 나타나는 것으로, 당장은 신경쓰지 않기로 했다.</p><h1 id=문제를-해결해-보자>문제를 해결해 보자</h1><h2 id=이벤트-리스너-줄이기>이벤트 리스너 줄이기</h2><p>내가 가장 눈여겨 본 부분은 이벤트 리스너였다. 당시 각 셀은 유저가 포커스를 주면 자기 타입에 맞는 UI를 보여주도록 되어 있었다. 즉, <strong>focused 상태에 해야 할 일을 셀이 가지고 있었다</strong>. 따라서 유저는 한번에 하나의 셀만을 포커스할 수 있음에도 화면에 보이는 모든 셀은 자기가 포커스 되었을 때 해야 할 일을 기다리고 있던 셈이다.</p><p>일반 스프레드 시트라면 여러 셀을 포커스할 수 있어야 하지만, 우리 프로덕트는 도메인 특성상 그런 기능이 필요할 일이 없었다. 우리는 이 부분에 착안해서 <em>모든 셀이 값만을 표시하도록 변경</em>하고 유저의 동작을 처리하는 커서 컴포넌트를 하나만 두어 이벤트 수를 크게 줄일 수 있었다.</p><h2 id=노드-개수-줄이기>노드 개수 줄이기</h2><p>위의 조치로 노드 개수가 줄어들긴 했지만 스프레드시트는 지속적인 기능 추가와 개선으로 불필요한 <code>div</code>가 지나치게 많았다. 셀 하나 당 7~8개의 <code>div</code>요소가 중첩되어 있었는데, 셀 자체를 새롭게 만들면서 이 부분도 신경써서 모두 제거했다.</p><p>추가로 CSS-in-JS인 <code>Emotion</code>도 제거하였다. 노드 수가 줄어들었어도 테이블 특성상 매우 많은 HTML 요소를 렌더링해야 하는데, CSS-in-JS를 사용한다면 그 각각의 요소에 대해 자바스크립트를 통한 스타일링이 이루어져야 한다. <code>Emotion</code>의 <a href=https://emotion.sh/docs/best-practices>Best Practice</a> 문서에서도 렌더링해야 하는 styled component 수가 많은 경우, 모든 HTML 요소를 각각의 styled component로 정의하기보다 css selector를 사용하여 통합할 것을 권장하고 있다. 그래서 우리는 테이블 내의 모든 요소를 최상위 <code>table</code> 요소에 몰아 넣고, 자식 요소들은 모두 native HTML element를 사용해서 구성하였다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=kr>const</span> <span class=nx>Table</span> <span class=o>=</span> <span class=nx>styled</span><span class=p>(</span><span class=s1>&#39;table&#39;</span><span class=p>)({</span>
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>스프레드시트를 최적화 하자</h1><div class=post-meta><time datetime=2023-11-07T16:43:32+09:00 itemprop=datePublished>2023. 11. 7.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#성능을-언젠가는-고려해야-하지-않을까>성능을 언젠가는 고려해야 하지 않을까?</a></li><li><a href=#원인을-파악해-보자>원인을 파악해 보자</a><ul><li><a href=#react-devtool>React Devtool</a></li><li><a href=#크롬-개발자-도구>크롬 개발자 도구</a></li></ul></li><li><a href=#문제를-해결해-보자>문제를 해결해 보자</a><ul><li><a href=#이벤트-리스너-줄이기>이벤트 리스너 줄이기</a></li><li><a href=#노드-개수-줄이기>노드 개수 줄이기</a></li></ul></li><li><a href=#진짜로-좋아졌나요>진짜로 좋아졌나요?</a></li><li><a href=#마치며>마치며</a></li><li><a href=#refs>Refs.</a></li></ul></nav></details><div class=page-content><h2 id=성능을-언젠가는-고려해야-하지-않을까>성능을 언젠가는 고려해야 하지 않을까?</h2><blockquote><p>일단 성능은 따로 고려하지 말고 일단 만드세요. 그러고 나서 문제가 생기면 그 때 고민하면 됩니다.</p></blockquote><p>웹 개발 공부를 하면서 가장 많이 들었던 말이다. 실제로 요즘은 유저 기기 성능이 많이 올라왔고, 어지간한 부분은 패키지나 브라우저가 알아서 해 주기 때문에 개발자는 당장 성능에 대한 고려를 할 필요는 없어졌다.<br>그런데 회사에서 개발을 하던 중 진짜로 성능 문제를 해결해야 하는 시간이 찾아왔다. 꽤 오래된 일인데, 회고 글을 몇 번 씩 썼다 지웠다 하다가 이제라도 정리해 본다.</p><figure><img src=/images/posts/2023/11/cell-refactoring/01.png alt="레어데이터 소개"><figcaption><p>너무 즐거운 경험과 인사이트를 줬던 내 첫 프로젝트</p></figcaption></figure><p><a href=https://raredata.kr/>내가 참여하던 프로젝트</a>는 일종의 스프레드시트와 비슷한 솔루션이다. 데이터베이스 스키마를 정의하듯 열에 타입을 정의하고, 각각의 셀은 해당 타입에 맞는 입력 UI를 팝오버로 보여주는 식이다. <a href=https://tanstack.com/table/v7/>Tanstack Table</a>과 <a href=https://tanstack.com/virtual/latest>Tanstack Virtual</a>을 사용하여 레이아웃 구성 및 가상화를 적용하였고, 각 셀은 타입별 입력 UI 컴포넌트를 prop으로 지정된 타입에 따라서 조건부로 렌더링해 주도록 되어 있었다.</p><p>행과 열에 모두 가상화가 적용되어 있으니 괜찮으리라 생각했는데, 데이터의 규모가 커지면 입력은 커녕 탐색도 어려워지는 문제가 있었다. 일단 그 임계점이 지금 사용자들의 상황과는 멀었기 때문에 신경쓰지 않고 있었으나 제품이 점점 확장되면서 더 이상은 성능 문제를 외면할 수 없게 되었다.</p><h2 id=원인을-파악해-보자>원인을 파악해 보자</h2><p>성능 문제의 원인을 파악하기 위해 <a href=https://chrome.google.com/webstore/detail/fmkadmapgofadopljbjfkapdkoienihi>React Developer Tools</a>와 구글 크롬 개발자 도구를 사용했다.</p><h3 id=react-devtool>React Devtool</h3><figure><img src=/images/posts/2023/11/cell-refactoring/02.png alt="리액트 개발자 도구의 렌더링 하이라이트"><figcaption><p>체크하면 렌더링되는 컴포넌트가 빛난다.</p></figcaption></figure><p>리액트 개발자 도구의 옵션에는 리렌더링되는 컴포넌트의 테두리가 반짝이게 하는 옵션이 있다. 이 옵션을 켜고 성능 문제가 있는 시트를 탐색해 보았고, <a href=https://tanstack.com/virtual/latest/docs/framework/react/examples/table>Tanstack이 제공하는 예시</a>와 비교해서 리렌더링에 어떤 차이가 있는지 살펴보았다. 우선 Tanstack 예시는 스크롤 될 때 마다 스크롤 영역의 Container 부분만이 리렌더링되는 반면, 우리 프로젝트는 매 스크롤마다 모든 셀이 각각 리렌더링되었다.</p><p><img src=/images/posts/2023/11/cell-refactoring/04.png alt="Tanstack Virtual 예시"></p><h3 id=크롬-개발자-도구>크롬 개발자 도구</h3><p><img src=/images/posts/2023/11/cell-refactoring/03.png alt="크롬 개발자 도구 프로파일링"></p><p>또 개발자 도구의 Performance 탭에서 성능 프로파일링도 진행하였다. 자바스크립트의 GC(가비지 컬렉팅)는 제어가 불가능하고 불규칙하게 이루어지기 때문에 아주 정확한 지표는 아니지만, 노드 개수, 메모리 크기 등의 추세를 확인하고 병목 지점을 확인하는 데에는 도움이 된다.<br>이 보고서에서 내가 얻은 인사이트는 <strong>노드 개수와 이벤트 리스너 수가 지나치게 많다</strong>는 점이었다. 메모리 크기도 매우 높았지만 당장 개발 모드에서는 React와 Emotion이 실제 배포 환경과 다르게 동작해서 더 심각하게 나타나는 것으로, 당장은 신경쓰지 않기로 했다.</p><h2 id=문제를-해결해-보자>문제를 해결해 보자</h2><h3 id=이벤트-리스너-줄이기>이벤트 리스너 줄이기</h3><p>내가 가장 눈여겨 본 부분은 이벤트 리스너였다. 당시 각 셀은 유저가 포커스를 주면 자기 타입에 맞는 UI를 보여주도록 되어 있었다. 즉, <strong>focused 상태에 해야 할 일을 셀이 가지고 있었다</strong>. 따라서 유저는 한번에 하나의 셀만을 포커스할 수 있음에도 화면에 보이는 모든 셀은 자기가 포커스 되었을 때 해야 할 일을 기다리고 있던 셈이다.</p><p>일반 스프레드 시트라면 여러 셀을 포커스할 수 있어야 하지만, 우리 프로덕트는 도메인 특성상 그런 기능이 필요할 일이 없었다. 우리는 이 부분에 착안해서 <em>모든 셀이 값만을 표시하도록 변경</em>하고 유저의 동작을 처리하는 커서 컴포넌트를 하나만 두어 이벤트 수를 크게 줄일 수 있었다.</p><h3 id=노드-개수-줄이기>노드 개수 줄이기</h3><p>위의 조치로 노드 개수가 줄어들긴 했지만 스프레드시트는 지속적인 기능 추가와 개선으로 불필요한 <code>div</code>가 지나치게 많았다. 셀 하나 당 7~8개의 <code>div</code>요소가 중첩되어 있었는데, 셀 자체를 새롭게 만들면서 이 부분도 신경써서 모두 제거했다.</p><p>추가로 CSS-in-JS인 <code>Emotion</code>도 제거하였다. 노드 수가 줄어들었어도 테이블 특성상 매우 많은 HTML 요소를 렌더링해야 하는데, CSS-in-JS를 사용한다면 그 각각의 요소에 대해 자바스크립트를 통한 스타일링이 이루어져야 한다. <code>Emotion</code>의 <a href=https://emotion.sh/docs/best-practices>Best Practice</a> 문서에서도 렌더링해야 하는 styled component 수가 많은 경우, 모든 HTML 요소를 각각의 styled component로 정의하기보다 css selector를 사용하여 통합할 것을 권장하고 있다. 그래서 우리는 테이블 내의 모든 요소를 최상위 <code>table</code> 요소에 몰아 넣고, 자식 요소들은 모두 native HTML element를 사용해서 구성하였다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-tsx data-lang=tsx><span class=line><span class=cl><span class=kr>const</span> <span class=nx>Table</span> <span class=o>=</span> <span class=nx>styled</span><span class=p>(</span><span class=s1>&#39;table&#39;</span><span class=p>)({</span>
 </span></span><span class=line><span class=cl>  <span class=c1>// ...
 </span></span></span><span class=line><span class=cl><span class=c1></span>  <span class=p>[</span><span class=s1>&#39;&amp; &gt; thead&#39;</span><span class=p>]</span><span class=o>:</span> <span class=p>{</span>
 </span></span><span class=line><span class=cl>    <span class=c1>// ...
@@ -26,11 +26,11 @@
 </span></span><span class=line><span class=cl>    <span class=p>&lt;/</span><span class=nt>Table</span><span class=p>&gt;</span>
 </span></span><span class=line><span class=cl>  <span class=p>)</span>
 </span></span><span class=line><span class=cl><span class=p>}</span>
-</span></span></code></pre></div><p>처음에는 마크업이 직관성 없게 보일까봐 걱정을 많이 했는데, 테이블 내의 가장 복잡한 로직인 사용자와 상호작용하는 부분이 커서 레이어로 분리되었기 때문에 망설임 없이 스타일을 제거할 수 있었다. 이 조치로 인해 이모션이 수 많은 요소들의 스타일을 CSS string으로 변환하는 과정이 생략되어 메모리 크기도 함께 줄어든 것을 확인하였다.</p><h1 id=진짜로-좋아졌나요>진짜로 좋아졌나요?</h1><p><img src=/images/posts/2023/11/cell-refactoring/05.png alt="리팩토링 후 크롬 개발자 도구 프로파일링"></p><p>작업 후 다시 프로파일링을 진행했다. 대충 봐도 꽤 많이 줄어들었고, 내부 테스트에서도 반응이 좋았다. 우선 입력이 아예 불가능한 수준인 시트에서도 자유롭게 탐색과 입력이 가능했다. 하지만 얼마나 개선되었는지 정확히 측정할 수는 없을까?</p><figure><img src=/images/posts/2023/11/cell-refactoring/06.png alt="Profiler API의 BaseDuration 비교"><figcaption><p>어떻게 하면 더 이쁘게 찍을 수 있었을까..</p></figcaption></figure><p>리액트의 <a href=https://react.dev/reference/react/Profiler>Profiler API</a>를 사용하여 성능 측정을 진행하였다. 여러 성능 지표를 알 수 있는데, <code>actualDuration</code>과 <code>baseDuration</code>중 메모이제이션을 포함한 렌더링 시간이 전자, 제외한 시간이 후자이다. 우리는 새로 작업을 하면서 메모이제이션을 최대한 제거하였기 때문에 <code>BaseDuration</code>을 콘솔에 찍어 확인했다.
-사진의 왼쪽이 비포, 오른쪽이 애프터이다. 비교해 보니 리팩토링 후 렌더링 시간이 약 78%정도 줄어들었음을 확인할 수 있었다. 뻥 좀 보태서 5배 빨라졌다고 말할 수 있지 않을까!?</p><h1 id=마치며>마치며</h1><p>앞서 말했듯 나는 계속해서 성능보단 개발 경험과 코드 퀄리티에만 집중했기 때문에, 이렇게 빨리 성능 문제를 만날 줄은 생각도 못했다. 아무튼 신입 개발자의 마인드(당시 4달차)로 새로운 것을 마구 시도하고 싶은 마음에 리서치부터 개선 방안까지 열심히 준비해서 팀원들에게 공유했고, 팀원들도 너무 긍정적으로 함께 해 주어서 너무 귀중한 경험을 할 수 있었다.</p><h1 id=refs>Refs.</h1><ul><li><a href=https://emotion.sh/docs/best-practices>Emotion - Best Practice</a></li><li><a href=https://react.dev/reference/react/Profiler>&lt;Profiler> - React</a></li><li><a href=https://tonsky.me/blog/disenchantment/ko/>소프트웨어 환멸감</a></li></ul></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+</span></span></code></pre></div><p>처음에는 마크업이 직관성 없게 보일까봐 걱정을 많이 했는데, 테이블 내의 가장 복잡한 로직인 사용자와 상호작용하는 부분이 커서 레이어로 분리되었기 때문에 망설임 없이 스타일을 제거할 수 있었다. 이 조치로 인해 이모션이 수 많은 요소들의 스타일을 CSS string으로 변환하는 과정이 생략되어 메모리 크기도 함께 줄어든 것을 확인하였다.</p><h2 id=진짜로-좋아졌나요>진짜로 좋아졌나요?</h2><p><img src=/images/posts/2023/11/cell-refactoring/05.png alt="리팩토링 후 크롬 개발자 도구 프로파일링"></p><p>작업 후 다시 프로파일링을 진행했다. 대충 봐도 꽤 많이 줄어들었고, 내부 테스트에서도 반응이 좋았다. 우선 입력이 아예 불가능한 수준인 시트에서도 자유롭게 탐색과 입력이 가능했다. 하지만 얼마나 개선되었는지 정확히 측정할 수는 없을까?</p><figure><img src=/images/posts/2023/11/cell-refactoring/06.png alt="Profiler API의 BaseDuration 비교"><figcaption><p>어떻게 하면 더 이쁘게 찍을 수 있었을까..</p></figcaption></figure><p>리액트의 <a href=https://react.dev/reference/react/Profiler>Profiler API</a>를 사용하여 성능 측정을 진행하였다. 여러 성능 지표를 알 수 있는데, <code>actualDuration</code>과 <code>baseDuration</code>중 메모이제이션을 포함한 렌더링 시간이 전자, 제외한 시간이 후자이다. 우리는 새로 작업을 하면서 메모이제이션을 최대한 제거하였기 때문에 <code>BaseDuration</code>을 콘솔에 찍어 확인했다.
+사진의 왼쪽이 비포, 오른쪽이 애프터이다. 비교해 보니 리팩토링 후 렌더링 시간이 약 78%정도 줄어들었음을 확인할 수 있었다. 뻥 좀 보태서 5배 빨라졌다고 말할 수 있지 않을까!?</p><h2 id=마치며>마치며</h2><p>앞서 말했듯 나는 계속해서 성능보단 개발 경험과 코드 퀄리티에만 집중했기 때문에, 이렇게 빨리 성능 문제를 만날 줄은 생각도 못했다. 아무튼 신입 개발자의 마인드(당시 4달차)로 새로운 것을 마구 시도하고 싶은 마음에 리서치부터 개선 방안까지 열심히 준비해서 팀원들에게 공유했고, 팀원들도 너무 긍정적으로 함께 해 주어서 너무 귀중한 경험을 할 수 있었다.</p><h2 id=refs>Refs.</h2><ul><li><a href=https://emotion.sh/docs/best-practices>Emotion - Best Practice</a></li><li><a href=https://react.dev/reference/react/Profiler>&lt;Profiler> - React</a></li><li><a href=https://tonsky.me/blog/disenchantment/ko/>소프트웨어 환멸감</a></li></ul></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/2024/07/site-optimization/index.html b/posts/2024/07/site-optimization/index.html
new file mode 100644
index 0000000..446fbe8
--- /dev/null
+++ b/posts/2024/07/site-optimization/index.html
@@ -0,0 +1,32 @@
+<!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Next.js 성능 개선기 | PrayinForRain.dev</title>
+<meta property="og:title" content="Next.js 성능 개선기 | PrayinForRain.dev"><meta name=twitter:title content="Next.js 성능 개선기 | PrayinForRain.dev"><meta itemprop=name content="Next.js 성능 개선기 | PrayinForRain.dev"><meta name=application-name content="Next.js 성능 개선기 | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Next.js는 어떻게 해야 가벼워질까?"><meta itemprop=description content="Next.js는 어떻게 해야 가벼워질까?"><meta property="og:description" content="Next.js는 어떻게 해야 가벼워질까?"><meta name=twitter:description content="Next.js는 어떻게 해야 가벼워질까?"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/2024/07/site-optimization/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta property="og:type" content="article"><meta property="og:article:published_time" content=2024-07-18T12:34:32+0900><meta property="article:published_time" content=2024-07-18T12:34:32+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"Next.js 성능 개선기","author":{"@type":"Person","name":""},"datePublished":"2024-07-18","description":"Next.js는 어떻게 해야 가벼워질까?","wordCount":1178,"mainEntityOfPage":"True","dateModified":"2024-07-18","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/2024/07/site-optimization/><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+</a><input type=checkbox id=menu-trigger class=menu-trigger>
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class="menu-link active" href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper post"><main class=page-content aria-label=Content><article><header class=header><h1 class=header-title>Next.js 성능 개선기</h1><div class=post-meta><time datetime=2024-07-18T12:34:32+09:00 itemprop=datePublished>2024. 7. 18.</time></div></header><details class=toc><summary><b>Table of Contents</b></summary><nav id=TableOfContents><ul><li><a href=#link-컴포넌트가-해주는-것들>Link 컴포넌트가 해주는 것들</a></li><li><a href=#아무튼-이미지를-최적화하자>아무튼 이미지를 최적화하자</a></li><li><a href=#얼마나-변했을까>얼마나 변했을까?</a></li><li><a href=#만든-것을-쓰도록-강제하자>만든 것을 쓰도록 강제하자</a></li><li><a href=#엄청-빠르고-가벼운-사이트>엄청 빠르고 가벼운 사이트</a></li><li><a href=#refs>Refs.</a></li></ul></nav></details><div class=page-content><p>Next.js는 프레임워크로서 주어지는 React라고 할 수 있다. 주된 차이점은 라우팅이나, 서버 컴포넌트 등의 캡슐화도 있고, 링크, 이미지 등등 여러 기본적인 요소들에 대한 최적화가 포함되어 있다.</p><p>그런데 가끔 여기 포함된 로직을 원하지 않거나 수정해야 할 때가 있다. 회사에서 있었던 일인데, 이 과정에서 Next.js의 코드를 읽으면서 꽤 소중한 경험을 했다고 생각해서 기록으로 남겨놓는다.</p><h2 id=link-컴포넌트가-해주는-것들>Link 컴포넌트가 해주는 것들</h2><p>Next.js는 내부 링크에 기본 anchor 태그를 사용하지 않을 것을 권장하고 있다. 이유는 <code>next/link</code>를 사용하지 않은 링크로 내부 페이지를 연결하면 브라우저는 이동시 마다 전체 앱을 새로 초기화하기 때문이다. 그 외에도 이런저런 최적화를 해 주긴 하는데, 그게 가장 중요하다. 이 동작은 <code>next/router</code>의 <code>router.push</code> 함수를 통해 구현되어 있다.</p><blockquote><p><strong>그냥 <code>router.push</code> 를 사용하면 안되는걸까?</strong></p><p>요 문제는 SEO와 연결되는데, 대부분의 검색 엔진은 페이지의 연결 관계를 anchor tag의 href 속성을 통해 파악하기 때문이다. 만약 <code>onClick</code> 핸들러에 <code>router.push</code>를 사용하여 페이지 이동을 구현한다면 검색 엔진은 두 페이지의 연결 관계를 제대로 이해하지 못할 것이다.</p></blockquote><p>그런데 <code>next/link</code>가 해주는 일은 하나 더 있다. <code>next/link</code> 컴포넌트는 내부 링크가 가리키는 페이지의 props를 미리 prefetch해온다. 이 동작은 다음과 같은 상황에서 동작한다.</p><ul><li>링크 요소가 브라우저 viewport에 보일 때</li><li>사용자가 링크 요소에 hover했을 때</li></ul><p><code>next/link</code>에서는 <a href=https://nextjs.org/docs/pages/api-reference/components/link#prefetch>prefetch prop</a>을 통해 이 동작을 비활성화할 수 있도록 했지만, hover시 prefetch는 비활성화가 불가능하다. 문서에서는 이 부분까지 제어하고 싶다면 직접 구현, 혹은 App router로의 마이그레이션을 권장하고 있다. 그 이유는 찾기 어려웠는데, <a href=https://github.com/vercel/next.js/discussions/11793#discussioncomment-2200803>트래픽을 늘려 Vercel의 서버 호스팅 수익을 늘리기 위함</a>이라는 추측이 가장 인상깊었다. (팩트라는 얘기는 아님)</p><p>이 prefetch 동작이 문제가 되는 것이, 게시글 리스트 페이지에서는 사용자가 원하지 않은 네트워크 요청을 드르르륵 보낼 수도 있었고, 무엇보다 prefetch의 기본값이 true였기 때문에 이 사실을 모르는 사람이 작업하면 페이지에 링크가 많은 경우(인기 검색어나 게시글 리스트가 있는 상황) 불필요한 트래픽이 발생하기 때문이다.</p><p>그래서! 링크 컴포넌트를 직접 구현하기로 했다. 내가 필요한 링크 컴포넌트의 기능들을 나열했다.</p><ul><li><code>router.push</code>를 통해 최적화된 페이지 이동이 가능해야 함</li><li>커맨드 클릭, 휠 클릭(새 탭에서 열기) 등에 대한 동작을 native처럼 지원해야 함</li><li>외부 링크의 경우 <code>target="_blank"</code>를 자동으로 추가해야 함</li><li><a href=https://github.com/vercel/next.js/discussions/11793#discussioncomment-2200803>as prop</a>을 지원해야 함; 쿼리스트링을 숨길 수 있어야 함</li><li>구현한 링크 컴포넌트가 아닌 <code>next/link</code>의 사용을 경고 또는 에러를 통해 방지해야 함</li><li>기존 <code>next/link</code> 컴포넌트를 대체하는데 어려움이 없어야 함(별도의 wrapper나 a tag를 추가 또는 제거할 필요가 없어야 함)</li></ul><p>그 이후에는 내가 정리한 요구사항에 맞춰서 구현을 했다. <a href=https://github.com/vercel/next.js/blob/canary/packages/next/src/client/link.tsx>next/link 코드</a>를 많이 참고했다. href prop으로 제공된 주소가 내부 링크인지를 판단하거나, 페이지를 이동하는 등의 외부 로직들이 잘 분리되어 있어서 코드를 읽거나 활용하기 매우 편했다.</p><h2 id=아무튼-이미지를-최적화하자>아무튼 이미지를 최적화하자</h2><p>그 다음 차례는 <code>next/image</code>다. <code>next/image</code>가 이미지를 사용처에 맞는 크기로 최적화하여 제공한다는 사실은 꽤 잘 알려져 있다. 문제는 이 동작을 위해 이미지의 크기를 고정된 숫자로 요구하는데, 이 것이 많은 개발자나 디자이너가 좋아하지 않는 제약이기 때문에 이 최적화를 제대로 활용하지 못하는 경우가 많다. 우리 프로덕트의 경우에도 반응형 레이아웃을 위해 너비나 높이를 <code>[64, 128]</code>과 같은 형태로 넣으면 전역으로 정의해둔 breakpoint 기준으로 알아서 값이 변경되는데, 이 문제 때문에 이미지 컴포넌트를 제대로 활용할 수 없었다.<br>이미지 프록시 외에 <code>next/image</code>가 진행하는 최적화는 lazy loading과 <a href=https://developer.mozilla.org/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images>mdn의 반응형 이미지 자습서</a>에 나와 있는 것들인데, <code>next/image</code> 코드를 직접 보기보다 이걸 먼저 읽으면 도움이 많이 된다.</p><p>사실 이미지는 이미지 컴포넌트 자체에 불만이 있는 것은 아니고, 아이폰에서 편집된 사진(<code>.heic</code>) 파일을 처리하는 로직을 공통화할 필요도 있었고, alt 속성 기본값 지정이나 프록시를 태울 수 없는 외부 이미지에 대한 처리 등등.. 을 통합 관리하고 싶었기 때문에 이 쪽도 수정하기로 했다. 수정은 아니고, <code>next/image</code> 컴포넌트를 내가 필요한 수정과 함께 wrapping해서 사용한다는 개념이 맞겠다.</p><p>이미지도 링크와 마찬가지로 요구사항을 정리했다.</p><ul><li>alt 속성의 기본값을 <code>""</code>로 제공해야 함</li><li>프록시를 태울 수 없는 이미지에 대해 에러를 표시하지 않고 원본 URL로 이미지를 제공해야 함</li><li><a href=https://ko.wikipedia.org/wiki/%EA%B3%A0%ED%9A%A8%EC%9C%A8_%EC%9D%B4%EB%AF%B8%EC%A7%80_%ED%8C%8C%EC%9D%BC_%ED%8F%AC%EB%A7%B7>heic</a> 포맷의 사진인 경우 표시할 수 있는 포맷으로 변환해서 보여줘야 함</li><li><a href=https://github.com/styled-system/styled-system>styled-system</a>으로 구현된 스타일 시스템에서 사용하는 반응형 width, height prop을 지원해야 함 (숫자 배열)</li></ul><p>여기서 프록시를 태울 수 없는 이미지란, <code>next.config.js</code>에서 지정하지 않은 URL이 제공하는 외부 이미지를 뜻한다. 모든 URL을 허용하도록 와일드카드를 사용하는 방법도 있지만, 위험한 URL이 허용되거나 지나치게 많은 캐시 자원을 사용할 우려가 있었기 때문에 고려하지 않았다.<br>아무튼 <code>next.config.js</code>에서 허용한 도메인에 해당하지 않는 <code>src</code>가 입력된 경우, <code>unoptimized prop</code>에 <code>true</code>를 주면 최적화 로직을 패스하고 이미지를 표시하는 것이 가능하고, 이를 이용하면 하나의 이미지 컴포넌트를 사용하면서 최적화가 가능한 녀석들만 골라서 프록시를 태울 수 있다.</p><p>이미지 작업을 하면서 <code>next/image</code> 컴포넌트의 동작에 대해 아주 잘 정리한 <a href=https://oliveyoung.tech/blog/2023-06-09/nextjs-image-optimization/>올리브영 기술블로그 포스트</a>를 발견했는데 아주 큰 도움이 되었다. 개인적으로는 올리브영에 기술블로그가 잘 운영되고 있는 것도, Next.js를 사용하고 있는 것도 의외였는데 내용이 너무 좋아서 기억에 남았음..</p><h2 id=얼마나-변했을까>얼마나 변했을까?</h2><p>링크와 이미지를 직접 만들었는데, 원래보다 더 성능이 개선되지 않았다면 마음이 많이 아플 것 같았다. 그래서 얼마나 변했는지 한번 측정해 보았다. 측정 방법은 페이지를 강력 새로고침 후, 네트워크 탭에 찍히는 transferred 용량을 확인하였다.</p><figure><img src=/images/posts/2024/07/site-optimization/02.PNG alt="payload 크기 비교"><figcaption><p>왼쪽이 최적화 전, 오른쪽이 최적화 후 payload이다.</p></figcaption></figure><p>우리 프로덕트의 콘텐츠 하나에 대한 비포/애프터를 측정해 보았다. 우선 링크의 preload 기능을 비활성화했기 때문에 불러오는 page props 자체도 많이 줄었고(사실 이 용량 자체가 큰 것도 문제지만), 이미지를 사용처 크기에 맞게 최적화해서 불러오기 때문에 이미지 용량 자체도 확 줄었다. 전반적인 payload 크기 비교 결과는 다음과 같았다.</p><table><thead><tr><th style=text-align:left>페이지</th><th style=text-align:left>before</th><th style=text-align:left>after</th><th style=text-align:left>변화</th></tr></thead><tbody><tr><td style=text-align:left>콘텐츠 리스트 페이지</td><td style=text-align:left>3.7MB</td><td style=text-align:left>689KB</td><td style=text-align:left><strong>-81%</strong></td></tr><tr><td style=text-align:left>콘텐츠 페이지 1</td><td style=text-align:left>2.0MB</td><td style=text-align:left>878KB</td><td style=text-align:left>-57%</td></tr><tr><td style=text-align:left>콘텐츠 페이지 2</td><td style=text-align:left>2.2MB</td><td style=text-align:left>873KB</td><td style=text-align:left>-61%</td></tr></tbody></table><p>링크와 이미지가 많이 들어가는 리스트 페이지에서 가장 큰 용량 차이를 보였고, 추가로 lighthouse 성능 지표가 100점이 나오는 부수적인 경사가 있었다. 구글 검색 콘솔에서도 이미지가 있는 콘텐츠들은 개선이 필요하다는 경고가 표시되었는데(전체 페이지의 약 1/3), 개선이 이루어진 후 2달간 이런 경고가 표시되는 페이지가 더 이상 발생하지 않기도 했다. 이정도면 유의미한 개선이었다고 봐도 될 것 같아 안심했다.</p><figure><img src=/images/posts/2024/07/site-optimization/01.PNG alt="lighthouse 성능 지표"><figcaption><p>반년 전엔 저게 58점이었는데&mldr;</p></figcaption></figure><h2 id=만든-것을-쓰도록-강제하자>만든 것을 쓰도록 강제하자</h2><p>그러나 만약 새로운 개발자분이 오셔서 작업을 하시게 되면 어떻게 될까? 코드베이스가 작은 규모는 아니기 때문에, 이미지와 링크 컴포넌트를 제대로 인지하지 못한 개발자라면 Next.js에서 제공하는 컴포넌트를 반사적으로 사용할지도 모른다. 이런 상황에 대한 예방책을 고민하다가 ESLint 규칙을 추가하기로 했다. <code>no-restricted-imports</code> 규칙을 사용하면 된다.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-json data-lang=json><span class=line><span class=cl><span class=c1>// .eslintrc
+</span></span></span><span class=line><span class=cl><span class=c1></span>
+</span></span><span class=line><span class=cl><span class=c1>// ...
+</span></span></span><span class=line><span class=cl><span class=c1></span>    <span class=s2>&#34;no-restricted-imports&#34;</span><span class=err>:</span> <span class=p>[</span>
+</span></span><span class=line><span class=cl>      <span class=s2>&#34;warn&#34;</span><span class=p>,</span>
+</span></span><span class=line><span class=cl>      <span class=p>{</span>
+</span></span><span class=line><span class=cl>        <span class=nt>&#34;paths&#34;</span><span class=p>:</span> <span class=p>[</span>
+</span></span><span class=line><span class=cl>          <span class=p>{</span>
+</span></span><span class=line><span class=cl>            <span class=nt>&#34;name&#34;</span><span class=p>:</span> <span class=s2>&#34;next/image&#34;</span><span class=p>,</span>
+</span></span><span class=line><span class=cl>            <span class=nt>&#34;importNames&#34;</span><span class=p>:</span> <span class=p>[</span><span class=s2>&#34;default&#34;</span><span class=p>],</span>
+</span></span><span class=line><span class=cl>            <span class=nt>&#34;message&#34;</span><span class=p>:</span> <span class=s2>&#34;@/atoms/Image 컴포넌트를 사용해 주세요.&#34;</span>
+</span></span><span class=line><span class=cl>          <span class=p>},</span>
+</span></span><span class=line><span class=cl>          <span class=p>{</span>
+</span></span><span class=line><span class=cl>            <span class=nt>&#34;name&#34;</span><span class=p>:</span> <span class=s2>&#34;next/link&#34;</span><span class=p>,</span>
+</span></span><span class=line><span class=cl>            <span class=nt>&#34;importNames&#34;</span><span class=p>:</span> <span class=p>[</span><span class=s2>&#34;default&#34;</span><span class=p>],</span>
+</span></span><span class=line><span class=cl>            <span class=nt>&#34;message&#34;</span><span class=p>:</span> <span class=s2>&#34;@/atoms/Link 컴포넌트를 사용해 주세요.&#34;</span>
+</span></span><span class=line><span class=cl>          <span class=p>},</span>
+</span></span><span class=line><span class=cl>        <span class=p>]</span>
+</span></span><span class=line><span class=cl>      <span class=p>}</span>
+</span></span><span class=line><span class=cl>    <span class=p>]</span>
+</span></span><span class=line><span class=cl><span class=c1>// ...
+</span></span></span></code></pre></div><p>배열의 첫 번째 값을 <code>warn</code>이 아니라 <code>error</code>로 사용한다면 경고가 아닌 에러가 발생하도록 할 수도 있는데, <code>layout="fill"</code>을 사용하는 일부 레거시 컴포넌트가 있어서 경고로만 정의하기로 했다. 아예 강제하는게 좋겠지만 그 컴포넌트에 대한 스펙이 어디에도 남아있지 않고, <em>&ldquo;이런 컴포넌트가 있다!&rdquo;</em> 라고만 알려줄 수 있다면 충분하다고 생각했다.</p><h2 id=엄청-빠르고-가벼운-사이트>엄청 빠르고 가벼운 사이트</h2><p>페이지의 용량이 줄어들면 어떤 이점이 있을까? 우선 트래픽이 감소하니 비용 측면에서도 이득일테고, 용량이 작은 페이지를 렌더링하면 당연히 브라우징 경험도 좋아질테고, 개인적으로는 휴대폰 요금제를 작은걸 쓰고 있어서(!) 우리 프로덕트가 제공하는 콘텐츠에 비해 너무 무겁다는 생각을 계속 갖고 있었다.</p><p>엄청 사소하고 개인적인 동기로 시작한 최적화긴 하지만, 가장 큰 장점은 SEO에서의 이점이다. 구글에서는 <a href=https://developers.google.com/search/docs/appearance/page-experience>사이트 탐색 경험이 좋은 사이트에 검색 노출에 대한 우선순위 보상을 제공한다</a>는 이야기를 지속적으로 해오고 있다. 물론 최근 밝혀지는 실험과 문서들에서 다른 큰 요인들이 대두되고 있긴 하지만 개발자 입장에서는 성능 개선을 하면서도 유입 유저 수에도 기여할 수 있으니 가장 의미가 큰 일 중 하나가 아닐까 하는 생각을 해본다.</p><p>그리고 작업 과정에서 Next.js의 레포지토리에서 코드를 직접 읽어본 경험이 뜻깊었다. 이 정도 규모의 레포지토리를 내가 읽는다고 뭐가 되나..? 하는 마음으로 시작했는데, 내 걱정보다 훨씬 쉬웠고, 많은 인사이트를 얻을 수 있었다.
+물론 기존 동작에 대해 어느정도 알고 있고 - 이 코드가 구현하려는 지향점(웹 표준, 최적화 등)에 대해 공부한 상태에서 코드를 읽었지만 Next.js의 코드 자체도 읽기 편하게 작성되어 있었기 때문에 가능했던 일인 것 같다. 스터디에서 읽었던 클린 코드를 위한 권장사항들이 오버랩되면서 이런 식으로 실제 코드에 적용할 수 있구나 느끼면서 즐거운 시간을 보냈다.</p><p>작성한 링크 / 이미지 컴포넌트의 코드는 지금 다른 코드베이스와 엮여 있는 부분이 있는데, 기회가 되면 정리해서 gist같은 곳에 공유할 수 있도록 해야겠다.</p><h2 id=refs>Refs.</h2><ul><li><a href=https://github.com/vercel/next.js/blob/canary/packages/next/src/client/link.tsx>next.js/link.tsx</a></li><li><a href=https://github.com/vercel/next.js/blob/canary/packages/next/src/client/legacy/image.tsx>next.js/legacy/image.tsx</a></li><li><a href=https://developer.mozilla.org/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images>반응형 이미지 - Web 개발 학습하기 | MDN</a></li><li><a href=https://oliveyoung.tech/blog/2023-06-09/nextjs-image-optimization/>NEXT.JS의 이미지 최적화는 어떻게 동작하는가?</a></li></ul></div></article><article id=giscus-wrapper></article><script>const giscus_light="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus.css",giscus_dark="https://cdn.jsdelivr.net/gh/prayinforrain/prayinforrain.github.io@main/static/styles/_giscus_dark.css";let giscusTheme=localStorage.getItem("theme");giscusTheme||(giscusTheme="light",window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(defaultTheme="dark"));let giscusAttributes={src:"https://giscus.app/client.js","data-repo":"prayinforrain/prayinforrain.github.io","data-repo-id":"R_kgDOItUJmA","data-category":"Announcements","data-category-id":"DIC_kwDOItUJmM4CTXa0","data-mapping":"pathname","data-reactions-enabled":"1","data-emit-metadata":"0","data-input-position":"top","data-theme":giscusTheme==="dark"?giscus_dark:giscus_light,"data-lang":"en",crossorigin:"anonymous",async:""},giscusScript=document.createElement("script");Object.entries(giscusAttributes).forEach(([e,t])=>giscusScript.setAttribute(e,t)),document.getElementById("giscus-wrapper").appendChild(giscusScript)</script></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
+theme on
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+</a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/index.html b/posts/index.html
index ca9cf03..efe5297 100644
--- a/posts/index.html
+++ b/posts/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Posts | PrayinForRain.dev</title>
-<meta property="og:title" content="Posts | PrayinForRain.dev"><meta name=twitter:title content="Posts | PrayinForRain.dev"><meta itemprop=name content="Posts | PrayinForRain.dev"><meta name=application-name content="Posts | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><link rel=first href=/posts/><link rel=last href=/posts/><meta property="og:type" content="article"><meta property="og:article:published_time" content=2023-11-07T16:43:32+0900><meta property="article:published_time" content=2023-11-07T16:43:32+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"Posts","author":{"@type":"Person","name":""},"datePublished":"2023-11-07","description":"","wordCount":0,"mainEntityOfPage":"True","dateModified":"2024-04-15","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/posts/><link href=/posts/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/posts/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Posts | PrayinForRain.dev"><meta name=twitter:title content="Posts | PrayinForRain.dev"><meta itemprop=name content="Posts | PrayinForRain.dev"><meta name=application-name content="Posts | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/posts/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><link rel=first href=/posts/><link rel=last href=/posts/><meta property="og:type" content="article"><meta property="og:article:published_time" content=2024-07-18T12:34:32+0900><meta property="article:published_time" content=2024-07-18T12:34:32+0900><script defer type=application/ld+json>{"@context":"http://schema.org","@type":"Article","headline":"Posts","author":{"@type":"Person","name":""},"datePublished":"2024-07-18","description":"","wordCount":0,"mainEntityOfPage":"True","dateModified":"2024-07-18","image":{"@type":"imageObject","url":""},"publisher":{"@type":"Organization","name":"PrayinForRain.dev"}}</script><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/posts/><link href=/posts/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/posts/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Posts</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/11/cell-refactoring/><h4 class=post-item-title>스프레드시트를 최적화 하자</h4><div class=post-item-summary>React로 성능 되찾기</div></a></div><time class=post-item-meta datetime=2023-11-07T16:43:32+0900>2023. 11. 7.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/06/cds-retrospect/><h4 class=post-item-title>차가운 디자인 시스템(CDS) 회고</h4><div class=post-item-summary>우리 v1.2 합시다</div></a></div><time class=post-item-meta datetime=2023-06-18T16:43:32+0900>2023. 6. 18.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/05/exploring-yarn-berry/><h4 class=post-item-title>얀 베리 탐험하기</h4></a></div><time class=post-item-meta datetime=2023-05-30T02:27:49+0900>2023. 5. 30.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/04/nextjs-storybook-with-pnp/><h4 class=post-item-title>Next.js Storybook에 Yarn PnP 적용하기</h4></a></div><time class=post-item-meta datetime=2023-04-27T15:32:50+0900>2023. 4. 27.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/04/numble-talk/><h4 class=post-item-title>넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고</h4></a></div><time class=post-item-meta datetime=2023-04-23T04:05:58+0900>2023. 4. 23.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/03/nodejs-for-baekjoon/><h4 class=post-item-title>백준을 위한 node.js</h4></a></div><time class=post-item-meta datetime=2023-03-30T15:17:00+0900>2023. 3. 30.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/03/npm-scripts-doesnt-work/><h4 class=post-item-title>VSCode의 NPM Scripts가 작동하지 않는 사람</h4></a></div><time class=post-item-meta datetime=2023-03-29T15:17:00+0900>2023. 3. 29.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/02/firebase-with-typescript/><h4 class=post-item-title>Firebase를 TypeScript에서 사용하기</h4></a></div><time class=post-item-meta datetime=2023-02-15T15:17:00+0900>2023. 2. 15.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/02/typescript-generic/><h4 class=post-item-title>Typescript Generic</h4></a></div><time class=post-item-meta datetime=2023-02-01T02:01:15+0900>2023. 2. 1.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/migrating-to-hugo/><h4 class=post-item-title>Hugo로 블로그를 옮기자</h4></a></div><time class=post-item-meta datetime=2023-01-30T19:17:55+0900>2023. 1. 30.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/tree-shaking/><h4 class=post-item-title>Tree Shaking</h4></a></div><time class=post-item-meta datetime=2023-01-25T17:17:15+0900>2023. 1. 25.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/ecmascript/><h4 class=post-item-title>ECMAScript</h4></a></div><time class=post-item-meta datetime=2023-01-25T16:35:01+0900>2023. 1. 25.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/browser-rendering-performance/><h4 class=post-item-title>브라우저 렌더링과 성능</h4></a></div><time class=post-item-meta datetime=2023-01-16T16:38:15+0900>2023. 1. 16.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/css-display/><h4 class=post-item-title>CSS의 display 속성</h4></a></div><time class=post-item-meta datetime=2023-01-16T16:38:15+0900>2023. 1. 16.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/size-units-in-css/><h4 class=post-item-title>CSS의 크기 단위</h4></a></div><time class=post-item-meta datetime=2023-01-13T23:39:15+0900>2023. 1. 13.</time></article><h2 class=post-year>2022</h2><article class=post-item><div class=post-item-content><a href=/posts/2022/12/finishing-moheyum/><h4 class=post-item-title>모헤윰 mo:heyum - 프로젝트 회고</h4></a></div><time class=post-item-meta datetime=2022-12-21T03:30:25+0900>2022. 12. 21.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/12/prevent-sidebar-blinking/><h4 class=post-item-title>사이드바야 그만 깜빡여라</h4></a></div><time class=post-item-meta datetime=2022-12-06T02:11:55+0900>2022. 12. 6.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/12/making-editor-markdown/><h4 class=post-item-title>마크다운 만들기 - Markdown [3/3]</h4></a></div><time class=post-item-meta datetime=2022-12-05T13:18:55+0900>2022. 12. 5.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/making-editor-getselection/><h4 class=post-item-title>마크다운 만들기 - getSelection [2/3]</h4></a></div><time class=post-item-meta datetime=2022-11-24T00:53:55+0900>2022. 11. 24.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/making-editor-contenteditable/><h4 class=post-item-title>마크다운 만들기 - contentEditable [1/3]</h4></a></div><time class=post-item-meta datetime=2022-11-22T20:36:55+0900>2022. 11. 22.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/redux-vs-recoil/><h4 class=post-item-title>Redux vs Recoil</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/npm-vs-yarn-vs-pnpm/><h4 class=post-item-title>npm vs yarn vs pnpm</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/emotion/><h4 class=post-item-title>Emotion</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Posts</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2024</h2><article class=post-item><div class=post-item-content><a href=/posts/2024/07/site-optimization/><h4 class=post-item-title>Next.js 성능 개선기</h4><div class=post-item-summary>최대한 가벼운 사이트를 만들어보자</div></a></div><time class=post-item-meta datetime=2024-07-18T12:34:32+0900>2024. 7. 18.</time></article><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/11/cell-refactoring/><h4 class=post-item-title>스프레드시트를 최적화 하자</h4><div class=post-item-summary>React로 성능 되찾기</div></a></div><time class=post-item-meta datetime=2023-11-07T16:43:32+0900>2023. 11. 7.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/06/cds-retrospect/><h4 class=post-item-title>차가운 디자인 시스템(CDS) 회고</h4><div class=post-item-summary>우리 v1.2 합시다</div></a></div><time class=post-item-meta datetime=2023-06-18T16:43:32+0900>2023. 6. 18.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/05/exploring-yarn-berry/><h4 class=post-item-title>얀 베리 탐험하기</h4></a></div><time class=post-item-meta datetime=2023-05-30T02:27:49+0900>2023. 5. 30.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/04/nextjs-storybook-with-pnp/><h4 class=post-item-title>Next.js Storybook에 Yarn PnP 적용하기</h4></a></div><time class=post-item-meta datetime=2023-04-27T15:32:50+0900>2023. 4. 27.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/04/numble-talk/><h4 class=post-item-title>넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고</h4></a></div><time class=post-item-meta datetime=2023-04-23T04:05:58+0900>2023. 4. 23.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/03/nodejs-for-baekjoon/><h4 class=post-item-title>백준을 위한 node.js</h4></a></div><time class=post-item-meta datetime=2023-03-30T15:17:00+0900>2023. 3. 30.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/03/npm-scripts-doesnt-work/><h4 class=post-item-title>VSCode의 NPM Scripts가 작동하지 않는 사람</h4></a></div><time class=post-item-meta datetime=2023-03-29T15:17:00+0900>2023. 3. 29.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/02/firebase-with-typescript/><h4 class=post-item-title>Firebase를 TypeScript에서 사용하기</h4></a></div><time class=post-item-meta datetime=2023-02-15T15:17:00+0900>2023. 2. 15.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/02/typescript-generic/><h4 class=post-item-title>Typescript Generic</h4></a></div><time class=post-item-meta datetime=2023-02-01T02:01:15+0900>2023. 2. 1.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/migrating-to-hugo/><h4 class=post-item-title>Hugo로 블로그를 옮기자</h4></a></div><time class=post-item-meta datetime=2023-01-30T19:17:55+0900>2023. 1. 30.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/tree-shaking/><h4 class=post-item-title>Tree Shaking</h4></a></div><time class=post-item-meta datetime=2023-01-25T17:17:15+0900>2023. 1. 25.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/ecmascript/><h4 class=post-item-title>ECMAScript</h4></a></div><time class=post-item-meta datetime=2023-01-25T16:35:01+0900>2023. 1. 25.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/browser-rendering-performance/><h4 class=post-item-title>브라우저 렌더링과 성능</h4></a></div><time class=post-item-meta datetime=2023-01-16T16:38:15+0900>2023. 1. 16.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/css-display/><h4 class=post-item-title>CSS의 display 속성</h4></a></div><time class=post-item-meta datetime=2023-01-16T16:38:15+0900>2023. 1. 16.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/size-units-in-css/><h4 class=post-item-title>CSS의 크기 단위</h4></a></div><time class=post-item-meta datetime=2023-01-13T23:39:15+0900>2023. 1. 13.</time></article><h2 class=post-year>2022</h2><article class=post-item><div class=post-item-content><a href=/posts/2022/12/finishing-moheyum/><h4 class=post-item-title>모헤윰 mo:heyum - 프로젝트 회고</h4></a></div><time class=post-item-meta datetime=2022-12-21T03:30:25+0900>2022. 12. 21.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/12/prevent-sidebar-blinking/><h4 class=post-item-title>사이드바야 그만 깜빡여라</h4></a></div><time class=post-item-meta datetime=2022-12-06T02:11:55+0900>2022. 12. 6.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/12/making-editor-markdown/><h4 class=post-item-title>마크다운 만들기 - Markdown [3/3]</h4></a></div><time class=post-item-meta datetime=2022-12-05T13:18:55+0900>2022. 12. 5.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/making-editor-getselection/><h4 class=post-item-title>마크다운 만들기 - getSelection [2/3]</h4></a></div><time class=post-item-meta datetime=2022-11-24T00:53:55+0900>2022. 11. 24.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/making-editor-contenteditable/><h4 class=post-item-title>마크다운 만들기 - contentEditable [1/3]</h4></a></div><time class=post-item-meta datetime=2022-11-22T20:36:55+0900>2022. 11. 22.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/redux-vs-recoil/><h4 class=post-item-title>Redux vs Recoil</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/npm-vs-yarn-vs-pnpm/><h4 class=post-item-title>npm vs yarn vs pnpm</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/emotion/><h4 class=post-item-title>Emotion</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/posts/index.xml b/posts/index.xml
index dfc70b5..d42d10f 100644
--- a/posts/index.xml
+++ b/posts/index.xml
@@ -1,41 +1,156 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Posts on PrayinForRain.dev</title><link>https://prayinforrain.github.io/posts/</link><description>Recent content in Posts on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Mon, 15 Apr 2024 16:43:32 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/posts/index.xml" rel="self" type="application/rss+xml"/><item><title>스프레드시트를 최적화 하자</title><link>https://prayinforrain.github.io/posts/2023/11/cell-refactoring/</link><pubDate>Tue, 07 Nov 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/11/cell-refactoring/</guid><description>React로 성능 되찾기</description></item><item><title>차가운 디자인 시스템(CDS) 회고</title><link>https://prayinforrain.github.io/posts/2023/06/cds-retrospect/</link><pubDate>Sun, 18 Jun 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/06/cds-retrospect/</guid><description>우리 v1.2 합시다</description></item><item><title>얀 베리 탐험하기</title><link>https://prayinforrain.github.io/posts/2023/05/exploring-yarn-berry/</link><pubDate>Tue, 30 May 2023 02:27:49 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/05/exploring-yarn-berry/</guid><description>내 레포의 위험한 녀석 최근 차가운 디자인 시스템(CDS)의 패키지 매니저를 Yarn berry로 마이그레이션 하는 작업을 하고 있다. 이유는 후술할 node_modules 자체의 단점도 있고, 내 데스크탑이 HDD를 사용하기 때문에 node_modules의 수십만 개의 파일들을 다루는 것이 너무 느려서 강력 추천했다.
-하지만 사실 나는 PnP가 어떻게 패키지들을 resolve하는지 전혀 모른다. 그저 어떻게 해야 오류 없이 쓸 수 있는지만 열심히 고민했는데, 팀원들에게 설명할 때 마다 막연히 얀베리가 잘못했겠죠~ 하는 스스로에게 자괴감을 느껴 이 기회에 한 번 Yarn PnP를 똑바로 마주해 보기로 했다.</description></item><item><title>Next.js Storybook에 Yarn PnP 적용하기</title><link>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</link><pubDate>Thu, 27 Apr 2023 15:32:50 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</guid><description>Storybook을 쓰려고 했는데 최근 Storybook을 사용할 일이 무척 많았다. 언젠가는 포스팅을 해야 할 CDS 프로젝트부터 넘블 챌린지도 있었고&amp;hellip; 처음엔 너무 낯설었지만 공통된 컴포넌트들을 미리 설계해 두고 재사용하는 것이 좀 더 깔끔한 설계가 되는 것 같아 매력을 느꼈다.
-그런데 문제는 내 작업 환경에 있었다. 꽤 연식이 된 윈도우 데스크탑에 수십가지 개발 환경을 섞어 놓고, 요새는 게임에도 못 쓰는 처참한 성능의 HDD에 레포를 두고 쓰니 종속성 패키지 설치도 커피 한 잔 타와야 하는 시간이 걸리니 Yarn Berry의 사용이 반필수가 되어버렸다.</description></item><item><title>넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고</title><link>https://prayinforrain.github.io/posts/2023/04/numble-talk/</link><pubDate>Sun, 23 Apr 2023 04:05:58 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/04/numble-talk/</guid><description>시작하게 된 계기 3월에 정말 많은 일들이 있었다. 아직 뭔가 성과라고 내세울 결과물이 없긴 하지만 그래도 무의미하진 않았다(?)고 주장할 수 있는 그런 시간이었다. 점점 일이 정리가 되고 여유가 생기면서 번아웃이 온 사람처럼 푹 늘어지는 느낌이 있었는데, 그 와중에 누가 넘블을 소개해 주셨다.
-대충.. 프로젝트 주제와 요구사항을 주고 구현을 해 보는? 프로세스의 활동으로 이해했다. 기간이 짧아 확 몰입하기 좋겠다는 생각을 해서 한 번 맛만 보기로 했다. OpenAI API를 활용해 보는 프로젝트라는 점이 관심을 끌기도 했다.</description></item><item><title>백준을 위한 node.js</title><link>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</guid><description>JS라도 백준이 하고싶어 공채 시즌이다. 개인적으로 코딩 테스트를 정말정말 자신 없어했는데, 더 이상 미룰 수 없어 야금야금 공부를 시작했다.
-불편한 점이 있다면, 백준은 자바스크립트에 아주 불친절하다는 점이다. 내가 학부생 때 잘 하지도 못하는 C++로 꾸역꾸역 문제를 풀었던 이유 중 하나이기도 했다. 그 때는 아는 PS 플랫폼이 백준 뿐이니, 자바스크립트의 어쩔 수 없는 한계인가보다 했다.
-그런데 프로그래머스를 맛 보고 나니 머리가 커져서 자바스크립트가 백준에게 부당한 차별을 받는(?) 기분이 들었다. 진짜로 화가 난 건 아니지만 그래도 화가 났다.</description></item><item><title>VSCode의 NPM Scripts가 작동하지 않는 사람</title><link>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</link><pubDate>Wed, 29 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</guid><description>늦잠자고 갓생사는 척 하는 삶이란&amp;hellip;
-맥북과 친해지기 시작한지 2달이 되었다. 윈도우 노트북을 사용하다가 갈아 탄 이유는, 맥에서 되는 것이 윈도우에서 되고, 윈도우에서 되는 것은 맥에서 안되는 문제를 너무 많이 겪었기 때문이다. 주변의 맥 유저에게 계속해서 테스트를 요청하기도 눈치보이고, 언젠가는 마주해야겠다고 생각했던 녀석이기 때문에 과감한 투자를 했다. 그 과정에서 내가 윈도우에 지나치게 강결합(?) 되어 있다는 것을 깨달았고, 지금은 맥도 윈도우도 못 쓰는 그 어딘가의 지점에 있다.
-그리고 최근에는 프로젝트를 하고 있다.</description></item><item><title>Firebase를 TypeScript에서 사용하기</title><link>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</link><pubDate>Wed, 15 Feb 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</guid><description>최근에 들어서 Firebase가 필요한 일이 있었다. 대학교에서 써본 경험은 있었는데, 오랜만에 만난 Firebase는 예전같지 않았다. 가장 큰 문제는 Firebase가 제공하는 데이터베이스인 Firestore는 문서를 가져와도 타입을 제대로 정의할 수 없다는 것.
-자동완성이 안되는 타입스크립트는.. 그.. 왜..?
-물론 데이터스키마를 따로 정의하지 않기 때문에 Firebase 라이브러리가 DocumentData 타입을 개발자에게 맞춰줄 의무는 없지만, 적어도 React.useState처럼 제네릭으로 타입을 받아 어느정도 약속해 주기를 바랐다. 아니 바라는게 아니라 되어야 하는 거 아닌가..?
-붕대 감기 우선 Firebase의 쿼리 실행 결과로 오는 DocumentData는 다음과 같이 정의되어 있다.</description></item><item><title>Typescript Generic</title><link>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</link><pubDate>Wed, 01 Feb 2023 02:01:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</guid><description>타입스크립트와 리액트를 같이 사용할 때, 우리는 useState 훅을 아래와 같이 사용합니다.
-const [name, setName] = useState&amp;lt;string&amp;gt;(&amp;#34;지상렬&amp;#34;); 뭔진 몰라도, 저 꺽쇠 괄호를 사용해서 state가 다룰 상태의 타입을 지정할 수가 있습니다. 사실 적지 않아도 알아서 추론해 주지만, 아무튼 name.split('')처럼 string 타입이 제공하는 메소드나 프로퍼티도 자동완성해주고, 아주 편하게 사용할 수 있습니다. 오늘은 저 꺽쇠괄호에 대해 알아볼거에요.
-any 타입의 문제 아무튼 이번에 가져온 예제는 스택(Stack) 자료구조입니다. 그냥 대충 만들게요.
-class Stack { arr: any[] = []; push(element: any) { this.</description></item><item><title>Hugo로 블로그를 옮기자</title><link>https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/</link><pubDate>Mon, 30 Jan 2023 19:17:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/</guid><description>알음알음 티스푼 공사로 티스토리에서 이 곳으로 블로그를 옮겼습니다. 티스토리에 있던 컨텐츠 대부분은 옮기지 않았습니다. 별 의미도 없고 너무 사적인 내용이 많았기 때문입니다. 또 티스토리만의 감성이라고 해야 하나.. 약간 그 곳에 더 맞는 포인트들이 있어서 아카이브같은 느낌으로 그냥 티스토리에 두기로 했습니다. 곳곳에 티스토리 링크가 있으니 시간을 효율적으로 버리고 싶은 분이 있다면 읽어주셔도 감사할 것 같습니다. 아무튼 옮겨야 하는 컨텐츠도 없으면서 정말 오랜 기간 삽질을 했는데, 그 과정에 대해 이야기해보려고 합니다.
-블로그를 이전하게 된 계기 아직도 저 Main Page라는 글자의 의미를 모르겠습니다.</description></item><item><title>Tree Shaking</title><link>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</link><pubDate>Wed, 25 Jan 2023 17:17:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</guid><description>용량을 절약하는 방법 웹페이지의 성능을 이야기하는 가장 직관적인 지표는 아마 페이지에 사용되는 파일의 크기일 것입니다. 파일의 크기가 무겁다면 파일을 다운받는 데 시간이 오래 걸리고, 다운로드한 파일을 읽고 렌더링 하는데도 시간이 오래 걸릴 것입니다. 따라서 번들 파일의 용량을 다이어트 하는 것은 사이트 성능에 꽤 중요한 역할을 합니다.
-위 사진은 팀 프로젝트를 하던 중 @next/bundle-analyzer 패키지를 이용해 번들 맵을 그렸던 것입니다. 클수록 번들 용량이 크다는 뜻이니 커다란 청크 위주로 최적화를 시도하면 될 것 같습니다.</description></item><item><title>ECMAScript</title><link>https://prayinforrain.github.io/posts/2023/01/ecmascript/</link><pubDate>Wed, 25 Jan 2023 16:35:01 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/ecmascript/</guid><description>Ecma international Ecma International is an industry association dedicated to the standardization of information and communication systems Emca International은 정보통신 시스템의 표준화를 위한 국제 표준화 기구입니다. &amp;gt; https://www.ecma-international.org/
-Ecma International은 Ecma 사이트에서 소개하듯, 정보통신 시스템의 표준을 만들기 위한 국제 기구입니다. C#, JSON, .u3d 확장자 등 여러 방면에서의 표준안을 제시하였으며, 개발자를 위한 IEEE같은 존재로 이해하면 될 것 같습니다.(제 생각)
-유럽에서 컴퓨터 시스템을 표준화하기 위해 설립되어서 ECMA(European Computer Manufacturers Association)라는 이름을 가지고 있으나 유럽국가 뿐 아니라 전세계의 표준으로 활용되기 위해 Ecma International로 이름을 변경하였습니다.</description></item><item><title>CSS의 display 속성</title><link>https://prayinforrain.github.io/posts/2023/01/css-display/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/css-display/</guid><description>CSS의 display 속성은 HTML element가 block인지, inline인지, 그리고 자식 element들을 어떤 식으로 표시할지를 정하는 속성입니다. 다시 말해 요소 자체가 형제 요소와 배치되는 방법과, 자식 요소를 배치하는 방법을 함께 정의하기 때문에 ‘안쪽’과 ‘바깥쪽’으로 속성을 나눌 수 있습니다.
-display: 바깥쪽 block 한 줄에는 한 요소만 올 수 있게 하는 속성입니다. inline 요소가 한 줄에 여러 개 표시 될 수 있음을 의미합니다. 만약 inline이 적용된 요소의 전후에 inline 요소를 표시할 공간이 있다면 한 줄에 표시됩니다.</description></item><item><title>브라우저 렌더링과 성능</title><link>https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/</guid><description>브라우저 렌더링 성능 최적화를 위해, 브라우저가 어떻게 HTML 문서를 화면에 그리는지 과정에 대해 이해할 필요가 있습니다. 브라우저 렌더링은 아래 사진과 같은 흐름으로 이루어집니다.
-서버로부터 HTML, CSS, JavaScript 파일을 받아와 HTML → DOM, CSS → CSSOM으로 변환하고 Render Tree를 구성합니다. Render Tree의 노드들에 대한 위치와 크기를 계산합니다. Render Tree의 루트부터 시작하여 모든 노드에 대해 계산을 수행합니다. (Layout) 계산된 결과물을 기반으로 화면에 실제 노드들을 그립니다. (Paint) 사용자의 상호작용이나 스크립트를 통한 제어 등으로 HTML 요소의 크기나 위치의 변경이 일어나면 Reflow라는 과정을 수행합니다.</description></item><item><title>CSS의 크기 단위</title><link>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</link><pubDate>Fri, 13 Jan 2023 23:39:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</guid><description>CSS의 크기 단위 CSS에는 다양한 단위가 존재합니다. 우리가 잘 아는 px와 %부터, em, rem, pt, vh, vw 등등 다양한 단위가 존재하는데요, 이 크기 단위들을 언제 어떻게 사용하면 좋을지에 대해 정리해 보았습니다.
-상대 단위와 절대 단위 px과 %를 먼저 비교해 보면, px은 우리가 알고 있는 컴퓨터 화면의 1픽셀을 의미합니다. 이는 어느 화면에서나 같은 크기를 나타내므로 절대 단위에 해당합니다. 반면 %는 보통 부모 element의 크기를 상속받아 그의 정해진 비율만큼을 나타냅니다. 즉 width: 10px;인 부모를 가진 element에 width: 50%;를 주면 5px이 되겠죠.</description></item><item><title>모헤윰 mo:heyum - 프로젝트 회고</title><link>https://prayinforrain.github.io/posts/2022/12/finishing-moheyum/</link><pubDate>Wed, 21 Dec 2022 03:30:25 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/12/finishing-moheyum/</guid><description>티스토리 블로그에 작성했던 부스트캠프 팀 프로젝트의 회고 글이다. [원본 링크]
-내가 팀원들한테 이 얘길 했나 모르겠는데.. 이 페이지 좀 이쁘다. 잘만드셨다..
-부스트캠프의 최종 팀 프로젝트로 나는 모헤윰이라는 SNS를 만들었다. 결과물은 꽤 괜찮다. [여기]에 간단한 시연 영상이 있다. 사실 팀 구인을 하던 때부터 나는 무엇을 만드는지는 크게 중요하지 않았다. 여태까지의 학습 스프린트로 이미 개발이라는 과정은 어느정도 감을 익혔고, 내가 성장함에 따라 이 과정에서 사용하는 기술만 조금씩 변화할 뿐이라고 생각했다. 따라서 내가 팀 프로젝트에서 가장 중요하게 생각했던 포인트는 협업이었다.</description></item><item><title>사이드바야 그만 깜빡여라</title><link>https://prayinforrain.github.io/posts/2022/12/prevent-sidebar-blinking/</link><pubDate>Tue, 06 Dec 2022 02:11:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/12/prevent-sidebar-blinking/</guid><description>모헤윰의 프론트엔드 앱은 Next.js로 만들어져 있습니다. 팀원 그 누구도 사용해 본 적이 없음에도 굳이 선택한 이유는 NestJS를 써 보니 프레임워크를 사용하는 것이 협업 환경에서 코드 일관성을 지키는 데 도움을 줄 것이라는 막연한 기대와, SSR을 체험해 보고 싶은 학습적인 욕심이 있었습니다. 지금 돌아보니 ‘너와 함께 하길 잘 했어!’ 하는 감상은 없네요.
-기왕 SSR을 체험한다고 시작한 프로젝트인 만큼, 성능에 신경을 쓰지 않을 수 없게 되었습니다. 그러다 제가 좋아하는 어떤 팀의 노션에서 memoization을 통한 컴포넌트 중복 렌더링 방지에 대한 글을 읽었는데요, 이 부분이 때 마침 Next.</description></item><item><title>마크다운 만들기 - Markdown [3/3]</title><link>https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/</link><pubDate>Mon, 05 Dec 2022 13:18:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/</guid><description>모헤윰의 에디터 만들기 시리즈 모아보기
-에디터 만들기 - ContentEditable [1/3]
-에디터 만들기 - getSelection [2/3]
-에디터 만들기 - Markdown [3/3]
-마지막입니다. 입력하고, 게시할 수 있게 되었으니, 이제 남은 일은 서식을 적용하는 것 뿐입니다. 마크다운 문법을 이용해 어떻게 서식을 적용할 수 있을까요? 그 과정을 정리해 보겠습니다.
-🤷 어떻게 할까요? 정말이지 어떻게 하면 좋을까요? 우선 제가 생각하는 가장 사용성이 좋은 마크다운은 깃허브의 그것이였습니다. GFM(GitHub Flavored Markdown)이라고 부르는 스펙이 있는데, 처음에는 이걸 부르는 이름이 있는 것조차 모르고 막무가내로 리버스 엔지니어링 마인드로 작업을 시작했습니다.</description></item><item><title>마크다운 만들기 - getSelection [2/3]</title><link>https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/</link><pubDate>Thu, 24 Nov 2022 00:53:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/</guid><description>모헤윰의 에디터 만들기 시리즈 모아보기
-에디터 만들기 - ContentEditable [1/3]
-에디터 만들기 - getSelection [2/3]
-에디터 만들기 - Markdown [3/3]
-아니???????? 두 번째 글이 파서가 아니였네요. 저는 사실 이 글이 2부작이길 간절히 바랬는데, 1편에서 만든 에디터에 너무 끔찍한 버그가 있어서 이에 대해 정리해 보고자 합니다. 이걸로 3시간을 씨름하고 있었지만 모헤윰의 TIL 문서가 풍성해지고 있으니 긍정적이게 생각해야겠죠?
-💡 이 글은 Window 10, Chrome 107.0.5304.107 버전을 기준으로 작성되었습니다. 일부 환경에 따라 다르게 작동하는 부분이 있을 수 있습니다.</description></item><item><title>마크다운 만들기 - contentEditable [1/3]</title><link>https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/</link><pubDate>Tue, 22 Nov 2022 20:36:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/</guid><description>모헤윰의 에디터 만들기 시리즈 모아보기
-에디터 만들기 - ContentEditable [1/3]
-에디터 만들기 - getSelection [2/3]
-에디터 만들기 - Markdown [3/3]
-모헤윰의 핵심 기능 중 하나는 마크다운 서식 지원입니다. 왜 SNS에 마크다운을 끼얹을 생각을 했나 생각해보면 최초 기획부터 있다가 기능 다이어트를 한 후 살아남았기 때문인데, 아무튼 드디어 때가 왔습니다.
-내부적으로 에디터를 외부 라이브러리를 사용하는게 좋지 않겠냐는 이야기가 나왔는데요, 결국 직접 구현해 보기로 했지만 그 과정에서 여러 레퍼런스를 얻을 수 있었습니다. 개인적으로 멋있다고 생각한 사이트 두 가지를 소개합니다.</description></item><item><title>Emotion</title><link>https://prayinforrain.github.io/posts/2022/11/emotion/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/emotion/</guid><description>🤷TL;DR CSS-in-JS는 프로젝트 규모가 커질수록 관리하기 어려운 CSS의 문제를 보완한다. emotion과 styled-components는 사용상의 차이가 거의 없으니 골라서 사용하자. 적절한 IDE Extension을 잘 활용하자. CSS-in-JS가 모든 경우에 대한 정답이 아님을 인지하자. 🎨CSS-in-JS CSS-in-JS는 HTML Element의 스타일을 자바스크립트 파일을 통해서 지정하는 방식입니다. .css 파일이 하던 일을 .js 파일에게 시키는 것이죠. CSS는 CSS이고, JS는 JS입니다. 왜 굳이 둘을 합쳐야만 하는 것일까요? 이 알 수 없는 발상을 이해하려면 우선 기존 css의 단점을 살펴보겠습니다.
-제가 학습 스프린트때 진행한 프로젝트 파일의 일부입니다.</description></item><item><title>npm vs yarn vs pnpm</title><link>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</guid><description>지금까지 저는 아무 의심 없이 npm을 사용해왔습니다. 이따금씩 node_modules 폴더가 저를 고통스럽게 했던 시간들이 있었지만, 프로젝트 초기화에 정말 이상한 행동만 하지 않으면 npm i 한 줄과 커피 한 잔으로 모든게 문제 없이 동작했으니까요. 하지만 우리는 슬랙의 어떤 분을 통해, npm보다 좋은 방법이 있음을 알고 있습니다. 이번 포스트에서는 yarn과 pnpm을 체험해 보도록 하겠습니다.
-🤷 TL;DR npm의 의존성 관리는 사실 매우 비효율적이다. 이 문제를 보완한 패키지 매니저가 yarn, pnpm이다. 각 패키지 매니저로의 마이그레이션은 매우 쉽다.</description></item><item><title>Redux vs Recoil</title><link>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</guid><description>🤷 TL;DR Redux는 안정적이지만, 선언과 사용이 복잡하다. Recoil은 사용이 매우 쉽지만 정식 버전이 없다. 프로젝트 규모에 따라 마음에 드는 라이브러리를 선택하자 🚪 서론 우리는 React를 사용할 때 보통 useState를 통해 상태를 관리합니다. useState는 정말 섹시하지만, 한 가지 너무 큰 단점이 있습니다. 바로 컴포넌트끼리 데이터를 주고받는 데 사용하기가 힘들다는 점입니다. 그 일을 하기 위해 등장한 것이 바로 상태 관리 라이브러리입니다. 상태 관리 라이브러리의 필요성에 대해 공감하지 못하는 분들을 위해 짧은 토막글을 마련해 보았습니다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Posts on PrayinForRain.dev</title><link>https://prayinforrain.github.io/posts/</link><description>Recent content in Posts on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Thu, 18 Jul 2024 12:34:32 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/posts/index.xml" rel="self" type="application/rss+xml"/><item><title>Next.js 성능 개선기</title><link>https://prayinforrain.github.io/posts/2024/07/site-optimization/</link><pubDate>Thu, 18 Jul 2024 12:34:32 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2024/07/site-optimization/</guid><description>최대한 가벼운 사이트를 만들어보자</description></item><item><title>스프레드시트를 최적화 하자</title><link>https://prayinforrain.github.io/posts/2023/11/cell-refactoring/</link><pubDate>Tue, 07 Nov 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/11/cell-refactoring/</guid><description>React로 성능 되찾기</description></item><item><title>차가운 디자인 시스템(CDS) 회고</title><link>https://prayinforrain.github.io/posts/2023/06/cds-retrospect/</link><pubDate>Sun, 18 Jun 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/06/cds-retrospect/</guid><description>우리 v1.2 합시다</description></item><item><title>얀 베리 탐험하기</title><link>https://prayinforrain.github.io/posts/2023/05/exploring-yarn-berry/</link><pubDate>Tue, 30 May 2023 02:27:49 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/05/exploring-yarn-berry/</guid><description>&lt;h2 id="내-레포의-위험한-녀석">내 레포의 위험한 녀석&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/05/exploring-yarn-berry/01.png" alt="cds issue">&lt;/p>
+&lt;p>최근 &lt;a href="https://github.com/c-h-w-h/cds">차가운 디자인 시스템(CDS)&lt;/a>의 패키지 매니저를 &lt;strong>Yarn berry&lt;/strong>로 마이그레이션 하는 작업을 하고 있다. 이유는 후술할 &lt;code>node_modules&lt;/code> 자체의 단점도 있고, 내 데스크탑이 HDD를 사용하기 때문에 &lt;code>node_modules&lt;/code>의 수십만 개의 파일들을 다루는 것이 너무 느려서 강력 추천했다.&lt;/p>
+&lt;p>하지만 사실 나는 PnP가 어떻게 패키지들을 resolve하는지 전혀 모른다. 그저 어떻게 해야 오류 없이 쓸 수 있는지만 열심히 고민했는데, 팀원들에게 설명할 때 마다 막연히 얀베리가 잘못했겠죠~ 하는 스스로에게 자괴감을 느껴 이 기회에 한 번 Yarn PnP를 똑바로 마주해 보기로 했다.&lt;/p></description></item><item><title>Next.js Storybook에 Yarn PnP 적용하기</title><link>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</link><pubDate>Thu, 27 Apr 2023 15:32:50 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</guid><description>&lt;h2 id="storybook을-쓰려고-했는데">Storybook을 쓰려고 했는데&lt;/h2>
+&lt;p>최근 Storybook을 사용할 일이 무척 많았다. 언젠가는 포스팅을 해야 할 CDS 프로젝트부터 &lt;a href="https://prayinforrain.github.io/posts/2023/04/numble-talk/">넘블 챌린지&lt;/a>도 있었고&amp;hellip; 처음엔 너무 낯설었지만 공통된 컴포넌트들을 미리 설계해 두고 재사용하는 것이 좀 더 깔끔한 설계가 되는 것 같아 매력을 느꼈다.&lt;/p>
+&lt;p>그런데 문제는 내 작업 환경에 있었다. 꽤 연식이 된 윈도우 데스크탑에 수십가지 개발 환경을 섞어 놓고, 요새는 게임에도 못 쓰는 처참한 성능의 HDD에 레포를 두고 쓰니 종속성 패키지 설치도 커피 한 잔 타와야 하는 시간이 걸리니 Yarn Berry의 사용이 반필수가 되어버렸다. 넘블 챌린지 때 Yarn Berry를 사용하고 싶었지만 애석하게도 수 많은 문제에 시달려 포기했는데, 여유가 생긴 지금 마음을 다잡고 다시 시도해 보기로 했다.&lt;/p></description></item><item><title>넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고</title><link>https://prayinforrain.github.io/posts/2023/04/numble-talk/</link><pubDate>Sun, 23 Apr 2023 04:05:58 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/04/numble-talk/</guid><description>&lt;h2 id="시작하게-된-계기">시작하게 된 계기&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/04/numble-talk/01.png" alt="ui design">&lt;/p>
+&lt;p>3월에 정말 많은 일들이 있었다. 아직 뭔가 성과라고 내세울 결과물이 없긴 하지만 그래도 무의미하진 않았다(?)고 주장할 수 있는 그런 시간이었다. 점점 일이 정리가 되고 여유가 생기면서 번아웃이 온 사람처럼 푹 늘어지는 느낌이 있었는데, 그 와중에 누가 넘블을 소개해 주셨다.&lt;/p>
+&lt;p>대충.. 프로젝트 주제와 요구사항을 주고 구현을 해 보는? 프로세스의 활동으로 이해했다. 기간이 짧아 확 몰입하기 좋겠다는 생각을 해서 한 번 맛만 보기로 했다. OpenAI API를 활용해 보는 프로젝트라는 점이 관심을 끌기도 했다. 요새 챗쌤한테 이런저런 도움도 받았고 관련 아티클도 많이 보이고..&lt;/p></description></item><item><title>백준을 위한 node.js</title><link>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</guid><description>&lt;h2 id="js라도-백준이-하고싶어">JS라도 백준이 하고싶어&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/03/nodejs-for-baekjoon/01.png" alt="Programmers IDE">&lt;/p>
+&lt;p>공채 시즌이다. 개인적으로 코딩 테스트를 정말정말 자신 없어했는데, 더 이상 미룰 수 없어 야금야금 공부를 시작했다.&lt;br>
+불편한 점이 있다면, 백준은 자바스크립트에 아주 불친절하다는 점이다. 내가 학부생 때 잘 하지도 못하는 C++로 꾸역꾸역 문제를 풀었던 이유 중 하나이기도 했다. 그 때는 아는 PS 플랫폼이 백준 뿐이니, 자바스크립트의 어쩔 수 없는 한계인가보다 했다.&lt;/p>
+&lt;p>그런데 프로그래머스를 맛 보고 나니 머리가 커져서 자바스크립트가 백준에게 부당한 차별을 받는(?) 기분이 들었다. 진짜로 화가 난 건 아니지만 그래도 화가 났다. 용서할 수가 없어 보일러플레이트 코드를 작성했다.&lt;/p></description></item><item><title>VSCode의 NPM Scripts가 작동하지 않는 사람</title><link>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</link><pubDate>Wed, 29 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</guid><description>&lt;figure>&lt;img src="https://prayinforrain.github.io/images/posts/2023/03/npm-scripts-doesnt-work/01.jpeg"
+ alt="image">&lt;figcaption>
+ &lt;p>늦잠자고 갓생사는 척 하는 삶이란&amp;hellip;&lt;/p>
+ &lt;/figcaption>
+&lt;/figure>
+
+&lt;p>맥북과 친해지기 시작한지 2달이 되었다. 윈도우 노트북을 사용하다가 갈아 탄 이유는, &lt;em>맥에서 되는 것이 윈도우에서 되고, 윈도우에서 되는 것은 맥에서 안되는&lt;/em> 문제를 너무 많이 겪었기 때문이다. 주변의 맥 유저에게 계속해서 테스트를 요청하기도 눈치보이고, 언젠가는 마주해야겠다고 생각했던 녀석이기 때문에 과감한 투자를 했다. 그 과정에서 내가 윈도우에 지나치게 강결합(?) 되어 있다는 것을 깨달았고, 지금은 맥도 윈도우도 못 쓰는 그 어딘가의 지점에 있다.&lt;/p>
+&lt;p>그리고 최근에는 프로젝트를 하고 있다. 부스트캠프에서 만난 사람들과 스터디를 하다가, 디자인 시스템을 만들어 보자는 이야기가 나와서 다같이 티스푼 공사 중이다. 이 것에 대해서도 글을 써야 하는데 오늘 포스팅할 내용은 이 것도 아니다. 회고를 안 쓰니 이야기가 많이 밀려 횡설수설 하는구나..&lt;/p></description></item><item><title>Firebase를 TypeScript에서 사용하기</title><link>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</link><pubDate>Wed, 15 Feb 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</guid><description>&lt;p>최근에 들어서 Firebase가 필요한 일이 있었다. 대학교에서 써본 경험은 있었는데, 오랜만에 만난 Firebase는 예전같지 않았다. 가장 큰 문제는 Firebase가 제공하는 데이터베이스인 Firestore는 문서를 가져와도 타입을 제대로 정의할 수 없다는 것.&lt;/p>
+&lt;figure>&lt;img src="https://prayinforrain.github.io/images/posts/2023/02/firebase-with-typescript/01.png"
+ alt="image">&lt;figcaption>
+ &lt;p>자동완성이 안되는 타입스크립트는.. 그.. 왜..?&lt;/p>
+ &lt;/figcaption>
+&lt;/figure>
+
+&lt;p>물론 데이터스키마를 따로 정의하지 않기 때문에 Firebase 라이브러리가 &lt;code>DocumentData&lt;/code> 타입을 개발자에게 맞춰줄 의무는 없지만, 적어도 &lt;code>React.useState&lt;/code>처럼 제네릭으로 타입을 받아 어느정도 약속해 주기를 바랐다. 아니 바라는게 아니라 되어야 하는 거 아닌가..?&lt;/p>
+&lt;h2 id="붕대-감기">붕대 감기&lt;/h2>
+&lt;p>우선 Firebase의 쿼리 실행 결과로 오는 &lt;code>DocumentData&lt;/code>는 다음과 같이 정의되어 있다.&lt;/p></description></item><item><title>Typescript Generic</title><link>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</link><pubDate>Wed, 01 Feb 2023 02:01:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</guid><description>&lt;p>타입스크립트와 리액트를 같이 사용할 때, 우리는 &lt;code>useState&lt;/code> 훅을 아래와 같이 사용합니다.&lt;/p>
+&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-typescript" data-lang="typescript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="nx">name&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">setName&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">useState&lt;/span>&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">string&lt;/span>&lt;span class="p">&amp;gt;(&lt;/span>&lt;span class="s2">&amp;#34;지상렬&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>뭔진 몰라도, 저 꺽쇠 괄호를 사용해서 state가 다룰 상태의 타입을 지정할 수가 있습니다. 사실 적지 않아도 알아서 추론해 주지만, 아무튼 &lt;code>name.split('')&lt;/code>처럼 string 타입이 제공하는 메소드나 프로퍼티도 자동완성해주고, 아주 편하게 사용할 수 있습니다. 오늘은 저 꺽쇠괄호에 대해 알아볼거에요.&lt;/p>
+&lt;h2 id="any-타입의-문제">any 타입의 문제&lt;/h2>
+&lt;p>아무튼 이번에 가져온 예제는 스택(Stack) 자료구조입니다. 그냥 대충 만들게요.&lt;/p>
+&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-typescript" data-lang="typescript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">class&lt;/span> &lt;span class="nx">Stack&lt;/span> &lt;span class="p">{&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">arr&lt;/span>: &lt;span class="kt">any&lt;/span>&lt;span class="p">[]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[];&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">element&lt;/span>: &lt;span class="kt">any&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">arr&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">element&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">arr&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">length&lt;/span>&lt;span class="p">;&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">pop() {&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">arr&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">pop&lt;/span>&lt;span class="p">();&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
+&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-typescript" data-lang="typescript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">stringStack&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="k">new&lt;/span> &lt;span class="nx">Stack&lt;/span>&lt;span class="p">();&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">stringStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;크와앙&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">console&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">log&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">stringStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">pop&lt;/span>&lt;span class="p">().&lt;/span>&lt;span class="nx">slice&lt;/span>&lt;span class="p">());&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">numberStack&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="k">new&lt;/span> &lt;span class="nx">Stack&lt;/span>&lt;span class="p">();&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">numberStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">console&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">log&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">numberStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">pop&lt;/span>&lt;span class="p">().&lt;/span>&lt;span class="nx">slice&lt;/span>&lt;span class="p">());&lt;/span> &lt;span class="c1">// TypeError: numberStack.pop(...).slice is not a function
+&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>당연히 &lt;code>numberStack&lt;/code> 부분에서 에러가 나지만, 이 문제를 &lt;strong>코드를 실행하기 전까진 알 수 없습니다&lt;/strong>. &lt;code>Stack&lt;/code>이 관리하는 것은 &lt;code>any&lt;/code> 타입의 배열이니까요.&lt;/p></description></item><item><title>Hugo로 블로그를 옮기자</title><link>https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/</link><pubDate>Mon, 30 Jan 2023 19:17:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/</guid><description>&lt;p>알음알음 티스푼 공사로 티스토리에서 이 곳으로 블로그를 옮겼습니다. 티스토리에 있던 컨텐츠 대부분은 옮기지 않았습니다. 별 의미도 없고 너무 사적인 내용이 많았기 때문입니다. 또 티스토리만의 감성이라고 해야 하나.. 약간 그 곳에 더 맞는 포인트들이 있어서 아카이브같은 느낌으로 그냥 티스토리에 두기로 했습니다. 곳곳에 티스토리 링크가 있으니 시간을 효율적으로 버리고 싶은 분이 있다면 읽어주셔도 감사할 것 같습니다.
+아무튼 옮겨야 하는 컨텐츠도 없으면서 정말 오랜 기간 삽질을 했는데, 그 과정에 대해 이야기해보려고 합니다.&lt;/p>
+&lt;h2 id="블로그를-이전하게-된-계기">블로그를 이전하게 된 계기&lt;/h2>
+&lt;p>&lt;figure>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/migrating-to-hugo/01.png"
+ alt="image">&lt;figcaption>
+ &lt;p>아직도 저 Main Page라는 글자의 의미를 모르겠습니다..&lt;/p></description></item><item><title>Tree Shaking</title><link>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</link><pubDate>Wed, 25 Jan 2023 17:17:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</guid><description>&lt;h2 id="용량을-절약하는-방법">용량을 절약하는 방법&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/tree-shaking/01.png" alt="bundle_map">&lt;/p>
+&lt;p>웹페이지의 성능을 이야기하는 가장 직관적인 지표는 아마 페이지에 사용되는 &lt;strong>파일의 크기&lt;/strong>일 것입니다. 파일의 크기가 무겁다면 파일을 다운받는 데 시간이 오래 걸리고, 다운로드한 파일을 읽고 렌더링 하는데도 시간이 오래 걸릴 것입니다. 따라서 번들 파일의 용량을 다이어트 하는 것은 사이트 성능에 꽤 중요한 역할을 합니다.&lt;/p>
+&lt;p>위 사진은 팀 프로젝트를 하던 중 &lt;code>@next/bundle-analyzer&lt;/code> 패키지를 이용해 번들 맵을 그렸던 것입니다. 클수록 번들 용량이 크다는 뜻이니 커다란 청크 위주로 최적화를 시도하면 될 것 같습니다. 그런데 어떻게 용량을 줄일 수 있을까요? gzip을 통해 파일을 압축해서 보내는 방법도 있겠지만, 코드적으로 최적화할 수 있는 방법은 &lt;code>Tree-shaking&lt;/code>입니다.&lt;/p></description></item><item><title>ECMAScript</title><link>https://prayinforrain.github.io/posts/2023/01/ecmascript/</link><pubDate>Wed, 25 Jan 2023 16:35:01 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/ecmascript/</guid><description>&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/ecmascript/01.png" alt="untitled">&lt;/p>
+&lt;h2 id="ecma-international">Ecma international&lt;/h2>
+&lt;blockquote>
+&lt;p>&lt;strong>Ecma International&lt;/strong> is an industry association dedicated to the standardization of information and communication systems
+&lt;em>Emca International은 정보통신 시스템의 표준화를 위한 국제 표준화 기구입니다.&lt;/em> &amp;gt; &lt;a href="https://www.ecma-international.org/">https://www.ecma-international.org/&lt;/a>&lt;/p>
+&lt;/blockquote>
+&lt;p>Ecma International은 Ecma 사이트에서 소개하듯, 정보통신 시스템의 표준을 만들기 위한 국제 기구입니다. C#, JSON, .u3d 확장자 등 여러 방면에서의 표준안을 제시하였으며, 개발자를 위한 IEEE같은 존재로 이해하면 될 것 같습니다.(제 생각)&lt;/p>
+&lt;p>유럽에서 컴퓨터 시스템을 표준화하기 위해 설립되어서 &lt;strong>ECMA&lt;/strong>(&lt;em>European Computer Manufacturers Association&lt;/em>)라는 이름을 가지고 있으나 유럽국가 뿐 아니라 전세계의 표준으로 활용되기 위해 &lt;strong>Ecma International&lt;/strong>로 이름을 변경하였습니다. &lt;strong>ECMA&lt;/strong> 자체는 두문자어이지만 지금의 이름은 하나의 고유명사로 사용되는 셈이죠. 따라서 &lt;strong>Ecma&lt;/strong>로 표기하는 것이 맞습니다.&lt;/p></description></item><item><title>CSS의 display 속성</title><link>https://prayinforrain.github.io/posts/2023/01/css-display/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/css-display/</guid><description>&lt;p>CSS의 &lt;code>display&lt;/code> 속성은 HTML element가 block인지, inline인지, 그리고 자식 element들을 어떤 식으로 표시할지를 정하는 속성입니다. 다시 말해 요소 자체가 형제 요소와 배치되는 방법과, 자식 요소를 배치하는 방법을 함께 정의하기 때문에 ‘&lt;strong>안쪽&lt;/strong>’과 ‘&lt;strong>바깥쪽&lt;/strong>’으로 속성을 나눌 수 있습니다.&lt;/p>
+&lt;h2 id="display">display:&lt;/h2>
+&lt;h3 id="바깥쪽">바깥쪽&lt;/h3>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/css-display/01.png" alt="Untitled">&lt;/p>
+&lt;ul>
+&lt;li>&lt;code>block&lt;/code>
+&lt;ul>
+&lt;li>한 줄에는 한 요소만 올 수 있게 하는 속성입니다.&lt;/li>
+&lt;/ul>
+&lt;/li>
+&lt;li>&lt;code>inline&lt;/code>
+&lt;ul>
+&lt;li>요소가 한 줄에 여러 개 표시 될 수 있음을 의미합니다. 만약 &lt;code>inline&lt;/code>이 적용된 요소의 전후에 &lt;code>inline&lt;/code> 요소를 표시할 공간이 있다면 한 줄에 표시됩니다.&lt;/li>
+&lt;/ul>
+&lt;/li>
+&lt;/ul>
+&lt;p>사진의 div들은 각각 &lt;code>inline&lt;/code>, &lt;code>block&lt;/code> 속성을 지정하였습니다. 보이는 것과 같이 &lt;code>block&lt;/code> 속성의 요소는 한 줄에 하나만 존재할 수 있으며, &lt;code>inline&lt;/code> 속성은 충분한 공간이 있으면 한 줄에 표시됩니다. &lt;code>span&lt;/code>과 &lt;code>p&lt;/code>태그의 차이와 비슷합니다.&lt;/p></description></item><item><title>브라우저 렌더링과 성능</title><link>https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/</guid><description>&lt;h2 id="브라우저-렌더링">브라우저 렌더링&lt;/h2>
+&lt;p>성능 최적화를 위해, 브라우저가 어떻게 HTML 문서를 화면에 그리는지 과정에 대해 이해할 필요가 있습니다. 브라우저 렌더링은 아래 사진과 같은 흐름으로 이루어집니다.&lt;/p>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/browser-rendering-performance/01.png" alt="Untitled">&lt;/p>
+&lt;ul>
+&lt;li>서버로부터 HTML, CSS, JavaScript 파일을 받아와 HTML → DOM, CSS → CSSOM으로 변환하고 Render Tree를 구성합니다.&lt;/li>
+&lt;li>Render Tree의 노드들에 대한 위치와 크기를 계산합니다. Render Tree의 루트부터 시작하여 모든 노드에 대해 계산을 수행합니다. (Layout)&lt;/li>
+&lt;li>계산된 결과물을 기반으로 화면에 실제 노드들을 그립니다. (Paint)&lt;/li>
+&lt;li>사용자의 상호작용이나 스크립트를 통한 제어 등으로 HTML 요소의 크기나 위치의 변경이 일어나면 &lt;code>Reflow&lt;/code>라는 과정을 수행합니다.
+&lt;ul>
+&lt;li>Reflow는 Render Tree 구성부터 &lt;strong>모든 작업을 다시 수행&lt;/strong>합니다.&lt;/li>
+&lt;li>만약 레이아웃 자체에는 변화가 없고, 색상이나 visibility 등의 변경만 있는 경우에는 Paint 과정만을 다시 수행합니다. (Repaint)&lt;/li>
+&lt;li>따라서 비용이 큰 &lt;strong>Reflow의 발생을 최대한 줄이는 것이 중요&lt;/strong>합니다.&lt;/li>
+&lt;/ul>
+&lt;/li>
+&lt;/ul>
+&lt;iframe width="560" height="315" src="https://www.youtube.com/embed/TZz9VHjJzMk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>&lt;/iframe>
+&lt;p>이거 되게 좋은 내용인 것 같아요 CSS의 &lt;code>will-change&lt;/code>를 통헤 불필요한 GPU 점유를 줄이는 방법도 소개하고 있네요!&lt;/p></description></item><item><title>CSS의 크기 단위</title><link>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</link><pubDate>Fri, 13 Jan 2023 23:39:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</guid><description>&lt;h2 id="css의-크기-단위">CSS의 크기 단위&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/size-units-in-css/01.png" alt="Untitled">&lt;/p>
+&lt;p>CSS에는 다양한 단위가 존재합니다. 우리가 잘 아는 &lt;code>px&lt;/code>와 &lt;code>%&lt;/code>부터, &lt;code>em&lt;/code>, &lt;code>rem&lt;/code>, &lt;code>pt&lt;/code>, &lt;code>vh&lt;/code>, &lt;code>vw&lt;/code> 등등 다양한 단위가 존재하는데요, 이 크기 단위들을 언제 어떻게 사용하면 좋을지에 대해 정리해 보았습니다.&lt;/p>
+&lt;h2 id="상대-단위와-절대-단위">상대 단위와 절대 단위&lt;/h2>
+&lt;p>&lt;code>px&lt;/code>과 &lt;code>%&lt;/code>를 먼저 비교해 보면, &lt;code>px&lt;/code>은 우리가 알고 있는 컴퓨터 화면의 1픽셀을 의미합니다. 이는 어느 화면에서나 같은 크기를 나타내므로 &lt;strong>절대 단위&lt;/strong>에 해당합니다. 반면 &lt;code>%&lt;/code>는 보통 부모 element의 크기를 상속받아 그의 정해진 비율만큼을 나타냅니다. 즉 &lt;code>width: 10px;&lt;/code>인 부모를 가진 element에 &lt;code>width: 50%;&lt;/code>를 주면 5px이 되겠죠. 이렇게 상황에 따라서 다른 값을 갖는 단위를 &lt;strong>상대 단위&lt;/strong>라고 부릅니다.&lt;/p></description></item><item><title>모헤윰 mo:heyum - 프로젝트 회고</title><link>https://prayinforrain.github.io/posts/2022/12/finishing-moheyum/</link><pubDate>Wed, 21 Dec 2022 03:30:25 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/12/finishing-moheyum/</guid><description>&lt;blockquote>
+&lt;p>티스토리 블로그에 작성했던 부스트캠프 팀 프로젝트의 회고 글이다. &lt;a href="https://prayinforrain.tistory.com/80">[원본 링크]&lt;/a>&lt;/p>
+&lt;/blockquote>
+&lt;figure>&lt;img src="https://prayinforrain.github.io/images/posts/2022/12/finishing-moheyum/moheyum_01.png"
+ alt="image">&lt;figcaption>
+ &lt;p>내가 팀원들한테 이 얘길 했나 모르겠는데.. 이 페이지 좀 이쁘다. 잘만드셨다..&lt;/p>
+ &lt;/figcaption>
+&lt;/figure>
+
+&lt;p>부스트캠프의 최종 팀 프로젝트로 나는 &lt;strong>모헤윰&lt;/strong>이라는 SNS를 만들었다. 결과물은 꽤 괜찮다. &lt;a href="https://youtu.be/9mVinynuUTw">[여기]&lt;/a>에 간단한 시연 영상이 있다. 사실 팀 구인을 하던 때부터 나는 무엇을 만드는지는 크게 중요하지 않았다. 여태까지의 학습 스프린트로 이미 개발이라는 과정은 어느정도 감을 익혔고, 내가 성장함에 따라 이 과정에서 사용하는 기술만 조금씩 변화할 뿐이라고 생각했다. 따라서 내가 팀 프로젝트에서 가장 중요하게 생각했던 포인트는 협업이었다.&lt;/p></description></item><item><title>사이드바야 그만 깜빡여라</title><link>https://prayinforrain.github.io/posts/2022/12/prevent-sidebar-blinking/</link><pubDate>Tue, 06 Dec 2022 02:11:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/12/prevent-sidebar-blinking/</guid><description>&lt;p>&lt;strong>모헤윰&lt;/strong>의 프론트엔드 앱은 &lt;code>Next.js&lt;/code>로 만들어져 있습니다. 팀원 그 누구도 사용해 본 적이 없음에도 굳이 선택한 이유는 &lt;code>NestJS&lt;/code>를 써 보니 프레임워크를 사용하는 것이 협업 환경에서 코드 일관성을 지키는 데 도움을 줄 것이라는 막연한 기대와, &lt;code>SSR&lt;/code>을 체험해 보고 싶은 학습적인 욕심이 있었습니다. 지금 돌아보니 ‘너와 함께 하길 잘 했어!’ 하는 감상은 없네요.&lt;/p>
+&lt;p>기왕 SSR을 체험한다고 시작한 프로젝트인 만큼, 성능에 신경을 쓰지 않을 수 없게 되었습니다. 그러다 제가 좋아하는 어떤 팀의 노션에서 &lt;code>memoization&lt;/code>을 통한 컴포넌트 중복 렌더링 방지에 대한 글을 읽었는데요, 이 부분이 때 마침 &lt;a href="https://www.notion.so/next-js-13-app-dir-11191a66a5564a25ba882c8a835afd13">Next.js 13을 적용하지 못해 포기해야만 했던&lt;/a> 아픈 상처를 자극하고 있어서 모헤윰에도 시도해 보기로 하였습니다.&lt;/p></description></item><item><title>마크다운 만들기 - Markdown [3/3]</title><link>https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/</link><pubDate>Mon, 05 Dec 2022 13:18:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/</guid><description>&lt;p>&lt;strong>모헤윰&lt;/strong>의 에디터 만들기 시리즈 모아보기&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/">에디터 만들기 - ContentEditable [1/3]&lt;/a>&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/">에디터 만들기 - getSelection [2/3]&lt;/a>&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/">에디터 만들기 - Markdown [3/3]&lt;/a>&lt;/p>
+&lt;hr>
+&lt;p>마지막입니다. 입력하고, 게시할 수 있게 되었으니, 이제 남은 일은 서식을 적용하는 것 뿐입니다. 마크다운 문법을 이용해 어떻게 서식을 적용할 수 있을까요? 그 과정을 정리해 보겠습니다.&lt;/p>
+&lt;h2 id="-어떻게-할까요">🤷 어떻게 할까요?&lt;/h2>
+&lt;p>정말이지 어떻게 하면 좋을까요? 우선 제가 생각하는 가장 사용성이 좋은 마크다운은 깃허브의 그것이였습니다. &lt;a href="https://github.github.com/gfm/">GFM(GitHub Flavored Markdown)&lt;/a>이라고 부르는 스펙이 있는데, 처음에는 이걸 부르는 이름이 있는 것조차 모르고 막무가내로 리버스 엔지니어링 마인드로 작업을 시작했습니다. 아래 사진처럼 아무 이슈나 들어가서 댓글 창에 실험을 하면서요.&lt;/p></description></item><item><title>마크다운 만들기 - getSelection [2/3]</title><link>https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/</link><pubDate>Thu, 24 Nov 2022 00:53:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/</guid><description>&lt;p>&lt;strong>모헤윰&lt;/strong>의 에디터 만들기 시리즈 모아보기&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/">에디터 만들기 - ContentEditable [1/3]&lt;/a>&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/">에디터 만들기 - getSelection [2/3]&lt;/a>&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/">에디터 만들기 - Markdown [3/3]&lt;/a>&lt;/p>
+&lt;hr>
+&lt;p>아니???????? 두 번째 글이 파서가 아니였네요. 저는 사실 이 글이 2부작이길 간절히 바랬는데, 1편에서 만든 에디터에 너무 끔찍한 버그가 있어서 이에 대해 정리해 보고자 합니다. 이걸로 3시간을 씨름하고 있었지만 모헤윰의 TIL 문서가 풍성해지고 있으니 긍정적이게 생각해야겠죠?&lt;/p>
+&lt;blockquote>
+&lt;p>💡 이 글은 Window 10, Chrome 107.0.5304.107 버전을 기준으로 작성되었습니다. 일부 환경에 따라 다르게 작동하는 부분이 있을 수 있습니다.&lt;/p></description></item><item><title>마크다운 만들기 - contentEditable [1/3]</title><link>https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/</link><pubDate>Tue, 22 Nov 2022 20:36:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/</guid><description>&lt;p>&lt;strong>모헤윰&lt;/strong>의 에디터 만들기 시리즈 모아보기&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/">에디터 만들기 - ContentEditable [1/3]&lt;/a>&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/">에디터 만들기 - getSelection [2/3]&lt;/a>&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/">에디터 만들기 - Markdown [3/3]&lt;/a>&lt;/p>
+&lt;hr>
+&lt;p>모헤윰의 핵심 기능 중 하나는 &lt;code>마크다운 서식 지원&lt;/code>입니다. 왜 SNS에 마크다운을 끼얹을 생각을 했나 생각해보면 최초 기획부터 있다가 기능 다이어트를 한 후 살아남았기 때문인데, 아무튼 드디어 때가 왔습니다.&lt;/p>
+&lt;p>내부적으로 에디터를 외부 라이브러리를 사용하는게 좋지 않겠냐는 이야기가 나왔는데요, 결국 직접 구현해 보기로 했지만 그 과정에서 여러 레퍼런스를 얻을 수 있었습니다. 개인적으로 멋있다고 생각한 사이트 두 가지를 소개합니다.&lt;/p></description></item><item><title>Emotion</title><link>https://prayinforrain.github.io/posts/2022/11/emotion/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/emotion/</guid><description>&lt;h2 id="tldr">🤷TL;DR&lt;/h2>
+&lt;ul>
+&lt;li>CSS-in-JS는 프로젝트 규모가 커질수록 관리하기 어려운 CSS의 문제를 보완한다.&lt;/li>
+&lt;li>emotion과 styled-components는 사용상의 차이가 거의 없으니 골라서 사용하자.&lt;/li>
+&lt;li>적절한 IDE Extension을 잘 활용하자.&lt;/li>
+&lt;li>CSS-in-JS가 모든 경우에 대한 정답이 아님을 인지하자.&lt;/li>
+&lt;/ul>
+&lt;h2 id="css-in-js">🎨CSS-in-JS&lt;/h2>
+&lt;p>CSS-in-JS는 HTML Element의 스타일을 자바스크립트 파일을 통해서 지정하는 방식입니다. .css 파일이 하던 일을 .js 파일에게 시키는 것이죠. CSS는 CSS이고, JS는 JS입니다. 왜 굳이 둘을 합쳐야만 하는 것일까요? 이 알 수 없는 발상을 이해하려면 우선 기존 css의 단점을 살펴보겠습니다.&lt;/p>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2022/11/emotion/emotion_01.png" alt="Untitled">&lt;/p></description></item><item><title>npm vs yarn vs pnpm</title><link>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</guid><description>&lt;p>지금까지 저는 아무 의심 없이 npm을 사용해왔습니다. 이따금씩 &lt;code>node_modules&lt;/code> 폴더가 저를 고통스럽게 했던 시간들이 있었지만, 프로젝트 초기화에 정말 이상한 행동만 하지 않으면 &lt;code>npm i&lt;/code> 한 줄과 커피 한 잔으로 모든게 문제 없이 동작했으니까요. 하지만 우리는 슬랙의 어떤 분을 통해, npm보다 좋은 방법이 있음을 알고 있습니다. 이번 포스트에서는 &lt;code>yarn&lt;/code>과 &lt;code>pnpm&lt;/code>을 체험해 보도록 하겠습니다.&lt;/p>
+&lt;h2 id="-tldr">🤷 TL;DR&lt;/h2>
+&lt;ul>
+&lt;li>npm의 의존성 관리는 사실 매우 비효율적이다.&lt;/li>
+&lt;li>이 문제를 보완한 패키지 매니저가 yarn, pnpm이다.&lt;/li>
+&lt;li>각 패키지 매니저로의 마이그레이션은 매우 쉽다. 긍정적으로 고려해보자.&lt;/li>
+&lt;/ul>
+&lt;h2 id="-npm">🎁 npm&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_01.png" alt="Untitled">&lt;/p></description></item><item><title>Redux vs Recoil</title><link>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</guid><description>&lt;h2 id="-tldr">🤷 TL;DR&lt;/h2>
+&lt;ul>
+&lt;li>Redux는 안정적이지만, 선언과 사용이 복잡하다.&lt;/li>
+&lt;li>Recoil은 사용이 매우 쉽지만 정식 버전이 없다.&lt;/li>
+&lt;li>프로젝트 규모에 따라 마음에 드는 라이브러리를 선택하자&lt;/li>
+&lt;/ul>
+&lt;h2 id="-서론">🚪 서론&lt;/h2>
+&lt;p>우리는 React를 사용할 때 보통 &lt;code>useState&lt;/code>를 통해 상태를 관리합니다. &lt;code>useState&lt;/code>는 정말 섹시하지만, 한 가지 너무 큰 단점이 있습니다. 바로 컴포넌트끼리 데이터를 주고받는 데 사용하기가 힘들다는 점입니다. 그 일을 하기 위해 등장한 것이 바로 &lt;strong>상태 관리 라이브러리&lt;/strong>입니다. 상태 관리 라이브러리의 필요성에 대해 공감하지 못하는 분들을 위해 짧은 토막글을 마련해 보았습니다.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/sitemap.xml b/sitemap.xml
index fb8897e..f3fc156 100644
--- a/sitemap.xml
+++ b/sitemap.xml
@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"><url><loc>https://prayinforrain.github.io/categories/</loc><lastmod>2024-04-15T16:43:32+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/</loc><lastmod>2024-04-15T16:43:32+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/</loc><lastmod>2024-04-15T16:43:32+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/project/</loc><lastmod>2024-04-15T16:43:32+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/react/</loc><lastmod>2024-04-15T16:43:32+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/</loc><lastmod>2024-04-15T16:43:32+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/categories/web/</loc><lastmod>2024-04-15T16:43:32+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/11/cell-refactoring/</loc><lastmod>2024-04-15T16:43:32+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/cds/</loc><lastmod>2023-08-14T00:54:02+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/06/cds-retrospect/</loc><lastmod>2023-08-14T00:54:02+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/categories/node.js/</loc><lastmod>2023-05-30T02:27:49+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/yarn/</loc><lastmod>2023-05-30T02:27:49+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/05/exploring-yarn-berry/</loc><lastmod>2023-05-30T02:27:49+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</loc><lastmod>2023-04-27T15:32:50+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/nextjs/</loc><lastmod>2023-04-27T15:32:50+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/pnp/</loc><lastmod>2023-04-27T15:32:50+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/storybook/</loc><lastmod>2023-04-27T15:32:50+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/categories/life/</loc><lastmod>2023-04-23T04:05:58+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/numble/</loc><lastmod>2023-04-23T04:05:58+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/04/numble-talk/</loc><lastmod>2023-04-23T04:05:58+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/algorithm/</loc><lastmod>2023-03-30T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/categories/algorithm/</loc><lastmod>2023-03-30T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/baekjoon/</loc><lastmod>2023-03-30T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/javascript/</loc><lastmod>2023-03-30T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/nodejs/</loc><lastmod>2023-03-30T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/ps/</loc><lastmod>2023-03-30T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</loc><lastmod>2023-03-30T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/categories/ide/</loc><lastmod>2023-03-29T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/macos/</loc><lastmod>2023-03-29T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/npm/</loc><lastmod>2023-03-29T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/nvm/</loc><lastmod>2023-03-29T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/vscode/</loc><lastmod>2023-03-29T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</loc><lastmod>2023-03-29T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/firebase/</loc><lastmod>2023-02-15T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</loc><lastmod>2023-02-15T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/typescript/</loc><lastmod>2023-02-15T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/categories/typescript/</loc><lastmod>2023-02-15T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/web/</loc><lastmod>2023-02-15T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/generic/</loc><lastmod>2023-02-01T02:01:15+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</loc><lastmod>2023-02-01T02:01:15+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/blog/</loc><lastmod>2023-01-30T19:17:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/hugo/</loc><lastmod>2023-01-30T19:17:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/</loc><lastmod>2023-01-30T19:17:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/categories/javascript/</loc><lastmod>2023-01-25T17:17:15+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</loc><lastmod>2023-01-25T17:17:15+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/tree-shaking/</loc><lastmod>2023-01-25T17:17:15+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/ecmascript/</loc><lastmod>2023-01-25T16:35:01+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/01/ecmascript/</loc><lastmod>2023-01-25T16:35:01+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/browser/</loc><lastmod>2023-01-16T16:38:15+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/css/</loc><lastmod>2023-01-16T16:38:15+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/categories/css/</loc><lastmod>2023-01-16T16:38:15+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/01/css-display/</loc><lastmod>2023-01-16T16:38:15+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/</loc><lastmod>2023-01-16T16:38:15+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</loc><lastmod>2023-01-13T23:39:15+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/about/</loc><lastmod>2023-05-04T01:48:16+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/moheyum/</loc><lastmod>2022-12-21T03:30:25+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/categories/moheyum/</loc><lastmod>2022-12-21T03:30:25+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2022/12/finishing-moheyum/</loc><lastmod>2022-12-21T03:30:25+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2022/12/prevent-sidebar-blinking/</loc><lastmod>2022-12-06T02:11:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/</loc><lastmod>2022-12-05T13:18:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/</loc><lastmod>2022-11-24T00:53:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/</loc><lastmod>2022-11-22T20:36:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/css-in-js/</loc><lastmod>2022-11-18T16:42:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/emotion/</loc><lastmod>2022-11-18T16:42:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2022/11/emotion/</loc><lastmod>2022-11-18T16:42:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</loc><lastmod>2022-11-18T16:42:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/pnpm/</loc><lastmod>2022-11-18T16:42:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/categories/react/</loc><lastmod>2022-11-18T16:42:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/recoil/</loc><lastmod>2022-11-18T16:42:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/redux/</loc><lastmod>2022-11-18T16:42:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</loc><lastmod>2022-11-18T16:42:55+09:00</lastmod></url></urlset>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"><url><loc>https://prayinforrain.github.io/categories/</loc><lastmod>2024-07-18T12:34:32+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2024/07/site-optimization/</loc><lastmod>2024-07-18T12:34:32+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/nextjs/</loc><lastmod>2024-07-18T12:34:32+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/</loc><lastmod>2024-07-18T12:34:32+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/</loc><lastmod>2024-07-18T12:34:32+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/</loc><lastmod>2024-07-18T12:34:32+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/categories/web/</loc><lastmod>2024-07-18T12:34:32+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/project/</loc><lastmod>2024-04-15T16:43:32+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/react/</loc><lastmod>2024-04-15T16:43:32+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/11/cell-refactoring/</loc><lastmod>2024-04-15T16:43:32+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/cds/</loc><lastmod>2023-08-14T00:54:02+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/06/cds-retrospect/</loc><lastmod>2023-08-14T00:54:02+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/categories/node.js/</loc><lastmod>2023-05-30T02:27:49+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/yarn/</loc><lastmod>2023-05-30T02:27:49+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/05/exploring-yarn-berry/</loc><lastmod>2023-05-30T02:27:49+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</loc><lastmod>2023-04-27T15:32:50+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/pnp/</loc><lastmod>2023-04-27T15:32:50+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/storybook/</loc><lastmod>2023-04-27T15:32:50+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/categories/life/</loc><lastmod>2023-04-23T04:05:58+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/numble/</loc><lastmod>2023-04-23T04:05:58+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/04/numble-talk/</loc><lastmod>2023-04-23T04:05:58+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/algorithm/</loc><lastmod>2023-03-30T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/categories/algorithm/</loc><lastmod>2023-03-30T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/baekjoon/</loc><lastmod>2023-03-30T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/javascript/</loc><lastmod>2023-03-30T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/nodejs/</loc><lastmod>2023-03-30T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/ps/</loc><lastmod>2023-03-30T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</loc><lastmod>2023-03-30T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/categories/ide/</loc><lastmod>2023-03-29T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/macos/</loc><lastmod>2023-03-29T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/npm/</loc><lastmod>2023-03-29T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/nvm/</loc><lastmod>2023-03-29T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/vscode/</loc><lastmod>2023-03-29T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</loc><lastmod>2023-03-29T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/firebase/</loc><lastmod>2023-02-15T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</loc><lastmod>2023-02-15T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/typescript/</loc><lastmod>2023-02-15T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/categories/typescript/</loc><lastmod>2023-02-15T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/web/</loc><lastmod>2023-02-15T15:17:00+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/generic/</loc><lastmod>2023-02-01T02:01:15+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</loc><lastmod>2023-02-01T02:01:15+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/blog/</loc><lastmod>2023-01-30T19:17:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/hugo/</loc><lastmod>2023-01-30T19:17:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/</loc><lastmod>2023-01-30T19:17:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/categories/javascript/</loc><lastmod>2023-01-25T17:17:15+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</loc><lastmod>2023-01-25T17:17:15+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/tree-shaking/</loc><lastmod>2023-01-25T17:17:15+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/ecmascript/</loc><lastmod>2023-01-25T16:35:01+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/01/ecmascript/</loc><lastmod>2023-01-25T16:35:01+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/browser/</loc><lastmod>2023-01-16T16:38:15+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/css/</loc><lastmod>2023-01-16T16:38:15+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/categories/css/</loc><lastmod>2023-01-16T16:38:15+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/01/css-display/</loc><lastmod>2023-01-16T16:38:15+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/</loc><lastmod>2023-01-16T16:38:15+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</loc><lastmod>2023-01-13T23:39:15+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/about/</loc><lastmod>2023-05-04T01:48:16+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/moheyum/</loc><lastmod>2022-12-21T03:30:25+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/categories/moheyum/</loc><lastmod>2022-12-21T03:30:25+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2022/12/finishing-moheyum/</loc><lastmod>2022-12-21T03:30:25+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2022/12/prevent-sidebar-blinking/</loc><lastmod>2022-12-06T02:11:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/</loc><lastmod>2022-12-05T13:18:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/</loc><lastmod>2022-11-24T00:53:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/</loc><lastmod>2022-11-22T20:36:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/css-in-js/</loc><lastmod>2022-11-18T16:42:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/emotion/</loc><lastmod>2022-11-18T16:42:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2022/11/emotion/</loc><lastmod>2022-11-18T16:42:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</loc><lastmod>2022-11-18T16:42:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/pnpm/</loc><lastmod>2022-11-18T16:42:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/categories/react/</loc><lastmod>2022-11-18T16:42:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/recoil/</loc><lastmod>2022-11-18T16:42:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/tags/redux/</loc><lastmod>2022-11-18T16:42:55+09:00</lastmod></url><url><loc>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</loc><lastmod>2022-11-18T16:42:55+09:00</lastmod></url></urlset>
\ No newline at end of file
diff --git a/tags/algorithm/index.html b/tags/algorithm/index.html
index 060e1b7..9d7b48d 100644
--- a/tags/algorithm/index.html
+++ b/tags/algorithm/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Algorithm | PrayinForRain.dev</title>
-<meta property="og:title" content="Algorithm | PrayinForRain.dev"><meta name=twitter:title content="Algorithm | PrayinForRain.dev"><meta itemprop=name content="Algorithm | PrayinForRain.dev"><meta name=application-name content="Algorithm | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/algorithm/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/algorithm/><link href=/tags/algorithm/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/algorithm/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Algorithm | PrayinForRain.dev"><meta name=twitter:title content="Algorithm | PrayinForRain.dev"><meta itemprop=name content="Algorithm | PrayinForRain.dev"><meta name=application-name content="Algorithm | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/algorithm/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/algorithm/><link href=/tags/algorithm/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/algorithm/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Algorithm</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/03/nodejs-for-baekjoon/><h4 class=post-item-title>백준을 위한 node.js</h4></a></div><time class=post-item-meta datetime=2023-03-30T15:17:00+0900>2023. 3. 30.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Algorithm</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/03/nodejs-for-baekjoon/><h4 class=post-item-title>백준을 위한 node.js</h4></a></div><time class=post-item-meta datetime=2023-03-30T15:17:00+0900>2023. 3. 30.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/algorithm/index.xml b/tags/algorithm/index.xml
index f6e9801..a7b471a 100644
--- a/tags/algorithm/index.xml
+++ b/tags/algorithm/index.xml
@@ -1,3 +1,5 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Algorithm on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/algorithm/</link><description>Recent content in Algorithm on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Thu, 30 Mar 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/algorithm/index.xml" rel="self" type="application/rss+xml"/><item><title>백준을 위한 node.js</title><link>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</guid><description>JS라도 백준이 하고싶어 공채 시즌이다. 개인적으로 코딩 테스트를 정말정말 자신 없어했는데, 더 이상 미룰 수 없어 야금야금 공부를 시작했다.
-불편한 점이 있다면, 백준은 자바스크립트에 아주 불친절하다는 점이다. 내가 학부생 때 잘 하지도 못하는 C++로 꾸역꾸역 문제를 풀었던 이유 중 하나이기도 했다. 그 때는 아는 PS 플랫폼이 백준 뿐이니, 자바스크립트의 어쩔 수 없는 한계인가보다 했다.
-그런데 프로그래머스를 맛 보고 나니 머리가 커져서 자바스크립트가 백준에게 부당한 차별을 받는(?) 기분이 들었다. 진짜로 화가 난 건 아니지만 그래도 화가 났다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Algorithm on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/algorithm/</link><description>Recent content in Algorithm on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Thu, 30 Mar 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/algorithm/index.xml" rel="self" type="application/rss+xml"/><item><title>백준을 위한 node.js</title><link>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</guid><description>&lt;h2 id="js라도-백준이-하고싶어">JS라도 백준이 하고싶어&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/03/nodejs-for-baekjoon/01.png" alt="Programmers IDE">&lt;/p>
+&lt;p>공채 시즌이다. 개인적으로 코딩 테스트를 정말정말 자신 없어했는데, 더 이상 미룰 수 없어 야금야금 공부를 시작했다.&lt;br>
+불편한 점이 있다면, 백준은 자바스크립트에 아주 불친절하다는 점이다. 내가 학부생 때 잘 하지도 못하는 C++로 꾸역꾸역 문제를 풀었던 이유 중 하나이기도 했다. 그 때는 아는 PS 플랫폼이 백준 뿐이니, 자바스크립트의 어쩔 수 없는 한계인가보다 했다.&lt;/p>
+&lt;p>그런데 프로그래머스를 맛 보고 나니 머리가 커져서 자바스크립트가 백준에게 부당한 차별을 받는(?) 기분이 들었다. 진짜로 화가 난 건 아니지만 그래도 화가 났다. 용서할 수가 없어 보일러플레이트 코드를 작성했다.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/baekjoon/index.html b/tags/baekjoon/index.html
index e958109..e8cc674 100644
--- a/tags/baekjoon/index.html
+++ b/tags/baekjoon/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Baekjoon | PrayinForRain.dev</title>
-<meta property="og:title" content="Baekjoon | PrayinForRain.dev"><meta name=twitter:title content="Baekjoon | PrayinForRain.dev"><meta itemprop=name content="Baekjoon | PrayinForRain.dev"><meta name=application-name content="Baekjoon | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/baekjoon/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/baekjoon/><link href=/tags/baekjoon/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/baekjoon/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Baekjoon | PrayinForRain.dev"><meta name=twitter:title content="Baekjoon | PrayinForRain.dev"><meta itemprop=name content="Baekjoon | PrayinForRain.dev"><meta name=application-name content="Baekjoon | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/baekjoon/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/baekjoon/><link href=/tags/baekjoon/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/baekjoon/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Baekjoon</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/03/nodejs-for-baekjoon/><h4 class=post-item-title>백준을 위한 node.js</h4></a></div><time class=post-item-meta datetime=2023-03-30T15:17:00+0900>2023. 3. 30.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Baekjoon</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/03/nodejs-for-baekjoon/><h4 class=post-item-title>백준을 위한 node.js</h4></a></div><time class=post-item-meta datetime=2023-03-30T15:17:00+0900>2023. 3. 30.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/baekjoon/index.xml b/tags/baekjoon/index.xml
index 0ae0ac9..5767120 100644
--- a/tags/baekjoon/index.xml
+++ b/tags/baekjoon/index.xml
@@ -1,3 +1,5 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Baekjoon on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/baekjoon/</link><description>Recent content in Baekjoon on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Thu, 30 Mar 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/baekjoon/index.xml" rel="self" type="application/rss+xml"/><item><title>백준을 위한 node.js</title><link>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</guid><description>JS라도 백준이 하고싶어 공채 시즌이다. 개인적으로 코딩 테스트를 정말정말 자신 없어했는데, 더 이상 미룰 수 없어 야금야금 공부를 시작했다.
-불편한 점이 있다면, 백준은 자바스크립트에 아주 불친절하다는 점이다. 내가 학부생 때 잘 하지도 못하는 C++로 꾸역꾸역 문제를 풀었던 이유 중 하나이기도 했다. 그 때는 아는 PS 플랫폼이 백준 뿐이니, 자바스크립트의 어쩔 수 없는 한계인가보다 했다.
-그런데 프로그래머스를 맛 보고 나니 머리가 커져서 자바스크립트가 백준에게 부당한 차별을 받는(?) 기분이 들었다. 진짜로 화가 난 건 아니지만 그래도 화가 났다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Baekjoon on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/baekjoon/</link><description>Recent content in Baekjoon on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Thu, 30 Mar 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/baekjoon/index.xml" rel="self" type="application/rss+xml"/><item><title>백준을 위한 node.js</title><link>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</guid><description>&lt;h2 id="js라도-백준이-하고싶어">JS라도 백준이 하고싶어&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/03/nodejs-for-baekjoon/01.png" alt="Programmers IDE">&lt;/p>
+&lt;p>공채 시즌이다. 개인적으로 코딩 테스트를 정말정말 자신 없어했는데, 더 이상 미룰 수 없어 야금야금 공부를 시작했다.&lt;br>
+불편한 점이 있다면, 백준은 자바스크립트에 아주 불친절하다는 점이다. 내가 학부생 때 잘 하지도 못하는 C++로 꾸역꾸역 문제를 풀었던 이유 중 하나이기도 했다. 그 때는 아는 PS 플랫폼이 백준 뿐이니, 자바스크립트의 어쩔 수 없는 한계인가보다 했다.&lt;/p>
+&lt;p>그런데 프로그래머스를 맛 보고 나니 머리가 커져서 자바스크립트가 백준에게 부당한 차별을 받는(?) 기분이 들었다. 진짜로 화가 난 건 아니지만 그래도 화가 났다. 용서할 수가 없어 보일러플레이트 코드를 작성했다.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/blog/index.html b/tags/blog/index.html
index 9ba7156..732ec50 100644
--- a/tags/blog/index.html
+++ b/tags/blog/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Blog | PrayinForRain.dev</title>
-<meta property="og:title" content="Blog | PrayinForRain.dev"><meta name=twitter:title content="Blog | PrayinForRain.dev"><meta itemprop=name content="Blog | PrayinForRain.dev"><meta name=application-name content="Blog | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/blog/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/blog/><link href=/tags/blog/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/blog/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Blog | PrayinForRain.dev"><meta name=twitter:title content="Blog | PrayinForRain.dev"><meta itemprop=name content="Blog | PrayinForRain.dev"><meta name=application-name content="Blog | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/blog/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/blog/><link href=/tags/blog/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/blog/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Blog</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/01/migrating-to-hugo/><h4 class=post-item-title>Hugo로 블로그를 옮기자</h4></a></div><time class=post-item-meta datetime=2023-01-30T19:17:55+0900>2023. 1. 30.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Blog</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/01/migrating-to-hugo/><h4 class=post-item-title>Hugo로 블로그를 옮기자</h4></a></div><time class=post-item-meta datetime=2023-01-30T19:17:55+0900>2023. 1. 30.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/blog/index.xml b/tags/blog/index.xml
index d1fd79f..f3d23d7 100644
--- a/tags/blog/index.xml
+++ b/tags/blog/index.xml
@@ -1,2 +1,6 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Blog on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/blog/</link><description>Recent content in Blog on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Mon, 30 Jan 2023 19:17:55 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/blog/index.xml" rel="self" type="application/rss+xml"/><item><title>Hugo로 블로그를 옮기자</title><link>https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/</link><pubDate>Mon, 30 Jan 2023 19:17:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/</guid><description>알음알음 티스푼 공사로 티스토리에서 이 곳으로 블로그를 옮겼습니다. 티스토리에 있던 컨텐츠 대부분은 옮기지 않았습니다. 별 의미도 없고 너무 사적인 내용이 많았기 때문입니다. 또 티스토리만의 감성이라고 해야 하나.. 약간 그 곳에 더 맞는 포인트들이 있어서 아카이브같은 느낌으로 그냥 티스토리에 두기로 했습니다. 곳곳에 티스토리 링크가 있으니 시간을 효율적으로 버리고 싶은 분이 있다면 읽어주셔도 감사할 것 같습니다. 아무튼 옮겨야 하는 컨텐츠도 없으면서 정말 오랜 기간 삽질을 했는데, 그 과정에 대해 이야기해보려고 합니다.
-블로그를 이전하게 된 계기 아직도 저 Main Page라는 글자의 의미를 모르겠습니다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Blog on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/blog/</link><description>Recent content in Blog on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Mon, 30 Jan 2023 19:17:55 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/blog/index.xml" rel="self" type="application/rss+xml"/><item><title>Hugo로 블로그를 옮기자</title><link>https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/</link><pubDate>Mon, 30 Jan 2023 19:17:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/</guid><description>&lt;p>알음알음 티스푼 공사로 티스토리에서 이 곳으로 블로그를 옮겼습니다. 티스토리에 있던 컨텐츠 대부분은 옮기지 않았습니다. 별 의미도 없고 너무 사적인 내용이 많았기 때문입니다. 또 티스토리만의 감성이라고 해야 하나.. 약간 그 곳에 더 맞는 포인트들이 있어서 아카이브같은 느낌으로 그냥 티스토리에 두기로 했습니다. 곳곳에 티스토리 링크가 있으니 시간을 효율적으로 버리고 싶은 분이 있다면 읽어주셔도 감사할 것 같습니다.
+아무튼 옮겨야 하는 컨텐츠도 없으면서 정말 오랜 기간 삽질을 했는데, 그 과정에 대해 이야기해보려고 합니다.&lt;/p>
+&lt;h2 id="블로그를-이전하게-된-계기">블로그를 이전하게 된 계기&lt;/h2>
+&lt;p>&lt;figure>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/migrating-to-hugo/01.png"
+ alt="image">&lt;figcaption>
+ &lt;p>아직도 저 Main Page라는 글자의 의미를 모르겠습니다..&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/browser/index.html b/tags/browser/index.html
index 60be398..60949fb 100644
--- a/tags/browser/index.html
+++ b/tags/browser/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Browser | PrayinForRain.dev</title>
-<meta property="og:title" content="Browser | PrayinForRain.dev"><meta name=twitter:title content="Browser | PrayinForRain.dev"><meta itemprop=name content="Browser | PrayinForRain.dev"><meta name=application-name content="Browser | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/browser/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/browser/><link href=/tags/browser/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/browser/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Browser | PrayinForRain.dev"><meta name=twitter:title content="Browser | PrayinForRain.dev"><meta itemprop=name content="Browser | PrayinForRain.dev"><meta name=application-name content="Browser | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/browser/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/browser/><link href=/tags/browser/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/browser/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Browser</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/01/browser-rendering-performance/><h4 class=post-item-title>브라우저 렌더링과 성능</h4></a></div><time class=post-item-meta datetime=2023-01-16T16:38:15+0900>2023. 1. 16.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Browser</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/01/browser-rendering-performance/><h4 class=post-item-title>브라우저 렌더링과 성능</h4></a></div><time class=post-item-meta datetime=2023-01-16T16:38:15+0900>2023. 1. 16.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/browser/index.xml b/tags/browser/index.xml
index d650da3..771fe22 100644
--- a/tags/browser/index.xml
+++ b/tags/browser/index.xml
@@ -1,2 +1,17 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Browser on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/browser/</link><description>Recent content in Browser on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Mon, 16 Jan 2023 16:38:15 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/browser/index.xml" rel="self" type="application/rss+xml"/><item><title>브라우저 렌더링과 성능</title><link>https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/</guid><description>브라우저 렌더링 성능 최적화를 위해, 브라우저가 어떻게 HTML 문서를 화면에 그리는지 과정에 대해 이해할 필요가 있습니다. 브라우저 렌더링은 아래 사진과 같은 흐름으로 이루어집니다.
-서버로부터 HTML, CSS, JavaScript 파일을 받아와 HTML → DOM, CSS → CSSOM으로 변환하고 Render Tree를 구성합니다. Render Tree의 노드들에 대한 위치와 크기를 계산합니다. Render Tree의 루트부터 시작하여 모든 노드에 대해 계산을 수행합니다. (Layout) 계산된 결과물을 기반으로 화면에 실제 노드들을 그립니다. (Paint) 사용자의 상호작용이나 스크립트를 통한 제어 등으로 HTML 요소의 크기나 위치의 변경이 일어나면 Reflow라는 과정을 수행합니다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Browser on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/browser/</link><description>Recent content in Browser on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Mon, 16 Jan 2023 16:38:15 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/browser/index.xml" rel="self" type="application/rss+xml"/><item><title>브라우저 렌더링과 성능</title><link>https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/</guid><description>&lt;h2 id="브라우저-렌더링">브라우저 렌더링&lt;/h2>
+&lt;p>성능 최적화를 위해, 브라우저가 어떻게 HTML 문서를 화면에 그리는지 과정에 대해 이해할 필요가 있습니다. 브라우저 렌더링은 아래 사진과 같은 흐름으로 이루어집니다.&lt;/p>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/browser-rendering-performance/01.png" alt="Untitled">&lt;/p>
+&lt;ul>
+&lt;li>서버로부터 HTML, CSS, JavaScript 파일을 받아와 HTML → DOM, CSS → CSSOM으로 변환하고 Render Tree를 구성합니다.&lt;/li>
+&lt;li>Render Tree의 노드들에 대한 위치와 크기를 계산합니다. Render Tree의 루트부터 시작하여 모든 노드에 대해 계산을 수행합니다. (Layout)&lt;/li>
+&lt;li>계산된 결과물을 기반으로 화면에 실제 노드들을 그립니다. (Paint)&lt;/li>
+&lt;li>사용자의 상호작용이나 스크립트를 통한 제어 등으로 HTML 요소의 크기나 위치의 변경이 일어나면 &lt;code>Reflow&lt;/code>라는 과정을 수행합니다.
+&lt;ul>
+&lt;li>Reflow는 Render Tree 구성부터 &lt;strong>모든 작업을 다시 수행&lt;/strong>합니다.&lt;/li>
+&lt;li>만약 레이아웃 자체에는 변화가 없고, 색상이나 visibility 등의 변경만 있는 경우에는 Paint 과정만을 다시 수행합니다. (Repaint)&lt;/li>
+&lt;li>따라서 비용이 큰 &lt;strong>Reflow의 발생을 최대한 줄이는 것이 중요&lt;/strong>합니다.&lt;/li>
+&lt;/ul>
+&lt;/li>
+&lt;/ul>
+&lt;iframe width="560" height="315" src="https://www.youtube.com/embed/TZz9VHjJzMk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>&lt;/iframe>
+&lt;p>이거 되게 좋은 내용인 것 같아요 CSS의 &lt;code>will-change&lt;/code>를 통헤 불필요한 GPU 점유를 줄이는 방법도 소개하고 있네요!&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/cds/index.html b/tags/cds/index.html
index a6453e3..9a51a91 100644
--- a/tags/cds/index.html
+++ b/tags/cds/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Cds | PrayinForRain.dev</title>
-<meta property="og:title" content="Cds | PrayinForRain.dev"><meta name=twitter:title content="Cds | PrayinForRain.dev"><meta itemprop=name content="Cds | PrayinForRain.dev"><meta name=application-name content="Cds | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/cds/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/cds/><link href=/tags/cds/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/cds/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Cds | PrayinForRain.dev"><meta name=twitter:title content="Cds | PrayinForRain.dev"><meta itemprop=name content="Cds | PrayinForRain.dev"><meta name=application-name content="Cds | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/cds/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/cds/><link href=/tags/cds/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/cds/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Cds</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/06/cds-retrospect/><h4 class=post-item-title>차가운 디자인 시스템(CDS) 회고</h4><div class=post-item-summary>우리 v1.2 합시다</div></a></div><time class=post-item-meta datetime=2023-06-18T16:43:32+0900>2023. 6. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Cds</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/06/cds-retrospect/><h4 class=post-item-title>차가운 디자인 시스템(CDS) 회고</h4><div class=post-item-summary>우리 v1.2 합시다</div></a></div><time class=post-item-meta datetime=2023-06-18T16:43:32+0900>2023. 6. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/cds/index.xml b/tags/cds/index.xml
index 28dbaaa..dc24259 100644
--- a/tags/cds/index.xml
+++ b/tags/cds/index.xml
@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Cds on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/cds/</link><description>Recent content in Cds on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Mon, 14 Aug 2023 00:54:02 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/cds/index.xml" rel="self" type="application/rss+xml"/><item><title>차가운 디자인 시스템(CDS) 회고</title><link>https://prayinforrain.github.io/posts/2023/06/cds-retrospect/</link><pubDate>Sun, 18 Jun 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/06/cds-retrospect/</guid><description>우리 v1.2 합시다</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Cds on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/cds/</link><description>Recent content in Cds on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Mon, 14 Aug 2023 00:54:02 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/cds/index.xml" rel="self" type="application/rss+xml"/><item><title>차가운 디자인 시스템(CDS) 회고</title><link>https://prayinforrain.github.io/posts/2023/06/cds-retrospect/</link><pubDate>Sun, 18 Jun 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/06/cds-retrospect/</guid><description>우리 v1.2 합시다</description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/css-in-js/index.html b/tags/css-in-js/index.html
index 294816e..50733bc 100644
--- a/tags/css-in-js/index.html
+++ b/tags/css-in-js/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>CSS-in-JS | PrayinForRain.dev</title>
-<meta property="og:title" content="CSS-in-JS | PrayinForRain.dev"><meta name=twitter:title content="CSS-in-JS | PrayinForRain.dev"><meta itemprop=name content="CSS-in-JS | PrayinForRain.dev"><meta name=application-name content="CSS-in-JS | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/css-in-js/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/css-in-js/><link href=/tags/css-in-js/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/css-in-js/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="CSS-in-JS | PrayinForRain.dev"><meta name=twitter:title content="CSS-in-JS | PrayinForRain.dev"><meta itemprop=name content="CSS-in-JS | PrayinForRain.dev"><meta name=application-name content="CSS-in-JS | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/css-in-js/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/css-in-js/><link href=/tags/css-in-js/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/css-in-js/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">CSS-in-JS</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2022</h2><article class=post-item><div class=post-item-content><a href=/posts/2022/11/emotion/><h4 class=post-item-title>Emotion</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">CSS-in-JS</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2022</h2><article class=post-item><div class=post-item-content><a href=/posts/2022/11/emotion/><h4 class=post-item-title>Emotion</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/css-in-js/index.xml b/tags/css-in-js/index.xml
index 07dbe45..2264855 100644
--- a/tags/css-in-js/index.xml
+++ b/tags/css-in-js/index.xml
@@ -1,2 +1,10 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>CSS-in-JS on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/css-in-js/</link><description>Recent content in CSS-in-JS on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Fri, 18 Nov 2022 16:42:55 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/css-in-js/index.xml" rel="self" type="application/rss+xml"/><item><title>Emotion</title><link>https://prayinforrain.github.io/posts/2022/11/emotion/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/emotion/</guid><description>🤷TL;DR CSS-in-JS는 프로젝트 규모가 커질수록 관리하기 어려운 CSS의 문제를 보완한다. emotion과 styled-components는 사용상의 차이가 거의 없으니 골라서 사용하자. 적절한 IDE Extension을 잘 활용하자. CSS-in-JS가 모든 경우에 대한 정답이 아님을 인지하자. 🎨CSS-in-JS CSS-in-JS는 HTML Element의 스타일을 자바스크립트 파일을 통해서 지정하는 방식입니다. .css 파일이 하던 일을 .js 파일에게 시키는 것이죠. CSS는 CSS이고, JS는 JS입니다. 왜 굳이 둘을 합쳐야만 하는 것일까요? 이 알 수 없는 발상을 이해하려면 우선 기존 css의 단점을 살펴보겠습니다.
-제가 학습 스프린트때 진행한 프로젝트 파일의 일부입니다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>CSS-in-JS on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/css-in-js/</link><description>Recent content in CSS-in-JS on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Fri, 18 Nov 2022 16:42:55 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/css-in-js/index.xml" rel="self" type="application/rss+xml"/><item><title>Emotion</title><link>https://prayinforrain.github.io/posts/2022/11/emotion/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/emotion/</guid><description>&lt;h2 id="tldr">🤷TL;DR&lt;/h2>
+&lt;ul>
+&lt;li>CSS-in-JS는 프로젝트 규모가 커질수록 관리하기 어려운 CSS의 문제를 보완한다.&lt;/li>
+&lt;li>emotion과 styled-components는 사용상의 차이가 거의 없으니 골라서 사용하자.&lt;/li>
+&lt;li>적절한 IDE Extension을 잘 활용하자.&lt;/li>
+&lt;li>CSS-in-JS가 모든 경우에 대한 정답이 아님을 인지하자.&lt;/li>
+&lt;/ul>
+&lt;h2 id="css-in-js">🎨CSS-in-JS&lt;/h2>
+&lt;p>CSS-in-JS는 HTML Element의 스타일을 자바스크립트 파일을 통해서 지정하는 방식입니다. .css 파일이 하던 일을 .js 파일에게 시키는 것이죠. CSS는 CSS이고, JS는 JS입니다. 왜 굳이 둘을 합쳐야만 하는 것일까요? 이 알 수 없는 발상을 이해하려면 우선 기존 css의 단점을 살펴보겠습니다.&lt;/p>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2022/11/emotion/emotion_01.png" alt="Untitled">&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/css/index.html b/tags/css/index.html
index 4af9fdb..714ccd1 100644
--- a/tags/css/index.html
+++ b/tags/css/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>CSS | PrayinForRain.dev</title>
-<meta property="og:title" content="CSS | PrayinForRain.dev"><meta name=twitter:title content="CSS | PrayinForRain.dev"><meta itemprop=name content="CSS | PrayinForRain.dev"><meta name=application-name content="CSS | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/css/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/css/><link href=/tags/css/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/css/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="CSS | PrayinForRain.dev"><meta name=twitter:title content="CSS | PrayinForRain.dev"><meta itemprop=name content="CSS | PrayinForRain.dev"><meta name=application-name content="CSS | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/css/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/css/><link href=/tags/css/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/css/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">CSS</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/01/css-display/><h4 class=post-item-title>CSS의 display 속성</h4></a></div><time class=post-item-meta datetime=2023-01-16T16:38:15+0900>2023. 1. 16.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/size-units-in-css/><h4 class=post-item-title>CSS의 크기 단위</h4></a></div><time class=post-item-meta datetime=2023-01-13T23:39:15+0900>2023. 1. 13.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">CSS</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/01/css-display/><h4 class=post-item-title>CSS의 display 속성</h4></a></div><time class=post-item-meta datetime=2023-01-16T16:38:15+0900>2023. 1. 16.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/size-units-in-css/><h4 class=post-item-title>CSS의 크기 단위</h4></a></div><time class=post-item-meta datetime=2023-01-13T23:39:15+0900>2023. 1. 13.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/css/index.xml b/tags/css/index.xml
index 5e92cfe..bf2c09a 100644
--- a/tags/css/index.xml
+++ b/tags/css/index.xml
@@ -1,3 +1,21 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>CSS on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/css/</link><description>Recent content in CSS on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Mon, 16 Jan 2023 16:38:15 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/css/index.xml" rel="self" type="application/rss+xml"/><item><title>CSS의 display 속성</title><link>https://prayinforrain.github.io/posts/2023/01/css-display/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/css-display/</guid><description>CSS의 display 속성은 HTML element가 block인지, inline인지, 그리고 자식 element들을 어떤 식으로 표시할지를 정하는 속성입니다. 다시 말해 요소 자체가 형제 요소와 배치되는 방법과, 자식 요소를 배치하는 방법을 함께 정의하기 때문에 ‘안쪽’과 ‘바깥쪽’으로 속성을 나눌 수 있습니다.
-display: 바깥쪽 block 한 줄에는 한 요소만 올 수 있게 하는 속성입니다. inline 요소가 한 줄에 여러 개 표시 될 수 있음을 의미합니다. 만약 inline이 적용된 요소의 전후에 inline 요소를 표시할 공간이 있다면 한 줄에 표시됩니다.</description></item><item><title>CSS의 크기 단위</title><link>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</link><pubDate>Fri, 13 Jan 2023 23:39:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</guid><description>CSS의 크기 단위 CSS에는 다양한 단위가 존재합니다. 우리가 잘 아는 px와 %부터, em, rem, pt, vh, vw 등등 다양한 단위가 존재하는데요, 이 크기 단위들을 언제 어떻게 사용하면 좋을지에 대해 정리해 보았습니다.
-상대 단위와 절대 단위 px과 %를 먼저 비교해 보면, px은 우리가 알고 있는 컴퓨터 화면의 1픽셀을 의미합니다. 이는 어느 화면에서나 같은 크기를 나타내므로 절대 단위에 해당합니다. 반면 %는 보통 부모 element의 크기를 상속받아 그의 정해진 비율만큼을 나타냅니다. 즉 width: 10px;인 부모를 가진 element에 width: 50%;를 주면 5px이 되겠죠.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>CSS on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/css/</link><description>Recent content in CSS on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Mon, 16 Jan 2023 16:38:15 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/css/index.xml" rel="self" type="application/rss+xml"/><item><title>CSS의 display 속성</title><link>https://prayinforrain.github.io/posts/2023/01/css-display/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/css-display/</guid><description>&lt;p>CSS의 &lt;code>display&lt;/code> 속성은 HTML element가 block인지, inline인지, 그리고 자식 element들을 어떤 식으로 표시할지를 정하는 속성입니다. 다시 말해 요소 자체가 형제 요소와 배치되는 방법과, 자식 요소를 배치하는 방법을 함께 정의하기 때문에 ‘&lt;strong>안쪽&lt;/strong>’과 ‘&lt;strong>바깥쪽&lt;/strong>’으로 속성을 나눌 수 있습니다.&lt;/p>
+&lt;h2 id="display">display:&lt;/h2>
+&lt;h3 id="바깥쪽">바깥쪽&lt;/h3>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/css-display/01.png" alt="Untitled">&lt;/p>
+&lt;ul>
+&lt;li>&lt;code>block&lt;/code>
+&lt;ul>
+&lt;li>한 줄에는 한 요소만 올 수 있게 하는 속성입니다.&lt;/li>
+&lt;/ul>
+&lt;/li>
+&lt;li>&lt;code>inline&lt;/code>
+&lt;ul>
+&lt;li>요소가 한 줄에 여러 개 표시 될 수 있음을 의미합니다. 만약 &lt;code>inline&lt;/code>이 적용된 요소의 전후에 &lt;code>inline&lt;/code> 요소를 표시할 공간이 있다면 한 줄에 표시됩니다.&lt;/li>
+&lt;/ul>
+&lt;/li>
+&lt;/ul>
+&lt;p>사진의 div들은 각각 &lt;code>inline&lt;/code>, &lt;code>block&lt;/code> 속성을 지정하였습니다. 보이는 것과 같이 &lt;code>block&lt;/code> 속성의 요소는 한 줄에 하나만 존재할 수 있으며, &lt;code>inline&lt;/code> 속성은 충분한 공간이 있으면 한 줄에 표시됩니다. &lt;code>span&lt;/code>과 &lt;code>p&lt;/code>태그의 차이와 비슷합니다.&lt;/p></description></item><item><title>CSS의 크기 단위</title><link>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</link><pubDate>Fri, 13 Jan 2023 23:39:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</guid><description>&lt;h2 id="css의-크기-단위">CSS의 크기 단위&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/size-units-in-css/01.png" alt="Untitled">&lt;/p>
+&lt;p>CSS에는 다양한 단위가 존재합니다. 우리가 잘 아는 &lt;code>px&lt;/code>와 &lt;code>%&lt;/code>부터, &lt;code>em&lt;/code>, &lt;code>rem&lt;/code>, &lt;code>pt&lt;/code>, &lt;code>vh&lt;/code>, &lt;code>vw&lt;/code> 등등 다양한 단위가 존재하는데요, 이 크기 단위들을 언제 어떻게 사용하면 좋을지에 대해 정리해 보았습니다.&lt;/p>
+&lt;h2 id="상대-단위와-절대-단위">상대 단위와 절대 단위&lt;/h2>
+&lt;p>&lt;code>px&lt;/code>과 &lt;code>%&lt;/code>를 먼저 비교해 보면, &lt;code>px&lt;/code>은 우리가 알고 있는 컴퓨터 화면의 1픽셀을 의미합니다. 이는 어느 화면에서나 같은 크기를 나타내므로 &lt;strong>절대 단위&lt;/strong>에 해당합니다. 반면 &lt;code>%&lt;/code>는 보통 부모 element의 크기를 상속받아 그의 정해진 비율만큼을 나타냅니다. 즉 &lt;code>width: 10px;&lt;/code>인 부모를 가진 element에 &lt;code>width: 50%;&lt;/code>를 주면 5px이 되겠죠. 이렇게 상황에 따라서 다른 값을 갖는 단위를 &lt;strong>상대 단위&lt;/strong>라고 부릅니다.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/ecmascript/index.html b/tags/ecmascript/index.html
index aaad39b..c1fa5d4 100644
--- a/tags/ecmascript/index.html
+++ b/tags/ecmascript/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>ECMAScript | PrayinForRain.dev</title>
-<meta property="og:title" content="ECMAScript | PrayinForRain.dev"><meta name=twitter:title content="ECMAScript | PrayinForRain.dev"><meta itemprop=name content="ECMAScript | PrayinForRain.dev"><meta name=application-name content="ECMAScript | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/ecmascript/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/ecmascript/><link href=/tags/ecmascript/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/ecmascript/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="ECMAScript | PrayinForRain.dev"><meta name=twitter:title content="ECMAScript | PrayinForRain.dev"><meta itemprop=name content="ECMAScript | PrayinForRain.dev"><meta name=application-name content="ECMAScript | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/ecmascript/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/ecmascript/><link href=/tags/ecmascript/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/ecmascript/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">ECMAScript</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/01/ecmascript/><h4 class=post-item-title>ECMAScript</h4></a></div><time class=post-item-meta datetime=2023-01-25T16:35:01+0900>2023. 1. 25.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">ECMAScript</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/01/ecmascript/><h4 class=post-item-title>ECMAScript</h4></a></div><time class=post-item-meta datetime=2023-01-25T16:35:01+0900>2023. 1. 25.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/ecmascript/index.xml b/tags/ecmascript/index.xml
index da6a481..7e446ef 100644
--- a/tags/ecmascript/index.xml
+++ b/tags/ecmascript/index.xml
@@ -1,3 +1,8 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>ECMAScript on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/ecmascript/</link><description>Recent content in ECMAScript on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Wed, 25 Jan 2023 16:35:01 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/ecmascript/index.xml" rel="self" type="application/rss+xml"/><item><title>ECMAScript</title><link>https://prayinforrain.github.io/posts/2023/01/ecmascript/</link><pubDate>Wed, 25 Jan 2023 16:35:01 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/ecmascript/</guid><description>Ecma international Ecma International is an industry association dedicated to the standardization of information and communication systems Emca International은 정보통신 시스템의 표준화를 위한 국제 표준화 기구입니다. &amp;gt; https://www.ecma-international.org/
-Ecma International은 Ecma 사이트에서 소개하듯, 정보통신 시스템의 표준을 만들기 위한 국제 기구입니다. C#, JSON, .u3d 확장자 등 여러 방면에서의 표준안을 제시하였으며, 개발자를 위한 IEEE같은 존재로 이해하면 될 것 같습니다.(제 생각)
-유럽에서 컴퓨터 시스템을 표준화하기 위해 설립되어서 ECMA(European Computer Manufacturers Association)라는 이름을 가지고 있으나 유럽국가 뿐 아니라 전세계의 표준으로 활용되기 위해 Ecma International로 이름을 변경하였습니다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>ECMAScript on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/ecmascript/</link><description>Recent content in ECMAScript on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Wed, 25 Jan 2023 16:35:01 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/ecmascript/index.xml" rel="self" type="application/rss+xml"/><item><title>ECMAScript</title><link>https://prayinforrain.github.io/posts/2023/01/ecmascript/</link><pubDate>Wed, 25 Jan 2023 16:35:01 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/ecmascript/</guid><description>&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/ecmascript/01.png" alt="untitled">&lt;/p>
+&lt;h2 id="ecma-international">Ecma international&lt;/h2>
+&lt;blockquote>
+&lt;p>&lt;strong>Ecma International&lt;/strong> is an industry association dedicated to the standardization of information and communication systems
+&lt;em>Emca International은 정보통신 시스템의 표준화를 위한 국제 표준화 기구입니다.&lt;/em> &amp;gt; &lt;a href="https://www.ecma-international.org/">https://www.ecma-international.org/&lt;/a>&lt;/p>
+&lt;/blockquote>
+&lt;p>Ecma International은 Ecma 사이트에서 소개하듯, 정보통신 시스템의 표준을 만들기 위한 국제 기구입니다. C#, JSON, .u3d 확장자 등 여러 방면에서의 표준안을 제시하였으며, 개발자를 위한 IEEE같은 존재로 이해하면 될 것 같습니다.(제 생각)&lt;/p>
+&lt;p>유럽에서 컴퓨터 시스템을 표준화하기 위해 설립되어서 &lt;strong>ECMA&lt;/strong>(&lt;em>European Computer Manufacturers Association&lt;/em>)라는 이름을 가지고 있으나 유럽국가 뿐 아니라 전세계의 표준으로 활용되기 위해 &lt;strong>Ecma International&lt;/strong>로 이름을 변경하였습니다. &lt;strong>ECMA&lt;/strong> 자체는 두문자어이지만 지금의 이름은 하나의 고유명사로 사용되는 셈이죠. 따라서 &lt;strong>Ecma&lt;/strong>로 표기하는 것이 맞습니다.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/emotion/index.html b/tags/emotion/index.html
index e89dde8..7b7946c 100644
--- a/tags/emotion/index.html
+++ b/tags/emotion/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Emotion | PrayinForRain.dev</title>
-<meta property="og:title" content="Emotion | PrayinForRain.dev"><meta name=twitter:title content="Emotion | PrayinForRain.dev"><meta itemprop=name content="Emotion | PrayinForRain.dev"><meta name=application-name content="Emotion | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/emotion/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/emotion/><link href=/tags/emotion/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/emotion/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Emotion | PrayinForRain.dev"><meta name=twitter:title content="Emotion | PrayinForRain.dev"><meta itemprop=name content="Emotion | PrayinForRain.dev"><meta name=application-name content="Emotion | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/emotion/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/emotion/><link href=/tags/emotion/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/emotion/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Emotion</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2022</h2><article class=post-item><div class=post-item-content><a href=/posts/2022/11/emotion/><h4 class=post-item-title>Emotion</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Emotion</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2022</h2><article class=post-item><div class=post-item-content><a href=/posts/2022/11/emotion/><h4 class=post-item-title>Emotion</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/emotion/index.xml b/tags/emotion/index.xml
index 15e6c41..87a7edc 100644
--- a/tags/emotion/index.xml
+++ b/tags/emotion/index.xml
@@ -1,2 +1,10 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Emotion on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/emotion/</link><description>Recent content in Emotion on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Fri, 18 Nov 2022 16:42:55 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/emotion/index.xml" rel="self" type="application/rss+xml"/><item><title>Emotion</title><link>https://prayinforrain.github.io/posts/2022/11/emotion/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/emotion/</guid><description>🤷TL;DR CSS-in-JS는 프로젝트 규모가 커질수록 관리하기 어려운 CSS의 문제를 보완한다. emotion과 styled-components는 사용상의 차이가 거의 없으니 골라서 사용하자. 적절한 IDE Extension을 잘 활용하자. CSS-in-JS가 모든 경우에 대한 정답이 아님을 인지하자. 🎨CSS-in-JS CSS-in-JS는 HTML Element의 스타일을 자바스크립트 파일을 통해서 지정하는 방식입니다. .css 파일이 하던 일을 .js 파일에게 시키는 것이죠. CSS는 CSS이고, JS는 JS입니다. 왜 굳이 둘을 합쳐야만 하는 것일까요? 이 알 수 없는 발상을 이해하려면 우선 기존 css의 단점을 살펴보겠습니다.
-제가 학습 스프린트때 진행한 프로젝트 파일의 일부입니다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Emotion on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/emotion/</link><description>Recent content in Emotion on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Fri, 18 Nov 2022 16:42:55 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/emotion/index.xml" rel="self" type="application/rss+xml"/><item><title>Emotion</title><link>https://prayinforrain.github.io/posts/2022/11/emotion/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/emotion/</guid><description>&lt;h2 id="tldr">🤷TL;DR&lt;/h2>
+&lt;ul>
+&lt;li>CSS-in-JS는 프로젝트 규모가 커질수록 관리하기 어려운 CSS의 문제를 보완한다.&lt;/li>
+&lt;li>emotion과 styled-components는 사용상의 차이가 거의 없으니 골라서 사용하자.&lt;/li>
+&lt;li>적절한 IDE Extension을 잘 활용하자.&lt;/li>
+&lt;li>CSS-in-JS가 모든 경우에 대한 정답이 아님을 인지하자.&lt;/li>
+&lt;/ul>
+&lt;h2 id="css-in-js">🎨CSS-in-JS&lt;/h2>
+&lt;p>CSS-in-JS는 HTML Element의 스타일을 자바스크립트 파일을 통해서 지정하는 방식입니다. .css 파일이 하던 일을 .js 파일에게 시키는 것이죠. CSS는 CSS이고, JS는 JS입니다. 왜 굳이 둘을 합쳐야만 하는 것일까요? 이 알 수 없는 발상을 이해하려면 우선 기존 css의 단점을 살펴보겠습니다.&lt;/p>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2022/11/emotion/emotion_01.png" alt="Untitled">&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/firebase/index.html b/tags/firebase/index.html
index a3ef303..8b25f3c 100644
--- a/tags/firebase/index.html
+++ b/tags/firebase/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Firebase | PrayinForRain.dev</title>
-<meta property="og:title" content="Firebase | PrayinForRain.dev"><meta name=twitter:title content="Firebase | PrayinForRain.dev"><meta itemprop=name content="Firebase | PrayinForRain.dev"><meta name=application-name content="Firebase | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/firebase/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/firebase/><link href=/tags/firebase/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/firebase/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Firebase | PrayinForRain.dev"><meta name=twitter:title content="Firebase | PrayinForRain.dev"><meta itemprop=name content="Firebase | PrayinForRain.dev"><meta name=application-name content="Firebase | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/firebase/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/firebase/><link href=/tags/firebase/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/firebase/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Firebase</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/02/firebase-with-typescript/><h4 class=post-item-title>Firebase를 TypeScript에서 사용하기</h4></a></div><time class=post-item-meta datetime=2023-02-15T15:17:00+0900>2023. 2. 15.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Firebase</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/02/firebase-with-typescript/><h4 class=post-item-title>Firebase를 TypeScript에서 사용하기</h4></a></div><time class=post-item-meta datetime=2023-02-15T15:17:00+0900>2023. 2. 15.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/firebase/index.xml b/tags/firebase/index.xml
index d9f378f..0a2f31f 100644
--- a/tags/firebase/index.xml
+++ b/tags/firebase/index.xml
@@ -1,4 +1,10 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Firebase on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/firebase/</link><description>Recent content in Firebase on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Wed, 15 Feb 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/firebase/index.xml" rel="self" type="application/rss+xml"/><item><title>Firebase를 TypeScript에서 사용하기</title><link>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</link><pubDate>Wed, 15 Feb 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</guid><description>최근에 들어서 Firebase가 필요한 일이 있었다. 대학교에서 써본 경험은 있었는데, 오랜만에 만난 Firebase는 예전같지 않았다. 가장 큰 문제는 Firebase가 제공하는 데이터베이스인 Firestore는 문서를 가져와도 타입을 제대로 정의할 수 없다는 것.
-자동완성이 안되는 타입스크립트는.. 그.. 왜..?
-물론 데이터스키마를 따로 정의하지 않기 때문에 Firebase 라이브러리가 DocumentData 타입을 개발자에게 맞춰줄 의무는 없지만, 적어도 React.useState처럼 제네릭으로 타입을 받아 어느정도 약속해 주기를 바랐다. 아니 바라는게 아니라 되어야 하는 거 아닌가..?
-붕대 감기 우선 Firebase의 쿼리 실행 결과로 오는 DocumentData는 다음과 같이 정의되어 있다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Firebase on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/firebase/</link><description>Recent content in Firebase on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Wed, 15 Feb 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/firebase/index.xml" rel="self" type="application/rss+xml"/><item><title>Firebase를 TypeScript에서 사용하기</title><link>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</link><pubDate>Wed, 15 Feb 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</guid><description>&lt;p>최근에 들어서 Firebase가 필요한 일이 있었다. 대학교에서 써본 경험은 있었는데, 오랜만에 만난 Firebase는 예전같지 않았다. 가장 큰 문제는 Firebase가 제공하는 데이터베이스인 Firestore는 문서를 가져와도 타입을 제대로 정의할 수 없다는 것.&lt;/p>
+&lt;figure>&lt;img src="https://prayinforrain.github.io/images/posts/2023/02/firebase-with-typescript/01.png"
+ alt="image">&lt;figcaption>
+ &lt;p>자동완성이 안되는 타입스크립트는.. 그.. 왜..?&lt;/p>
+ &lt;/figcaption>
+&lt;/figure>
+
+&lt;p>물론 데이터스키마를 따로 정의하지 않기 때문에 Firebase 라이브러리가 &lt;code>DocumentData&lt;/code> 타입을 개발자에게 맞춰줄 의무는 없지만, 적어도 &lt;code>React.useState&lt;/code>처럼 제네릭으로 타입을 받아 어느정도 약속해 주기를 바랐다. 아니 바라는게 아니라 되어야 하는 거 아닌가..?&lt;/p>
+&lt;h2 id="붕대-감기">붕대 감기&lt;/h2>
+&lt;p>우선 Firebase의 쿼리 실행 결과로 오는 &lt;code>DocumentData&lt;/code>는 다음과 같이 정의되어 있다.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/generic/index.html b/tags/generic/index.html
index a5f5db3..6351ef3 100644
--- a/tags/generic/index.html
+++ b/tags/generic/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Generic | PrayinForRain.dev</title>
-<meta property="og:title" content="Generic | PrayinForRain.dev"><meta name=twitter:title content="Generic | PrayinForRain.dev"><meta itemprop=name content="Generic | PrayinForRain.dev"><meta name=application-name content="Generic | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/generic/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/generic/><link href=/tags/generic/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/generic/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Generic | PrayinForRain.dev"><meta name=twitter:title content="Generic | PrayinForRain.dev"><meta itemprop=name content="Generic | PrayinForRain.dev"><meta name=application-name content="Generic | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/generic/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/generic/><link href=/tags/generic/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/generic/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Generic</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/02/typescript-generic/><h4 class=post-item-title>Typescript Generic</h4></a></div><time class=post-item-meta datetime=2023-02-01T02:01:15+0900>2023. 2. 1.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Generic</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/02/typescript-generic/><h4 class=post-item-title>Typescript Generic</h4></a></div><time class=post-item-meta datetime=2023-02-01T02:01:15+0900>2023. 2. 1.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/generic/index.xml b/tags/generic/index.xml
index fab4402..edcd7f8 100644
--- a/tags/generic/index.xml
+++ b/tags/generic/index.xml
@@ -1,4 +1,23 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Generic on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/generic/</link><description>Recent content in Generic on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Wed, 01 Feb 2023 02:01:15 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/generic/index.xml" rel="self" type="application/rss+xml"/><item><title>Typescript Generic</title><link>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</link><pubDate>Wed, 01 Feb 2023 02:01:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</guid><description>타입스크립트와 리액트를 같이 사용할 때, 우리는 useState 훅을 아래와 같이 사용합니다.
-const [name, setName] = useState&amp;lt;string&amp;gt;(&amp;#34;지상렬&amp;#34;); 뭔진 몰라도, 저 꺽쇠 괄호를 사용해서 state가 다룰 상태의 타입을 지정할 수가 있습니다. 사실 적지 않아도 알아서 추론해 주지만, 아무튼 name.split('')처럼 string 타입이 제공하는 메소드나 프로퍼티도 자동완성해주고, 아주 편하게 사용할 수 있습니다. 오늘은 저 꺽쇠괄호에 대해 알아볼거에요.
-any 타입의 문제 아무튼 이번에 가져온 예제는 스택(Stack) 자료구조입니다. 그냥 대충 만들게요.
-class Stack { arr: any[] = []; push(element: any) { this.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Generic on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/generic/</link><description>Recent content in Generic on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Wed, 01 Feb 2023 02:01:15 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/generic/index.xml" rel="self" type="application/rss+xml"/><item><title>Typescript Generic</title><link>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</link><pubDate>Wed, 01 Feb 2023 02:01:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</guid><description>&lt;p>타입스크립트와 리액트를 같이 사용할 때, 우리는 &lt;code>useState&lt;/code> 훅을 아래와 같이 사용합니다.&lt;/p>
+&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-typescript" data-lang="typescript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="nx">name&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">setName&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">useState&lt;/span>&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">string&lt;/span>&lt;span class="p">&amp;gt;(&lt;/span>&lt;span class="s2">&amp;#34;지상렬&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>뭔진 몰라도, 저 꺽쇠 괄호를 사용해서 state가 다룰 상태의 타입을 지정할 수가 있습니다. 사실 적지 않아도 알아서 추론해 주지만, 아무튼 &lt;code>name.split('')&lt;/code>처럼 string 타입이 제공하는 메소드나 프로퍼티도 자동완성해주고, 아주 편하게 사용할 수 있습니다. 오늘은 저 꺽쇠괄호에 대해 알아볼거에요.&lt;/p>
+&lt;h2 id="any-타입의-문제">any 타입의 문제&lt;/h2>
+&lt;p>아무튼 이번에 가져온 예제는 스택(Stack) 자료구조입니다. 그냥 대충 만들게요.&lt;/p>
+&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-typescript" data-lang="typescript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">class&lt;/span> &lt;span class="nx">Stack&lt;/span> &lt;span class="p">{&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">arr&lt;/span>: &lt;span class="kt">any&lt;/span>&lt;span class="p">[]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[];&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">element&lt;/span>: &lt;span class="kt">any&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">arr&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">element&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">arr&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">length&lt;/span>&lt;span class="p">;&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">pop() {&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">arr&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">pop&lt;/span>&lt;span class="p">();&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
+&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-typescript" data-lang="typescript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">stringStack&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="k">new&lt;/span> &lt;span class="nx">Stack&lt;/span>&lt;span class="p">();&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">stringStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;크와앙&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">console&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">log&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">stringStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">pop&lt;/span>&lt;span class="p">().&lt;/span>&lt;span class="nx">slice&lt;/span>&lt;span class="p">());&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">numberStack&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="k">new&lt;/span> &lt;span class="nx">Stack&lt;/span>&lt;span class="p">();&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">numberStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">console&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">log&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">numberStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">pop&lt;/span>&lt;span class="p">().&lt;/span>&lt;span class="nx">slice&lt;/span>&lt;span class="p">());&lt;/span> &lt;span class="c1">// TypeError: numberStack.pop(...).slice is not a function
+&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>당연히 &lt;code>numberStack&lt;/code> 부분에서 에러가 나지만, 이 문제를 &lt;strong>코드를 실행하기 전까진 알 수 없습니다&lt;/strong>. &lt;code>Stack&lt;/code>이 관리하는 것은 &lt;code>any&lt;/code> 타입의 배열이니까요.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/hugo/index.html b/tags/hugo/index.html
index 88e3709..c323e2b 100644
--- a/tags/hugo/index.html
+++ b/tags/hugo/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Hugo | PrayinForRain.dev</title>
-<meta property="og:title" content="Hugo | PrayinForRain.dev"><meta name=twitter:title content="Hugo | PrayinForRain.dev"><meta itemprop=name content="Hugo | PrayinForRain.dev"><meta name=application-name content="Hugo | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/hugo/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/hugo/><link href=/tags/hugo/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/hugo/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Hugo | PrayinForRain.dev"><meta name=twitter:title content="Hugo | PrayinForRain.dev"><meta itemprop=name content="Hugo | PrayinForRain.dev"><meta name=application-name content="Hugo | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/hugo/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/hugo/><link href=/tags/hugo/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/hugo/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Hugo</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/01/migrating-to-hugo/><h4 class=post-item-title>Hugo로 블로그를 옮기자</h4></a></div><time class=post-item-meta datetime=2023-01-30T19:17:55+0900>2023. 1. 30.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Hugo</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/01/migrating-to-hugo/><h4 class=post-item-title>Hugo로 블로그를 옮기자</h4></a></div><time class=post-item-meta datetime=2023-01-30T19:17:55+0900>2023. 1. 30.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/hugo/index.xml b/tags/hugo/index.xml
index 06a4abe..899d3c2 100644
--- a/tags/hugo/index.xml
+++ b/tags/hugo/index.xml
@@ -1,2 +1,6 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Hugo on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/hugo/</link><description>Recent content in Hugo on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Mon, 30 Jan 2023 19:17:55 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/hugo/index.xml" rel="self" type="application/rss+xml"/><item><title>Hugo로 블로그를 옮기자</title><link>https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/</link><pubDate>Mon, 30 Jan 2023 19:17:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/</guid><description>알음알음 티스푼 공사로 티스토리에서 이 곳으로 블로그를 옮겼습니다. 티스토리에 있던 컨텐츠 대부분은 옮기지 않았습니다. 별 의미도 없고 너무 사적인 내용이 많았기 때문입니다. 또 티스토리만의 감성이라고 해야 하나.. 약간 그 곳에 더 맞는 포인트들이 있어서 아카이브같은 느낌으로 그냥 티스토리에 두기로 했습니다. 곳곳에 티스토리 링크가 있으니 시간을 효율적으로 버리고 싶은 분이 있다면 읽어주셔도 감사할 것 같습니다. 아무튼 옮겨야 하는 컨텐츠도 없으면서 정말 오랜 기간 삽질을 했는데, 그 과정에 대해 이야기해보려고 합니다.
-블로그를 이전하게 된 계기 아직도 저 Main Page라는 글자의 의미를 모르겠습니다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Hugo on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/hugo/</link><description>Recent content in Hugo on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Mon, 30 Jan 2023 19:17:55 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/hugo/index.xml" rel="self" type="application/rss+xml"/><item><title>Hugo로 블로그를 옮기자</title><link>https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/</link><pubDate>Mon, 30 Jan 2023 19:17:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/migrating-to-hugo/</guid><description>&lt;p>알음알음 티스푼 공사로 티스토리에서 이 곳으로 블로그를 옮겼습니다. 티스토리에 있던 컨텐츠 대부분은 옮기지 않았습니다. 별 의미도 없고 너무 사적인 내용이 많았기 때문입니다. 또 티스토리만의 감성이라고 해야 하나.. 약간 그 곳에 더 맞는 포인트들이 있어서 아카이브같은 느낌으로 그냥 티스토리에 두기로 했습니다. 곳곳에 티스토리 링크가 있으니 시간을 효율적으로 버리고 싶은 분이 있다면 읽어주셔도 감사할 것 같습니다.
+아무튼 옮겨야 하는 컨텐츠도 없으면서 정말 오랜 기간 삽질을 했는데, 그 과정에 대해 이야기해보려고 합니다.&lt;/p>
+&lt;h2 id="블로그를-이전하게-된-계기">블로그를 이전하게 된 계기&lt;/h2>
+&lt;p>&lt;figure>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/migrating-to-hugo/01.png"
+ alt="image">&lt;figcaption>
+ &lt;p>아직도 저 Main Page라는 글자의 의미를 모르겠습니다..&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/index.html b/tags/index.html
index 997ed96..1870c43 100644
--- a/tags/index.html
+++ b/tags/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Tags | PrayinForRain.dev</title>
-<meta property="og:title" content="Tags | PrayinForRain.dev"><meta name=twitter:title content="Tags | PrayinForRain.dev"><meta itemprop=name content="Tags | PrayinForRain.dev"><meta name=application-name content="Tags | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/><link href=/tags/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Tags | PrayinForRain.dev"><meta name=twitter:title content="Tags | PrayinForRain.dev"><meta itemprop=name content="Tags | PrayinForRain.dev"><meta name=application-name content="Tags | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/><link href=/tags/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Tags</h1></header><main class=page-content aria-label=Content><ul class=badge-list><li class=badge-item><a href=https://prayinforrain.github.io/tags/project/>Project (3)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/react/>React (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/cds/>Cds (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/yarn/>Yarn (3)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/nextjs/>Nextjs (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/pnp/>Pnp (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/storybook/>Storybook (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/numble/>Numble (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/algorithm/>Algorithm (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/baekjoon/>Baekjoon (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/javascript/>Javascript (3)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/nodejs/>Nodejs (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/ps/>Ps (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/macos/>MacOS (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/npm/>Npm (2)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/nvm/>Nvm (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/vscode/>Vscode (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/firebase/>Firebase (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/typescript/>TypeScript (2)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/web/>Web (7)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/generic/>Generic (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/blog/>Blog (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/hugo/>Hugo (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/tree-shaking/>Tree-Shaking (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/ecmascript/>ECMAScript (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/browser/>Browser (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/css/>CSS (2)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/moheyum/>Moheyum (8)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/css-in-js/>CSS-in-JS (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/emotion/>Emotion (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/pnpm/>Pnpm (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/recoil/>Recoil (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/redux/>Redux (1)</a></li></ul></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Tags</h1></header><main class=page-content aria-label=Content><ul class=badge-list><li class=badge-item><a href=https://prayinforrain.github.io/tags/nextjs/>Nextjs (2)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/project/>Project (3)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/react/>React (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/cds/>Cds (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/yarn/>Yarn (3)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/pnp/>Pnp (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/storybook/>Storybook (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/numble/>Numble (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/algorithm/>Algorithm (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/baekjoon/>Baekjoon (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/javascript/>Javascript (3)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/nodejs/>Nodejs (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/ps/>Ps (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/macos/>MacOS (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/npm/>Npm (2)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/nvm/>Nvm (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/vscode/>Vscode (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/firebase/>Firebase (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/typescript/>TypeScript (2)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/web/>Web (7)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/generic/>Generic (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/blog/>Blog (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/hugo/>Hugo (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/tree-shaking/>Tree-Shaking (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/ecmascript/>ECMAScript (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/browser/>Browser (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/css/>CSS (2)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/moheyum/>Moheyum (8)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/css-in-js/>CSS-in-JS (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/emotion/>Emotion (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/pnpm/>Pnpm (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/recoil/>Recoil (1)</a></li><li class=badge-item><a href=https://prayinforrain.github.io/tags/redux/>Redux (1)</a></li></ul></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/index.xml b/tags/index.xml
index 24fea25..0cd8a0d 100644
--- a/tags/index.xml
+++ b/tags/index.xml
@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Tags on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/</link><description>Recent content in Tags on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Mon, 15 Apr 2024 16:43:32 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/index.xml" rel="self" type="application/rss+xml"/><item><title>Project</title><link>https://prayinforrain.github.io/tags/project/</link><pubDate>Tue, 07 Nov 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/tags/project/</guid><description/></item><item><title>React</title><link>https://prayinforrain.github.io/tags/react/</link><pubDate>Tue, 07 Nov 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/tags/react/</guid><description/></item><item><title>Cds</title><link>https://prayinforrain.github.io/tags/cds/</link><pubDate>Sun, 18 Jun 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/tags/cds/</guid><description/></item><item><title>Yarn</title><link>https://prayinforrain.github.io/tags/yarn/</link><pubDate>Tue, 30 May 2023 02:27:49 +0900</pubDate><guid>https://prayinforrain.github.io/tags/yarn/</guid><description/></item><item><title>Nextjs</title><link>https://prayinforrain.github.io/tags/nextjs/</link><pubDate>Thu, 27 Apr 2023 15:32:50 +0900</pubDate><guid>https://prayinforrain.github.io/tags/nextjs/</guid><description/></item><item><title>Pnp</title><link>https://prayinforrain.github.io/tags/pnp/</link><pubDate>Thu, 27 Apr 2023 15:32:50 +0900</pubDate><guid>https://prayinforrain.github.io/tags/pnp/</guid><description/></item><item><title>Storybook</title><link>https://prayinforrain.github.io/tags/storybook/</link><pubDate>Thu, 27 Apr 2023 15:32:50 +0900</pubDate><guid>https://prayinforrain.github.io/tags/storybook/</guid><description/></item><item><title>Numble</title><link>https://prayinforrain.github.io/tags/numble/</link><pubDate>Sun, 23 Apr 2023 04:05:58 +0900</pubDate><guid>https://prayinforrain.github.io/tags/numble/</guid><description/></item><item><title>Algorithm</title><link>https://prayinforrain.github.io/tags/algorithm/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/tags/algorithm/</guid><description/></item><item><title>Baekjoon</title><link>https://prayinforrain.github.io/tags/baekjoon/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/tags/baekjoon/</guid><description/></item><item><title>Javascript</title><link>https://prayinforrain.github.io/tags/javascript/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/tags/javascript/</guid><description/></item><item><title>Nodejs</title><link>https://prayinforrain.github.io/tags/nodejs/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/tags/nodejs/</guid><description/></item><item><title>Ps</title><link>https://prayinforrain.github.io/tags/ps/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/tags/ps/</guid><description/></item><item><title>MacOS</title><link>https://prayinforrain.github.io/tags/macos/</link><pubDate>Wed, 29 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/tags/macos/</guid><description/></item><item><title>Npm</title><link>https://prayinforrain.github.io/tags/npm/</link><pubDate>Wed, 29 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/tags/npm/</guid><description/></item><item><title>Nvm</title><link>https://prayinforrain.github.io/tags/nvm/</link><pubDate>Wed, 29 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/tags/nvm/</guid><description/></item><item><title>Vscode</title><link>https://prayinforrain.github.io/tags/vscode/</link><pubDate>Wed, 29 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/tags/vscode/</guid><description/></item><item><title>Firebase</title><link>https://prayinforrain.github.io/tags/firebase/</link><pubDate>Wed, 15 Feb 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/tags/firebase/</guid><description/></item><item><title>TypeScript</title><link>https://prayinforrain.github.io/tags/typescript/</link><pubDate>Wed, 15 Feb 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/tags/typescript/</guid><description/></item><item><title>Web</title><link>https://prayinforrain.github.io/tags/web/</link><pubDate>Wed, 15 Feb 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/tags/web/</guid><description/></item><item><title>Generic</title><link>https://prayinforrain.github.io/tags/generic/</link><pubDate>Wed, 01 Feb 2023 02:01:15 +0900</pubDate><guid>https://prayinforrain.github.io/tags/generic/</guid><description/></item><item><title>Blog</title><link>https://prayinforrain.github.io/tags/blog/</link><pubDate>Mon, 30 Jan 2023 19:17:55 +0900</pubDate><guid>https://prayinforrain.github.io/tags/blog/</guid><description/></item><item><title>Hugo</title><link>https://prayinforrain.github.io/tags/hugo/</link><pubDate>Mon, 30 Jan 2023 19:17:55 +0900</pubDate><guid>https://prayinforrain.github.io/tags/hugo/</guid><description/></item><item><title>Tree-Shaking</title><link>https://prayinforrain.github.io/tags/tree-shaking/</link><pubDate>Wed, 25 Jan 2023 17:17:15 +0900</pubDate><guid>https://prayinforrain.github.io/tags/tree-shaking/</guid><description/></item><item><title>ECMAScript</title><link>https://prayinforrain.github.io/tags/ecmascript/</link><pubDate>Wed, 25 Jan 2023 16:35:01 +0900</pubDate><guid>https://prayinforrain.github.io/tags/ecmascript/</guid><description/></item><item><title>Browser</title><link>https://prayinforrain.github.io/tags/browser/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/tags/browser/</guid><description/></item><item><title>CSS</title><link>https://prayinforrain.github.io/tags/css/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/tags/css/</guid><description/></item><item><title>Moheyum</title><link>https://prayinforrain.github.io/tags/moheyum/</link><pubDate>Wed, 21 Dec 2022 03:30:25 +0900</pubDate><guid>https://prayinforrain.github.io/tags/moheyum/</guid><description/></item><item><title>CSS-in-JS</title><link>https://prayinforrain.github.io/tags/css-in-js/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/tags/css-in-js/</guid><description/></item><item><title>Emotion</title><link>https://prayinforrain.github.io/tags/emotion/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/tags/emotion/</guid><description/></item><item><title>Pnpm</title><link>https://prayinforrain.github.io/tags/pnpm/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/tags/pnpm/</guid><description/></item><item><title>Recoil</title><link>https://prayinforrain.github.io/tags/recoil/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/tags/recoil/</guid><description/></item><item><title>Redux</title><link>https://prayinforrain.github.io/tags/redux/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/tags/redux/</guid><description/></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Tags on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/</link><description>Recent content in Tags on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Thu, 18 Jul 2024 12:34:32 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/index.xml" rel="self" type="application/rss+xml"/><item><title>Nextjs</title><link>https://prayinforrain.github.io/tags/nextjs/</link><pubDate>Thu, 18 Jul 2024 12:34:32 +0900</pubDate><guid>https://prayinforrain.github.io/tags/nextjs/</guid><description/></item><item><title>Project</title><link>https://prayinforrain.github.io/tags/project/</link><pubDate>Tue, 07 Nov 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/tags/project/</guid><description/></item><item><title>React</title><link>https://prayinforrain.github.io/tags/react/</link><pubDate>Tue, 07 Nov 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/tags/react/</guid><description/></item><item><title>Cds</title><link>https://prayinforrain.github.io/tags/cds/</link><pubDate>Sun, 18 Jun 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/tags/cds/</guid><description/></item><item><title>Yarn</title><link>https://prayinforrain.github.io/tags/yarn/</link><pubDate>Tue, 30 May 2023 02:27:49 +0900</pubDate><guid>https://prayinforrain.github.io/tags/yarn/</guid><description/></item><item><title>Pnp</title><link>https://prayinforrain.github.io/tags/pnp/</link><pubDate>Thu, 27 Apr 2023 15:32:50 +0900</pubDate><guid>https://prayinforrain.github.io/tags/pnp/</guid><description/></item><item><title>Storybook</title><link>https://prayinforrain.github.io/tags/storybook/</link><pubDate>Thu, 27 Apr 2023 15:32:50 +0900</pubDate><guid>https://prayinforrain.github.io/tags/storybook/</guid><description/></item><item><title>Numble</title><link>https://prayinforrain.github.io/tags/numble/</link><pubDate>Sun, 23 Apr 2023 04:05:58 +0900</pubDate><guid>https://prayinforrain.github.io/tags/numble/</guid><description/></item><item><title>Algorithm</title><link>https://prayinforrain.github.io/tags/algorithm/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/tags/algorithm/</guid><description/></item><item><title>Baekjoon</title><link>https://prayinforrain.github.io/tags/baekjoon/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/tags/baekjoon/</guid><description/></item><item><title>Javascript</title><link>https://prayinforrain.github.io/tags/javascript/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/tags/javascript/</guid><description/></item><item><title>Nodejs</title><link>https://prayinforrain.github.io/tags/nodejs/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/tags/nodejs/</guid><description/></item><item><title>Ps</title><link>https://prayinforrain.github.io/tags/ps/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/tags/ps/</guid><description/></item><item><title>MacOS</title><link>https://prayinforrain.github.io/tags/macos/</link><pubDate>Wed, 29 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/tags/macos/</guid><description/></item><item><title>Npm</title><link>https://prayinforrain.github.io/tags/npm/</link><pubDate>Wed, 29 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/tags/npm/</guid><description/></item><item><title>Nvm</title><link>https://prayinforrain.github.io/tags/nvm/</link><pubDate>Wed, 29 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/tags/nvm/</guid><description/></item><item><title>Vscode</title><link>https://prayinforrain.github.io/tags/vscode/</link><pubDate>Wed, 29 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/tags/vscode/</guid><description/></item><item><title>Firebase</title><link>https://prayinforrain.github.io/tags/firebase/</link><pubDate>Wed, 15 Feb 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/tags/firebase/</guid><description/></item><item><title>TypeScript</title><link>https://prayinforrain.github.io/tags/typescript/</link><pubDate>Wed, 15 Feb 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/tags/typescript/</guid><description/></item><item><title>Web</title><link>https://prayinforrain.github.io/tags/web/</link><pubDate>Wed, 15 Feb 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/tags/web/</guid><description/></item><item><title>Generic</title><link>https://prayinforrain.github.io/tags/generic/</link><pubDate>Wed, 01 Feb 2023 02:01:15 +0900</pubDate><guid>https://prayinforrain.github.io/tags/generic/</guid><description/></item><item><title>Blog</title><link>https://prayinforrain.github.io/tags/blog/</link><pubDate>Mon, 30 Jan 2023 19:17:55 +0900</pubDate><guid>https://prayinforrain.github.io/tags/blog/</guid><description/></item><item><title>Hugo</title><link>https://prayinforrain.github.io/tags/hugo/</link><pubDate>Mon, 30 Jan 2023 19:17:55 +0900</pubDate><guid>https://prayinforrain.github.io/tags/hugo/</guid><description/></item><item><title>Tree-Shaking</title><link>https://prayinforrain.github.io/tags/tree-shaking/</link><pubDate>Wed, 25 Jan 2023 17:17:15 +0900</pubDate><guid>https://prayinforrain.github.io/tags/tree-shaking/</guid><description/></item><item><title>ECMAScript</title><link>https://prayinforrain.github.io/tags/ecmascript/</link><pubDate>Wed, 25 Jan 2023 16:35:01 +0900</pubDate><guid>https://prayinforrain.github.io/tags/ecmascript/</guid><description/></item><item><title>Browser</title><link>https://prayinforrain.github.io/tags/browser/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/tags/browser/</guid><description/></item><item><title>CSS</title><link>https://prayinforrain.github.io/tags/css/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/tags/css/</guid><description/></item><item><title>Moheyum</title><link>https://prayinforrain.github.io/tags/moheyum/</link><pubDate>Wed, 21 Dec 2022 03:30:25 +0900</pubDate><guid>https://prayinforrain.github.io/tags/moheyum/</guid><description/></item><item><title>CSS-in-JS</title><link>https://prayinforrain.github.io/tags/css-in-js/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/tags/css-in-js/</guid><description/></item><item><title>Emotion</title><link>https://prayinforrain.github.io/tags/emotion/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/tags/emotion/</guid><description/></item><item><title>Pnpm</title><link>https://prayinforrain.github.io/tags/pnpm/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/tags/pnpm/</guid><description/></item><item><title>Recoil</title><link>https://prayinforrain.github.io/tags/recoil/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/tags/recoil/</guid><description/></item><item><title>Redux</title><link>https://prayinforrain.github.io/tags/redux/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/tags/redux/</guid><description/></item></channel></rss>
\ No newline at end of file
diff --git a/tags/javascript/index.html b/tags/javascript/index.html
index c9ac2dc..d2a647a 100644
--- a/tags/javascript/index.html
+++ b/tags/javascript/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Javascript | PrayinForRain.dev</title>
-<meta property="og:title" content="Javascript | PrayinForRain.dev"><meta name=twitter:title content="Javascript | PrayinForRain.dev"><meta itemprop=name content="Javascript | PrayinForRain.dev"><meta name=application-name content="Javascript | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/javascript/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/javascript/><link href=/tags/javascript/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/javascript/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Javascript | PrayinForRain.dev"><meta name=twitter:title content="Javascript | PrayinForRain.dev"><meta itemprop=name content="Javascript | PrayinForRain.dev"><meta name=application-name content="Javascript | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/javascript/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/javascript/><link href=/tags/javascript/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/javascript/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Javascript</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/03/nodejs-for-baekjoon/><h4 class=post-item-title>백준을 위한 node.js</h4></a></div><time class=post-item-meta datetime=2023-03-30T15:17:00+0900>2023. 3. 30.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/tree-shaking/><h4 class=post-item-title>Tree Shaking</h4></a></div><time class=post-item-meta datetime=2023-01-25T17:17:15+0900>2023. 1. 25.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/ecmascript/><h4 class=post-item-title>ECMAScript</h4></a></div><time class=post-item-meta datetime=2023-01-25T16:35:01+0900>2023. 1. 25.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Javascript</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/03/nodejs-for-baekjoon/><h4 class=post-item-title>백준을 위한 node.js</h4></a></div><time class=post-item-meta datetime=2023-03-30T15:17:00+0900>2023. 3. 30.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/tree-shaking/><h4 class=post-item-title>Tree Shaking</h4></a></div><time class=post-item-meta datetime=2023-01-25T17:17:15+0900>2023. 1. 25.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/ecmascript/><h4 class=post-item-title>ECMAScript</h4></a></div><time class=post-item-meta datetime=2023-01-25T16:35:01+0900>2023. 1. 25.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/javascript/index.xml b/tags/javascript/index.xml
index c7c3e1d..09908b0 100644
--- a/tags/javascript/index.xml
+++ b/tags/javascript/index.xml
@@ -1,6 +1,15 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Javascript on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/javascript/</link><description>Recent content in Javascript on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Thu, 30 Mar 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/javascript/index.xml" rel="self" type="application/rss+xml"/><item><title>백준을 위한 node.js</title><link>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</guid><description>JS라도 백준이 하고싶어 공채 시즌이다. 개인적으로 코딩 테스트를 정말정말 자신 없어했는데, 더 이상 미룰 수 없어 야금야금 공부를 시작했다.
-불편한 점이 있다면, 백준은 자바스크립트에 아주 불친절하다는 점이다. 내가 학부생 때 잘 하지도 못하는 C++로 꾸역꾸역 문제를 풀었던 이유 중 하나이기도 했다. 그 때는 아는 PS 플랫폼이 백준 뿐이니, 자바스크립트의 어쩔 수 없는 한계인가보다 했다.
-그런데 프로그래머스를 맛 보고 나니 머리가 커져서 자바스크립트가 백준에게 부당한 차별을 받는(?) 기분이 들었다. 진짜로 화가 난 건 아니지만 그래도 화가 났다.</description></item><item><title>Tree Shaking</title><link>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</link><pubDate>Wed, 25 Jan 2023 17:17:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</guid><description>용량을 절약하는 방법 웹페이지의 성능을 이야기하는 가장 직관적인 지표는 아마 페이지에 사용되는 파일의 크기일 것입니다. 파일의 크기가 무겁다면 파일을 다운받는 데 시간이 오래 걸리고, 다운로드한 파일을 읽고 렌더링 하는데도 시간이 오래 걸릴 것입니다. 따라서 번들 파일의 용량을 다이어트 하는 것은 사이트 성능에 꽤 중요한 역할을 합니다.
-위 사진은 팀 프로젝트를 하던 중 @next/bundle-analyzer 패키지를 이용해 번들 맵을 그렸던 것입니다. 클수록 번들 용량이 크다는 뜻이니 커다란 청크 위주로 최적화를 시도하면 될 것 같습니다.</description></item><item><title>ECMAScript</title><link>https://prayinforrain.github.io/posts/2023/01/ecmascript/</link><pubDate>Wed, 25 Jan 2023 16:35:01 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/ecmascript/</guid><description>Ecma international Ecma International is an industry association dedicated to the standardization of information and communication systems Emca International은 정보통신 시스템의 표준화를 위한 국제 표준화 기구입니다. &amp;gt; https://www.ecma-international.org/
-Ecma International은 Ecma 사이트에서 소개하듯, 정보통신 시스템의 표준을 만들기 위한 국제 기구입니다. C#, JSON, .u3d 확장자 등 여러 방면에서의 표준안을 제시하였으며, 개발자를 위한 IEEE같은 존재로 이해하면 될 것 같습니다.(제 생각)
-유럽에서 컴퓨터 시스템을 표준화하기 위해 설립되어서 ECMA(European Computer Manufacturers Association)라는 이름을 가지고 있으나 유럽국가 뿐 아니라 전세계의 표준으로 활용되기 위해 Ecma International로 이름을 변경하였습니다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Javascript on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/javascript/</link><description>Recent content in Javascript on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Thu, 30 Mar 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/javascript/index.xml" rel="self" type="application/rss+xml"/><item><title>백준을 위한 node.js</title><link>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</guid><description>&lt;h2 id="js라도-백준이-하고싶어">JS라도 백준이 하고싶어&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/03/nodejs-for-baekjoon/01.png" alt="Programmers IDE">&lt;/p>
+&lt;p>공채 시즌이다. 개인적으로 코딩 테스트를 정말정말 자신 없어했는데, 더 이상 미룰 수 없어 야금야금 공부를 시작했다.&lt;br>
+불편한 점이 있다면, 백준은 자바스크립트에 아주 불친절하다는 점이다. 내가 학부생 때 잘 하지도 못하는 C++로 꾸역꾸역 문제를 풀었던 이유 중 하나이기도 했다. 그 때는 아는 PS 플랫폼이 백준 뿐이니, 자바스크립트의 어쩔 수 없는 한계인가보다 했다.&lt;/p>
+&lt;p>그런데 프로그래머스를 맛 보고 나니 머리가 커져서 자바스크립트가 백준에게 부당한 차별을 받는(?) 기분이 들었다. 진짜로 화가 난 건 아니지만 그래도 화가 났다. 용서할 수가 없어 보일러플레이트 코드를 작성했다.&lt;/p></description></item><item><title>Tree Shaking</title><link>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</link><pubDate>Wed, 25 Jan 2023 17:17:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</guid><description>&lt;h2 id="용량을-절약하는-방법">용량을 절약하는 방법&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/tree-shaking/01.png" alt="bundle_map">&lt;/p>
+&lt;p>웹페이지의 성능을 이야기하는 가장 직관적인 지표는 아마 페이지에 사용되는 &lt;strong>파일의 크기&lt;/strong>일 것입니다. 파일의 크기가 무겁다면 파일을 다운받는 데 시간이 오래 걸리고, 다운로드한 파일을 읽고 렌더링 하는데도 시간이 오래 걸릴 것입니다. 따라서 번들 파일의 용량을 다이어트 하는 것은 사이트 성능에 꽤 중요한 역할을 합니다.&lt;/p>
+&lt;p>위 사진은 팀 프로젝트를 하던 중 &lt;code>@next/bundle-analyzer&lt;/code> 패키지를 이용해 번들 맵을 그렸던 것입니다. 클수록 번들 용량이 크다는 뜻이니 커다란 청크 위주로 최적화를 시도하면 될 것 같습니다. 그런데 어떻게 용량을 줄일 수 있을까요? gzip을 통해 파일을 압축해서 보내는 방법도 있겠지만, 코드적으로 최적화할 수 있는 방법은 &lt;code>Tree-shaking&lt;/code>입니다.&lt;/p></description></item><item><title>ECMAScript</title><link>https://prayinforrain.github.io/posts/2023/01/ecmascript/</link><pubDate>Wed, 25 Jan 2023 16:35:01 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/ecmascript/</guid><description>&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/ecmascript/01.png" alt="untitled">&lt;/p>
+&lt;h2 id="ecma-international">Ecma international&lt;/h2>
+&lt;blockquote>
+&lt;p>&lt;strong>Ecma International&lt;/strong> is an industry association dedicated to the standardization of information and communication systems
+&lt;em>Emca International은 정보통신 시스템의 표준화를 위한 국제 표준화 기구입니다.&lt;/em> &amp;gt; &lt;a href="https://www.ecma-international.org/">https://www.ecma-international.org/&lt;/a>&lt;/p>
+&lt;/blockquote>
+&lt;p>Ecma International은 Ecma 사이트에서 소개하듯, 정보통신 시스템의 표준을 만들기 위한 국제 기구입니다. C#, JSON, .u3d 확장자 등 여러 방면에서의 표준안을 제시하였으며, 개발자를 위한 IEEE같은 존재로 이해하면 될 것 같습니다.(제 생각)&lt;/p>
+&lt;p>유럽에서 컴퓨터 시스템을 표준화하기 위해 설립되어서 &lt;strong>ECMA&lt;/strong>(&lt;em>European Computer Manufacturers Association&lt;/em>)라는 이름을 가지고 있으나 유럽국가 뿐 아니라 전세계의 표준으로 활용되기 위해 &lt;strong>Ecma International&lt;/strong>로 이름을 변경하였습니다. &lt;strong>ECMA&lt;/strong> 자체는 두문자어이지만 지금의 이름은 하나의 고유명사로 사용되는 셈이죠. 따라서 &lt;strong>Ecma&lt;/strong>로 표기하는 것이 맞습니다.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/macos/index.html b/tags/macos/index.html
index 26b21e8..1d8ced1 100644
--- a/tags/macos/index.html
+++ b/tags/macos/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>MacOS | PrayinForRain.dev</title>
-<meta property="og:title" content="MacOS | PrayinForRain.dev"><meta name=twitter:title content="MacOS | PrayinForRain.dev"><meta itemprop=name content="MacOS | PrayinForRain.dev"><meta name=application-name content="MacOS | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/macos/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/macos/><link href=/tags/macos/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/macos/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="MacOS | PrayinForRain.dev"><meta name=twitter:title content="MacOS | PrayinForRain.dev"><meta itemprop=name content="MacOS | PrayinForRain.dev"><meta name=application-name content="MacOS | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/macos/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/macos/><link href=/tags/macos/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/macos/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">MacOS</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/03/npm-scripts-doesnt-work/><h4 class=post-item-title>VSCode의 NPM Scripts가 작동하지 않는 사람</h4></a></div><time class=post-item-meta datetime=2023-03-29T15:17:00+0900>2023. 3. 29.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">MacOS</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/03/npm-scripts-doesnt-work/><h4 class=post-item-title>VSCode의 NPM Scripts가 작동하지 않는 사람</h4></a></div><time class=post-item-meta datetime=2023-03-29T15:17:00+0900>2023. 3. 29.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/macos/index.xml b/tags/macos/index.xml
index 5305980..9b7a7a6 100644
--- a/tags/macos/index.xml
+++ b/tags/macos/index.xml
@@ -1,3 +1,8 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>MacOS on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/macos/</link><description>Recent content in MacOS on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Wed, 29 Mar 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/macos/index.xml" rel="self" type="application/rss+xml"/><item><title>VSCode의 NPM Scripts가 작동하지 않는 사람</title><link>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</link><pubDate>Wed, 29 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</guid><description>늦잠자고 갓생사는 척 하는 삶이란&amp;hellip;
-맥북과 친해지기 시작한지 2달이 되었다. 윈도우 노트북을 사용하다가 갈아 탄 이유는, 맥에서 되는 것이 윈도우에서 되고, 윈도우에서 되는 것은 맥에서 안되는 문제를 너무 많이 겪었기 때문이다. 주변의 맥 유저에게 계속해서 테스트를 요청하기도 눈치보이고, 언젠가는 마주해야겠다고 생각했던 녀석이기 때문에 과감한 투자를 했다. 그 과정에서 내가 윈도우에 지나치게 강결합(?) 되어 있다는 것을 깨달았고, 지금은 맥도 윈도우도 못 쓰는 그 어딘가의 지점에 있다.
-그리고 최근에는 프로젝트를 하고 있다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>MacOS on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/macos/</link><description>Recent content in MacOS on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Wed, 29 Mar 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/macos/index.xml" rel="self" type="application/rss+xml"/><item><title>VSCode의 NPM Scripts가 작동하지 않는 사람</title><link>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</link><pubDate>Wed, 29 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</guid><description>&lt;figure>&lt;img src="https://prayinforrain.github.io/images/posts/2023/03/npm-scripts-doesnt-work/01.jpeg"
+ alt="image">&lt;figcaption>
+ &lt;p>늦잠자고 갓생사는 척 하는 삶이란&amp;hellip;&lt;/p>
+ &lt;/figcaption>
+&lt;/figure>
+
+&lt;p>맥북과 친해지기 시작한지 2달이 되었다. 윈도우 노트북을 사용하다가 갈아 탄 이유는, &lt;em>맥에서 되는 것이 윈도우에서 되고, 윈도우에서 되는 것은 맥에서 안되는&lt;/em> 문제를 너무 많이 겪었기 때문이다. 주변의 맥 유저에게 계속해서 테스트를 요청하기도 눈치보이고, 언젠가는 마주해야겠다고 생각했던 녀석이기 때문에 과감한 투자를 했다. 그 과정에서 내가 윈도우에 지나치게 강결합(?) 되어 있다는 것을 깨달았고, 지금은 맥도 윈도우도 못 쓰는 그 어딘가의 지점에 있다.&lt;/p>
+&lt;p>그리고 최근에는 프로젝트를 하고 있다. 부스트캠프에서 만난 사람들과 스터디를 하다가, 디자인 시스템을 만들어 보자는 이야기가 나와서 다같이 티스푼 공사 중이다. 이 것에 대해서도 글을 써야 하는데 오늘 포스팅할 내용은 이 것도 아니다. 회고를 안 쓰니 이야기가 많이 밀려 횡설수설 하는구나..&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/moheyum/index.html b/tags/moheyum/index.html
index d481720..d2033ff 100644
--- a/tags/moheyum/index.html
+++ b/tags/moheyum/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Moheyum | PrayinForRain.dev</title>
-<meta property="og:title" content="Moheyum | PrayinForRain.dev"><meta name=twitter:title content="Moheyum | PrayinForRain.dev"><meta itemprop=name content="Moheyum | PrayinForRain.dev"><meta name=application-name content="Moheyum | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/moheyum/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/moheyum/><link href=/tags/moheyum/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/moheyum/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Moheyum | PrayinForRain.dev"><meta name=twitter:title content="Moheyum | PrayinForRain.dev"><meta itemprop=name content="Moheyum | PrayinForRain.dev"><meta name=application-name content="Moheyum | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/moheyum/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/moheyum/><link href=/tags/moheyum/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/moheyum/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Moheyum</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2022</h2><article class=post-item><div class=post-item-content><a href=/posts/2022/12/finishing-moheyum/><h4 class=post-item-title>모헤윰 mo:heyum - 프로젝트 회고</h4></a></div><time class=post-item-meta datetime=2022-12-21T03:30:25+0900>2022. 12. 21.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/12/prevent-sidebar-blinking/><h4 class=post-item-title>사이드바야 그만 깜빡여라</h4></a></div><time class=post-item-meta datetime=2022-12-06T02:11:55+0900>2022. 12. 6.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/12/making-editor-markdown/><h4 class=post-item-title>마크다운 만들기 - Markdown [3/3]</h4></a></div><time class=post-item-meta datetime=2022-12-05T13:18:55+0900>2022. 12. 5.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/making-editor-getselection/><h4 class=post-item-title>마크다운 만들기 - getSelection [2/3]</h4></a></div><time class=post-item-meta datetime=2022-11-24T00:53:55+0900>2022. 11. 24.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/making-editor-contenteditable/><h4 class=post-item-title>마크다운 만들기 - contentEditable [1/3]</h4></a></div><time class=post-item-meta datetime=2022-11-22T20:36:55+0900>2022. 11. 22.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/redux-vs-recoil/><h4 class=post-item-title>Redux vs Recoil</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/npm-vs-yarn-vs-pnpm/><h4 class=post-item-title>npm vs yarn vs pnpm</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/emotion/><h4 class=post-item-title>Emotion</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Moheyum</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2022</h2><article class=post-item><div class=post-item-content><a href=/posts/2022/12/finishing-moheyum/><h4 class=post-item-title>모헤윰 mo:heyum - 프로젝트 회고</h4></a></div><time class=post-item-meta datetime=2022-12-21T03:30:25+0900>2022. 12. 21.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/12/prevent-sidebar-blinking/><h4 class=post-item-title>사이드바야 그만 깜빡여라</h4></a></div><time class=post-item-meta datetime=2022-12-06T02:11:55+0900>2022. 12. 6.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/12/making-editor-markdown/><h4 class=post-item-title>마크다운 만들기 - Markdown [3/3]</h4></a></div><time class=post-item-meta datetime=2022-12-05T13:18:55+0900>2022. 12. 5.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/making-editor-getselection/><h4 class=post-item-title>마크다운 만들기 - getSelection [2/3]</h4></a></div><time class=post-item-meta datetime=2022-11-24T00:53:55+0900>2022. 11. 24.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/making-editor-contenteditable/><h4 class=post-item-title>마크다운 만들기 - contentEditable [1/3]</h4></a></div><time class=post-item-meta datetime=2022-11-22T20:36:55+0900>2022. 11. 22.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/redux-vs-recoil/><h4 class=post-item-title>Redux vs Recoil</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/npm-vs-yarn-vs-pnpm/><h4 class=post-item-title>npm vs yarn vs pnpm</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2022/11/emotion/><h4 class=post-item-title>Emotion</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/moheyum/index.xml b/tags/moheyum/index.xml
index 9184143..505cefc 100644
--- a/tags/moheyum/index.xml
+++ b/tags/moheyum/index.xml
@@ -1,21 +1,55 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Moheyum on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/moheyum/</link><description>Recent content in Moheyum on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Wed, 21 Dec 2022 03:30:25 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/moheyum/index.xml" rel="self" type="application/rss+xml"/><item><title>모헤윰 mo:heyum - 프로젝트 회고</title><link>https://prayinforrain.github.io/posts/2022/12/finishing-moheyum/</link><pubDate>Wed, 21 Dec 2022 03:30:25 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/12/finishing-moheyum/</guid><description>티스토리 블로그에 작성했던 부스트캠프 팀 프로젝트의 회고 글이다. [원본 링크]
-내가 팀원들한테 이 얘길 했나 모르겠는데.. 이 페이지 좀 이쁘다. 잘만드셨다..
-부스트캠프의 최종 팀 프로젝트로 나는 모헤윰이라는 SNS를 만들었다. 결과물은 꽤 괜찮다. [여기]에 간단한 시연 영상이 있다. 사실 팀 구인을 하던 때부터 나는 무엇을 만드는지는 크게 중요하지 않았다. 여태까지의 학습 스프린트로 이미 개발이라는 과정은 어느정도 감을 익혔고, 내가 성장함에 따라 이 과정에서 사용하는 기술만 조금씩 변화할 뿐이라고 생각했다. 따라서 내가 팀 프로젝트에서 가장 중요하게 생각했던 포인트는 협업이었다.</description></item><item><title>사이드바야 그만 깜빡여라</title><link>https://prayinforrain.github.io/posts/2022/12/prevent-sidebar-blinking/</link><pubDate>Tue, 06 Dec 2022 02:11:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/12/prevent-sidebar-blinking/</guid><description>모헤윰의 프론트엔드 앱은 Next.js로 만들어져 있습니다. 팀원 그 누구도 사용해 본 적이 없음에도 굳이 선택한 이유는 NestJS를 써 보니 프레임워크를 사용하는 것이 협업 환경에서 코드 일관성을 지키는 데 도움을 줄 것이라는 막연한 기대와, SSR을 체험해 보고 싶은 학습적인 욕심이 있었습니다. 지금 돌아보니 ‘너와 함께 하길 잘 했어!’ 하는 감상은 없네요.
-기왕 SSR을 체험한다고 시작한 프로젝트인 만큼, 성능에 신경을 쓰지 않을 수 없게 되었습니다. 그러다 제가 좋아하는 어떤 팀의 노션에서 memoization을 통한 컴포넌트 중복 렌더링 방지에 대한 글을 읽었는데요, 이 부분이 때 마침 Next.</description></item><item><title>마크다운 만들기 - Markdown [3/3]</title><link>https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/</link><pubDate>Mon, 05 Dec 2022 13:18:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/</guid><description>모헤윰의 에디터 만들기 시리즈 모아보기
-에디터 만들기 - ContentEditable [1/3]
-에디터 만들기 - getSelection [2/3]
-에디터 만들기 - Markdown [3/3]
-마지막입니다. 입력하고, 게시할 수 있게 되었으니, 이제 남은 일은 서식을 적용하는 것 뿐입니다. 마크다운 문법을 이용해 어떻게 서식을 적용할 수 있을까요? 그 과정을 정리해 보겠습니다.
-🤷 어떻게 할까요? 정말이지 어떻게 하면 좋을까요? 우선 제가 생각하는 가장 사용성이 좋은 마크다운은 깃허브의 그것이였습니다. GFM(GitHub Flavored Markdown)이라고 부르는 스펙이 있는데, 처음에는 이걸 부르는 이름이 있는 것조차 모르고 막무가내로 리버스 엔지니어링 마인드로 작업을 시작했습니다.</description></item><item><title>마크다운 만들기 - getSelection [2/3]</title><link>https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/</link><pubDate>Thu, 24 Nov 2022 00:53:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/</guid><description>모헤윰의 에디터 만들기 시리즈 모아보기
-에디터 만들기 - ContentEditable [1/3]
-에디터 만들기 - getSelection [2/3]
-에디터 만들기 - Markdown [3/3]
-아니???????? 두 번째 글이 파서가 아니였네요. 저는 사실 이 글이 2부작이길 간절히 바랬는데, 1편에서 만든 에디터에 너무 끔찍한 버그가 있어서 이에 대해 정리해 보고자 합니다. 이걸로 3시간을 씨름하고 있었지만 모헤윰의 TIL 문서가 풍성해지고 있으니 긍정적이게 생각해야겠죠?
-💡 이 글은 Window 10, Chrome 107.0.5304.107 버전을 기준으로 작성되었습니다. 일부 환경에 따라 다르게 작동하는 부분이 있을 수 있습니다.</description></item><item><title>마크다운 만들기 - contentEditable [1/3]</title><link>https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/</link><pubDate>Tue, 22 Nov 2022 20:36:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/</guid><description>모헤윰의 에디터 만들기 시리즈 모아보기
-에디터 만들기 - ContentEditable [1/3]
-에디터 만들기 - getSelection [2/3]
-에디터 만들기 - Markdown [3/3]
-모헤윰의 핵심 기능 중 하나는 마크다운 서식 지원입니다. 왜 SNS에 마크다운을 끼얹을 생각을 했나 생각해보면 최초 기획부터 있다가 기능 다이어트를 한 후 살아남았기 때문인데, 아무튼 드디어 때가 왔습니다.
-내부적으로 에디터를 외부 라이브러리를 사용하는게 좋지 않겠냐는 이야기가 나왔는데요, 결국 직접 구현해 보기로 했지만 그 과정에서 여러 레퍼런스를 얻을 수 있었습니다. 개인적으로 멋있다고 생각한 사이트 두 가지를 소개합니다.</description></item><item><title>Emotion</title><link>https://prayinforrain.github.io/posts/2022/11/emotion/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/emotion/</guid><description>🤷TL;DR CSS-in-JS는 프로젝트 규모가 커질수록 관리하기 어려운 CSS의 문제를 보완한다. emotion과 styled-components는 사용상의 차이가 거의 없으니 골라서 사용하자. 적절한 IDE Extension을 잘 활용하자. CSS-in-JS가 모든 경우에 대한 정답이 아님을 인지하자. 🎨CSS-in-JS CSS-in-JS는 HTML Element의 스타일을 자바스크립트 파일을 통해서 지정하는 방식입니다. .css 파일이 하던 일을 .js 파일에게 시키는 것이죠. CSS는 CSS이고, JS는 JS입니다. 왜 굳이 둘을 합쳐야만 하는 것일까요? 이 알 수 없는 발상을 이해하려면 우선 기존 css의 단점을 살펴보겠습니다.
-제가 학습 스프린트때 진행한 프로젝트 파일의 일부입니다.</description></item><item><title>npm vs yarn vs pnpm</title><link>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</guid><description>지금까지 저는 아무 의심 없이 npm을 사용해왔습니다. 이따금씩 node_modules 폴더가 저를 고통스럽게 했던 시간들이 있었지만, 프로젝트 초기화에 정말 이상한 행동만 하지 않으면 npm i 한 줄과 커피 한 잔으로 모든게 문제 없이 동작했으니까요. 하지만 우리는 슬랙의 어떤 분을 통해, npm보다 좋은 방법이 있음을 알고 있습니다. 이번 포스트에서는 yarn과 pnpm을 체험해 보도록 하겠습니다.
-🤷 TL;DR npm의 의존성 관리는 사실 매우 비효율적이다. 이 문제를 보완한 패키지 매니저가 yarn, pnpm이다. 각 패키지 매니저로의 마이그레이션은 매우 쉽다.</description></item><item><title>Redux vs Recoil</title><link>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</guid><description>🤷 TL;DR Redux는 안정적이지만, 선언과 사용이 복잡하다. Recoil은 사용이 매우 쉽지만 정식 버전이 없다. 프로젝트 규모에 따라 마음에 드는 라이브러리를 선택하자 🚪 서론 우리는 React를 사용할 때 보통 useState를 통해 상태를 관리합니다. useState는 정말 섹시하지만, 한 가지 너무 큰 단점이 있습니다. 바로 컴포넌트끼리 데이터를 주고받는 데 사용하기가 힘들다는 점입니다. 그 일을 하기 위해 등장한 것이 바로 상태 관리 라이브러리입니다. 상태 관리 라이브러리의 필요성에 대해 공감하지 못하는 분들을 위해 짧은 토막글을 마련해 보았습니다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Moheyum on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/moheyum/</link><description>Recent content in Moheyum on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Wed, 21 Dec 2022 03:30:25 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/moheyum/index.xml" rel="self" type="application/rss+xml"/><item><title>모헤윰 mo:heyum - 프로젝트 회고</title><link>https://prayinforrain.github.io/posts/2022/12/finishing-moheyum/</link><pubDate>Wed, 21 Dec 2022 03:30:25 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/12/finishing-moheyum/</guid><description>&lt;blockquote>
+&lt;p>티스토리 블로그에 작성했던 부스트캠프 팀 프로젝트의 회고 글이다. &lt;a href="https://prayinforrain.tistory.com/80">[원본 링크]&lt;/a>&lt;/p>
+&lt;/blockquote>
+&lt;figure>&lt;img src="https://prayinforrain.github.io/images/posts/2022/12/finishing-moheyum/moheyum_01.png"
+ alt="image">&lt;figcaption>
+ &lt;p>내가 팀원들한테 이 얘길 했나 모르겠는데.. 이 페이지 좀 이쁘다. 잘만드셨다..&lt;/p>
+ &lt;/figcaption>
+&lt;/figure>
+
+&lt;p>부스트캠프의 최종 팀 프로젝트로 나는 &lt;strong>모헤윰&lt;/strong>이라는 SNS를 만들었다. 결과물은 꽤 괜찮다. &lt;a href="https://youtu.be/9mVinynuUTw">[여기]&lt;/a>에 간단한 시연 영상이 있다. 사실 팀 구인을 하던 때부터 나는 무엇을 만드는지는 크게 중요하지 않았다. 여태까지의 학습 스프린트로 이미 개발이라는 과정은 어느정도 감을 익혔고, 내가 성장함에 따라 이 과정에서 사용하는 기술만 조금씩 변화할 뿐이라고 생각했다. 따라서 내가 팀 프로젝트에서 가장 중요하게 생각했던 포인트는 협업이었다.&lt;/p></description></item><item><title>사이드바야 그만 깜빡여라</title><link>https://prayinforrain.github.io/posts/2022/12/prevent-sidebar-blinking/</link><pubDate>Tue, 06 Dec 2022 02:11:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/12/prevent-sidebar-blinking/</guid><description>&lt;p>&lt;strong>모헤윰&lt;/strong>의 프론트엔드 앱은 &lt;code>Next.js&lt;/code>로 만들어져 있습니다. 팀원 그 누구도 사용해 본 적이 없음에도 굳이 선택한 이유는 &lt;code>NestJS&lt;/code>를 써 보니 프레임워크를 사용하는 것이 협업 환경에서 코드 일관성을 지키는 데 도움을 줄 것이라는 막연한 기대와, &lt;code>SSR&lt;/code>을 체험해 보고 싶은 학습적인 욕심이 있었습니다. 지금 돌아보니 ‘너와 함께 하길 잘 했어!’ 하는 감상은 없네요.&lt;/p>
+&lt;p>기왕 SSR을 체험한다고 시작한 프로젝트인 만큼, 성능에 신경을 쓰지 않을 수 없게 되었습니다. 그러다 제가 좋아하는 어떤 팀의 노션에서 &lt;code>memoization&lt;/code>을 통한 컴포넌트 중복 렌더링 방지에 대한 글을 읽었는데요, 이 부분이 때 마침 &lt;a href="https://www.notion.so/next-js-13-app-dir-11191a66a5564a25ba882c8a835afd13">Next.js 13을 적용하지 못해 포기해야만 했던&lt;/a> 아픈 상처를 자극하고 있어서 모헤윰에도 시도해 보기로 하였습니다.&lt;/p></description></item><item><title>마크다운 만들기 - Markdown [3/3]</title><link>https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/</link><pubDate>Mon, 05 Dec 2022 13:18:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/</guid><description>&lt;p>&lt;strong>모헤윰&lt;/strong>의 에디터 만들기 시리즈 모아보기&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/">에디터 만들기 - ContentEditable [1/3]&lt;/a>&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/">에디터 만들기 - getSelection [2/3]&lt;/a>&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/">에디터 만들기 - Markdown [3/3]&lt;/a>&lt;/p>
+&lt;hr>
+&lt;p>마지막입니다. 입력하고, 게시할 수 있게 되었으니, 이제 남은 일은 서식을 적용하는 것 뿐입니다. 마크다운 문법을 이용해 어떻게 서식을 적용할 수 있을까요? 그 과정을 정리해 보겠습니다.&lt;/p>
+&lt;h2 id="-어떻게-할까요">🤷 어떻게 할까요?&lt;/h2>
+&lt;p>정말이지 어떻게 하면 좋을까요? 우선 제가 생각하는 가장 사용성이 좋은 마크다운은 깃허브의 그것이였습니다. &lt;a href="https://github.github.com/gfm/">GFM(GitHub Flavored Markdown)&lt;/a>이라고 부르는 스펙이 있는데, 처음에는 이걸 부르는 이름이 있는 것조차 모르고 막무가내로 리버스 엔지니어링 마인드로 작업을 시작했습니다. 아래 사진처럼 아무 이슈나 들어가서 댓글 창에 실험을 하면서요.&lt;/p></description></item><item><title>마크다운 만들기 - getSelection [2/3]</title><link>https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/</link><pubDate>Thu, 24 Nov 2022 00:53:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/</guid><description>&lt;p>&lt;strong>모헤윰&lt;/strong>의 에디터 만들기 시리즈 모아보기&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/">에디터 만들기 - ContentEditable [1/3]&lt;/a>&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/">에디터 만들기 - getSelection [2/3]&lt;/a>&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/">에디터 만들기 - Markdown [3/3]&lt;/a>&lt;/p>
+&lt;hr>
+&lt;p>아니???????? 두 번째 글이 파서가 아니였네요. 저는 사실 이 글이 2부작이길 간절히 바랬는데, 1편에서 만든 에디터에 너무 끔찍한 버그가 있어서 이에 대해 정리해 보고자 합니다. 이걸로 3시간을 씨름하고 있었지만 모헤윰의 TIL 문서가 풍성해지고 있으니 긍정적이게 생각해야겠죠?&lt;/p>
+&lt;blockquote>
+&lt;p>💡 이 글은 Window 10, Chrome 107.0.5304.107 버전을 기준으로 작성되었습니다. 일부 환경에 따라 다르게 작동하는 부분이 있을 수 있습니다.&lt;/p></description></item><item><title>마크다운 만들기 - contentEditable [1/3]</title><link>https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/</link><pubDate>Tue, 22 Nov 2022 20:36:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/</guid><description>&lt;p>&lt;strong>모헤윰&lt;/strong>의 에디터 만들기 시리즈 모아보기&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/11/making-editor-contenteditable/">에디터 만들기 - ContentEditable [1/3]&lt;/a>&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/11/making-editor-getselection/">에디터 만들기 - getSelection [2/3]&lt;/a>&lt;br>
+&lt;a href="https://prayinforrain.github.io/posts/2022/12/making-editor-markdown/">에디터 만들기 - Markdown [3/3]&lt;/a>&lt;/p>
+&lt;hr>
+&lt;p>모헤윰의 핵심 기능 중 하나는 &lt;code>마크다운 서식 지원&lt;/code>입니다. 왜 SNS에 마크다운을 끼얹을 생각을 했나 생각해보면 최초 기획부터 있다가 기능 다이어트를 한 후 살아남았기 때문인데, 아무튼 드디어 때가 왔습니다.&lt;/p>
+&lt;p>내부적으로 에디터를 외부 라이브러리를 사용하는게 좋지 않겠냐는 이야기가 나왔는데요, 결국 직접 구현해 보기로 했지만 그 과정에서 여러 레퍼런스를 얻을 수 있었습니다. 개인적으로 멋있다고 생각한 사이트 두 가지를 소개합니다.&lt;/p></description></item><item><title>Emotion</title><link>https://prayinforrain.github.io/posts/2022/11/emotion/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/emotion/</guid><description>&lt;h2 id="tldr">🤷TL;DR&lt;/h2>
+&lt;ul>
+&lt;li>CSS-in-JS는 프로젝트 규모가 커질수록 관리하기 어려운 CSS의 문제를 보완한다.&lt;/li>
+&lt;li>emotion과 styled-components는 사용상의 차이가 거의 없으니 골라서 사용하자.&lt;/li>
+&lt;li>적절한 IDE Extension을 잘 활용하자.&lt;/li>
+&lt;li>CSS-in-JS가 모든 경우에 대한 정답이 아님을 인지하자.&lt;/li>
+&lt;/ul>
+&lt;h2 id="css-in-js">🎨CSS-in-JS&lt;/h2>
+&lt;p>CSS-in-JS는 HTML Element의 스타일을 자바스크립트 파일을 통해서 지정하는 방식입니다. .css 파일이 하던 일을 .js 파일에게 시키는 것이죠. CSS는 CSS이고, JS는 JS입니다. 왜 굳이 둘을 합쳐야만 하는 것일까요? 이 알 수 없는 발상을 이해하려면 우선 기존 css의 단점을 살펴보겠습니다.&lt;/p>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2022/11/emotion/emotion_01.png" alt="Untitled">&lt;/p></description></item><item><title>npm vs yarn vs pnpm</title><link>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</guid><description>&lt;p>지금까지 저는 아무 의심 없이 npm을 사용해왔습니다. 이따금씩 &lt;code>node_modules&lt;/code> 폴더가 저를 고통스럽게 했던 시간들이 있었지만, 프로젝트 초기화에 정말 이상한 행동만 하지 않으면 &lt;code>npm i&lt;/code> 한 줄과 커피 한 잔으로 모든게 문제 없이 동작했으니까요. 하지만 우리는 슬랙의 어떤 분을 통해, npm보다 좋은 방법이 있음을 알고 있습니다. 이번 포스트에서는 &lt;code>yarn&lt;/code>과 &lt;code>pnpm&lt;/code>을 체험해 보도록 하겠습니다.&lt;/p>
+&lt;h2 id="-tldr">🤷 TL;DR&lt;/h2>
+&lt;ul>
+&lt;li>npm의 의존성 관리는 사실 매우 비효율적이다.&lt;/li>
+&lt;li>이 문제를 보완한 패키지 매니저가 yarn, pnpm이다.&lt;/li>
+&lt;li>각 패키지 매니저로의 마이그레이션은 매우 쉽다. 긍정적으로 고려해보자.&lt;/li>
+&lt;/ul>
+&lt;h2 id="-npm">🎁 npm&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_01.png" alt="Untitled">&lt;/p></description></item><item><title>Redux vs Recoil</title><link>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</guid><description>&lt;h2 id="-tldr">🤷 TL;DR&lt;/h2>
+&lt;ul>
+&lt;li>Redux는 안정적이지만, 선언과 사용이 복잡하다.&lt;/li>
+&lt;li>Recoil은 사용이 매우 쉽지만 정식 버전이 없다.&lt;/li>
+&lt;li>프로젝트 규모에 따라 마음에 드는 라이브러리를 선택하자&lt;/li>
+&lt;/ul>
+&lt;h2 id="-서론">🚪 서론&lt;/h2>
+&lt;p>우리는 React를 사용할 때 보통 &lt;code>useState&lt;/code>를 통해 상태를 관리합니다. &lt;code>useState&lt;/code>는 정말 섹시하지만, 한 가지 너무 큰 단점이 있습니다. 바로 컴포넌트끼리 데이터를 주고받는 데 사용하기가 힘들다는 점입니다. 그 일을 하기 위해 등장한 것이 바로 &lt;strong>상태 관리 라이브러리&lt;/strong>입니다. 상태 관리 라이브러리의 필요성에 대해 공감하지 못하는 분들을 위해 짧은 토막글을 마련해 보았습니다.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/nextjs/index.html b/tags/nextjs/index.html
index e923677..a8de796 100644
--- a/tags/nextjs/index.html
+++ b/tags/nextjs/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Nextjs | PrayinForRain.dev</title>
-<meta property="og:title" content="Nextjs | PrayinForRain.dev"><meta name=twitter:title content="Nextjs | PrayinForRain.dev"><meta itemprop=name content="Nextjs | PrayinForRain.dev"><meta name=application-name content="Nextjs | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/nextjs/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/nextjs/><link href=/tags/nextjs/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/nextjs/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Nextjs | PrayinForRain.dev"><meta name=twitter:title content="Nextjs | PrayinForRain.dev"><meta itemprop=name content="Nextjs | PrayinForRain.dev"><meta name=application-name content="Nextjs | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/nextjs/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/nextjs/><link href=/tags/nextjs/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/nextjs/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Nextjs</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/04/nextjs-storybook-with-pnp/><h4 class=post-item-title>Next.js Storybook에 Yarn PnP 적용하기</h4></a></div><time class=post-item-meta datetime=2023-04-27T15:32:50+0900>2023. 4. 27.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Nextjs</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2024</h2><article class=post-item><div class=post-item-content><a href=/posts/2024/07/site-optimization/><h4 class=post-item-title>Next.js 성능 개선기</h4><div class=post-item-summary>최대한 가벼운 사이트를 만들어보자</div></a></div><time class=post-item-meta datetime=2024-07-18T12:34:32+0900>2024. 7. 18.</time></article><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/04/nextjs-storybook-with-pnp/><h4 class=post-item-title>Next.js Storybook에 Yarn PnP 적용하기</h4></a></div><time class=post-item-meta datetime=2023-04-27T15:32:50+0900>2023. 4. 27.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/nextjs/index.xml b/tags/nextjs/index.xml
index e8e4128..29aa6d3 100644
--- a/tags/nextjs/index.xml
+++ b/tags/nextjs/index.xml
@@ -1,2 +1,3 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Nextjs on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/nextjs/</link><description>Recent content in Nextjs on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Thu, 27 Apr 2023 15:32:50 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/nextjs/index.xml" rel="self" type="application/rss+xml"/><item><title>Next.js Storybook에 Yarn PnP 적용하기</title><link>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</link><pubDate>Thu, 27 Apr 2023 15:32:50 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</guid><description>Storybook을 쓰려고 했는데 최근 Storybook을 사용할 일이 무척 많았다. 언젠가는 포스팅을 해야 할 CDS 프로젝트부터 넘블 챌린지도 있었고&amp;hellip; 처음엔 너무 낯설었지만 공통된 컴포넌트들을 미리 설계해 두고 재사용하는 것이 좀 더 깔끔한 설계가 되는 것 같아 매력을 느꼈다.
-그런데 문제는 내 작업 환경에 있었다. 꽤 연식이 된 윈도우 데스크탑에 수십가지 개발 환경을 섞어 놓고, 요새는 게임에도 못 쓰는 처참한 성능의 HDD에 레포를 두고 쓰니 종속성 패키지 설치도 커피 한 잔 타와야 하는 시간이 걸리니 Yarn Berry의 사용이 반필수가 되어버렸다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Nextjs on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/nextjs/</link><description>Recent content in Nextjs on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Thu, 18 Jul 2024 12:34:32 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/nextjs/index.xml" rel="self" type="application/rss+xml"/><item><title>Next.js 성능 개선기</title><link>https://prayinforrain.github.io/posts/2024/07/site-optimization/</link><pubDate>Thu, 18 Jul 2024 12:34:32 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2024/07/site-optimization/</guid><description>최대한 가벼운 사이트를 만들어보자</description></item><item><title>Next.js Storybook에 Yarn PnP 적용하기</title><link>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</link><pubDate>Thu, 27 Apr 2023 15:32:50 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</guid><description>&lt;h2 id="storybook을-쓰려고-했는데">Storybook을 쓰려고 했는데&lt;/h2>
+&lt;p>최근 Storybook을 사용할 일이 무척 많았다. 언젠가는 포스팅을 해야 할 CDS 프로젝트부터 &lt;a href="https://prayinforrain.github.io/posts/2023/04/numble-talk/">넘블 챌린지&lt;/a>도 있었고&amp;hellip; 처음엔 너무 낯설었지만 공통된 컴포넌트들을 미리 설계해 두고 재사용하는 것이 좀 더 깔끔한 설계가 되는 것 같아 매력을 느꼈다.&lt;/p>
+&lt;p>그런데 문제는 내 작업 환경에 있었다. 꽤 연식이 된 윈도우 데스크탑에 수십가지 개발 환경을 섞어 놓고, 요새는 게임에도 못 쓰는 처참한 성능의 HDD에 레포를 두고 쓰니 종속성 패키지 설치도 커피 한 잔 타와야 하는 시간이 걸리니 Yarn Berry의 사용이 반필수가 되어버렸다. 넘블 챌린지 때 Yarn Berry를 사용하고 싶었지만 애석하게도 수 많은 문제에 시달려 포기했는데, 여유가 생긴 지금 마음을 다잡고 다시 시도해 보기로 했다.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/nodejs/index.html b/tags/nodejs/index.html
index 810113e..d20fde3 100644
--- a/tags/nodejs/index.html
+++ b/tags/nodejs/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Nodejs | PrayinForRain.dev</title>
-<meta property="og:title" content="Nodejs | PrayinForRain.dev"><meta name=twitter:title content="Nodejs | PrayinForRain.dev"><meta itemprop=name content="Nodejs | PrayinForRain.dev"><meta name=application-name content="Nodejs | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/nodejs/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/nodejs/><link href=/tags/nodejs/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/nodejs/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Nodejs | PrayinForRain.dev"><meta name=twitter:title content="Nodejs | PrayinForRain.dev"><meta itemprop=name content="Nodejs | PrayinForRain.dev"><meta name=application-name content="Nodejs | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/nodejs/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/nodejs/><link href=/tags/nodejs/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/nodejs/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Nodejs</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/03/nodejs-for-baekjoon/><h4 class=post-item-title>백준을 위한 node.js</h4></a></div><time class=post-item-meta datetime=2023-03-30T15:17:00+0900>2023. 3. 30.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Nodejs</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/03/nodejs-for-baekjoon/><h4 class=post-item-title>백준을 위한 node.js</h4></a></div><time class=post-item-meta datetime=2023-03-30T15:17:00+0900>2023. 3. 30.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/nodejs/index.xml b/tags/nodejs/index.xml
index d5744a6..8485c77 100644
--- a/tags/nodejs/index.xml
+++ b/tags/nodejs/index.xml
@@ -1,3 +1,5 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Nodejs on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/nodejs/</link><description>Recent content in Nodejs on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Thu, 30 Mar 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/nodejs/index.xml" rel="self" type="application/rss+xml"/><item><title>백준을 위한 node.js</title><link>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</guid><description>JS라도 백준이 하고싶어 공채 시즌이다. 개인적으로 코딩 테스트를 정말정말 자신 없어했는데, 더 이상 미룰 수 없어 야금야금 공부를 시작했다.
-불편한 점이 있다면, 백준은 자바스크립트에 아주 불친절하다는 점이다. 내가 학부생 때 잘 하지도 못하는 C++로 꾸역꾸역 문제를 풀었던 이유 중 하나이기도 했다. 그 때는 아는 PS 플랫폼이 백준 뿐이니, 자바스크립트의 어쩔 수 없는 한계인가보다 했다.
-그런데 프로그래머스를 맛 보고 나니 머리가 커져서 자바스크립트가 백준에게 부당한 차별을 받는(?) 기분이 들었다. 진짜로 화가 난 건 아니지만 그래도 화가 났다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Nodejs on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/nodejs/</link><description>Recent content in Nodejs on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Thu, 30 Mar 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/nodejs/index.xml" rel="self" type="application/rss+xml"/><item><title>백준을 위한 node.js</title><link>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</guid><description>&lt;h2 id="js라도-백준이-하고싶어">JS라도 백준이 하고싶어&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/03/nodejs-for-baekjoon/01.png" alt="Programmers IDE">&lt;/p>
+&lt;p>공채 시즌이다. 개인적으로 코딩 테스트를 정말정말 자신 없어했는데, 더 이상 미룰 수 없어 야금야금 공부를 시작했다.&lt;br>
+불편한 점이 있다면, 백준은 자바스크립트에 아주 불친절하다는 점이다. 내가 학부생 때 잘 하지도 못하는 C++로 꾸역꾸역 문제를 풀었던 이유 중 하나이기도 했다. 그 때는 아는 PS 플랫폼이 백준 뿐이니, 자바스크립트의 어쩔 수 없는 한계인가보다 했다.&lt;/p>
+&lt;p>그런데 프로그래머스를 맛 보고 나니 머리가 커져서 자바스크립트가 백준에게 부당한 차별을 받는(?) 기분이 들었다. 진짜로 화가 난 건 아니지만 그래도 화가 났다. 용서할 수가 없어 보일러플레이트 코드를 작성했다.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/npm/index.html b/tags/npm/index.html
index c91bfff..cda883d 100644
--- a/tags/npm/index.html
+++ b/tags/npm/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Npm | PrayinForRain.dev</title>
-<meta property="og:title" content="Npm | PrayinForRain.dev"><meta name=twitter:title content="Npm | PrayinForRain.dev"><meta itemprop=name content="Npm | PrayinForRain.dev"><meta name=application-name content="Npm | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/npm/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/npm/><link href=/tags/npm/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/npm/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Npm | PrayinForRain.dev"><meta name=twitter:title content="Npm | PrayinForRain.dev"><meta itemprop=name content="Npm | PrayinForRain.dev"><meta name=application-name content="Npm | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/npm/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/npm/><link href=/tags/npm/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/npm/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Npm</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/03/npm-scripts-doesnt-work/><h4 class=post-item-title>VSCode의 NPM Scripts가 작동하지 않는 사람</h4></a></div><time class=post-item-meta datetime=2023-03-29T15:17:00+0900>2023. 3. 29.</time></article><h2 class=post-year>2022</h2><article class=post-item><div class=post-item-content><a href=/posts/2022/11/npm-vs-yarn-vs-pnpm/><h4 class=post-item-title>npm vs yarn vs pnpm</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Npm</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/03/npm-scripts-doesnt-work/><h4 class=post-item-title>VSCode의 NPM Scripts가 작동하지 않는 사람</h4></a></div><time class=post-item-meta datetime=2023-03-29T15:17:00+0900>2023. 3. 29.</time></article><h2 class=post-year>2022</h2><article class=post-item><div class=post-item-content><a href=/posts/2022/11/npm-vs-yarn-vs-pnpm/><h4 class=post-item-title>npm vs yarn vs pnpm</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/npm/index.xml b/tags/npm/index.xml
index 3379b0d..cec80d0 100644
--- a/tags/npm/index.xml
+++ b/tags/npm/index.xml
@@ -1,4 +1,16 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Npm on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/npm/</link><description>Recent content in Npm on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Wed, 29 Mar 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/npm/index.xml" rel="self" type="application/rss+xml"/><item><title>VSCode의 NPM Scripts가 작동하지 않는 사람</title><link>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</link><pubDate>Wed, 29 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</guid><description>늦잠자고 갓생사는 척 하는 삶이란&amp;hellip;
-맥북과 친해지기 시작한지 2달이 되었다. 윈도우 노트북을 사용하다가 갈아 탄 이유는, 맥에서 되는 것이 윈도우에서 되고, 윈도우에서 되는 것은 맥에서 안되는 문제를 너무 많이 겪었기 때문이다. 주변의 맥 유저에게 계속해서 테스트를 요청하기도 눈치보이고, 언젠가는 마주해야겠다고 생각했던 녀석이기 때문에 과감한 투자를 했다. 그 과정에서 내가 윈도우에 지나치게 강결합(?) 되어 있다는 것을 깨달았고, 지금은 맥도 윈도우도 못 쓰는 그 어딘가의 지점에 있다.
-그리고 최근에는 프로젝트를 하고 있다.</description></item><item><title>npm vs yarn vs pnpm</title><link>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</guid><description>지금까지 저는 아무 의심 없이 npm을 사용해왔습니다. 이따금씩 node_modules 폴더가 저를 고통스럽게 했던 시간들이 있었지만, 프로젝트 초기화에 정말 이상한 행동만 하지 않으면 npm i 한 줄과 커피 한 잔으로 모든게 문제 없이 동작했으니까요. 하지만 우리는 슬랙의 어떤 분을 통해, npm보다 좋은 방법이 있음을 알고 있습니다. 이번 포스트에서는 yarn과 pnpm을 체험해 보도록 하겠습니다.
-🤷 TL;DR npm의 의존성 관리는 사실 매우 비효율적이다. 이 문제를 보완한 패키지 매니저가 yarn, pnpm이다. 각 패키지 매니저로의 마이그레이션은 매우 쉽다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Npm on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/npm/</link><description>Recent content in Npm on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Wed, 29 Mar 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/npm/index.xml" rel="self" type="application/rss+xml"/><item><title>VSCode의 NPM Scripts가 작동하지 않는 사람</title><link>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</link><pubDate>Wed, 29 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</guid><description>&lt;figure>&lt;img src="https://prayinforrain.github.io/images/posts/2023/03/npm-scripts-doesnt-work/01.jpeg"
+ alt="image">&lt;figcaption>
+ &lt;p>늦잠자고 갓생사는 척 하는 삶이란&amp;hellip;&lt;/p>
+ &lt;/figcaption>
+&lt;/figure>
+
+&lt;p>맥북과 친해지기 시작한지 2달이 되었다. 윈도우 노트북을 사용하다가 갈아 탄 이유는, &lt;em>맥에서 되는 것이 윈도우에서 되고, 윈도우에서 되는 것은 맥에서 안되는&lt;/em> 문제를 너무 많이 겪었기 때문이다. 주변의 맥 유저에게 계속해서 테스트를 요청하기도 눈치보이고, 언젠가는 마주해야겠다고 생각했던 녀석이기 때문에 과감한 투자를 했다. 그 과정에서 내가 윈도우에 지나치게 강결합(?) 되어 있다는 것을 깨달았고, 지금은 맥도 윈도우도 못 쓰는 그 어딘가의 지점에 있다.&lt;/p>
+&lt;p>그리고 최근에는 프로젝트를 하고 있다. 부스트캠프에서 만난 사람들과 스터디를 하다가, 디자인 시스템을 만들어 보자는 이야기가 나와서 다같이 티스푼 공사 중이다. 이 것에 대해서도 글을 써야 하는데 오늘 포스팅할 내용은 이 것도 아니다. 회고를 안 쓰니 이야기가 많이 밀려 횡설수설 하는구나..&lt;/p></description></item><item><title>npm vs yarn vs pnpm</title><link>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</guid><description>&lt;p>지금까지 저는 아무 의심 없이 npm을 사용해왔습니다. 이따금씩 &lt;code>node_modules&lt;/code> 폴더가 저를 고통스럽게 했던 시간들이 있었지만, 프로젝트 초기화에 정말 이상한 행동만 하지 않으면 &lt;code>npm i&lt;/code> 한 줄과 커피 한 잔으로 모든게 문제 없이 동작했으니까요. 하지만 우리는 슬랙의 어떤 분을 통해, npm보다 좋은 방법이 있음을 알고 있습니다. 이번 포스트에서는 &lt;code>yarn&lt;/code>과 &lt;code>pnpm&lt;/code>을 체험해 보도록 하겠습니다.&lt;/p>
+&lt;h2 id="-tldr">🤷 TL;DR&lt;/h2>
+&lt;ul>
+&lt;li>npm의 의존성 관리는 사실 매우 비효율적이다.&lt;/li>
+&lt;li>이 문제를 보완한 패키지 매니저가 yarn, pnpm이다.&lt;/li>
+&lt;li>각 패키지 매니저로의 마이그레이션은 매우 쉽다. 긍정적으로 고려해보자.&lt;/li>
+&lt;/ul>
+&lt;h2 id="-npm">🎁 npm&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_01.png" alt="Untitled">&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/numble/index.html b/tags/numble/index.html
index fcfb8b4..d88d2e6 100644
--- a/tags/numble/index.html
+++ b/tags/numble/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Numble | PrayinForRain.dev</title>
-<meta property="og:title" content="Numble | PrayinForRain.dev"><meta name=twitter:title content="Numble | PrayinForRain.dev"><meta itemprop=name content="Numble | PrayinForRain.dev"><meta name=application-name content="Numble | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/numble/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/numble/><link href=/tags/numble/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/numble/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Numble | PrayinForRain.dev"><meta name=twitter:title content="Numble | PrayinForRain.dev"><meta itemprop=name content="Numble | PrayinForRain.dev"><meta name=application-name content="Numble | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/numble/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/numble/><link href=/tags/numble/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/numble/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Numble</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/04/numble-talk/><h4 class=post-item-title>넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고</h4></a></div><time class=post-item-meta datetime=2023-04-23T04:05:58+0900>2023. 4. 23.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Numble</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/04/numble-talk/><h4 class=post-item-title>넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고</h4></a></div><time class=post-item-meta datetime=2023-04-23T04:05:58+0900>2023. 4. 23.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/numble/index.xml b/tags/numble/index.xml
index ef8941f..22b11a6 100644
--- a/tags/numble/index.xml
+++ b/tags/numble/index.xml
@@ -1,2 +1,4 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Numble on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/numble/</link><description>Recent content in Numble on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Sun, 23 Apr 2023 04:05:58 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/numble/index.xml" rel="self" type="application/rss+xml"/><item><title>넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고</title><link>https://prayinforrain.github.io/posts/2023/04/numble-talk/</link><pubDate>Sun, 23 Apr 2023 04:05:58 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/04/numble-talk/</guid><description>시작하게 된 계기 3월에 정말 많은 일들이 있었다. 아직 뭔가 성과라고 내세울 결과물이 없긴 하지만 그래도 무의미하진 않았다(?)고 주장할 수 있는 그런 시간이었다. 점점 일이 정리가 되고 여유가 생기면서 번아웃이 온 사람처럼 푹 늘어지는 느낌이 있었는데, 그 와중에 누가 넘블을 소개해 주셨다.
-대충.. 프로젝트 주제와 요구사항을 주고 구현을 해 보는? 프로세스의 활동으로 이해했다. 기간이 짧아 확 몰입하기 좋겠다는 생각을 해서 한 번 맛만 보기로 했다. OpenAI API를 활용해 보는 프로젝트라는 점이 관심을 끌기도 했다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Numble on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/numble/</link><description>Recent content in Numble on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Sun, 23 Apr 2023 04:05:58 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/numble/index.xml" rel="self" type="application/rss+xml"/><item><title>넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고</title><link>https://prayinforrain.github.io/posts/2023/04/numble-talk/</link><pubDate>Sun, 23 Apr 2023 04:05:58 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/04/numble-talk/</guid><description>&lt;h2 id="시작하게-된-계기">시작하게 된 계기&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/04/numble-talk/01.png" alt="ui design">&lt;/p>
+&lt;p>3월에 정말 많은 일들이 있었다. 아직 뭔가 성과라고 내세울 결과물이 없긴 하지만 그래도 무의미하진 않았다(?)고 주장할 수 있는 그런 시간이었다. 점점 일이 정리가 되고 여유가 생기면서 번아웃이 온 사람처럼 푹 늘어지는 느낌이 있었는데, 그 와중에 누가 넘블을 소개해 주셨다.&lt;/p>
+&lt;p>대충.. 프로젝트 주제와 요구사항을 주고 구현을 해 보는? 프로세스의 활동으로 이해했다. 기간이 짧아 확 몰입하기 좋겠다는 생각을 해서 한 번 맛만 보기로 했다. OpenAI API를 활용해 보는 프로젝트라는 점이 관심을 끌기도 했다. 요새 챗쌤한테 이런저런 도움도 받았고 관련 아티클도 많이 보이고..&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/nvm/index.html b/tags/nvm/index.html
index 8281b3d..223292b 100644
--- a/tags/nvm/index.html
+++ b/tags/nvm/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Nvm | PrayinForRain.dev</title>
-<meta property="og:title" content="Nvm | PrayinForRain.dev"><meta name=twitter:title content="Nvm | PrayinForRain.dev"><meta itemprop=name content="Nvm | PrayinForRain.dev"><meta name=application-name content="Nvm | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/nvm/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/nvm/><link href=/tags/nvm/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/nvm/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Nvm | PrayinForRain.dev"><meta name=twitter:title content="Nvm | PrayinForRain.dev"><meta itemprop=name content="Nvm | PrayinForRain.dev"><meta name=application-name content="Nvm | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/nvm/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/nvm/><link href=/tags/nvm/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/nvm/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Nvm</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/03/npm-scripts-doesnt-work/><h4 class=post-item-title>VSCode의 NPM Scripts가 작동하지 않는 사람</h4></a></div><time class=post-item-meta datetime=2023-03-29T15:17:00+0900>2023. 3. 29.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Nvm</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/03/npm-scripts-doesnt-work/><h4 class=post-item-title>VSCode의 NPM Scripts가 작동하지 않는 사람</h4></a></div><time class=post-item-meta datetime=2023-03-29T15:17:00+0900>2023. 3. 29.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/nvm/index.xml b/tags/nvm/index.xml
index ad5c339..4257b57 100644
--- a/tags/nvm/index.xml
+++ b/tags/nvm/index.xml
@@ -1,3 +1,8 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Nvm on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/nvm/</link><description>Recent content in Nvm on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Wed, 29 Mar 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/nvm/index.xml" rel="self" type="application/rss+xml"/><item><title>VSCode의 NPM Scripts가 작동하지 않는 사람</title><link>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</link><pubDate>Wed, 29 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</guid><description>늦잠자고 갓생사는 척 하는 삶이란&amp;hellip;
-맥북과 친해지기 시작한지 2달이 되었다. 윈도우 노트북을 사용하다가 갈아 탄 이유는, 맥에서 되는 것이 윈도우에서 되고, 윈도우에서 되는 것은 맥에서 안되는 문제를 너무 많이 겪었기 때문이다. 주변의 맥 유저에게 계속해서 테스트를 요청하기도 눈치보이고, 언젠가는 마주해야겠다고 생각했던 녀석이기 때문에 과감한 투자를 했다. 그 과정에서 내가 윈도우에 지나치게 강결합(?) 되어 있다는 것을 깨달았고, 지금은 맥도 윈도우도 못 쓰는 그 어딘가의 지점에 있다.
-그리고 최근에는 프로젝트를 하고 있다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Nvm on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/nvm/</link><description>Recent content in Nvm on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Wed, 29 Mar 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/nvm/index.xml" rel="self" type="application/rss+xml"/><item><title>VSCode의 NPM Scripts가 작동하지 않는 사람</title><link>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</link><pubDate>Wed, 29 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</guid><description>&lt;figure>&lt;img src="https://prayinforrain.github.io/images/posts/2023/03/npm-scripts-doesnt-work/01.jpeg"
+ alt="image">&lt;figcaption>
+ &lt;p>늦잠자고 갓생사는 척 하는 삶이란&amp;hellip;&lt;/p>
+ &lt;/figcaption>
+&lt;/figure>
+
+&lt;p>맥북과 친해지기 시작한지 2달이 되었다. 윈도우 노트북을 사용하다가 갈아 탄 이유는, &lt;em>맥에서 되는 것이 윈도우에서 되고, 윈도우에서 되는 것은 맥에서 안되는&lt;/em> 문제를 너무 많이 겪었기 때문이다. 주변의 맥 유저에게 계속해서 테스트를 요청하기도 눈치보이고, 언젠가는 마주해야겠다고 생각했던 녀석이기 때문에 과감한 투자를 했다. 그 과정에서 내가 윈도우에 지나치게 강결합(?) 되어 있다는 것을 깨달았고, 지금은 맥도 윈도우도 못 쓰는 그 어딘가의 지점에 있다.&lt;/p>
+&lt;p>그리고 최근에는 프로젝트를 하고 있다. 부스트캠프에서 만난 사람들과 스터디를 하다가, 디자인 시스템을 만들어 보자는 이야기가 나와서 다같이 티스푼 공사 중이다. 이 것에 대해서도 글을 써야 하는데 오늘 포스팅할 내용은 이 것도 아니다. 회고를 안 쓰니 이야기가 많이 밀려 횡설수설 하는구나..&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/pnp/index.html b/tags/pnp/index.html
index 300cae4..a18211d 100644
--- a/tags/pnp/index.html
+++ b/tags/pnp/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Pnp | PrayinForRain.dev</title>
-<meta property="og:title" content="Pnp | PrayinForRain.dev"><meta name=twitter:title content="Pnp | PrayinForRain.dev"><meta itemprop=name content="Pnp | PrayinForRain.dev"><meta name=application-name content="Pnp | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/pnp/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/pnp/><link href=/tags/pnp/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/pnp/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Pnp | PrayinForRain.dev"><meta name=twitter:title content="Pnp | PrayinForRain.dev"><meta itemprop=name content="Pnp | PrayinForRain.dev"><meta name=application-name content="Pnp | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/pnp/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/pnp/><link href=/tags/pnp/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/pnp/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Pnp</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/04/nextjs-storybook-with-pnp/><h4 class=post-item-title>Next.js Storybook에 Yarn PnP 적용하기</h4></a></div><time class=post-item-meta datetime=2023-04-27T15:32:50+0900>2023. 4. 27.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Pnp</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/04/nextjs-storybook-with-pnp/><h4 class=post-item-title>Next.js Storybook에 Yarn PnP 적용하기</h4></a></div><time class=post-item-meta datetime=2023-04-27T15:32:50+0900>2023. 4. 27.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/pnp/index.xml b/tags/pnp/index.xml
index f96cf4d..0578d15 100644
--- a/tags/pnp/index.xml
+++ b/tags/pnp/index.xml
@@ -1,2 +1,3 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Pnp on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/pnp/</link><description>Recent content in Pnp on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Thu, 27 Apr 2023 15:32:50 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/pnp/index.xml" rel="self" type="application/rss+xml"/><item><title>Next.js Storybook에 Yarn PnP 적용하기</title><link>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</link><pubDate>Thu, 27 Apr 2023 15:32:50 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</guid><description>Storybook을 쓰려고 했는데 최근 Storybook을 사용할 일이 무척 많았다. 언젠가는 포스팅을 해야 할 CDS 프로젝트부터 넘블 챌린지도 있었고&amp;hellip; 처음엔 너무 낯설었지만 공통된 컴포넌트들을 미리 설계해 두고 재사용하는 것이 좀 더 깔끔한 설계가 되는 것 같아 매력을 느꼈다.
-그런데 문제는 내 작업 환경에 있었다. 꽤 연식이 된 윈도우 데스크탑에 수십가지 개발 환경을 섞어 놓고, 요새는 게임에도 못 쓰는 처참한 성능의 HDD에 레포를 두고 쓰니 종속성 패키지 설치도 커피 한 잔 타와야 하는 시간이 걸리니 Yarn Berry의 사용이 반필수가 되어버렸다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Pnp on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/pnp/</link><description>Recent content in Pnp on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Thu, 27 Apr 2023 15:32:50 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/pnp/index.xml" rel="self" type="application/rss+xml"/><item><title>Next.js Storybook에 Yarn PnP 적용하기</title><link>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</link><pubDate>Thu, 27 Apr 2023 15:32:50 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</guid><description>&lt;h2 id="storybook을-쓰려고-했는데">Storybook을 쓰려고 했는데&lt;/h2>
+&lt;p>최근 Storybook을 사용할 일이 무척 많았다. 언젠가는 포스팅을 해야 할 CDS 프로젝트부터 &lt;a href="https://prayinforrain.github.io/posts/2023/04/numble-talk/">넘블 챌린지&lt;/a>도 있었고&amp;hellip; 처음엔 너무 낯설었지만 공통된 컴포넌트들을 미리 설계해 두고 재사용하는 것이 좀 더 깔끔한 설계가 되는 것 같아 매력을 느꼈다.&lt;/p>
+&lt;p>그런데 문제는 내 작업 환경에 있었다. 꽤 연식이 된 윈도우 데스크탑에 수십가지 개발 환경을 섞어 놓고, 요새는 게임에도 못 쓰는 처참한 성능의 HDD에 레포를 두고 쓰니 종속성 패키지 설치도 커피 한 잔 타와야 하는 시간이 걸리니 Yarn Berry의 사용이 반필수가 되어버렸다. 넘블 챌린지 때 Yarn Berry를 사용하고 싶었지만 애석하게도 수 많은 문제에 시달려 포기했는데, 여유가 생긴 지금 마음을 다잡고 다시 시도해 보기로 했다.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/pnpm/index.html b/tags/pnpm/index.html
index 8ef355b..b21e818 100644
--- a/tags/pnpm/index.html
+++ b/tags/pnpm/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Pnpm | PrayinForRain.dev</title>
-<meta property="og:title" content="Pnpm | PrayinForRain.dev"><meta name=twitter:title content="Pnpm | PrayinForRain.dev"><meta itemprop=name content="Pnpm | PrayinForRain.dev"><meta name=application-name content="Pnpm | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/pnpm/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/pnpm/><link href=/tags/pnpm/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/pnpm/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Pnpm | PrayinForRain.dev"><meta name=twitter:title content="Pnpm | PrayinForRain.dev"><meta itemprop=name content="Pnpm | PrayinForRain.dev"><meta name=application-name content="Pnpm | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/pnpm/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/pnpm/><link href=/tags/pnpm/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/pnpm/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Pnpm</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2022</h2><article class=post-item><div class=post-item-content><a href=/posts/2022/11/npm-vs-yarn-vs-pnpm/><h4 class=post-item-title>npm vs yarn vs pnpm</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Pnpm</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2022</h2><article class=post-item><div class=post-item-content><a href=/posts/2022/11/npm-vs-yarn-vs-pnpm/><h4 class=post-item-title>npm vs yarn vs pnpm</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/pnpm/index.xml b/tags/pnpm/index.xml
index 5714557..85014e8 100644
--- a/tags/pnpm/index.xml
+++ b/tags/pnpm/index.xml
@@ -1,2 +1,9 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Pnpm on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/pnpm/</link><description>Recent content in Pnpm on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Fri, 18 Nov 2022 16:42:55 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/pnpm/index.xml" rel="self" type="application/rss+xml"/><item><title>npm vs yarn vs pnpm</title><link>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</guid><description>지금까지 저는 아무 의심 없이 npm을 사용해왔습니다. 이따금씩 node_modules 폴더가 저를 고통스럽게 했던 시간들이 있었지만, 프로젝트 초기화에 정말 이상한 행동만 하지 않으면 npm i 한 줄과 커피 한 잔으로 모든게 문제 없이 동작했으니까요. 하지만 우리는 슬랙의 어떤 분을 통해, npm보다 좋은 방법이 있음을 알고 있습니다. 이번 포스트에서는 yarn과 pnpm을 체험해 보도록 하겠습니다.
-🤷 TL;DR npm의 의존성 관리는 사실 매우 비효율적이다. 이 문제를 보완한 패키지 매니저가 yarn, pnpm이다. 각 패키지 매니저로의 마이그레이션은 매우 쉽다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Pnpm on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/pnpm/</link><description>Recent content in Pnpm on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Fri, 18 Nov 2022 16:42:55 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/pnpm/index.xml" rel="self" type="application/rss+xml"/><item><title>npm vs yarn vs pnpm</title><link>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</guid><description>&lt;p>지금까지 저는 아무 의심 없이 npm을 사용해왔습니다. 이따금씩 &lt;code>node_modules&lt;/code> 폴더가 저를 고통스럽게 했던 시간들이 있었지만, 프로젝트 초기화에 정말 이상한 행동만 하지 않으면 &lt;code>npm i&lt;/code> 한 줄과 커피 한 잔으로 모든게 문제 없이 동작했으니까요. 하지만 우리는 슬랙의 어떤 분을 통해, npm보다 좋은 방법이 있음을 알고 있습니다. 이번 포스트에서는 &lt;code>yarn&lt;/code>과 &lt;code>pnpm&lt;/code>을 체험해 보도록 하겠습니다.&lt;/p>
+&lt;h2 id="-tldr">🤷 TL;DR&lt;/h2>
+&lt;ul>
+&lt;li>npm의 의존성 관리는 사실 매우 비효율적이다.&lt;/li>
+&lt;li>이 문제를 보완한 패키지 매니저가 yarn, pnpm이다.&lt;/li>
+&lt;li>각 패키지 매니저로의 마이그레이션은 매우 쉽다. 긍정적으로 고려해보자.&lt;/li>
+&lt;/ul>
+&lt;h2 id="-npm">🎁 npm&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_01.png" alt="Untitled">&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/project/index.html b/tags/project/index.html
index 06e7998..9e10608 100644
--- a/tags/project/index.html
+++ b/tags/project/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Project | PrayinForRain.dev</title>
-<meta property="og:title" content="Project | PrayinForRain.dev"><meta name=twitter:title content="Project | PrayinForRain.dev"><meta itemprop=name content="Project | PrayinForRain.dev"><meta name=application-name content="Project | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/project/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/project/><link href=/tags/project/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/project/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Project | PrayinForRain.dev"><meta name=twitter:title content="Project | PrayinForRain.dev"><meta itemprop=name content="Project | PrayinForRain.dev"><meta name=application-name content="Project | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/project/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/project/><link href=/tags/project/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/project/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Project</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/11/cell-refactoring/><h4 class=post-item-title>스프레드시트를 최적화 하자</h4><div class=post-item-summary>React로 성능 되찾기</div></a></div><time class=post-item-meta datetime=2023-11-07T16:43:32+0900>2023. 11. 7.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/06/cds-retrospect/><h4 class=post-item-title>차가운 디자인 시스템(CDS) 회고</h4><div class=post-item-summary>우리 v1.2 합시다</div></a></div><time class=post-item-meta datetime=2023-06-18T16:43:32+0900>2023. 6. 18.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/04/numble-talk/><h4 class=post-item-title>넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고</h4></a></div><time class=post-item-meta datetime=2023-04-23T04:05:58+0900>2023. 4. 23.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Project</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/11/cell-refactoring/><h4 class=post-item-title>스프레드시트를 최적화 하자</h4><div class=post-item-summary>React로 성능 되찾기</div></a></div><time class=post-item-meta datetime=2023-11-07T16:43:32+0900>2023. 11. 7.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/06/cds-retrospect/><h4 class=post-item-title>차가운 디자인 시스템(CDS) 회고</h4><div class=post-item-summary>우리 v1.2 합시다</div></a></div><time class=post-item-meta datetime=2023-06-18T16:43:32+0900>2023. 6. 18.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/04/numble-talk/><h4 class=post-item-title>넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고</h4></a></div><time class=post-item-meta datetime=2023-04-23T04:05:58+0900>2023. 4. 23.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/project/index.xml b/tags/project/index.xml
index 77152ad..5dd5183 100644
--- a/tags/project/index.xml
+++ b/tags/project/index.xml
@@ -1,2 +1,4 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Project on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/project/</link><description>Recent content in Project on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Mon, 15 Apr 2024 16:43:32 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/project/index.xml" rel="self" type="application/rss+xml"/><item><title>스프레드시트를 최적화 하자</title><link>https://prayinforrain.github.io/posts/2023/11/cell-refactoring/</link><pubDate>Tue, 07 Nov 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/11/cell-refactoring/</guid><description>React로 성능 되찾기</description></item><item><title>차가운 디자인 시스템(CDS) 회고</title><link>https://prayinforrain.github.io/posts/2023/06/cds-retrospect/</link><pubDate>Sun, 18 Jun 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/06/cds-retrospect/</guid><description>우리 v1.2 합시다</description></item><item><title>넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고</title><link>https://prayinforrain.github.io/posts/2023/04/numble-talk/</link><pubDate>Sun, 23 Apr 2023 04:05:58 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/04/numble-talk/</guid><description>시작하게 된 계기 3월에 정말 많은 일들이 있었다. 아직 뭔가 성과라고 내세울 결과물이 없긴 하지만 그래도 무의미하진 않았다(?)고 주장할 수 있는 그런 시간이었다. 점점 일이 정리가 되고 여유가 생기면서 번아웃이 온 사람처럼 푹 늘어지는 느낌이 있었는데, 그 와중에 누가 넘블을 소개해 주셨다.
-대충.. 프로젝트 주제와 요구사항을 주고 구현을 해 보는? 프로세스의 활동으로 이해했다. 기간이 짧아 확 몰입하기 좋겠다는 생각을 해서 한 번 맛만 보기로 했다. OpenAI API를 활용해 보는 프로젝트라는 점이 관심을 끌기도 했다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Project on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/project/</link><description>Recent content in Project on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Mon, 15 Apr 2024 16:43:32 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/project/index.xml" rel="self" type="application/rss+xml"/><item><title>스프레드시트를 최적화 하자</title><link>https://prayinforrain.github.io/posts/2023/11/cell-refactoring/</link><pubDate>Tue, 07 Nov 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/11/cell-refactoring/</guid><description>React로 성능 되찾기</description></item><item><title>차가운 디자인 시스템(CDS) 회고</title><link>https://prayinforrain.github.io/posts/2023/06/cds-retrospect/</link><pubDate>Sun, 18 Jun 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/06/cds-retrospect/</guid><description>우리 v1.2 합시다</description></item><item><title>넘블 OpenAI 단톡방 챌린지 - 프로젝트 회고</title><link>https://prayinforrain.github.io/posts/2023/04/numble-talk/</link><pubDate>Sun, 23 Apr 2023 04:05:58 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/04/numble-talk/</guid><description>&lt;h2 id="시작하게-된-계기">시작하게 된 계기&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/04/numble-talk/01.png" alt="ui design">&lt;/p>
+&lt;p>3월에 정말 많은 일들이 있었다. 아직 뭔가 성과라고 내세울 결과물이 없긴 하지만 그래도 무의미하진 않았다(?)고 주장할 수 있는 그런 시간이었다. 점점 일이 정리가 되고 여유가 생기면서 번아웃이 온 사람처럼 푹 늘어지는 느낌이 있었는데, 그 와중에 누가 넘블을 소개해 주셨다.&lt;/p>
+&lt;p>대충.. 프로젝트 주제와 요구사항을 주고 구현을 해 보는? 프로세스의 활동으로 이해했다. 기간이 짧아 확 몰입하기 좋겠다는 생각을 해서 한 번 맛만 보기로 했다. OpenAI API를 활용해 보는 프로젝트라는 점이 관심을 끌기도 했다. 요새 챗쌤한테 이런저런 도움도 받았고 관련 아티클도 많이 보이고..&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/ps/index.html b/tags/ps/index.html
index bdef754..2fab078 100644
--- a/tags/ps/index.html
+++ b/tags/ps/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Ps | PrayinForRain.dev</title>
-<meta property="og:title" content="Ps | PrayinForRain.dev"><meta name=twitter:title content="Ps | PrayinForRain.dev"><meta itemprop=name content="Ps | PrayinForRain.dev"><meta name=application-name content="Ps | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/ps/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/ps/><link href=/tags/ps/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/ps/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Ps | PrayinForRain.dev"><meta name=twitter:title content="Ps | PrayinForRain.dev"><meta itemprop=name content="Ps | PrayinForRain.dev"><meta name=application-name content="Ps | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/ps/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/ps/><link href=/tags/ps/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/ps/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Ps</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/03/nodejs-for-baekjoon/><h4 class=post-item-title>백준을 위한 node.js</h4></a></div><time class=post-item-meta datetime=2023-03-30T15:17:00+0900>2023. 3. 30.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Ps</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/03/nodejs-for-baekjoon/><h4 class=post-item-title>백준을 위한 node.js</h4></a></div><time class=post-item-meta datetime=2023-03-30T15:17:00+0900>2023. 3. 30.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/ps/index.xml b/tags/ps/index.xml
index b21ddb5..2d7818d 100644
--- a/tags/ps/index.xml
+++ b/tags/ps/index.xml
@@ -1,3 +1,5 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Ps on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/ps/</link><description>Recent content in Ps on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Thu, 30 Mar 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/ps/index.xml" rel="self" type="application/rss+xml"/><item><title>백준을 위한 node.js</title><link>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</guid><description>JS라도 백준이 하고싶어 공채 시즌이다. 개인적으로 코딩 테스트를 정말정말 자신 없어했는데, 더 이상 미룰 수 없어 야금야금 공부를 시작했다.
-불편한 점이 있다면, 백준은 자바스크립트에 아주 불친절하다는 점이다. 내가 학부생 때 잘 하지도 못하는 C++로 꾸역꾸역 문제를 풀었던 이유 중 하나이기도 했다. 그 때는 아는 PS 플랫폼이 백준 뿐이니, 자바스크립트의 어쩔 수 없는 한계인가보다 했다.
-그런데 프로그래머스를 맛 보고 나니 머리가 커져서 자바스크립트가 백준에게 부당한 차별을 받는(?) 기분이 들었다. 진짜로 화가 난 건 아니지만 그래도 화가 났다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Ps on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/ps/</link><description>Recent content in Ps on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Thu, 30 Mar 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/ps/index.xml" rel="self" type="application/rss+xml"/><item><title>백준을 위한 node.js</title><link>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</link><pubDate>Thu, 30 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/nodejs-for-baekjoon/</guid><description>&lt;h2 id="js라도-백준이-하고싶어">JS라도 백준이 하고싶어&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/03/nodejs-for-baekjoon/01.png" alt="Programmers IDE">&lt;/p>
+&lt;p>공채 시즌이다. 개인적으로 코딩 테스트를 정말정말 자신 없어했는데, 더 이상 미룰 수 없어 야금야금 공부를 시작했다.&lt;br>
+불편한 점이 있다면, 백준은 자바스크립트에 아주 불친절하다는 점이다. 내가 학부생 때 잘 하지도 못하는 C++로 꾸역꾸역 문제를 풀었던 이유 중 하나이기도 했다. 그 때는 아는 PS 플랫폼이 백준 뿐이니, 자바스크립트의 어쩔 수 없는 한계인가보다 했다.&lt;/p>
+&lt;p>그런데 프로그래머스를 맛 보고 나니 머리가 커져서 자바스크립트가 백준에게 부당한 차별을 받는(?) 기분이 들었다. 진짜로 화가 난 건 아니지만 그래도 화가 났다. 용서할 수가 없어 보일러플레이트 코드를 작성했다.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/react/index.html b/tags/react/index.html
index 2639914..f316568 100644
--- a/tags/react/index.html
+++ b/tags/react/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>React | PrayinForRain.dev</title>
-<meta property="og:title" content="React | PrayinForRain.dev"><meta name=twitter:title content="React | PrayinForRain.dev"><meta itemprop=name content="React | PrayinForRain.dev"><meta name=application-name content="React | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/react/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/react/><link href=/tags/react/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/react/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="React | PrayinForRain.dev"><meta name=twitter:title content="React | PrayinForRain.dev"><meta itemprop=name content="React | PrayinForRain.dev"><meta name=application-name content="React | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/react/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/react/><link href=/tags/react/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/react/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">React</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/11/cell-refactoring/><h4 class=post-item-title>스프레드시트를 최적화 하자</h4><div class=post-item-summary>React로 성능 되찾기</div></a></div><time class=post-item-meta datetime=2023-11-07T16:43:32+0900>2023. 11. 7.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">React</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/11/cell-refactoring/><h4 class=post-item-title>스프레드시트를 최적화 하자</h4><div class=post-item-summary>React로 성능 되찾기</div></a></div><time class=post-item-meta datetime=2023-11-07T16:43:32+0900>2023. 11. 7.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/react/index.xml b/tags/react/index.xml
index a5c3c87..88d80a4 100644
--- a/tags/react/index.xml
+++ b/tags/react/index.xml
@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>React on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/react/</link><description>Recent content in React on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Mon, 15 Apr 2024 16:43:32 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/react/index.xml" rel="self" type="application/rss+xml"/><item><title>스프레드시트를 최적화 하자</title><link>https://prayinforrain.github.io/posts/2023/11/cell-refactoring/</link><pubDate>Tue, 07 Nov 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/11/cell-refactoring/</guid><description>React로 성능 되찾기</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>React on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/react/</link><description>Recent content in React on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Mon, 15 Apr 2024 16:43:32 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/react/index.xml" rel="self" type="application/rss+xml"/><item><title>스프레드시트를 최적화 하자</title><link>https://prayinforrain.github.io/posts/2023/11/cell-refactoring/</link><pubDate>Tue, 07 Nov 2023 16:43:32 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/11/cell-refactoring/</guid><description>React로 성능 되찾기</description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/recoil/index.html b/tags/recoil/index.html
index c2332f9..cbf5b5c 100644
--- a/tags/recoil/index.html
+++ b/tags/recoil/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Recoil | PrayinForRain.dev</title>
-<meta property="og:title" content="Recoil | PrayinForRain.dev"><meta name=twitter:title content="Recoil | PrayinForRain.dev"><meta itemprop=name content="Recoil | PrayinForRain.dev"><meta name=application-name content="Recoil | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/recoil/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/recoil/><link href=/tags/recoil/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/recoil/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Recoil | PrayinForRain.dev"><meta name=twitter:title content="Recoil | PrayinForRain.dev"><meta itemprop=name content="Recoil | PrayinForRain.dev"><meta name=application-name content="Recoil | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/recoil/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/recoil/><link href=/tags/recoil/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/recoil/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Recoil</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2022</h2><article class=post-item><div class=post-item-content><a href=/posts/2022/11/redux-vs-recoil/><h4 class=post-item-title>Redux vs Recoil</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Recoil</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2022</h2><article class=post-item><div class=post-item-content><a href=/posts/2022/11/redux-vs-recoil/><h4 class=post-item-title>Redux vs Recoil</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/recoil/index.xml b/tags/recoil/index.xml
index 2c6ffb8..555bf64 100644
--- a/tags/recoil/index.xml
+++ b/tags/recoil/index.xml
@@ -1 +1,8 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Recoil on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/recoil/</link><description>Recent content in Recoil on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Fri, 18 Nov 2022 16:42:55 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/recoil/index.xml" rel="self" type="application/rss+xml"/><item><title>Redux vs Recoil</title><link>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</guid><description>🤷 TL;DR Redux는 안정적이지만, 선언과 사용이 복잡하다. Recoil은 사용이 매우 쉽지만 정식 버전이 없다. 프로젝트 규모에 따라 마음에 드는 라이브러리를 선택하자 🚪 서론 우리는 React를 사용할 때 보통 useState를 통해 상태를 관리합니다. useState는 정말 섹시하지만, 한 가지 너무 큰 단점이 있습니다. 바로 컴포넌트끼리 데이터를 주고받는 데 사용하기가 힘들다는 점입니다. 그 일을 하기 위해 등장한 것이 바로 상태 관리 라이브러리입니다. 상태 관리 라이브러리의 필요성에 대해 공감하지 못하는 분들을 위해 짧은 토막글을 마련해 보았습니다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Recoil on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/recoil/</link><description>Recent content in Recoil on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Fri, 18 Nov 2022 16:42:55 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/recoil/index.xml" rel="self" type="application/rss+xml"/><item><title>Redux vs Recoil</title><link>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</guid><description>&lt;h2 id="-tldr">🤷 TL;DR&lt;/h2>
+&lt;ul>
+&lt;li>Redux는 안정적이지만, 선언과 사용이 복잡하다.&lt;/li>
+&lt;li>Recoil은 사용이 매우 쉽지만 정식 버전이 없다.&lt;/li>
+&lt;li>프로젝트 규모에 따라 마음에 드는 라이브러리를 선택하자&lt;/li>
+&lt;/ul>
+&lt;h2 id="-서론">🚪 서론&lt;/h2>
+&lt;p>우리는 React를 사용할 때 보통 &lt;code>useState&lt;/code>를 통해 상태를 관리합니다. &lt;code>useState&lt;/code>는 정말 섹시하지만, 한 가지 너무 큰 단점이 있습니다. 바로 컴포넌트끼리 데이터를 주고받는 데 사용하기가 힘들다는 점입니다. 그 일을 하기 위해 등장한 것이 바로 &lt;strong>상태 관리 라이브러리&lt;/strong>입니다. 상태 관리 라이브러리의 필요성에 대해 공감하지 못하는 분들을 위해 짧은 토막글을 마련해 보았습니다.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/redux/index.html b/tags/redux/index.html
index 8fa66a2..f3eb695 100644
--- a/tags/redux/index.html
+++ b/tags/redux/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Redux | PrayinForRain.dev</title>
-<meta property="og:title" content="Redux | PrayinForRain.dev"><meta name=twitter:title content="Redux | PrayinForRain.dev"><meta itemprop=name content="Redux | PrayinForRain.dev"><meta name=application-name content="Redux | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/redux/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/redux/><link href=/tags/redux/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/redux/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Redux | PrayinForRain.dev"><meta name=twitter:title content="Redux | PrayinForRain.dev"><meta itemprop=name content="Redux | PrayinForRain.dev"><meta name=application-name content="Redux | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/redux/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/redux/><link href=/tags/redux/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/redux/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Redux</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2022</h2><article class=post-item><div class=post-item-content><a href=/posts/2022/11/redux-vs-recoil/><h4 class=post-item-title>Redux vs Recoil</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Redux</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2022</h2><article class=post-item><div class=post-item-content><a href=/posts/2022/11/redux-vs-recoil/><h4 class=post-item-title>Redux vs Recoil</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/redux/index.xml b/tags/redux/index.xml
index 3839615..8264f8c 100644
--- a/tags/redux/index.xml
+++ b/tags/redux/index.xml
@@ -1 +1,8 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Redux on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/redux/</link><description>Recent content in Redux on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Fri, 18 Nov 2022 16:42:55 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/redux/index.xml" rel="self" type="application/rss+xml"/><item><title>Redux vs Recoil</title><link>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</guid><description>🤷 TL;DR Redux는 안정적이지만, 선언과 사용이 복잡하다. Recoil은 사용이 매우 쉽지만 정식 버전이 없다. 프로젝트 규모에 따라 마음에 드는 라이브러리를 선택하자 🚪 서론 우리는 React를 사용할 때 보통 useState를 통해 상태를 관리합니다. useState는 정말 섹시하지만, 한 가지 너무 큰 단점이 있습니다. 바로 컴포넌트끼리 데이터를 주고받는 데 사용하기가 힘들다는 점입니다. 그 일을 하기 위해 등장한 것이 바로 상태 관리 라이브러리입니다. 상태 관리 라이브러리의 필요성에 대해 공감하지 못하는 분들을 위해 짧은 토막글을 마련해 보았습니다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Redux on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/redux/</link><description>Recent content in Redux on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Fri, 18 Nov 2022 16:42:55 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/redux/index.xml" rel="self" type="application/rss+xml"/><item><title>Redux vs Recoil</title><link>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/redux-vs-recoil/</guid><description>&lt;h2 id="-tldr">🤷 TL;DR&lt;/h2>
+&lt;ul>
+&lt;li>Redux는 안정적이지만, 선언과 사용이 복잡하다.&lt;/li>
+&lt;li>Recoil은 사용이 매우 쉽지만 정식 버전이 없다.&lt;/li>
+&lt;li>프로젝트 규모에 따라 마음에 드는 라이브러리를 선택하자&lt;/li>
+&lt;/ul>
+&lt;h2 id="-서론">🚪 서론&lt;/h2>
+&lt;p>우리는 React를 사용할 때 보통 &lt;code>useState&lt;/code>를 통해 상태를 관리합니다. &lt;code>useState&lt;/code>는 정말 섹시하지만, 한 가지 너무 큰 단점이 있습니다. 바로 컴포넌트끼리 데이터를 주고받는 데 사용하기가 힘들다는 점입니다. 그 일을 하기 위해 등장한 것이 바로 &lt;strong>상태 관리 라이브러리&lt;/strong>입니다. 상태 관리 라이브러리의 필요성에 대해 공감하지 못하는 분들을 위해 짧은 토막글을 마련해 보았습니다.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/storybook/index.html b/tags/storybook/index.html
index 47ab742..34fffcf 100644
--- a/tags/storybook/index.html
+++ b/tags/storybook/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Storybook | PrayinForRain.dev</title>
-<meta property="og:title" content="Storybook | PrayinForRain.dev"><meta name=twitter:title content="Storybook | PrayinForRain.dev"><meta itemprop=name content="Storybook | PrayinForRain.dev"><meta name=application-name content="Storybook | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/storybook/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/storybook/><link href=/tags/storybook/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/storybook/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Storybook | PrayinForRain.dev"><meta name=twitter:title content="Storybook | PrayinForRain.dev"><meta itemprop=name content="Storybook | PrayinForRain.dev"><meta name=application-name content="Storybook | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/storybook/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/storybook/><link href=/tags/storybook/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/storybook/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Storybook</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/04/nextjs-storybook-with-pnp/><h4 class=post-item-title>Next.js Storybook에 Yarn PnP 적용하기</h4></a></div><time class=post-item-meta datetime=2023-04-27T15:32:50+0900>2023. 4. 27.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Storybook</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/04/nextjs-storybook-with-pnp/><h4 class=post-item-title>Next.js Storybook에 Yarn PnP 적용하기</h4></a></div><time class=post-item-meta datetime=2023-04-27T15:32:50+0900>2023. 4. 27.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/storybook/index.xml b/tags/storybook/index.xml
index c74d64f..31c8320 100644
--- a/tags/storybook/index.xml
+++ b/tags/storybook/index.xml
@@ -1,2 +1,3 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Storybook on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/storybook/</link><description>Recent content in Storybook on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Thu, 27 Apr 2023 15:32:50 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/storybook/index.xml" rel="self" type="application/rss+xml"/><item><title>Next.js Storybook에 Yarn PnP 적용하기</title><link>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</link><pubDate>Thu, 27 Apr 2023 15:32:50 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</guid><description>Storybook을 쓰려고 했는데 최근 Storybook을 사용할 일이 무척 많았다. 언젠가는 포스팅을 해야 할 CDS 프로젝트부터 넘블 챌린지도 있었고&amp;hellip; 처음엔 너무 낯설었지만 공통된 컴포넌트들을 미리 설계해 두고 재사용하는 것이 좀 더 깔끔한 설계가 되는 것 같아 매력을 느꼈다.
-그런데 문제는 내 작업 환경에 있었다. 꽤 연식이 된 윈도우 데스크탑에 수십가지 개발 환경을 섞어 놓고, 요새는 게임에도 못 쓰는 처참한 성능의 HDD에 레포를 두고 쓰니 종속성 패키지 설치도 커피 한 잔 타와야 하는 시간이 걸리니 Yarn Berry의 사용이 반필수가 되어버렸다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Storybook on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/storybook/</link><description>Recent content in Storybook on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Thu, 27 Apr 2023 15:32:50 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/storybook/index.xml" rel="self" type="application/rss+xml"/><item><title>Next.js Storybook에 Yarn PnP 적용하기</title><link>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</link><pubDate>Thu, 27 Apr 2023 15:32:50 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</guid><description>&lt;h2 id="storybook을-쓰려고-했는데">Storybook을 쓰려고 했는데&lt;/h2>
+&lt;p>최근 Storybook을 사용할 일이 무척 많았다. 언젠가는 포스팅을 해야 할 CDS 프로젝트부터 &lt;a href="https://prayinforrain.github.io/posts/2023/04/numble-talk/">넘블 챌린지&lt;/a>도 있었고&amp;hellip; 처음엔 너무 낯설었지만 공통된 컴포넌트들을 미리 설계해 두고 재사용하는 것이 좀 더 깔끔한 설계가 되는 것 같아 매력을 느꼈다.&lt;/p>
+&lt;p>그런데 문제는 내 작업 환경에 있었다. 꽤 연식이 된 윈도우 데스크탑에 수십가지 개발 환경을 섞어 놓고, 요새는 게임에도 못 쓰는 처참한 성능의 HDD에 레포를 두고 쓰니 종속성 패키지 설치도 커피 한 잔 타와야 하는 시간이 걸리니 Yarn Berry의 사용이 반필수가 되어버렸다. 넘블 챌린지 때 Yarn Berry를 사용하고 싶었지만 애석하게도 수 많은 문제에 시달려 포기했는데, 여유가 생긴 지금 마음을 다잡고 다시 시도해 보기로 했다.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/tree-shaking/index.html b/tags/tree-shaking/index.html
index 20ed7da..20e16f1 100644
--- a/tags/tree-shaking/index.html
+++ b/tags/tree-shaking/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Tree-Shaking | PrayinForRain.dev</title>
-<meta property="og:title" content="Tree-Shaking | PrayinForRain.dev"><meta name=twitter:title content="Tree-Shaking | PrayinForRain.dev"><meta itemprop=name content="Tree-Shaking | PrayinForRain.dev"><meta name=application-name content="Tree-Shaking | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/tree-shaking/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/tree-shaking/><link href=/tags/tree-shaking/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/tree-shaking/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Tree-Shaking | PrayinForRain.dev"><meta name=twitter:title content="Tree-Shaking | PrayinForRain.dev"><meta itemprop=name content="Tree-Shaking | PrayinForRain.dev"><meta name=application-name content="Tree-Shaking | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/tree-shaking/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/tree-shaking/><link href=/tags/tree-shaking/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/tree-shaking/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Tree-Shaking</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/01/tree-shaking/><h4 class=post-item-title>Tree Shaking</h4></a></div><time class=post-item-meta datetime=2023-01-25T17:17:15+0900>2023. 1. 25.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Tree-Shaking</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/01/tree-shaking/><h4 class=post-item-title>Tree Shaking</h4></a></div><time class=post-item-meta datetime=2023-01-25T17:17:15+0900>2023. 1. 25.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/tree-shaking/index.xml b/tags/tree-shaking/index.xml
index f118ed0..b4895c5 100644
--- a/tags/tree-shaking/index.xml
+++ b/tags/tree-shaking/index.xml
@@ -1,2 +1,4 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Tree-Shaking on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/tree-shaking/</link><description>Recent content in Tree-Shaking on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Wed, 25 Jan 2023 17:17:15 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/tree-shaking/index.xml" rel="self" type="application/rss+xml"/><item><title>Tree Shaking</title><link>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</link><pubDate>Wed, 25 Jan 2023 17:17:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</guid><description>용량을 절약하는 방법 웹페이지의 성능을 이야기하는 가장 직관적인 지표는 아마 페이지에 사용되는 파일의 크기일 것입니다. 파일의 크기가 무겁다면 파일을 다운받는 데 시간이 오래 걸리고, 다운로드한 파일을 읽고 렌더링 하는데도 시간이 오래 걸릴 것입니다. 따라서 번들 파일의 용량을 다이어트 하는 것은 사이트 성능에 꽤 중요한 역할을 합니다.
-위 사진은 팀 프로젝트를 하던 중 @next/bundle-analyzer 패키지를 이용해 번들 맵을 그렸던 것입니다. 클수록 번들 용량이 크다는 뜻이니 커다란 청크 위주로 최적화를 시도하면 될 것 같습니다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Tree-Shaking on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/tree-shaking/</link><description>Recent content in Tree-Shaking on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Wed, 25 Jan 2023 17:17:15 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/tree-shaking/index.xml" rel="self" type="application/rss+xml"/><item><title>Tree Shaking</title><link>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</link><pubDate>Wed, 25 Jan 2023 17:17:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</guid><description>&lt;h2 id="용량을-절약하는-방법">용량을 절약하는 방법&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/tree-shaking/01.png" alt="bundle_map">&lt;/p>
+&lt;p>웹페이지의 성능을 이야기하는 가장 직관적인 지표는 아마 페이지에 사용되는 &lt;strong>파일의 크기&lt;/strong>일 것입니다. 파일의 크기가 무겁다면 파일을 다운받는 데 시간이 오래 걸리고, 다운로드한 파일을 읽고 렌더링 하는데도 시간이 오래 걸릴 것입니다. 따라서 번들 파일의 용량을 다이어트 하는 것은 사이트 성능에 꽤 중요한 역할을 합니다.&lt;/p>
+&lt;p>위 사진은 팀 프로젝트를 하던 중 &lt;code>@next/bundle-analyzer&lt;/code> 패키지를 이용해 번들 맵을 그렸던 것입니다. 클수록 번들 용량이 크다는 뜻이니 커다란 청크 위주로 최적화를 시도하면 될 것 같습니다. 그런데 어떻게 용량을 줄일 수 있을까요? gzip을 통해 파일을 압축해서 보내는 방법도 있겠지만, 코드적으로 최적화할 수 있는 방법은 &lt;code>Tree-shaking&lt;/code>입니다.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/typescript/index.html b/tags/typescript/index.html
index e410289..4b80c38 100644
--- a/tags/typescript/index.html
+++ b/tags/typescript/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>TypeScript | PrayinForRain.dev</title>
-<meta property="og:title" content="TypeScript | PrayinForRain.dev"><meta name=twitter:title content="TypeScript | PrayinForRain.dev"><meta itemprop=name content="TypeScript | PrayinForRain.dev"><meta name=application-name content="TypeScript | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/typescript/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/typescript/><link href=/tags/typescript/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/typescript/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="TypeScript | PrayinForRain.dev"><meta name=twitter:title content="TypeScript | PrayinForRain.dev"><meta itemprop=name content="TypeScript | PrayinForRain.dev"><meta name=application-name content="TypeScript | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/typescript/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/typescript/><link href=/tags/typescript/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/typescript/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">TypeScript</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/02/firebase-with-typescript/><h4 class=post-item-title>Firebase를 TypeScript에서 사용하기</h4></a></div><time class=post-item-meta datetime=2023-02-15T15:17:00+0900>2023. 2. 15.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/02/typescript-generic/><h4 class=post-item-title>Typescript Generic</h4></a></div><time class=post-item-meta datetime=2023-02-01T02:01:15+0900>2023. 2. 1.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">TypeScript</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/02/firebase-with-typescript/><h4 class=post-item-title>Firebase를 TypeScript에서 사용하기</h4></a></div><time class=post-item-meta datetime=2023-02-15T15:17:00+0900>2023. 2. 15.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/02/typescript-generic/><h4 class=post-item-title>Typescript Generic</h4></a></div><time class=post-item-meta datetime=2023-02-01T02:01:15+0900>2023. 2. 1.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/typescript/index.xml b/tags/typescript/index.xml
index dd15f70..a6963c7 100644
--- a/tags/typescript/index.xml
+++ b/tags/typescript/index.xml
@@ -1,7 +1,32 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>TypeScript on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/typescript/</link><description>Recent content in TypeScript on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Wed, 15 Feb 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/typescript/index.xml" rel="self" type="application/rss+xml"/><item><title>Firebase를 TypeScript에서 사용하기</title><link>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</link><pubDate>Wed, 15 Feb 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</guid><description>최근에 들어서 Firebase가 필요한 일이 있었다. 대학교에서 써본 경험은 있었는데, 오랜만에 만난 Firebase는 예전같지 않았다. 가장 큰 문제는 Firebase가 제공하는 데이터베이스인 Firestore는 문서를 가져와도 타입을 제대로 정의할 수 없다는 것.
-자동완성이 안되는 타입스크립트는.. 그.. 왜..?
-물론 데이터스키마를 따로 정의하지 않기 때문에 Firebase 라이브러리가 DocumentData 타입을 개발자에게 맞춰줄 의무는 없지만, 적어도 React.useState처럼 제네릭으로 타입을 받아 어느정도 약속해 주기를 바랐다. 아니 바라는게 아니라 되어야 하는 거 아닌가..?
-붕대 감기 우선 Firebase의 쿼리 실행 결과로 오는 DocumentData는 다음과 같이 정의되어 있다.</description></item><item><title>Typescript Generic</title><link>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</link><pubDate>Wed, 01 Feb 2023 02:01:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</guid><description>타입스크립트와 리액트를 같이 사용할 때, 우리는 useState 훅을 아래와 같이 사용합니다.
-const [name, setName] = useState&amp;lt;string&amp;gt;(&amp;#34;지상렬&amp;#34;); 뭔진 몰라도, 저 꺽쇠 괄호를 사용해서 state가 다룰 상태의 타입을 지정할 수가 있습니다. 사실 적지 않아도 알아서 추론해 주지만, 아무튼 name.split('')처럼 string 타입이 제공하는 메소드나 프로퍼티도 자동완성해주고, 아주 편하게 사용할 수 있습니다. 오늘은 저 꺽쇠괄호에 대해 알아볼거에요.
-any 타입의 문제 아무튼 이번에 가져온 예제는 스택(Stack) 자료구조입니다. 그냥 대충 만들게요.
-class Stack { arr: any[] = []; push(element: any) { this.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>TypeScript on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/typescript/</link><description>Recent content in TypeScript on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Wed, 15 Feb 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/typescript/index.xml" rel="self" type="application/rss+xml"/><item><title>Firebase를 TypeScript에서 사용하기</title><link>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</link><pubDate>Wed, 15 Feb 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</guid><description>&lt;p>최근에 들어서 Firebase가 필요한 일이 있었다. 대학교에서 써본 경험은 있었는데, 오랜만에 만난 Firebase는 예전같지 않았다. 가장 큰 문제는 Firebase가 제공하는 데이터베이스인 Firestore는 문서를 가져와도 타입을 제대로 정의할 수 없다는 것.&lt;/p>
+&lt;figure>&lt;img src="https://prayinforrain.github.io/images/posts/2023/02/firebase-with-typescript/01.png"
+ alt="image">&lt;figcaption>
+ &lt;p>자동완성이 안되는 타입스크립트는.. 그.. 왜..?&lt;/p>
+ &lt;/figcaption>
+&lt;/figure>
+
+&lt;p>물론 데이터스키마를 따로 정의하지 않기 때문에 Firebase 라이브러리가 &lt;code>DocumentData&lt;/code> 타입을 개발자에게 맞춰줄 의무는 없지만, 적어도 &lt;code>React.useState&lt;/code>처럼 제네릭으로 타입을 받아 어느정도 약속해 주기를 바랐다. 아니 바라는게 아니라 되어야 하는 거 아닌가..?&lt;/p>
+&lt;h2 id="붕대-감기">붕대 감기&lt;/h2>
+&lt;p>우선 Firebase의 쿼리 실행 결과로 오는 &lt;code>DocumentData&lt;/code>는 다음과 같이 정의되어 있다.&lt;/p></description></item><item><title>Typescript Generic</title><link>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</link><pubDate>Wed, 01 Feb 2023 02:01:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</guid><description>&lt;p>타입스크립트와 리액트를 같이 사용할 때, 우리는 &lt;code>useState&lt;/code> 훅을 아래와 같이 사용합니다.&lt;/p>
+&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-typescript" data-lang="typescript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="nx">name&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">setName&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">useState&lt;/span>&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">string&lt;/span>&lt;span class="p">&amp;gt;(&lt;/span>&lt;span class="s2">&amp;#34;지상렬&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>뭔진 몰라도, 저 꺽쇠 괄호를 사용해서 state가 다룰 상태의 타입을 지정할 수가 있습니다. 사실 적지 않아도 알아서 추론해 주지만, 아무튼 &lt;code>name.split('')&lt;/code>처럼 string 타입이 제공하는 메소드나 프로퍼티도 자동완성해주고, 아주 편하게 사용할 수 있습니다. 오늘은 저 꺽쇠괄호에 대해 알아볼거에요.&lt;/p>
+&lt;h2 id="any-타입의-문제">any 타입의 문제&lt;/h2>
+&lt;p>아무튼 이번에 가져온 예제는 스택(Stack) 자료구조입니다. 그냥 대충 만들게요.&lt;/p>
+&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-typescript" data-lang="typescript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">class&lt;/span> &lt;span class="nx">Stack&lt;/span> &lt;span class="p">{&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">arr&lt;/span>: &lt;span class="kt">any&lt;/span>&lt;span class="p">[]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[];&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">element&lt;/span>: &lt;span class="kt">any&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">arr&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">element&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">arr&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">length&lt;/span>&lt;span class="p">;&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">pop() {&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">arr&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">pop&lt;/span>&lt;span class="p">();&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
+&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-typescript" data-lang="typescript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">stringStack&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="k">new&lt;/span> &lt;span class="nx">Stack&lt;/span>&lt;span class="p">();&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">stringStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;크와앙&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">console&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">log&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">stringStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">pop&lt;/span>&lt;span class="p">().&lt;/span>&lt;span class="nx">slice&lt;/span>&lt;span class="p">());&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">numberStack&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="k">new&lt;/span> &lt;span class="nx">Stack&lt;/span>&lt;span class="p">();&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">numberStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">console&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">log&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">numberStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">pop&lt;/span>&lt;span class="p">().&lt;/span>&lt;span class="nx">slice&lt;/span>&lt;span class="p">());&lt;/span> &lt;span class="c1">// TypeError: numberStack.pop(...).slice is not a function
+&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>당연히 &lt;code>numberStack&lt;/code> 부분에서 에러가 나지만, 이 문제를 &lt;strong>코드를 실행하기 전까진 알 수 없습니다&lt;/strong>. &lt;code>Stack&lt;/code>이 관리하는 것은 &lt;code>any&lt;/code> 타입의 배열이니까요.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/vscode/index.html b/tags/vscode/index.html
index 1422c62..17bf54a 100644
--- a/tags/vscode/index.html
+++ b/tags/vscode/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Vscode | PrayinForRain.dev</title>
-<meta property="og:title" content="Vscode | PrayinForRain.dev"><meta name=twitter:title content="Vscode | PrayinForRain.dev"><meta itemprop=name content="Vscode | PrayinForRain.dev"><meta name=application-name content="Vscode | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/vscode/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/vscode/><link href=/tags/vscode/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/vscode/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Vscode | PrayinForRain.dev"><meta name=twitter:title content="Vscode | PrayinForRain.dev"><meta itemprop=name content="Vscode | PrayinForRain.dev"><meta name=application-name content="Vscode | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/vscode/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/vscode/><link href=/tags/vscode/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/vscode/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Vscode</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/03/npm-scripts-doesnt-work/><h4 class=post-item-title>VSCode의 NPM Scripts가 작동하지 않는 사람</h4></a></div><time class=post-item-meta datetime=2023-03-29T15:17:00+0900>2023. 3. 29.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Vscode</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/03/npm-scripts-doesnt-work/><h4 class=post-item-title>VSCode의 NPM Scripts가 작동하지 않는 사람</h4></a></div><time class=post-item-meta datetime=2023-03-29T15:17:00+0900>2023. 3. 29.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/vscode/index.xml b/tags/vscode/index.xml
index 8f83ce1..025de4f 100644
--- a/tags/vscode/index.xml
+++ b/tags/vscode/index.xml
@@ -1,3 +1,8 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Vscode on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/vscode/</link><description>Recent content in Vscode on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Wed, 29 Mar 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/vscode/index.xml" rel="self" type="application/rss+xml"/><item><title>VSCode의 NPM Scripts가 작동하지 않는 사람</title><link>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</link><pubDate>Wed, 29 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</guid><description>늦잠자고 갓생사는 척 하는 삶이란&amp;hellip;
-맥북과 친해지기 시작한지 2달이 되었다. 윈도우 노트북을 사용하다가 갈아 탄 이유는, 맥에서 되는 것이 윈도우에서 되고, 윈도우에서 되는 것은 맥에서 안되는 문제를 너무 많이 겪었기 때문이다. 주변의 맥 유저에게 계속해서 테스트를 요청하기도 눈치보이고, 언젠가는 마주해야겠다고 생각했던 녀석이기 때문에 과감한 투자를 했다. 그 과정에서 내가 윈도우에 지나치게 강결합(?) 되어 있다는 것을 깨달았고, 지금은 맥도 윈도우도 못 쓰는 그 어딘가의 지점에 있다.
-그리고 최근에는 프로젝트를 하고 있다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Vscode on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/vscode/</link><description>Recent content in Vscode on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Wed, 29 Mar 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/vscode/index.xml" rel="self" type="application/rss+xml"/><item><title>VSCode의 NPM Scripts가 작동하지 않는 사람</title><link>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</link><pubDate>Wed, 29 Mar 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/03/npm-scripts-doesnt-work/</guid><description>&lt;figure>&lt;img src="https://prayinforrain.github.io/images/posts/2023/03/npm-scripts-doesnt-work/01.jpeg"
+ alt="image">&lt;figcaption>
+ &lt;p>늦잠자고 갓생사는 척 하는 삶이란&amp;hellip;&lt;/p>
+ &lt;/figcaption>
+&lt;/figure>
+
+&lt;p>맥북과 친해지기 시작한지 2달이 되었다. 윈도우 노트북을 사용하다가 갈아 탄 이유는, &lt;em>맥에서 되는 것이 윈도우에서 되고, 윈도우에서 되는 것은 맥에서 안되는&lt;/em> 문제를 너무 많이 겪었기 때문이다. 주변의 맥 유저에게 계속해서 테스트를 요청하기도 눈치보이고, 언젠가는 마주해야겠다고 생각했던 녀석이기 때문에 과감한 투자를 했다. 그 과정에서 내가 윈도우에 지나치게 강결합(?) 되어 있다는 것을 깨달았고, 지금은 맥도 윈도우도 못 쓰는 그 어딘가의 지점에 있다.&lt;/p>
+&lt;p>그리고 최근에는 프로젝트를 하고 있다. 부스트캠프에서 만난 사람들과 스터디를 하다가, 디자인 시스템을 만들어 보자는 이야기가 나와서 다같이 티스푼 공사 중이다. 이 것에 대해서도 글을 써야 하는데 오늘 포스팅할 내용은 이 것도 아니다. 회고를 안 쓰니 이야기가 많이 밀려 횡설수설 하는구나..&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/web/index.html b/tags/web/index.html
index 6aecb03..a052483 100644
--- a/tags/web/index.html
+++ b/tags/web/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Web | PrayinForRain.dev</title>
-<meta property="og:title" content="Web | PrayinForRain.dev"><meta name=twitter:title content="Web | PrayinForRain.dev"><meta itemprop=name content="Web | PrayinForRain.dev"><meta name=application-name content="Web | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/web/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/web/><link href=/tags/web/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/web/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Web | PrayinForRain.dev"><meta name=twitter:title content="Web | PrayinForRain.dev"><meta itemprop=name content="Web | PrayinForRain.dev"><meta name=application-name content="Web | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/web/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/web/><link href=/tags/web/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/web/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Web</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/02/firebase-with-typescript/><h4 class=post-item-title>Firebase를 TypeScript에서 사용하기</h4></a></div><time class=post-item-meta datetime=2023-02-15T15:17:00+0900>2023. 2. 15.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/02/typescript-generic/><h4 class=post-item-title>Typescript Generic</h4></a></div><time class=post-item-meta datetime=2023-02-01T02:01:15+0900>2023. 2. 1.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/tree-shaking/><h4 class=post-item-title>Tree Shaking</h4></a></div><time class=post-item-meta datetime=2023-01-25T17:17:15+0900>2023. 1. 25.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/ecmascript/><h4 class=post-item-title>ECMAScript</h4></a></div><time class=post-item-meta datetime=2023-01-25T16:35:01+0900>2023. 1. 25.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/browser-rendering-performance/><h4 class=post-item-title>브라우저 렌더링과 성능</h4></a></div><time class=post-item-meta datetime=2023-01-16T16:38:15+0900>2023. 1. 16.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/css-display/><h4 class=post-item-title>CSS의 display 속성</h4></a></div><time class=post-item-meta datetime=2023-01-16T16:38:15+0900>2023. 1. 16.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/size-units-in-css/><h4 class=post-item-title>CSS의 크기 단위</h4></a></div><time class=post-item-meta datetime=2023-01-13T23:39:15+0900>2023. 1. 13.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Web</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/02/firebase-with-typescript/><h4 class=post-item-title>Firebase를 TypeScript에서 사용하기</h4></a></div><time class=post-item-meta datetime=2023-02-15T15:17:00+0900>2023. 2. 15.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/02/typescript-generic/><h4 class=post-item-title>Typescript Generic</h4></a></div><time class=post-item-meta datetime=2023-02-01T02:01:15+0900>2023. 2. 1.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/tree-shaking/><h4 class=post-item-title>Tree Shaking</h4></a></div><time class=post-item-meta datetime=2023-01-25T17:17:15+0900>2023. 1. 25.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/ecmascript/><h4 class=post-item-title>ECMAScript</h4></a></div><time class=post-item-meta datetime=2023-01-25T16:35:01+0900>2023. 1. 25.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/browser-rendering-performance/><h4 class=post-item-title>브라우저 렌더링과 성능</h4></a></div><time class=post-item-meta datetime=2023-01-16T16:38:15+0900>2023. 1. 16.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/css-display/><h4 class=post-item-title>CSS의 display 속성</h4></a></div><time class=post-item-meta datetime=2023-01-16T16:38:15+0900>2023. 1. 16.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/01/size-units-in-css/><h4 class=post-item-title>CSS의 크기 단위</h4></a></div><time class=post-item-meta datetime=2023-01-13T23:39:15+0900>2023. 1. 13.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/web/index.xml b/tags/web/index.xml
index f6517c4..6a3cb28 100644
--- a/tags/web/index.xml
+++ b/tags/web/index.xml
@@ -1,13 +1,78 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Web on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/web/</link><description>Recent content in Web on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Wed, 15 Feb 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/web/index.xml" rel="self" type="application/rss+xml"/><item><title>Firebase를 TypeScript에서 사용하기</title><link>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</link><pubDate>Wed, 15 Feb 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</guid><description>최근에 들어서 Firebase가 필요한 일이 있었다. 대학교에서 써본 경험은 있었는데, 오랜만에 만난 Firebase는 예전같지 않았다. 가장 큰 문제는 Firebase가 제공하는 데이터베이스인 Firestore는 문서를 가져와도 타입을 제대로 정의할 수 없다는 것.
-자동완성이 안되는 타입스크립트는.. 그.. 왜..?
-물론 데이터스키마를 따로 정의하지 않기 때문에 Firebase 라이브러리가 DocumentData 타입을 개발자에게 맞춰줄 의무는 없지만, 적어도 React.useState처럼 제네릭으로 타입을 받아 어느정도 약속해 주기를 바랐다. 아니 바라는게 아니라 되어야 하는 거 아닌가..?
-붕대 감기 우선 Firebase의 쿼리 실행 결과로 오는 DocumentData는 다음과 같이 정의되어 있다.</description></item><item><title>Typescript Generic</title><link>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</link><pubDate>Wed, 01 Feb 2023 02:01:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</guid><description>타입스크립트와 리액트를 같이 사용할 때, 우리는 useState 훅을 아래와 같이 사용합니다.
-const [name, setName] = useState&amp;lt;string&amp;gt;(&amp;#34;지상렬&amp;#34;); 뭔진 몰라도, 저 꺽쇠 괄호를 사용해서 state가 다룰 상태의 타입을 지정할 수가 있습니다. 사실 적지 않아도 알아서 추론해 주지만, 아무튼 name.split('')처럼 string 타입이 제공하는 메소드나 프로퍼티도 자동완성해주고, 아주 편하게 사용할 수 있습니다. 오늘은 저 꺽쇠괄호에 대해 알아볼거에요.
-any 타입의 문제 아무튼 이번에 가져온 예제는 스택(Stack) 자료구조입니다. 그냥 대충 만들게요.
-class Stack { arr: any[] = []; push(element: any) { this.</description></item><item><title>Tree Shaking</title><link>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</link><pubDate>Wed, 25 Jan 2023 17:17:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</guid><description>용량을 절약하는 방법 웹페이지의 성능을 이야기하는 가장 직관적인 지표는 아마 페이지에 사용되는 파일의 크기일 것입니다. 파일의 크기가 무겁다면 파일을 다운받는 데 시간이 오래 걸리고, 다운로드한 파일을 읽고 렌더링 하는데도 시간이 오래 걸릴 것입니다. 따라서 번들 파일의 용량을 다이어트 하는 것은 사이트 성능에 꽤 중요한 역할을 합니다.
-위 사진은 팀 프로젝트를 하던 중 @next/bundle-analyzer 패키지를 이용해 번들 맵을 그렸던 것입니다. 클수록 번들 용량이 크다는 뜻이니 커다란 청크 위주로 최적화를 시도하면 될 것 같습니다.</description></item><item><title>ECMAScript</title><link>https://prayinforrain.github.io/posts/2023/01/ecmascript/</link><pubDate>Wed, 25 Jan 2023 16:35:01 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/ecmascript/</guid><description>Ecma international Ecma International is an industry association dedicated to the standardization of information and communication systems Emca International은 정보통신 시스템의 표준화를 위한 국제 표준화 기구입니다. &amp;gt; https://www.ecma-international.org/
-Ecma International은 Ecma 사이트에서 소개하듯, 정보통신 시스템의 표준을 만들기 위한 국제 기구입니다. C#, JSON, .u3d 확장자 등 여러 방면에서의 표준안을 제시하였으며, 개발자를 위한 IEEE같은 존재로 이해하면 될 것 같습니다.(제 생각)
-유럽에서 컴퓨터 시스템을 표준화하기 위해 설립되어서 ECMA(European Computer Manufacturers Association)라는 이름을 가지고 있으나 유럽국가 뿐 아니라 전세계의 표준으로 활용되기 위해 Ecma International로 이름을 변경하였습니다.</description></item><item><title>CSS의 display 속성</title><link>https://prayinforrain.github.io/posts/2023/01/css-display/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/css-display/</guid><description>CSS의 display 속성은 HTML element가 block인지, inline인지, 그리고 자식 element들을 어떤 식으로 표시할지를 정하는 속성입니다. 다시 말해 요소 자체가 형제 요소와 배치되는 방법과, 자식 요소를 배치하는 방법을 함께 정의하기 때문에 ‘안쪽’과 ‘바깥쪽’으로 속성을 나눌 수 있습니다.
-display: 바깥쪽 block 한 줄에는 한 요소만 올 수 있게 하는 속성입니다. inline 요소가 한 줄에 여러 개 표시 될 수 있음을 의미합니다. 만약 inline이 적용된 요소의 전후에 inline 요소를 표시할 공간이 있다면 한 줄에 표시됩니다.</description></item><item><title>브라우저 렌더링과 성능</title><link>https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/</guid><description>브라우저 렌더링 성능 최적화를 위해, 브라우저가 어떻게 HTML 문서를 화면에 그리는지 과정에 대해 이해할 필요가 있습니다. 브라우저 렌더링은 아래 사진과 같은 흐름으로 이루어집니다.
-서버로부터 HTML, CSS, JavaScript 파일을 받아와 HTML → DOM, CSS → CSSOM으로 변환하고 Render Tree를 구성합니다. Render Tree의 노드들에 대한 위치와 크기를 계산합니다. Render Tree의 루트부터 시작하여 모든 노드에 대해 계산을 수행합니다. (Layout) 계산된 결과물을 기반으로 화면에 실제 노드들을 그립니다. (Paint) 사용자의 상호작용이나 스크립트를 통한 제어 등으로 HTML 요소의 크기나 위치의 변경이 일어나면 Reflow라는 과정을 수행합니다.</description></item><item><title>CSS의 크기 단위</title><link>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</link><pubDate>Fri, 13 Jan 2023 23:39:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</guid><description>CSS의 크기 단위 CSS에는 다양한 단위가 존재합니다. 우리가 잘 아는 px와 %부터, em, rem, pt, vh, vw 등등 다양한 단위가 존재하는데요, 이 크기 단위들을 언제 어떻게 사용하면 좋을지에 대해 정리해 보았습니다.
-상대 단위와 절대 단위 px과 %를 먼저 비교해 보면, px은 우리가 알고 있는 컴퓨터 화면의 1픽셀을 의미합니다. 이는 어느 화면에서나 같은 크기를 나타내므로 절대 단위에 해당합니다. 반면 %는 보통 부모 element의 크기를 상속받아 그의 정해진 비율만큼을 나타냅니다. 즉 width: 10px;인 부모를 가진 element에 width: 50%;를 주면 5px이 되겠죠.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Web on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/web/</link><description>Recent content in Web on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Wed, 15 Feb 2023 15:17:00 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/web/index.xml" rel="self" type="application/rss+xml"/><item><title>Firebase를 TypeScript에서 사용하기</title><link>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</link><pubDate>Wed, 15 Feb 2023 15:17:00 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/firebase-with-typescript/</guid><description>&lt;p>최근에 들어서 Firebase가 필요한 일이 있었다. 대학교에서 써본 경험은 있었는데, 오랜만에 만난 Firebase는 예전같지 않았다. 가장 큰 문제는 Firebase가 제공하는 데이터베이스인 Firestore는 문서를 가져와도 타입을 제대로 정의할 수 없다는 것.&lt;/p>
+&lt;figure>&lt;img src="https://prayinforrain.github.io/images/posts/2023/02/firebase-with-typescript/01.png"
+ alt="image">&lt;figcaption>
+ &lt;p>자동완성이 안되는 타입스크립트는.. 그.. 왜..?&lt;/p>
+ &lt;/figcaption>
+&lt;/figure>
+
+&lt;p>물론 데이터스키마를 따로 정의하지 않기 때문에 Firebase 라이브러리가 &lt;code>DocumentData&lt;/code> 타입을 개발자에게 맞춰줄 의무는 없지만, 적어도 &lt;code>React.useState&lt;/code>처럼 제네릭으로 타입을 받아 어느정도 약속해 주기를 바랐다. 아니 바라는게 아니라 되어야 하는 거 아닌가..?&lt;/p>
+&lt;h2 id="붕대-감기">붕대 감기&lt;/h2>
+&lt;p>우선 Firebase의 쿼리 실행 결과로 오는 &lt;code>DocumentData&lt;/code>는 다음과 같이 정의되어 있다.&lt;/p></description></item><item><title>Typescript Generic</title><link>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</link><pubDate>Wed, 01 Feb 2023 02:01:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/02/typescript-generic/</guid><description>&lt;p>타입스크립트와 리액트를 같이 사용할 때, 우리는 &lt;code>useState&lt;/code> 훅을 아래와 같이 사용합니다.&lt;/p>
+&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-typescript" data-lang="typescript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="p">[&lt;/span>&lt;span class="nx">name&lt;/span>&lt;span class="p">,&lt;/span> &lt;span class="nx">setName&lt;/span>&lt;span class="p">]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="nx">useState&lt;/span>&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">string&lt;/span>&lt;span class="p">&amp;gt;(&lt;/span>&lt;span class="s2">&amp;#34;지상렬&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>뭔진 몰라도, 저 꺽쇠 괄호를 사용해서 state가 다룰 상태의 타입을 지정할 수가 있습니다. 사실 적지 않아도 알아서 추론해 주지만, 아무튼 &lt;code>name.split('')&lt;/code>처럼 string 타입이 제공하는 메소드나 프로퍼티도 자동완성해주고, 아주 편하게 사용할 수 있습니다. 오늘은 저 꺽쇠괄호에 대해 알아볼거에요.&lt;/p>
+&lt;h2 id="any-타입의-문제">any 타입의 문제&lt;/h2>
+&lt;p>아무튼 이번에 가져온 예제는 스택(Stack) 자료구조입니다. 그냥 대충 만들게요.&lt;/p>
+&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-typescript" data-lang="typescript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">class&lt;/span> &lt;span class="nx">Stack&lt;/span> &lt;span class="p">{&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">arr&lt;/span>: &lt;span class="kt">any&lt;/span>&lt;span class="p">[]&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="p">[];&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">element&lt;/span>: &lt;span class="kt">any&lt;/span>&lt;span class="p">)&lt;/span> &lt;span class="p">{&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">arr&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">element&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">arr&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">length&lt;/span>&lt;span class="p">;&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nx">pop() {&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">return&lt;/span> &lt;span class="k">this&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">arr&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">pop&lt;/span>&lt;span class="p">();&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
+&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-typescript" data-lang="typescript">&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">stringStack&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="k">new&lt;/span> &lt;span class="nx">Stack&lt;/span>&lt;span class="p">();&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">stringStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;크와앙&amp;#34;&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">console&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">log&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">stringStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">pop&lt;/span>&lt;span class="p">().&lt;/span>&lt;span class="nx">slice&lt;/span>&lt;span class="p">());&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="kr">const&lt;/span> &lt;span class="nx">numberStack&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="k">new&lt;/span> &lt;span class="nx">Stack&lt;/span>&lt;span class="p">();&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">numberStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">push&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="mi">0&lt;/span>&lt;span class="p">);&lt;/span>
+&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nx">console&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">log&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="nx">numberStack&lt;/span>&lt;span class="p">.&lt;/span>&lt;span class="nx">pop&lt;/span>&lt;span class="p">().&lt;/span>&lt;span class="nx">slice&lt;/span>&lt;span class="p">());&lt;/span> &lt;span class="c1">// TypeError: numberStack.pop(...).slice is not a function
+&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>당연히 &lt;code>numberStack&lt;/code> 부분에서 에러가 나지만, 이 문제를 &lt;strong>코드를 실행하기 전까진 알 수 없습니다&lt;/strong>. &lt;code>Stack&lt;/code>이 관리하는 것은 &lt;code>any&lt;/code> 타입의 배열이니까요.&lt;/p></description></item><item><title>Tree Shaking</title><link>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</link><pubDate>Wed, 25 Jan 2023 17:17:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/tree-shaking/</guid><description>&lt;h2 id="용량을-절약하는-방법">용량을 절약하는 방법&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/tree-shaking/01.png" alt="bundle_map">&lt;/p>
+&lt;p>웹페이지의 성능을 이야기하는 가장 직관적인 지표는 아마 페이지에 사용되는 &lt;strong>파일의 크기&lt;/strong>일 것입니다. 파일의 크기가 무겁다면 파일을 다운받는 데 시간이 오래 걸리고, 다운로드한 파일을 읽고 렌더링 하는데도 시간이 오래 걸릴 것입니다. 따라서 번들 파일의 용량을 다이어트 하는 것은 사이트 성능에 꽤 중요한 역할을 합니다.&lt;/p>
+&lt;p>위 사진은 팀 프로젝트를 하던 중 &lt;code>@next/bundle-analyzer&lt;/code> 패키지를 이용해 번들 맵을 그렸던 것입니다. 클수록 번들 용량이 크다는 뜻이니 커다란 청크 위주로 최적화를 시도하면 될 것 같습니다. 그런데 어떻게 용량을 줄일 수 있을까요? gzip을 통해 파일을 압축해서 보내는 방법도 있겠지만, 코드적으로 최적화할 수 있는 방법은 &lt;code>Tree-shaking&lt;/code>입니다.&lt;/p></description></item><item><title>ECMAScript</title><link>https://prayinforrain.github.io/posts/2023/01/ecmascript/</link><pubDate>Wed, 25 Jan 2023 16:35:01 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/ecmascript/</guid><description>&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/ecmascript/01.png" alt="untitled">&lt;/p>
+&lt;h2 id="ecma-international">Ecma international&lt;/h2>
+&lt;blockquote>
+&lt;p>&lt;strong>Ecma International&lt;/strong> is an industry association dedicated to the standardization of information and communication systems
+&lt;em>Emca International은 정보통신 시스템의 표준화를 위한 국제 표준화 기구입니다.&lt;/em> &amp;gt; &lt;a href="https://www.ecma-international.org/">https://www.ecma-international.org/&lt;/a>&lt;/p>
+&lt;/blockquote>
+&lt;p>Ecma International은 Ecma 사이트에서 소개하듯, 정보통신 시스템의 표준을 만들기 위한 국제 기구입니다. C#, JSON, .u3d 확장자 등 여러 방면에서의 표준안을 제시하였으며, 개발자를 위한 IEEE같은 존재로 이해하면 될 것 같습니다.(제 생각)&lt;/p>
+&lt;p>유럽에서 컴퓨터 시스템을 표준화하기 위해 설립되어서 &lt;strong>ECMA&lt;/strong>(&lt;em>European Computer Manufacturers Association&lt;/em>)라는 이름을 가지고 있으나 유럽국가 뿐 아니라 전세계의 표준으로 활용되기 위해 &lt;strong>Ecma International&lt;/strong>로 이름을 변경하였습니다. &lt;strong>ECMA&lt;/strong> 자체는 두문자어이지만 지금의 이름은 하나의 고유명사로 사용되는 셈이죠. 따라서 &lt;strong>Ecma&lt;/strong>로 표기하는 것이 맞습니다.&lt;/p></description></item><item><title>CSS의 display 속성</title><link>https://prayinforrain.github.io/posts/2023/01/css-display/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/css-display/</guid><description>&lt;p>CSS의 &lt;code>display&lt;/code> 속성은 HTML element가 block인지, inline인지, 그리고 자식 element들을 어떤 식으로 표시할지를 정하는 속성입니다. 다시 말해 요소 자체가 형제 요소와 배치되는 방법과, 자식 요소를 배치하는 방법을 함께 정의하기 때문에 ‘&lt;strong>안쪽&lt;/strong>’과 ‘&lt;strong>바깥쪽&lt;/strong>’으로 속성을 나눌 수 있습니다.&lt;/p>
+&lt;h2 id="display">display:&lt;/h2>
+&lt;h3 id="바깥쪽">바깥쪽&lt;/h3>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/css-display/01.png" alt="Untitled">&lt;/p>
+&lt;ul>
+&lt;li>&lt;code>block&lt;/code>
+&lt;ul>
+&lt;li>한 줄에는 한 요소만 올 수 있게 하는 속성입니다.&lt;/li>
+&lt;/ul>
+&lt;/li>
+&lt;li>&lt;code>inline&lt;/code>
+&lt;ul>
+&lt;li>요소가 한 줄에 여러 개 표시 될 수 있음을 의미합니다. 만약 &lt;code>inline&lt;/code>이 적용된 요소의 전후에 &lt;code>inline&lt;/code> 요소를 표시할 공간이 있다면 한 줄에 표시됩니다.&lt;/li>
+&lt;/ul>
+&lt;/li>
+&lt;/ul>
+&lt;p>사진의 div들은 각각 &lt;code>inline&lt;/code>, &lt;code>block&lt;/code> 속성을 지정하였습니다. 보이는 것과 같이 &lt;code>block&lt;/code> 속성의 요소는 한 줄에 하나만 존재할 수 있으며, &lt;code>inline&lt;/code> 속성은 충분한 공간이 있으면 한 줄에 표시됩니다. &lt;code>span&lt;/code>과 &lt;code>p&lt;/code>태그의 차이와 비슷합니다.&lt;/p></description></item><item><title>브라우저 렌더링과 성능</title><link>https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/</link><pubDate>Mon, 16 Jan 2023 16:38:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/browser-rendering-performance/</guid><description>&lt;h2 id="브라우저-렌더링">브라우저 렌더링&lt;/h2>
+&lt;p>성능 최적화를 위해, 브라우저가 어떻게 HTML 문서를 화면에 그리는지 과정에 대해 이해할 필요가 있습니다. 브라우저 렌더링은 아래 사진과 같은 흐름으로 이루어집니다.&lt;/p>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/browser-rendering-performance/01.png" alt="Untitled">&lt;/p>
+&lt;ul>
+&lt;li>서버로부터 HTML, CSS, JavaScript 파일을 받아와 HTML → DOM, CSS → CSSOM으로 변환하고 Render Tree를 구성합니다.&lt;/li>
+&lt;li>Render Tree의 노드들에 대한 위치와 크기를 계산합니다. Render Tree의 루트부터 시작하여 모든 노드에 대해 계산을 수행합니다. (Layout)&lt;/li>
+&lt;li>계산된 결과물을 기반으로 화면에 실제 노드들을 그립니다. (Paint)&lt;/li>
+&lt;li>사용자의 상호작용이나 스크립트를 통한 제어 등으로 HTML 요소의 크기나 위치의 변경이 일어나면 &lt;code>Reflow&lt;/code>라는 과정을 수행합니다.
+&lt;ul>
+&lt;li>Reflow는 Render Tree 구성부터 &lt;strong>모든 작업을 다시 수행&lt;/strong>합니다.&lt;/li>
+&lt;li>만약 레이아웃 자체에는 변화가 없고, 색상이나 visibility 등의 변경만 있는 경우에는 Paint 과정만을 다시 수행합니다. (Repaint)&lt;/li>
+&lt;li>따라서 비용이 큰 &lt;strong>Reflow의 발생을 최대한 줄이는 것이 중요&lt;/strong>합니다.&lt;/li>
+&lt;/ul>
+&lt;/li>
+&lt;/ul>
+&lt;iframe width="560" height="315" src="https://www.youtube.com/embed/TZz9VHjJzMk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>&lt;/iframe>
+&lt;p>이거 되게 좋은 내용인 것 같아요 CSS의 &lt;code>will-change&lt;/code>를 통헤 불필요한 GPU 점유를 줄이는 방법도 소개하고 있네요!&lt;/p></description></item><item><title>CSS의 크기 단위</title><link>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</link><pubDate>Fri, 13 Jan 2023 23:39:15 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/01/size-units-in-css/</guid><description>&lt;h2 id="css의-크기-단위">CSS의 크기 단위&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/01/size-units-in-css/01.png" alt="Untitled">&lt;/p>
+&lt;p>CSS에는 다양한 단위가 존재합니다. 우리가 잘 아는 &lt;code>px&lt;/code>와 &lt;code>%&lt;/code>부터, &lt;code>em&lt;/code>, &lt;code>rem&lt;/code>, &lt;code>pt&lt;/code>, &lt;code>vh&lt;/code>, &lt;code>vw&lt;/code> 등등 다양한 단위가 존재하는데요, 이 크기 단위들을 언제 어떻게 사용하면 좋을지에 대해 정리해 보았습니다.&lt;/p>
+&lt;h2 id="상대-단위와-절대-단위">상대 단위와 절대 단위&lt;/h2>
+&lt;p>&lt;code>px&lt;/code>과 &lt;code>%&lt;/code>를 먼저 비교해 보면, &lt;code>px&lt;/code>은 우리가 알고 있는 컴퓨터 화면의 1픽셀을 의미합니다. 이는 어느 화면에서나 같은 크기를 나타내므로 &lt;strong>절대 단위&lt;/strong>에 해당합니다. 반면 &lt;code>%&lt;/code>는 보통 부모 element의 크기를 상속받아 그의 정해진 비율만큼을 나타냅니다. 즉 &lt;code>width: 10px;&lt;/code>인 부모를 가진 element에 &lt;code>width: 50%;&lt;/code>를 주면 5px이 되겠죠. 이렇게 상황에 따라서 다른 값을 갖는 단위를 &lt;strong>상대 단위&lt;/strong>라고 부릅니다.&lt;/p></description></item></channel></rss>
\ No newline at end of file
diff --git a/tags/yarn/index.html b/tags/yarn/index.html
index e5dcf6e..28d493b 100644
--- a/tags/yarn/index.html
+++ b/tags/yarn/index.html
@@ -1,10 +1,10 @@
 <!doctype html><html lang=ko><head><meta charset=utf-8><meta http-equiv=content-type content="text/html"><meta name=viewport content="width=device-width,initial-scale=1"><title itemprop=name>Yarn | PrayinForRain.dev</title>
-<meta property="og:title" content="Yarn | PrayinForRain.dev"><meta name=twitter:title content="Yarn | PrayinForRain.dev"><meta itemprop=name content="Yarn | PrayinForRain.dev"><meta name=application-name content="Yarn | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/yarn/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.124.1"><link rel=canonical href=https://prayinforrain.github.io/tags/yarn/><link href=/tags/yarn/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/yarn/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5",{anonymize_ip:!1})}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<meta property="og:title" content="Yarn | PrayinForRain.dev"><meta name=twitter:title content="Yarn | PrayinForRain.dev"><meta itemprop=name content="Yarn | PrayinForRain.dev"><meta name=application-name content="Yarn | PrayinForRain.dev"><meta property="og:site_name" content="PrayinforRain.dev"><meta name=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta itemprop=description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:description" content="Dev blog of PrayinForRain, a KR frontend engineer"><meta name=twitter:description content="Dev blog of PrayinForRain, a KR frontend engineer"><meta property="og:locale" content="ko"><meta name=language content="ko"><link rel=alternate hreflang=ko href=https://prayinforrain.github.io/tags/yarn/ title><meta itemprop=image content="https://prayinforrain.github.io/avatar.png"><meta property="og:image" content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image content="https://prayinforrain.github.io/avatar.png"><meta name=twitter:image:src content="https://prayinforrain.github.io/avatar.png"><meta name=generator content="Hugo 0.134.3"><link rel=canonical href=https://prayinforrain.github.io/tags/yarn/><link href=/tags/yarn/index.xml rel=alternate type=application/rss+xml title=PrayinForRain.dev><link href=/tags/yarn/index.xml rel=feed type=application/rss+xml title=PrayinForRain.dev><link href=/style.min.b986244e2fb36964e8f831c45e69cf0e3e208d4d9bf6b5eaf4caddc81dc0ba31.css rel=stylesheet><link href=/code-highlight.min.731e9fc351d3c45d032fb5f574575c296f67e08c1c6229b5ccbfd7bfb18217c5.css rel=stylesheet><link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=mask-icon href=/icons/safari-pinned-tab.svg><link rel="shortcut icon" href=/favicon.ico><link rel=manifest href=https://prayinforrain.github.io/site.webmanifest><meta name=msapplication-config content="/browserconfig.xml"><meta name=msapplication-TileColor content="#2d89ef"><meta name=theme-color content="#434648"><link rel=icon type=image/svg+xml href=/icons/favicon.ico><script async src="https://www.googletagmanager.com/gtag/js?id=G-63GYNX3VF5"></script><script>var dnt,doNotTrack=!1;if(!1&&(dnt=navigator.doNotTrack||window.doNotTrack||navigator.msDoNotTrack,doNotTrack=dnt=="1"||dnt=="yes"),!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-63GYNX3VF5")}</script><script type=text/javascript src=//wcs.naver.net/wcslog.js></script><script type=text/javascript>if(!wcs_add)var wcs_add={};wcs_add.wa="1940c9395811670",window.wcs&&location.host==="prayinforrain.github.io"&&wcs_do()</script></head><body data-theme=auto class=notransition><script src=/js/theme.min.d17e61995c7d9fee9a7b0e77c95447101fe27fa434c458fab370732da48b2b17.js integrity="sha256-0X5hmVx9n+6aew53yVRHEB/if6Q0xFj6s3BzLaSLKxc="></script><div class=navbar role=navigation><nav class=menu aria-label="Main Navigation"><a href=https://prayinforrain.github.io/ class=logo><svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><title>Home</title><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 </a><input type=checkbox id=menu-trigger class=menu-trigger>
-<label for=menu-trigger><span class=menu-icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg xmlns="http://www.w3.org/2000/svg" class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg xmlns="http://www.w3.org/2000/svg" class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Yarn</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/05/exploring-yarn-berry/><h4 class=post-item-title>얀 베리 탐험하기</h4></a></div><time class=post-item-meta datetime=2023-05-30T02:27:49+0900>2023. 5. 30.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/04/nextjs-storybook-with-pnp/><h4 class=post-item-title>Next.js Storybook에 Yarn PnP 적용하기</h4></a></div><time class=post-item-meta datetime=2023-04-27T15:32:50+0900>2023. 4. 27.</time></article><h2 class=post-year>2022</h2><article class=post-item><div class=post-item-content><a href=/posts/2022/11/npm-vs-yarn-vs-pnpm/><h4 class=post-item-title>npm vs yarn vs pnpm</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
-</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
+<label for=menu-trigger><span class=menu-icon><svg width="25" height="25" stroke="currentcolor" fill="none" viewBox="0 0 14 14"><title>Menu</title><path stroke-linecap="round" stroke-linejoin="round" d="M10.595 7H3.40726"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 3.51488H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M10.5096 10.4851H3.49301"/><path stroke-linecap="round" stroke-linejoin="round" d="M.5 12.5V1.5c0-.552285.447715-1 1-1h11C13.0523.5 13.5.947715 13.5 1.5v11C13.5 13.0523 13.0523 13.5 12.5 13.5H1.5C.947715 13.5.5 13.0523.5 12.5z"/></svg></span></label><div class=trigger><ul class=trigger-container><li><a class=menu-link href=/>Home</a></li><li><a class=menu-link href=/posts/>Posts</a></li><li><a class=menu-link href=/tags/>Tags</a></li><li><a class=menu-link href=/about/>About</a></li><li class=menu-separator><span>|</span></li></ul><a id=mode href=#><svg class="mode-sunny" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>LIGHT</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg><svg class="mode-moon" width="21" height="21" viewBox="0 0 14 14" stroke-width="1"><title>DARK</title><g><circle cx="7" cy="7" r="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1=".5" x2="7" y2="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="2.4" x2="3.82" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1=".5" y1="7" x2="2.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="2.4" y1="11.6" x2="3.82" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="7" y1="13.5" x2="7" y2="11.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="11.6" x2="10.18" y2="10.18" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="13.5" y1="7" x2="11.5" y2="7" fill="none" stroke-linecap="round" stroke-linejoin="round"/><line x1="11.6" y1="2.4" x2="10.18" y2="3.82" fill="none" stroke-linecap="round" stroke-linejoin="round"/></g></svg></a></div></nav></div><div class="wrapper list-page"><header class=header><h1 class="header-title center">Yarn</h1></header><main class=page-content aria-label=Content><h2 class=post-year>2023</h2><article class=post-item><div class=post-item-content><a href=/posts/2023/05/exploring-yarn-berry/><h4 class=post-item-title>얀 베리 탐험하기</h4></a></div><time class=post-item-meta datetime=2023-05-30T02:27:49+0900>2023. 5. 30.</time></article><article class=post-item><div class=post-item-content><a href=/posts/2023/04/nextjs-storybook-with-pnp/><h4 class=post-item-title>Next.js Storybook에 Yarn PnP 적용하기</h4></a></div><time class=post-item-meta datetime=2023-04-27T15:32:50+0900>2023. 4. 27.</time></article><h2 class=post-year>2022</h2><article class=post-item><div class=post-item-content><a href=/posts/2022/11/npm-vs-yarn-vs-pnpm/><h4 class=post-item-title>npm vs yarn vs pnpm</h4></a></div><time class=post-item-meta datetime=2022-11-18T16:42:55+0900>2022. 11. 18.</time></article></main></div><footer class=footer><span class=footer_item></span>&nbsp;<div class=footer_social-icons><a href=https://github.com/prayinforrain target=_blank rel="noopener noreferrer me" title=Github><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg>
+</a><a href=mailto:prayinforrain@naver.com target=_blank rel="noopener noreferrer me" title=Email><svg viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+</a><a href=index.xml target=_blank rel="noopener noreferrer me" title=Rss><svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg></a></div><small class=footer_copyright>© 2024 PrayinforRain.
 Powered by <a href=https://github.com/hugo-sid/hugo-blog-awesome target=_blank rel="noreferrer noopener">Hugo blog awesome</a>
 theme on
-<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
+<a href=https://gohugo.io target=_blank rel="noreferrer noopener">Hugo</a>.</small></footer><a href=# title="Go to top" id=totop><svg width="48" height="48" fill="currentcolor" stroke="currentcolor" viewBox="0 96 960 960"><path d="M283 704.739 234.261 656 480 410.261 725.739 656 677 704.739l-197-197-197 197z"/></svg>
 </a><script src=https://prayinforrain.github.io/js/main.min.35f435a5d8eac613c52daa28d8af544a4512337d3e95236e4a4978417b8dcb2f.js integrity="sha256-NfQ1pdjqxhPFLaoo2K9USkUSM30+lSNuSkl4QXuNyy8="></script><script src=https://prayinforrain.github.io/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js integrity="sha256-2aDqCmXBsB6SIXPnLNge7a2K5LPKk5bpXyS259KalMg="></script></body></html>
\ No newline at end of file
diff --git a/tags/yarn/index.xml b/tags/yarn/index.xml
index 47f9306..cec0c5f 100644
--- a/tags/yarn/index.xml
+++ b/tags/yarn/index.xml
@@ -1,4 +1,14 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Yarn on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/yarn/</link><description>Recent content in Yarn on PrayinForRain.dev</description><generator>Hugo -- gohugo.io</generator><language>ko</language><lastBuildDate>Tue, 30 May 2023 02:27:49 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/yarn/index.xml" rel="self" type="application/rss+xml"/><item><title>얀 베리 탐험하기</title><link>https://prayinforrain.github.io/posts/2023/05/exploring-yarn-berry/</link><pubDate>Tue, 30 May 2023 02:27:49 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/05/exploring-yarn-berry/</guid><description>내 레포의 위험한 녀석 최근 차가운 디자인 시스템(CDS)의 패키지 매니저를 Yarn berry로 마이그레이션 하는 작업을 하고 있다. 이유는 후술할 node_modules 자체의 단점도 있고, 내 데스크탑이 HDD를 사용하기 때문에 node_modules의 수십만 개의 파일들을 다루는 것이 너무 느려서 강력 추천했다.
-하지만 사실 나는 PnP가 어떻게 패키지들을 resolve하는지 전혀 모른다. 그저 어떻게 해야 오류 없이 쓸 수 있는지만 열심히 고민했는데, 팀원들에게 설명할 때 마다 막연히 얀베리가 잘못했겠죠~ 하는 스스로에게 자괴감을 느껴 이 기회에 한 번 Yarn PnP를 똑바로 마주해 보기로 했다.</description></item><item><title>Next.js Storybook에 Yarn PnP 적용하기</title><link>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</link><pubDate>Thu, 27 Apr 2023 15:32:50 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</guid><description>Storybook을 쓰려고 했는데 최근 Storybook을 사용할 일이 무척 많았다. 언젠가는 포스팅을 해야 할 CDS 프로젝트부터 넘블 챌린지도 있었고&amp;hellip; 처음엔 너무 낯설었지만 공통된 컴포넌트들을 미리 설계해 두고 재사용하는 것이 좀 더 깔끔한 설계가 되는 것 같아 매력을 느꼈다.
-그런데 문제는 내 작업 환경에 있었다. 꽤 연식이 된 윈도우 데스크탑에 수십가지 개발 환경을 섞어 놓고, 요새는 게임에도 못 쓰는 처참한 성능의 HDD에 레포를 두고 쓰니 종속성 패키지 설치도 커피 한 잔 타와야 하는 시간이 걸리니 Yarn Berry의 사용이 반필수가 되어버렸다.</description></item><item><title>npm vs yarn vs pnpm</title><link>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</guid><description>지금까지 저는 아무 의심 없이 npm을 사용해왔습니다. 이따금씩 node_modules 폴더가 저를 고통스럽게 했던 시간들이 있었지만, 프로젝트 초기화에 정말 이상한 행동만 하지 않으면 npm i 한 줄과 커피 한 잔으로 모든게 문제 없이 동작했으니까요. 하지만 우리는 슬랙의 어떤 분을 통해, npm보다 좋은 방법이 있음을 알고 있습니다. 이번 포스트에서는 yarn과 pnpm을 체험해 보도록 하겠습니다.
-🤷 TL;DR npm의 의존성 관리는 사실 매우 비효율적이다. 이 문제를 보완한 패키지 매니저가 yarn, pnpm이다. 각 패키지 매니저로의 마이그레이션은 매우 쉽다.</description></item></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Yarn on PrayinForRain.dev</title><link>https://prayinforrain.github.io/tags/yarn/</link><description>Recent content in Yarn on PrayinForRain.dev</description><generator>Hugo</generator><language>ko</language><lastBuildDate>Tue, 30 May 2023 02:27:49 +0900</lastBuildDate><atom:link href="https://prayinforrain.github.io/tags/yarn/index.xml" rel="self" type="application/rss+xml"/><item><title>얀 베리 탐험하기</title><link>https://prayinforrain.github.io/posts/2023/05/exploring-yarn-berry/</link><pubDate>Tue, 30 May 2023 02:27:49 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/05/exploring-yarn-berry/</guid><description>&lt;h2 id="내-레포의-위험한-녀석">내 레포의 위험한 녀석&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2023/05/exploring-yarn-berry/01.png" alt="cds issue">&lt;/p>
+&lt;p>최근 &lt;a href="https://github.com/c-h-w-h/cds">차가운 디자인 시스템(CDS)&lt;/a>의 패키지 매니저를 &lt;strong>Yarn berry&lt;/strong>로 마이그레이션 하는 작업을 하고 있다. 이유는 후술할 &lt;code>node_modules&lt;/code> 자체의 단점도 있고, 내 데스크탑이 HDD를 사용하기 때문에 &lt;code>node_modules&lt;/code>의 수십만 개의 파일들을 다루는 것이 너무 느려서 강력 추천했다.&lt;/p>
+&lt;p>하지만 사실 나는 PnP가 어떻게 패키지들을 resolve하는지 전혀 모른다. 그저 어떻게 해야 오류 없이 쓸 수 있는지만 열심히 고민했는데, 팀원들에게 설명할 때 마다 막연히 얀베리가 잘못했겠죠~ 하는 스스로에게 자괴감을 느껴 이 기회에 한 번 Yarn PnP를 똑바로 마주해 보기로 했다.&lt;/p></description></item><item><title>Next.js Storybook에 Yarn PnP 적용하기</title><link>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</link><pubDate>Thu, 27 Apr 2023 15:32:50 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2023/04/nextjs-storybook-with-pnp/</guid><description>&lt;h2 id="storybook을-쓰려고-했는데">Storybook을 쓰려고 했는데&lt;/h2>
+&lt;p>최근 Storybook을 사용할 일이 무척 많았다. 언젠가는 포스팅을 해야 할 CDS 프로젝트부터 &lt;a href="https://prayinforrain.github.io/posts/2023/04/numble-talk/">넘블 챌린지&lt;/a>도 있었고&amp;hellip; 처음엔 너무 낯설었지만 공통된 컴포넌트들을 미리 설계해 두고 재사용하는 것이 좀 더 깔끔한 설계가 되는 것 같아 매력을 느꼈다.&lt;/p>
+&lt;p>그런데 문제는 내 작업 환경에 있었다. 꽤 연식이 된 윈도우 데스크탑에 수십가지 개발 환경을 섞어 놓고, 요새는 게임에도 못 쓰는 처참한 성능의 HDD에 레포를 두고 쓰니 종속성 패키지 설치도 커피 한 잔 타와야 하는 시간이 걸리니 Yarn Berry의 사용이 반필수가 되어버렸다. 넘블 챌린지 때 Yarn Berry를 사용하고 싶었지만 애석하게도 수 많은 문제에 시달려 포기했는데, 여유가 생긴 지금 마음을 다잡고 다시 시도해 보기로 했다.&lt;/p></description></item><item><title>npm vs yarn vs pnpm</title><link>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</link><pubDate>Fri, 18 Nov 2022 16:42:55 +0900</pubDate><guid>https://prayinforrain.github.io/posts/2022/11/npm-vs-yarn-vs-pnpm/</guid><description>&lt;p>지금까지 저는 아무 의심 없이 npm을 사용해왔습니다. 이따금씩 &lt;code>node_modules&lt;/code> 폴더가 저를 고통스럽게 했던 시간들이 있었지만, 프로젝트 초기화에 정말 이상한 행동만 하지 않으면 &lt;code>npm i&lt;/code> 한 줄과 커피 한 잔으로 모든게 문제 없이 동작했으니까요. 하지만 우리는 슬랙의 어떤 분을 통해, npm보다 좋은 방법이 있음을 알고 있습니다. 이번 포스트에서는 &lt;code>yarn&lt;/code>과 &lt;code>pnpm&lt;/code>을 체험해 보도록 하겠습니다.&lt;/p>
+&lt;h2 id="-tldr">🤷 TL;DR&lt;/h2>
+&lt;ul>
+&lt;li>npm의 의존성 관리는 사실 매우 비효율적이다.&lt;/li>
+&lt;li>이 문제를 보완한 패키지 매니저가 yarn, pnpm이다.&lt;/li>
+&lt;li>각 패키지 매니저로의 마이그레이션은 매우 쉽다. 긍정적으로 고려해보자.&lt;/li>
+&lt;/ul>
+&lt;h2 id="-npm">🎁 npm&lt;/h2>
+&lt;p>&lt;img src="https://prayinforrain.github.io/images/posts/2022/11/npm-vs-yarn-vs-pnpm/npm_vs_yarn_01.png" alt="Untitled">&lt;/p></description></item></channel></rss>
\ No newline at end of file