From 7dcd8cb7a8798cde8a67550ca6bd426af2f0df19 Mon Sep 17 00:00:00 2001 From: prayinforrain Date: Tue, 30 May 2023 15:35:42 +0000 Subject: [PATCH] deploy: 7a82c77ab9d958681bfb7f7f942dd690ea410926 --- 404.html | 5 +++-- about/index.html | 5 +++-- categories/algorithm/index.html | 5 +++-- categories/css/index.html | 5 +++-- categories/ide/index.html | 5 +++-- categories/index.html | 5 +++-- categories/javascript/index.html | 5 +++-- categories/life/index.html | 5 +++-- categories/moheyum/index.html | 5 +++-- categories/node.js/index.html | 5 +++-- categories/react/index.html | 5 +++-- categories/typescript/index.html | 5 +++-- categories/web/index.html | 5 +++-- index.html | 5 +++-- ...c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js | 1 + posts/2022/11/emotion/index.html | 5 +++-- posts/2022/11/making-editor-contenteditable/index.html | 5 +++-- posts/2022/11/making-editor-getselection/index.html | 5 +++-- posts/2022/11/npm-vs-yarn-vs-pnpm/index.html | 5 +++-- posts/2022/11/redux-vs-recoil/index.html | 5 +++-- posts/2022/12/finishing-moheyum/index.html | 5 +++-- posts/2022/12/making-editor-markdown/index.html | 5 +++-- posts/2022/12/prevent-sidebar-blinking/index.html | 5 +++-- posts/2023/01/browser-rendering-performance/index.html | 5 +++-- posts/2023/01/css-display/index.html | 5 +++-- posts/2023/01/ecmascript/index.html | 5 +++-- posts/2023/01/migrating-to-hugo/index.html | 5 +++-- posts/2023/01/size-units-in-css/index.html | 5 +++-- posts/2023/01/tree-shaking/index.html | 5 +++-- posts/2023/02/firebase-with-typescript/index.html | 5 +++-- posts/2023/02/typescript-generic/index.html | 5 +++-- posts/2023/03/nodejs-for-baekjoon/index.html | 5 +++-- posts/2023/03/npm-scripts-doesnt-work/index.html | 5 +++-- posts/2023/04/nextjs-storybook-with-pnp/index.html | 5 +++-- posts/2023/04/numble-talk/index.html | 5 +++-- posts/2023/05/exploring-yarn-berry/index.html | 5 +++-- posts/index.html | 5 +++-- ...bf265e82d40c1ca95ade579b043df686b013ea25c4ef001e9a87f.css | 1 - ...f3dda74ea2e3ef925f0623934ecb20f669d6d9f524fa6a2651622.css | 1 + tags/algorithm/index.html | 5 +++-- tags/baekjoon/index.html | 5 +++-- tags/blog/index.html | 5 +++-- tags/browser/index.html | 5 +++-- tags/css-in-js/index.html | 5 +++-- tags/css/index.html | 5 +++-- tags/ecmascript/index.html | 5 +++-- tags/emotion/index.html | 5 +++-- tags/firebase/index.html | 5 +++-- tags/generic/index.html | 5 +++-- tags/hugo/index.html | 5 +++-- tags/index.html | 5 +++-- tags/javascript/index.html | 5 +++-- tags/macos/index.html | 5 +++-- tags/moheyum/index.html | 5 +++-- tags/nextjs/index.html | 5 +++-- tags/nodejs/index.html | 5 +++-- tags/npm/index.html | 5 +++-- tags/numble/index.html | 5 +++-- tags/nvm/index.html | 5 +++-- tags/pnp/index.html | 5 +++-- tags/pnpm/index.html | 5 +++-- tags/project/index.html | 5 +++-- tags/ps/index.html | 5 +++-- tags/recoil/index.html | 5 +++-- tags/redux/index.html | 5 +++-- tags/storybook/index.html | 5 +++-- tags/tree-shaking/index.html | 5 +++-- tags/typescript/index.html | 5 +++-- tags/vscode/index.html | 5 +++-- tags/web/index.html | 5 +++-- tags/yarn/index.html | 5 +++-- 71 files changed, 206 insertions(+), 137 deletions(-) create mode 100644 js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js delete mode 100644 style.min.719fdca77f0bf265e82d40c1ca95ade579b043df686b013ea25c4ef001e9a87f.css create mode 100644 style.min.aeb767baf02f3dda74ea2e3ef925f0623934ecb20f669d6d9f524fa6a2651622.css diff --git a/404.html b/404.html index 27672e9..3d4a3f1 100644 --- a/404.html +++ b/404.html @@ -1,7 +1,8 @@ -404 Page not found | PrayinForRain.dev +404 Page not found | PrayinForRain.dev

/* 404 page not found. */

โ†‘ Back Home โ†‘

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/about/index.html b/about/index.html index 5596c6d..1978cfa 100644 --- a/about/index.html +++ b/about/index.html @@ -1,7 +1,8 @@ -์ด์šฐ์žฌ | Front-end Developer | PrayinForRain.dev +์ด์šฐ์žฌ | Front-end Developer | PrayinForRain.dev

์ด์šฐ์žฌ | Front-end Developer

Table of Contents
  • Next.js์™€ Typescript๋ฅผ ์ฃผ๋กœ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐœ๋ฐœํ•˜๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค.
  • ๋ง์„ ํ•  ์ค„ ์•„๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜์–ด ์ปค๋ฎค๋‹ˆํ‹ฐ์— ๊ธฐ์—ฌํ•˜๋Š” ๊ฒƒ์ด ๋ชฉํ‘œ์ž…๋‹ˆ๋‹ค.
  • ์ €์˜ ์ด๋ ฅ์„œ๋Š” [๋ž ๋ฆฟ]์—์„œ ํ™•์ธํ•ด ์ฃผ์„ธ์š”.

Techstacks

Git Figma Storybook
HTML5 CSS3 NodeJS TypeScript NPM Yarn
React Next JS
Express.js NestJS

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

PrayinForRain’s github stats

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/categories/algorithm/index.html b/categories/algorithm/index.html index 9b65322..9571f13 100644 --- a/categories/algorithm/index.html +++ b/categories/algorithm/index.html @@ -1,7 +1,8 @@ -algorithm | PrayinForRain.dev +algorithm | PrayinForRain.dev

algorithm

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/categories/css/index.html b/categories/css/index.html index 05ee91c..a0948d8 100644 --- a/categories/css/index.html +++ b/categories/css/index.html @@ -1,7 +1,8 @@ -CSS | PrayinForRain.dev +CSS | PrayinForRain.dev

CSS

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/categories/ide/index.html b/categories/ide/index.html index f82f2da..32dda6f 100644 --- a/categories/ide/index.html +++ b/categories/ide/index.html @@ -1,7 +1,8 @@ -ide | PrayinForRain.dev +ide | PrayinForRain.dev

ide

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/categories/index.html b/categories/index.html index 0876e83..3781b33 100644 --- a/categories/index.html +++ b/categories/index.html @@ -1,7 +1,8 @@ -Categories | PrayinForRain.dev +Categories | PrayinForRain.dev

Categories

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/categories/javascript/index.html b/categories/javascript/index.html index 17f7d13..c5f3a44 100644 --- a/categories/javascript/index.html +++ b/categories/javascript/index.html @@ -1,7 +1,8 @@ -javascript | PrayinForRain.dev +javascript | PrayinForRain.dev

javascript

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/categories/life/index.html b/categories/life/index.html index 47026d2..221ee0c 100644 --- a/categories/life/index.html +++ b/categories/life/index.html @@ -1,7 +1,8 @@ -life | PrayinForRain.dev +life | PrayinForRain.dev

life

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/categories/moheyum/index.html b/categories/moheyum/index.html index 2e1f6bd..b0c393d 100644 --- a/categories/moheyum/index.html +++ b/categories/moheyum/index.html @@ -1,7 +1,8 @@ -moheyum | PrayinForRain.dev +moheyum | PrayinForRain.dev

moheyum

2022

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/categories/node.js/index.html b/categories/node.js/index.html index 1182214..1b87600 100644 --- a/categories/node.js/index.html +++ b/categories/node.js/index.html @@ -1,7 +1,8 @@ -Node.js | PrayinForRain.dev +Node.js | PrayinForRain.dev

Node.js

2023

2022

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/categories/react/index.html b/categories/react/index.html index f5f324c..3519cb2 100644 --- a/categories/react/index.html +++ b/categories/react/index.html @@ -1,7 +1,8 @@ -React | PrayinForRain.dev +React | PrayinForRain.dev

React

2022

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/categories/typescript/index.html b/categories/typescript/index.html index ad299e1..c743326 100644 --- a/categories/typescript/index.html +++ b/categories/typescript/index.html @@ -1,7 +1,8 @@ -TypeScript | PrayinForRain.dev +TypeScript | PrayinForRain.dev

TypeScript

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/categories/web/index.html b/categories/web/index.html index ace6a3f..4b6bb74 100644 --- a/categories/web/index.html +++ b/categories/web/index.html @@ -1,7 +1,8 @@ -Web | PrayinForRain.dev +Web | PrayinForRain.dev

Web

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/index.html b/index.html index 2ab23f8..5bc8f10 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,8 @@ -PrayinForRain.dev | PrayinForRain.dev +PrayinForRain.dev | PrayinForRain.dev
PrayinforRain

PrayinforRain

Frontend Developer

Recent Posts

See all posts

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js b/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js new file mode 100644 index 0000000..e81da11 --- /dev/null +++ b/js/custom.min.d9a0ea0a65c1b01e922173e72cd81eedad8ae4b3ca9396e95f24b6e7d29a94c8.js @@ -0,0 +1 @@ +var anchorForId=function(e){var t=document.createElement("a");return t.className="anchor-head",t.href="#"+e,t.innerHTML='',t},linkifyAnchors=function(e,t){for(var n,o=t.getElementsByTagName("h"+e),s=0;sEmotion | PrayinForRain.dev +Emotion | PrayinForRain.dev

Emotion

Table of Contents

๐Ÿคท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์˜ ๋‹จ์ ์„ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

Untitled

Untitled

์ œ๊ฐ€ ํ•™์Šต ์Šคํ”„๋ฆฐํŠธ๋•Œ ์ง„ํ–‰ํ•œ ํ”„๋กœ์ ํŠธ ํŒŒ์ผ์˜ ์ผ๋ถ€์ž…๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž์˜ ํ˜„์žฌ ์œ„์น˜๋ฅผ ํ‘œ์‹œํ•˜๊ธฐ ์œ„ํ•œ ์ปดํฌ๋„ŒํŠธ์˜ ์Šคํƒ€์ผ์„ location-bar๋ผ๋Š” ํด๋ž˜์Šค๋ช…์œผ๋กœ ์ง€์ •ํ•˜๊ณ  ์žˆ์ฃ . ๋‹จ์ˆœํžˆ ์ด ๋ถ€๋ถ„๋งŒ ๋ด์„œ๋Š” ํฌ๊ฒŒ ๋ฌธ์ œ๊ฐ€ ์—†์–ด ๋ณด์ด์ง€๋งŒ, ์•„๋ž˜์™€ ๊ฐ™์€ ๋ฌธ์ œ๋“ค์ด ์žˆ์Šต๋‹ˆ๋‹ค.

  • location-bar ๋ผ๋Š” ํด๋ž˜์Šค๋ช…์€ ์ถ”์ƒ์ ์ž…๋‹ˆ๋‹ค. @@ -97,4 +97,5 @@ emotion์€ ๋†€๋ž๊ฒŒ๋„ CSS props๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ๋ง ๊ทธ๋Œ€๋กœ React Component์—์„œ ์‚ฌ์šฉํ•˜๋Š” Props๋ฅผ ๊ทธ๋Œ€๋กœ CSS์—์„œ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๋œป์ž…๋‹ˆ๋‹ค.

    ์ œ๋ชฉ ์—†์Œ-1.png

    ์œ„์™€ ๊ฐ™์ด props๋ฅผ ์ฐธ์กฐํ•˜์—ฌ ์œ ๋™์ ์ธ ์Šคํƒ€์ผ ์ง€์ •์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ๊น”๋”ํ•˜์ฃ ? ์Šคํƒ€์ผ์˜ props interface์— ์„ ์–ธ๋˜์—ˆ๋Š”๋ฐ ์‹ค์ œ ์‚ฌ์šฉ์—์„œ props ๊ฐ’์„ ์ง€์ •ํ•ด์ฃผ์ง€ ์•Š์œผ๋ฉด ๋นจ๊ฐ„ ์ค„์„ ๊ทธ์–ด ์ฃผ๊ธฐ๋„ ํ•œ๋‹ต๋‹ˆ๋‹ค.

    ๐Ÿ”จํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๋ฉด ์ข‹์€ ํ™•์žฅ

    VS Code์—๋Š” emotion๊ณผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๋ฉด ์ข‹์€ ํ™•์žฅ๋“ค์ด ์žˆ๋Š”๋ฐ์š”, ์งค๋ง‰ํ•˜๊ฒŒ ๋ช‡ ๊ฐ€์ง€ ์†Œ๊ฐœํ•ด ๋ณด๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.

    Auto Rename Tag

    Untitled

    ํ™•์žฅ1.gif

    tsx, jsx๋ฅผ ํฌํ•จํ•œ ํŒŒ์ผ์—์„œ HTML ํƒœ๊ทธ๋ฅผ ์ˆ˜์ •ํ•  ๋•Œ ์—ด๋ฆฐ ํƒœ๊ทธ์™€ ๋‹ซ๋Š” ํƒœ๊ทธ๋ฅผ ๋™์‹œ์— ์ˆ˜์ •ํ•ด ์ฃผ๋Š” ํ™•์žฅ์ž…๋‹ˆ๋‹ค. ํŠนํžˆ div๊ฐ™์ด ์—ฌ๋Ÿฌ ๋ฒˆ ์‚ฌ์šฉ๋˜๋Š” ํƒœ๊ทธ๋ฅผ ์ •ํ™•ํžˆ ์ง์„ ์ฐพ์•„์„œ ์ž๋™์œผ๋กœ ๊ณ ์ณ์ฃผ๊ธฐ ๋•Œ๋ฌธ์— ์Šคํƒ€์ผ ์ ์šฉ์ด ๋งค์šฐ ํŽธํ•ด์ง‘๋‹ˆ๋‹ค.

    Highlight Matching Tag

    Untitled

    Untitled

    ์—ฌ๋Š” ํƒœ๊ทธ์™€ ๋‹ซ๋Š” ํƒœ๊ทธ๊ฐ€ ๋ˆˆ์— ๋„๋„๋ก ๋ฐ‘์ค„๋กœ ๊ฐ•์กฐํ•ด ์ค๋‹ˆ๋‹ค. Auto Rename Tag์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๊ธฐ ์ข‹์Šต๋‹ˆ๋‹ค.

    vscode-styled-components

    Untitled

    Untitled

    Untitled

    styled.tag๋ฅผ ํ†ตํ•ด ์Šคํƒ€์ผ์„ ์ง€์ •ํ•˜๋ฉด css ํ”„๋กœํผํ‹ฐ๊ฐ€ ๋‹จ์ˆœ ๋ฌธ์ž์—ด๋กœ ์ธ์‹๋˜์–ด ์ž๋™์™„์„ฑ์ด ์ง€์›๋˜์ง€ ์•Š๋Š”๋ฐ์š”, ์ด ํ™•์žฅ์„ ์‚ฌ์šฉํ•˜๋ฉด ํ•ด๋‹น ๋ถ€๋ถ„์ด css ํ”„๋กœํผํ‹ฐ๋กœ ์ธ์‹๋˜์–ด css ํŒŒ์ผ์„ ์ž‘์„ฑํ•˜๋“ฏ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฌด์ง€ ์ข‹์ฃ ?

    Color Highlight

    Untitled

    Untitled

    IDE ์ฐจ์›์—์„œ ์ƒ‰์ƒ์˜ hex code์— ๋Œ€ํ•œ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ์ง€์›ํ•ด ์ค๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ์ง€์›ํ•ด์ฃผ๊ธด ํ•˜์ง€๋งŒ ์กฐ๊ธˆ ๋” ํฌ๊ฒŒ ๋ณด์—ฌ์ฃผ๋Š” ์ ์ด ๋งˆ์Œ์— ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ์Šคํฌ๋กค์„ ์ญ‰ ๋‚ด๋ฆฌ๋‹ค๊ฐ€ ๋ฐœ๊ฒฌํ•˜๊ธฐ๊ฐ€ ์‰ฝ๊ฑฐ๋“ ์š”.

    ๐Ÿค”์“ฐ์‹œ๊ฒŒ์š”?

    CSS-in-JS์˜ ๊ฐœ๋…๊ณผ ๊ทธ ์‚ฌ์šฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์•˜์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ CSS-in-JS๋Š” ๊ณผ์—ฐ ์ •๋‹ต์ผ๊นŒ์š”? ์–ผ๋งˆ ์ „์— ์Šฌ๋ž™์—์„œ ์ด์— ๋Œ€ํ•œ ํฅ๋ฏธ๋กœ์šด ๊ธ€์„ ๋ดค์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ CSS-in-JS์™€ ํ—ค์–ด์ง€๋Š” ์ด์œ  ๋ผ๋Š” ์ œ๋ชฉ์˜ ๊ธ€์ธ๋ฐ์š”, Emotion์˜ ๋ฉ”์ธ ๊ธฐ์—ฌ์ž ์ค‘ ํ•œ ๋ช…์ด ์ด๋Ÿฐ ๊ธ€์„ ์ผ๋‹ค๋Š” ์ ์—์„œ ๊ณ ๋ฏผํ•ด ๋ณผ ๊ฐ€์น˜๋Š” ์ถฉ๋ถ„ํ•  ๊ฒƒ์œผ๋กœ ๋ณด์ž…๋‹ˆ๋‹ค.

    ์„ฑ๋Šฅ ์ธก๋ฉด์—์„œ์˜ ๋‹จ์ ๊ณผ React์™€์˜ ๋ช‡ ๊ฐ€์ง€ ์—ญ์‹œ๋„ˆ์ง€ ๋ฌธ์ œ๊ฐ€ ์žˆ๋‹ค๊ณ  ํ•˜๋Š”๋ฐ, ์ œ ์ˆ˜์ค€์—์„œ๋Š” ๋ฌธ์ œ ์ƒํ™ฉ์„ ์ฒด๊ฐํ•˜๊ธฐ๋„, ์ดํ•ดํ•˜๊ธฐ๋„ ์–ด๋ ค์šด ๋‚ด์šฉ์ด์ง€๋งŒ ๋ชจ๋“  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‚˜ ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ๊ทธ๋Ÿฌํ•˜๋“ฏ CSS-in-JS๋„ ๊ทธ ์žฅ๋‹จ์ ์„ ์ธ์ง€ํ•˜๋ฉด ์ƒํ™ฉ์— ๋”ฐ๋ผ ์–ด๋Š ์„ ํƒ์ด ์ตœ์„ ์ธ์ง€ ๊ฒฐ์ •ํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋ ๊ฑฐ๋ผ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

    (๋ฒˆ์—ญ) ์šฐ๋ฆฌ๊ฐ€ CSS-in-JS์™€ ํ—ค์–ด์ง€๋Š” ์ด์œ 

    ๐Ÿ“–Refs.

    https://github.com/jsjoeio/styled-components-vs-emotion
    styled-components ๊ณผ emotion, ๋„๋Œ€์ฒด ์ฐจ์ด๊ฐ€ ๋ญ”๊ฐ€?
    [๋ฒˆ์—ญ] CSS-in-JS์— ๊ด€ํ•ด ์•Œ์•„์•ผ ํ•  ๋ชจ๋“  ๊ฒƒ
    does not exist on type ‘jsx.intrinsicelements’ ๋ฌธ์ œ ํ•ด๊ฒฐ
    (๋ฒˆ์—ญ) ์šฐ๋ฆฌ๊ฐ€ CSS-in-JS์™€ ํ—ค์–ด์ง€๋Š” ์ด์œ 
    ํŽ˜์–ด ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ธฐ๊ฐ„๋™์•ˆ ์ œ๊ฐ€ ๊ฒ€์ƒ‰ ํ•œ ๋ฒˆ ์—†์ด emotion์„ ๋Šฅ์ˆ™ํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์ธ๊ฐ„ ๋ ˆํผ๋Ÿฐ์Šค๊ฐ€ ๋˜์–ด์ฃผ์‹  J154 ์ด์ •์šฑ ์บ ํผ๋‹˜๊ป˜ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ๐Ÿ™‡

\ No newline at end of file +Hugo. + \ 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 7d02b20..d051dce 100644 --- a/posts/2022/11/making-editor-contenteditable/index.html +++ b/posts/2022/11/making-editor-contenteditable/index.html @@ -1,4 +1,4 @@ -๋งˆํฌ๋‹ค์šด ๋งŒ๋“ค๊ธฐ - contentEditable [1/3] | PrayinForRain.dev +๋งˆํฌ๋‹ค์šด ๋งŒ๋“ค๊ธฐ - contentEditable [1/3] | PrayinForRain.dev

๋งˆํฌ๋‹ค์šด ๋งŒ๋“ค๊ธฐ - contentEditable [1/3]

Table of Contents

๋ชจํ—ค์œฐ์˜ ์—๋””ํ„ฐ ๋งŒ๋“ค๊ธฐ ์‹œ๋ฆฌ์ฆˆ ๋ชจ์•„๋ณด๊ธฐ
์—๋””ํ„ฐ ๋งŒ๋“ค๊ธฐ - ContentEditable [1/3]
์—๋””ํ„ฐ ๋งŒ๋“ค๊ธฐ - getSelection [2/3]
์—๋””ํ„ฐ ๋งŒ๋“ค๊ธฐ - Markdown [3/3]

๋ชจํ—ค์œฐ์˜ ํ•ต์‹ฌ ๊ธฐ๋Šฅ ์ค‘ ํ•˜๋‚˜๋Š” ๋งˆํฌ๋‹ค์šด ์„œ์‹ ์ง€์›์ž…๋‹ˆ๋‹ค. ์™œ SNS์— ๋งˆํฌ๋‹ค์šด์„ ๋ผ์–น์„ ์ƒ๊ฐ์„ ํ–ˆ๋‚˜ ์ƒ๊ฐํ•ด๋ณด๋ฉด ์ตœ์ดˆ ๊ธฐํš๋ถ€ํ„ฐ ์žˆ๋‹ค๊ฐ€ ๊ธฐ๋Šฅ ๋‹ค์ด์–ดํŠธ๋ฅผ ํ•œ ํ›„ ์‚ด์•„๋‚จ์•˜๊ธฐ ๋•Œ๋ฌธ์ธ๋ฐ, ์•„๋ฌดํŠผ ๋“œ๋””์–ด ๋•Œ๊ฐ€ ์™”์Šต๋‹ˆ๋‹ค.

๋‚ด๋ถ€์ ์œผ๋กœ ์—๋””ํ„ฐ๋ฅผ ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๊ฒŒ ์ข‹์ง€ ์•Š๊ฒ ๋ƒ๋Š” ์ด์•ผ๊ธฐ๊ฐ€ ๋‚˜์™”๋Š”๋ฐ์š”, ๊ฒฐ๊ตญ ์ง์ ‘ ๊ตฌํ˜„ํ•ด ๋ณด๊ธฐ๋กœ ํ–ˆ์ง€๋งŒ ๊ทธ ๊ณผ์ •์—์„œ ์—ฌ๋Ÿฌ ๋ ˆํผ๋Ÿฐ์Šค๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๊ฐœ์ธ์ ์œผ๋กœ ๋ฉ‹์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•œ ์‚ฌ์ดํŠธ ๋‘ ๊ฐ€์ง€๋ฅผ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.

https://hackmd.io/
https://ui.toast.com/tui-editor

๋ ˆํผ๋Ÿฐ์Šค ์‚ดํŽด๋ณด๊ธฐ

Untitled

๋†€๋ž๊ฒŒ๋„ ์šฐ๋ฆฌ๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ์—๋””ํ„ฐ ์ค‘ textarea๋‚˜ input ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ๋Š” ๊ฑฐ์˜ ์—†์Šต๋‹ˆ๋‹ค. ๊ธฐ๊ปํ•ด์•ผ ๊นƒํ—ˆ๋ธŒ์˜ ์—๋””ํ„ฐ๊ฐ€ textarea๋กœ ๋˜์–ด ์žˆ๋˜ ๊ธฐ์–ต์ด ๋‚˜๋„ค์š”. textarea์˜ ๊ฐ€์žฅ ํฐ ๋ฌธ์ œ๋Š” ์ž…๋ ฅ ์นธ ์•ˆ์— ์„œ์‹์„ ์ ์šฉํ•  ์ˆ˜ ์—†๋‹ค๋Š” ์ ์ด ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋‹ค์‹œ ๋งํ•ด, syntax highlighting์ด ๋ถˆ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ์ œ๊ฐ€ ์•„๋Š” ํ•œ์—์„œ๋Š”์š”.

๊ทธ ๋ฌธ์ œ๋ฅผ ์šฐ๋ฆฌ๋Š” div ํƒœ๊ทธ์— contenteditable ์†์„ฑ์„ ํ†ตํ•ด ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. contenteditable์€ div๋ฅผ textarea์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋ฉฐ, ์ค‘๊ฐ„์— span๊ฐ™์€ ํƒœ๊ทธ๋กœ ๋ถ€๋ถ„ ์Šคํƒ€์ผ ์ ์šฉ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ’ก contenteditable์„ ์ ์šฉํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์€ ๋ฉ”์‹œ์ง€๊ฐ€ ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค.

A component is contentEditable and contains children 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.

์ด๋Š” contenteditable์ด ์ ์šฉ๋œ ํƒœ๊ทธ๋Š” ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ์— ๋”ฐ๋ผ ์ƒˆ element๊ฐ€ ๋Š˜๊ธฐ๋„ ํ•˜๊ณ , ๋‹ค์‹œ ์ค„์–ด๋“ค๊ธฐ๋„ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— React ์—”์ง„์ด ๊ด€๋ฆฌํ•  ์ˆ˜ ์—†์œผ๋‹ˆ ๊ทธ๋กœ ์ธํ•œ ๋ถ€์ž‘์šฉ์€ ๋„ˆ ์•Œ์•„์„œ ํ•ด๋ผ ๋ผ๊ณ  ๋งํ•˜๋Š” ๋ฉ”์‹œ์ง€์ž…๋‹ˆ๋‹ค. ์ด element๋ฅผ ๋” ์ด์ƒ React๊ฐ€ ์ง€์ผœ์ค„ ์ˆ˜ ์—†๋‹ค๋Š” ๊ฒฝ๊ณ ์ธ๋ฐ์š”, contenteditable ์†์„ฑ์ด ์ ์šฉ๋œ ํƒœ๊ทธ์— suppressContentEditableWarning ์†์„ฑ์„ ๊ฐ™์ด ๋‹ฌ์•„์ฃผ๋ฉด ๋น„ํ™œ์„ฑํ™”๋ฉ๋‹ˆ๋‹ค.

์‹œ์ž‘ํ•ด๋ณด์ž

๊ทธ๋Ÿผ ์ด์ œ ๊ฐ„๋‹จํ•˜๊ฒŒ contenteditable์„ ๋งŒ๋“ค์–ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

<div>
@@ -46,4 +46,5 @@

์Œ, ์ด์ œ ๋ฐ์ดํ„ฐ๊ฐ€ ์ž˜ ์ •์ œ๋˜์—ˆ๋„ค์š”! ์ด๋Œ€๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋„˜๊ฒจ์ฃผ๋ฉด ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค.

์„œ์‹์„ ์–ด๋–ป๊ฒŒ ์ž…ํž๊นŒ์š”?

Untitled

์ •์ œํ•œ ์ž…๋ ฅ๊ฐ’์„ ๊ฐ€์ง€๊ณ , ์ •๊ทœํ‘œํ˜„์‹์„ ์ด์šฉํ•ด ๊ฐ„๋‹จํ•˜๊ฒŒ #์„ ์ด์šฉํ•œ ํ—ค๋”ฉ ๋งˆํฌ๋‹ค์šด์„ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์ด๋ ‡๊ฒŒ ๋ชจ๋“  ๊ทœ์น™์— ๋Œ€ํ•ด ์ฝ”๋“œ๋ฅผ ํ•˜๋‚˜์”ฉ ์ง‘์–ด ๋„ฃ๋Š” ๋ฐฉ์‹์ด ์ข‹์€ ๋ฐฉ์‹์ผ๊นŒ์š”? #์„ ์ด์šฉํ•œ ํ—ค๋”ฉ๋„ ์žˆ์ง€๋งŒ ์•„๋žซ์ค„์— - ๋˜๋Š” =๋ฅผ ์ž…๋ ฅํ•ด์„œ ํ—ค๋”ฉ์„ ํ•˜๋Š” ๊ฒƒ์€ ์–ด๋–ป๊ฒŒ ๊ตฌํ˜„ํ• ๊นŒ์š”? ๋งŒ์•ฝ ํ—ค๋”ฉ๊ณผ ์ฝ”๋“œ๋ธ”๋Ÿญ ๋งˆํฌ๋‹ค์šด์ด ์ค‘์ฒฉ๋˜๋ฉด ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌํ•ด์•ผ ํ• ๊นŒ์š”? ํ‘œ๋ฅผ ๊ทธ๋ฆฌ๋Š” ๋ฐฉ๋ฒ•์€์š”?

์ƒ๊ฐ๋งŒ ํ•ด๋„ ๋ฒŒ์จ ๋จธ๋ฆฌ๊ฐ€ ์–ผํฐํ•ด์ง€๋„ค์š”. ํ .. ๊ฐ‘์ž๊ธฐ tokenizer, lexer, parser๊ฐ™์€ ํ‚ค์›Œ๋“œ๊ฐ€ ๋ง‰ ๋– ์˜ค๋ฅด๋Š”๋ฐ.. ๋‹ค์‹œ ์ฐจ๋ถ„ํžˆ ๊ณต๋ถ€ํ•ด ๋ณผ ํ•„์š”๊ฐ€ ์žˆ๊ฒ ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ ๊ธ€์˜ ๋‚ด์šฉ์ด ๋ฒŒ์จ ์ง์ž‘์ด ๊ฐ€๋Š”๊ตฐ์š”. ์ง€๊ธˆ๊นŒ์ง€ contenteditable๊ณผ getSelection()์„ ํ™œ์šฉํ•œ ๊ณผ์ •์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐํ•ด ๋ณด์•˜์Šต๋‹ˆ๋‹ค.

\ No newline at end of file +Hugo. + \ 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 5d98070..4475c52 100644 --- a/posts/2022/11/making-editor-getselection/index.html +++ b/posts/2022/11/making-editor-getselection/index.html @@ -1,4 +1,4 @@ -๋งˆํฌ๋‹ค์šด ๋งŒ๋“ค๊ธฐ - getSelection [2/3] | PrayinForRain.dev +๋งˆํฌ๋‹ค์šด ๋งŒ๋“ค๊ธฐ - getSelection [2/3] | PrayinForRain.dev

๋งˆํฌ๋‹ค์šด ๋งŒ๋“ค๊ธฐ - getSelection [2/3]

Table of Contents

๋ชจํ—ค์œฐ์˜ ์—๋””ํ„ฐ ๋งŒ๋“ค๊ธฐ ์‹œ๋ฆฌ์ฆˆ ๋ชจ์•„๋ณด๊ธฐ
์—๋””ํ„ฐ ๋งŒ๋“ค๊ธฐ - ContentEditable [1/3]
์—๋””ํ„ฐ ๋งŒ๋“ค๊ธฐ - getSelection [2/3]
์—๋””ํ„ฐ ๋งŒ๋“ค๊ธฐ - Markdown [3/3]

์•„๋‹ˆ???????? ๋‘ ๋ฒˆ์งธ ๊ธ€์ด ํŒŒ์„œ๊ฐ€ ์•„๋‹ˆ์˜€๋„ค์š”. ์ €๋Š” ์‚ฌ์‹ค ์ด ๊ธ€์ด 2๋ถ€์ž‘์ด๊ธธ ๊ฐ„์ ˆํžˆ ๋ฐ”๋žฌ๋Š”๋ฐ, 1ํŽธ์—์„œ ๋งŒ๋“  ์—๋””ํ„ฐ์— ๋„ˆ๋ฌด ๋”์ฐํ•œ ๋ฒ„๊ทธ๊ฐ€ ์žˆ์–ด์„œ ์ด์— ๋Œ€ํ•ด ์ •๋ฆฌํ•ด ๋ณด๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฑธ๋กœ 3์‹œ๊ฐ„์„ ์”จ๋ฆ„ํ•˜๊ณ  ์žˆ์—ˆ์ง€๋งŒ ๋ชจํ—ค์œฐ์˜ TIL ๋ฌธ์„œ๊ฐ€ ํ’์„ฑํ•ด์ง€๊ณ  ์žˆ์œผ๋‹ˆ ๊ธ์ •์ ์ด๊ฒŒ ์ƒ๊ฐํ•ด์•ผ๊ฒ ์ฃ ?

๐Ÿ’ก ์ด ๊ธ€์€ Window 10, Chrome 107.0.5304.107 ๋ฒ„์ „์„ ๊ธฐ์ค€์œผ๋กœ ์ž‘์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ผ๋ถ€ ํ™˜๊ฒฝ์— ๋”ฐ๋ผ ๋‹ค๋ฅด๊ฒŒ ์ž‘๋™ํ•˜๋Š” ๋ถ€๋ถ„์ด ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ˜ข ์ฒซ ๋‹จ์ถ”๊ฐ€ ์ค‘์š”ํ•˜๋‹ค

Untitled

์ง€๊ธˆ ๋งŒ๋“  contenteditable div๋Š” ์น˜๋ช…์  ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. contenteditable์ด ์‚ฌ์ง„์ฒ˜๋Ÿผ ์ฒซ ์ค„์˜ ํ…์ŠคํŠธ๋ฅผ div ํƒœ๊ทธ๋กœ ๊ฐ์‹ธ์ฃผ์ง€ ์•Š๋Š”๋‹ค๊ณ  ์–ธ๊ธ‰ํ•œ ๋ฌธ์ œ๊ฐ€ ๊ธฐ์–ต ๋‚˜์‹œ๋‚˜์š”? ์‚ฌ์‹ค ์ €๋Š” ์ฒ˜์Œ ๊ธ€์—์„œ ์ฒซ ์ค„ ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋œ ์ฒ™ ์ด์•ผ๊ธฐํ•œ ๋ฐ” ์žˆ์ฃ . ํŠน์ • ์ƒํ™ฉ์—์„œ๋Š” ์—ฌ์ „ํžˆ contenteditable div์— ์ง์ ‘ ํ…์ŠคํŠธ๋ฅผ ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ์—ˆ์ง€๋งŒ, ์†”์งํ•˜๊ฒŒ ๊ทธ ๋•Œ๋Š” ์–ด์ฐจํ”ผ syntax highlighting์„ ์ง€์›ํ•˜์ง€ ์•Š์„ ๊ฑฐ๋ผ ์ƒ๊ฐํ•ด ์‰ฌ์‰ฌํ•˜๊ธฐ๋กœ ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์•„๋‹ˆ๋‚˜ ๋‹ค๋ฅผ๊นŒ, ๋ถ™์—ฌ๋„ฃ๊ธฐ์—์„œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.

Untitled

์•„๋ฌด ์ž…๋ ฅ๋„ ๋˜์–ด ์žˆ์ง€ ์•Š์€ contenteditable div์— ๋ถ™์—ฌ๋„ฃ๊ธฐ๋ฅผ ํ•˜๋ฉด ์œ„์™€ ๊ฐ™์€ ์˜ค๋ฅ˜๊ฐ€ ๋‚ฉ๋‹ˆ๋‹ค. ์ด ์ƒํƒœ์—์„œ ๋‹ค์‹œ ๋ถ™์—ฌ๋„ฃ๊ธฐ๋ฅผ ํ•˜๋ฉด ๊ทธ ๋•Œ๋ถ€ํ„ด ์ •์ƒ์ ์œผ๋กœ ์ž‘๋™ํ•˜๋Š”๋ฐ, ์–ด์ฐจํ”ผ ์ด๋Ÿฐ ์—๋Ÿฌ ์ฏค์ด์•ผ ์ฝ˜์†”์„ ์—ด์–ด๋†“๊ณ  ์›น์„œํ•‘์„ ํ•˜๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ์•„๋‹ˆ๊ณ ์„œ์•ผ ๋ฌด์‹œํ•  ์ˆ˜ ์žˆ๋Š” ์ˆ˜์ค€์ด๋‹ˆ ๋„˜์–ด๊ฐˆ ์ˆ˜ ์žˆ๊ฒ ์ง€๋งŒ, ๊ฒฐ์ •์ ์œผ๋กœ ๋ถ™์—ฌ๋„ฃ๊ธฐ ํ›„ ์ปค์„œ๊ฐ€ ๋ถ™์—ฌ๋„ฃ๊ธฐ ํ•œ ๊ธ€๊ท€์˜ ๋์œผ๋กœ ์ด๋™ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์•„๋‹ˆ๋‚˜ ๋‹ค๋ฅผ๊นŒ ํƒญ ํ‚ค์— ๋Œ€ํ•ด์„œ ๊ตฌํ˜„ํ–ˆ๋˜ ์ฝ”๋“œ๋„ ๊ฐ™์€ ์˜ค๋ฅ˜๊ฐ€ ์žˆ๋„ค์š”.

์˜ค๋Š˜์€ ์ด ์˜ค๋ฅ˜์˜ ์›์ธ๊ณผ ํ•ด๊ฒฐ ๊ณผ์ •์— ๋Œ€ํ•ด ๊ธฐ๋กํ•˜๋Š” ๊ธ€์„ ์จ ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

๐Ÿ–ฑ๏ธ windows.getSelection()

contenteditable์˜ ๋ฌธ์ œ

์ €๋ฒˆ ๊ธ€์—์„œ ๊ณต๋ถ€ํ–ˆ๋˜ ๋ฐ”์™€ ๊ฐ™์ด, contenteditable div๋Š” ์ผ๋ฐ˜์ ์ธ ์ž…๋ ฅ ๋™์ž‘์ด ์ œ๋Œ€๋กœ ์ด๋ฃจ์–ด์ง€์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ฐฉํ•œ ์‚ฌ์šฉ์ž๊ฐ€ ์ฐจ๋ถ„ํžˆ ๊ธ€์„ ์ž…๋ ฅํ•œ๋‹ค๊ณ  ํ•ด๋„ ์ฒซ ์ค„๋งŒ div ํƒœ๊ทธ๋กœ ๊ฐ์‹ธ์ฃผ์ง€ ์•Š๋Š”๋‹ค๊ฑฐ๋‚˜, ๋ถ™์—ฌ๋„ฃ๊ธฐ๋ฅผ ํ•˜๋ฉด ๋Œ€๋œธ ์›๋ณธ์˜ ์„œ์‹์ด ๊ทธ๋Œ€๋กœ ์ ์šฉ๋œ ๊ธ€๊ท€๊ฐ€ ์ž…๋ ฅ๋˜๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค.

Untitled

๋Œ€์ถฉ ์ด๋Ÿฐ ๋Š๋‚Œ์ด์ฃ . ๊ทธ ์™ธ์—๋„ ์ˆ˜์ •์„ ์–ด๋–ป๊ฒŒ ํ•˜๋Š๋ƒ์— ๋”ฐ๋ผ ๊ฒฐ๊ณผ๋ฌผ์ด ๋ฌ˜ํ•˜๊ฒŒ ๋‹ฌ๋ผ์ง€๊ธฐ๋„ ํ•˜๋Š” ๋“ฑ, ๋„ˆ๋ฌด๋‚˜ ๋‹ค์–‘ํ•œ ๋ฌธ์ œ๊ฐ€ ์‚ฐ์žฌํ•ด ์žˆ์Šต๋‹ˆ๋‹ค. ์„œ๋ก ์ด ๋„ˆ๋ฌด ๊ธธ์—ˆ๋„ค์š”. ๊ทธ๋ƒฅ con..์–ด์ฉŒ๊ตฌ์— ๋Œ€ํ•ด ์ฒ˜์Œ ๊ธ€์„ ์“ธ ๋•Œ ์ด๋Ÿฐ ๋ฌธ์ œ๋“ค์ด ์žˆ๋‹ค๊ณ  ์„ค๋ช…ํ•  ๊ฑธ ๊ทธ๋žฌ์–ด์š”.

์•„๋ฌดํŠผ ์ด๋Ÿฐ ๋ถˆ์พŒํ•œ ๋™์ž‘๋“ค์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด, keydown, keyup, paste ๋“ฑ ๋‹ค์–‘ํ•œ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋ฅผ ๋ฐ”์ธ๋”ฉํ•ด์„œ ์ง์ ‘ ์ด๋Ÿฐ ์ œ์Šค์ณ๋ฅผ ๊ตฌํ˜„ํ•ด์•ผ๋งŒ ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ๊ณผ์ •์—์„œ ์†Œ๊ฐœํ–ˆ๋˜ ๊ฒƒ์ด ๋ฐ”๋กœ windows.getSelection()์ด์˜€์ฃ .

Untitled

type Selection

์šฐ์„  ์ด ๋…€์„์ด ์ œ๊ณตํ•ด์ฃผ๋Š” Selection ํƒ€์ž… ๊ฐ์ฒด์˜ property๋ฅผ ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

์ด๋ฆ„์„ค๋ช…
anchorNode์„ ํƒ์ด ์‹œ์ž‘๋œ ์ง€์ (=๋“œ๋ž˜๊ทธ ์‹œ์ž‘ ์ง€์ )์˜ ๋…ธ๋“œ๋ฅผ ์ฐธ์กฐํ•ฉ๋‹ˆ๋‹ค.
anchorOffset์„ ํƒ์ด ์‹œ์ž‘๋œ ์ง€์ ์˜ anchorNode์ƒ์—์„œ์˜ ์œ„์น˜๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.
focusNode์„ ํƒ์ด ๋๋‚œ ์ง€์ (=๋“œ๋ž˜๊ทธ ์ข…๋ฃŒ ์ง€์ )์˜ ๋…ธ๋“œ๋ฅผ ์ฐธ์กฐํ•ฉ๋‹ˆ๋‹ค.
focusOffset์„ ํƒ์ด ๋๋‚œ ์ง€์ ์˜ focusNode์ƒ์—์„œ์˜ ์œ„์น˜๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.
type๋ธ”๋ก ์ง€์ •์‹œ Range, ๋‹จ์ผ ์ปค์„œ๋Š” Caret์„ ๊ฐ–์Šต๋‹ˆ๋‹ค.

ํฐ ์˜๋ฏธ ์—†๊ฑฐ๋‚˜ ์ •์‹ ์ŠคํŽ™์ด ์•„๋‹Œ ๊ฒฝ์šฐ๋Š” ์ œ์™ธํ•˜๊ณ  ์ด ์ •๋„๋ฅผ ์•Œ๊ณ  ์žˆ์œผ๋ฉด ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋“œ๋ž˜๊ทธ ์‹œ์ž‘๊ณผ ์ข…๋ฃŒ ์ง€์ ์„ ๋ช…์‹œํ•œ ์ด์œ ๋Š” ์ €๋ฒˆ ๊ธ€์—์„œ ์–ธ๊ธ‰ํ–ˆ๋˜ ๊ฒƒ์ฒ˜๋Ÿผ ๋“œ๋ž˜๊ทธ์—๋Š” ๋ฐฉํ–ฅ์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด์ฃ . Caret์˜ ๊ฒฝ์šฐ์—๋Š” ํ•ญ์ƒ ๋‘ ํ”„๋กœํผํ‹ฐ๊ฐ€ ๊ฐ™์€ ๊ฐ’์„ ๊ฐ€์งˆ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Selection ํƒ€์ž…์€ ์ œ๊ณตํ•˜๋Š” method๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•œ๋ฒˆ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

์ด๋ฆ„์„ค๋ช…
getRangeAt(index)ํ˜„์žฌ ์„ ํƒ๋œ index๋ฒˆ์งธ Range ๋ฒ”์œ„๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ๋‹ค์ค‘ ์„ ํƒ์ด ์ง€์›๋˜๋Š” ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์•„๋‹Œ ๊ฒฝ์šฐ ๋ณดํ†ต index๋Š” 0์ด ์ตœ๋Œ€์ž…๋‹ˆ๋‹ค.
addRange(range)ํ˜„์žฌ ์„ ํƒ๋œ Range์— ๋”ํ•ด range๋ฅผ ํ•จ๊ป˜ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. ๋‹ค์ค‘ ์„ ํƒ์ด ์ง€์›๋˜๋Š” ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์•„๋‹Œ ๊ฒฝ์šฐ range๋งŒ์ด ์žฌ์„ ํƒ๋ฉ๋‹ˆ๋‹ค.
collapse(node, offset?)node์˜ offset ์œ„์น˜๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.
containsNode(node, partialContainment?)node๊ฐ€ ์„ ํƒ Range ์•ˆ์— ํฌํ•จ๋˜๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. partialContainment๊ฐ€ true์ธ ๊ฒฝ์šฐ ์ผ๋ถ€๋งŒ ํฌํ•จ๋˜์–ด ์žˆ์–ด๋„ true๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

ํ›จ์”ฌ ์ข…๋ฅ˜๊ฐ€ ๋งŽ์ง€๋งŒ ์“ฐ์ด์ง€ ์•Š์„ ๊ฒƒ ๊ฐ™์•„ ๊ธธ๊ฒŒ ์ ์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๊ทธ ์™ธ์— Selection ํƒ€์ž… ๊ฐ์ฒด๋Š” ๊ฐ ํ”„๋กœํผํ‹ฐ์— ๋Œ€ํ•ด ์–•์€ ์ฐธ์กฐ๋ฅผ ์ œ๊ณตํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ™์€ ์ด๋ฆ„์œผ๋กœ ์ฐธ์กฐํ•ด๋„ ์ฐธ์กฐ ์‹œ์ ์— ๋”ฐ๋ผ ๊ฐ’์ด ๋ณ€ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ํŠน์„ฑ์ด ์žˆ๊ฒ ๋„ค์š”. ์—ฌ๊ธฐ์„œ ์ œ๊ฐ€ ์‚ฌ์šฉํ–ˆ๋˜ ๋ฉ”์†Œ๋“œ๋Š” collapse์˜€์Šต๋‹ˆ๋‹ค. ๋Œ€์ถฉ getSelection()์œผ๋กœ ๋ฐ›์€ anchorNode๋ฅผ ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉํ•˜๊ณ , anchorOffset + ์ถ”๊ฐ€ํ•œ ๋ฌธ์ž์—ด ๊ธธ์ด๋กœ ์œ„์น˜๋ฅผ ์žก๋Š” ์‹์ด์ฃ .

anchorNode๋Š” node๋‹ค

๊ทธ๋Ÿฐ๋ฐ ์ด anchorOffset์€ ์ƒํ™ฉ์— ๋”ฐ๋ผ ๋‹ค๋ฅด๊ฒŒ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒŒ ๋ฌด์Šจ ์†Œ๋ฆฌ๋ƒ๋ฉด, ์ด ๋…€์„์„ 1๋กœ ์ง€์ •ํ•˜๋ฉด ์ปค์„œ๊ฐ€ ๋์œผ๋กœ ๊ฐˆ ๋•Œ๊ฐ€ ์žˆ๊ณ , ๋‘ ๋ฒˆ์งธ ๊ธ€์ž๋กœ ์ปค์„œ๊ฐ€ ์ด๋™ํ•  ๋•Œ๊ฐ€ ์žˆ๋‹ค๋Š” ๋ง์ด์ฃ .

๋ณต์‚ฌ๋งจ2.gif

๋‘ ๋ฒˆ์งธ ๊ธ€์ž๋กœ ์ปค์„œ๊ฐ€ ๊ฐ€๋Š”๊ฑด ์ดํ•ด๊ฐ€ ๊ฐ€๋Š”๋ฐ, ์ฒ˜์Œ์—” ์™œ ๋์œผ๋กœ ๊ฐ”๋˜ ๊ฑธ๊นŒ์š”? ๊ทธ ๋น„๋ฐ€์€ getSelection์ด ์ฐธ์กฐํ•˜๋˜ anchorNode์— ์žˆ์Šต๋‹ˆ๋‹ค. ์ฒซ ๋ฒˆ์งธ ๋ถ™์—ฌ๋„ฃ๊ธฐ์™€ ๊ทธ ์ดํ›„์˜ ๋ถ™์—ฌ๋„ฃ๊ธฐ์˜ anchorNode๊ฐ€ ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์ด์ฃ . ์ฒซ ๋ฒˆ์งธ ๋ถ™์—ฌ๋„ฃ๊ธฐ๋Š” contenteditable div๋ฅผ, ๊ทธ ์ดํ›„์—๋Š” ํ•ด๋‹น ๋ผ์ธ์˜ div..๋„ ์•„๋‹ˆ๋ผ ๊ทธ div์˜ **ํ…์ŠคํŠธ ๋…ธ๋“œ**๋ฅผ ์ฐธ์กฐํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

ํ…์ŠคํŠธ ๋…ธ๋“œ๋ฅผ ์•„์‹œ๋‚˜์š”?

์œ„์— ์ œ๊ฐ€ console.log๋ฅผ ์ฐ์–ด๋ณธ ์‚ฌ์ง„์—๋Š” anchorNode์— text๋ผ๊ณ  ์“ฐ์—ฌ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์ €๋Š” contenteditable div์˜ ์ž์‹ div์ค‘ ํ•˜๋‚˜๋ฅผ ์„ ํƒํ•˜๊ณ  ์žˆ์—ˆ๋Š”๋ฐ ๋ง์ด์ฃ . ์ฆ‰ getSelection์€ ์„ ํƒ์ค‘์ธ ํ…์ŠคํŠธ ๋…ธ๋“œ๊นŒ์ง€ ๋”ฐ์ ธ์„œ ์ฐธ์กฐํ•œ๋‹ค๋Š” ํŠน์ง•์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ…์ŠคํŠธ ๋…ธ๋“œ๋ผ.. ๋”ฑํžˆ ์–ด๋Š ํƒœ๊ทธ์— ํฌํ•จ๋˜์–ด ์žˆ์ง€ ์•Š์œผ๋ฉด์„œ ์• ๋งคํ•˜๊ฒŒ ํ…์ŠคํŠธ๋งŒ ๋“ค์–ด์žˆ๋Š” ๋ฐ”๋กœ ๊ทธ innerText๋ฅผ ํ…์ŠคํŠธ ๋…ธ๋“œ๋ผ๊ณ  ๋ถ€๋ฅด๋Š” ๋ชจ์–‘์ž…๋‹ˆ๋‹ค.

Untitled

๋ฐ”๋กœ ์š” ๋…€์„์ธ๋ฐ์š”, ํ…์ŠคํŠธ ๋…ธ๋“œ๋Š” ๋‹ค๋ฅธ ๋…ธ๋“œ์™€ ๋‹ค๋ฅด๊ฒŒ ์กฐ๊ธˆ ํŠน์ดํ•œ ์„ฑ์งˆ์„ ๊ฐ–์Šต๋‹ˆ๋‹ค. ๋‹ค๋ฅด๋‹ค๊ณ  ํ•˜๋‚˜, ์•„๋ฌดํŠผ Node ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์ƒ์†ํ•˜์ง€๋งŒ HTML Element๋Š” ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค๋ฃจ๊ธฐ๊ฐ€ ๊ต‰์žฅํžˆ ๊นŒ๋‹ค๋กญ์Šต๋‹ˆ๋‹ค.

  • innerText๊ฐ€ ๋น„์–ด์žˆ๋Š”, ์ฆ‰ โ€˜โ€™์ธ Element๋Š” ํ…์ŠคํŠธ ๋…ธ๋“œ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.
  • ๋ถ€๋ชจ์˜ childNodes๊ฐ™์€ ํ”„๋กœํผํ‹ฐ๋กœ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ๊ณ ์ •๋œ ์ธ๋ฑ์Šค์— ์žˆ์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค.
    • ์ฆ‰ ๋‹ค๋ฅธ ํ˜•์ œ ๋…ธ๋“œ์™€์˜ ์ˆœ์„œ์— ๋”ฐ๋ผ ์ธ๋ฑ์Šค๊ฐ€ ๋ณ€ํ•ฉ๋‹ˆ๋‹ค..

๋‹ค์‹œ ๋Œ์•„์™€์„œ collapse์— ์ œ๊ณตํ•œ offset์ด ์–ด์งธ์„œ ํ…์ŠคํŠธ ์ƒ์˜ ์œ„์น˜๋ฅผ ๊ฐ€๋ฆฌํ‚ค์ง€ ์•Š์•˜๋Š๋ƒ, ๋…ธ๋“œ์ƒ์—์„œ์˜ offset์€ ํ…์ŠคํŠธ ๋…ธ๋“œ๋ฅผ ์ œ์™ธํ•˜๊ณ ๋Š” ์ž์‹ ๋…ธ๋“œ์˜ ์ธ๋ฑ์Šค๋ฅผ ๊ฐ€๋ฆฌํ‚ค๊ธฐ ๋•Œ๋ฌธ์ด์ฃ . ์ฆ‰ ์•„๋ž˜ ๊ณผ์ •๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์ฒซ ๋ฒˆ์งธ ๋ณต์‚ฌํ–ˆ์„ ๋•Œ์—๋Š” anchorNode๊ฐ€ contenteditable div์˜€๊ธฐ ๋•Œ๋ฌธ์—, offset = 1์— ํ•ด๋‹นํ•˜๋Š” ์œ„์น˜๋Š” ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

<div contenteditable>
@@ -21,4 +21,5 @@

ํ…์ŠคํŠธ ๋…ธ๋“œ์ด๋ฉด ์ •์ƒ์ ์œผ๋กœ ๊ธธ์ด๋ฅผ ๋”ํ•ด์„œ ๋์ž๋ฆฌ๋ฅผ ์žก์•„์ฃผ๊ณ , ์—˜๋ฆฌ๋จผํŠธ์ด๋ฉด 1์˜ offset์„ ๋Œ€์ž…ํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒŒ ๊ฐ€๋Šฅํ•œ ์ด์œ ๋Š” ์ด ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ์ผ€์ด์Šค๊ฐ€ ๋นˆ ์นธ์— ์ตœ์ดˆ ์ž…๋ ฅ ์‹œ์—๋งŒ ๋ฐœ์ƒํ•˜๊ธฐ ๋•Œ๋ฌธ์ธ๋ฐ, ์ƒˆ๋กœ์šด ์ผ€์ด์Šค๊ฐ€ ๋ฐœ๊ฒฌ๋˜๋ฉด ์ € 1์„ ๋ฌด์ฒ™ ํ”ผ๊ณคํ•˜๊ณ  ๊ท€์ฐฎ์€ ๋ณ€์ˆ˜๋กœ ๋ฐ”๊ฟ” ์ฃผ์–ด์•ผ ๊ฒ ๋„ค์š”.

๐Ÿคฆ ์˜ค๋ฒ„์—”์ง€๋‹ˆ์–ด๋ง์˜ ๊ธธ๋ชฉ์—์„œ

๊ณ ์ณค๋งจ.gif

์ฒ˜์Œ์—๋Š” ์•„์ฃผ ๊ฐ„๋‹จํ•œ ์—๋””ํ„ฐ๋ฅผ ์ƒ๊ฐํ–ˆ๋Š”๋ฐ, ๊ทธ ๊ฐ„๋‹จํ•œ ์—๋””ํ„ฐ ๋’ค์— ์–ผ๋งˆ๋‚˜ ๊นŠ์€ ์‹ฌ์—ฐ์ด ์žˆ๋Š”์ง€ ๋ชธ์†Œ ๋‘๋“ค๊ฒจ ๋งž๊ฒŒ ๋˜๋Š” ์š”์ฆ˜์ž…๋‹ˆ๋‹ค. input์ด๋‚˜ textarea๋ฅผ ์ผ์œผ๋ฉด ์ด๋Ÿฐ ๊ธด ๊ธ€์„ ๋‘ ๊ฐœ๋‚˜ ์“ธ ํ•„์š”๊ฐ€ ์—†์—ˆ์„ํ…๋ฐ, ์ œ๊ฐ€ ๋ฌด์Šจ ๋ถ€๊ท€์˜ํ™”๋ฅผ ๋ˆ„๋ฆฌ์ž๊ณ  contenteditable์„ ์“ฐ์ž๊ณ  ํ–ˆ์„๊นŒ์š”?

๊ทธ๋Ÿผ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์ƒˆ๋กœ์šด ๊ฒฝํ—˜์„ ํ•˜๊ณ  ๊ธ€์„ ์“ธ ์ˆ˜ ์žˆ์–ด์„œ ์ •๋ง ์ฆ๊ฒ์Šต๋‹ˆ๋‹ค. ๋ฐ๋ชจ ๋ฐœํ‘œ ์‹œ๊ฐ„์—๋„ ์ œ๊ฐ€ ์ฆ๊ฑฐ์›Œํ•ด์•ผ ํ• ํ…๋ฐ์š”, ๋‹ค์Œ ๊ธ€์€ ๋“œ๋””์–ด ๋งˆํฌ๋‹ค์šด์„ ํŒŒ์‹ฑํ•˜๋Š” ๊ณผ์ •์— ๋Œ€ํ•ด ์จ๋ณผ ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. ์ง€๊ธˆ ์–ด๋Š ๋‚œ๊ด€์— ๋ถ€๋”ชํ˜€ ๋ฉˆ์ถฐ ์žˆ๋Š”๋ฐ, ์—ฌ์œ ๊ฐ€ ๋œ๋‹ค๋ฉด ์•„๋งˆ 6์ฃผ์ฐจ์— ๋ฆฌํŒฉํ† ๋ง์„ ํ•  ๊ฒƒ ๊ฐ™๋„ค์š”. ํ™”์ดํŒ…!

\ No newline at end of file +Hugo. + \ 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 eeba366..67806a9 100644 --- a/posts/2022/11/npm-vs-yarn-vs-pnpm/index.html +++ b/posts/2022/11/npm-vs-yarn-vs-pnpm/index.html @@ -1,4 +1,4 @@ -npm vs yarn vs pnpm | PrayinForRain.dev +npm vs yarn vs pnpm | PrayinForRain.dev

npm vs yarn vs pnpm

Table of Contents

์ง€๊ธˆ๊นŒ์ง€ ์ €๋Š” ์•„๋ฌด ์˜์‹ฌ ์—†์ด npm์„ ์‚ฌ์šฉํ•ด์™”์Šต๋‹ˆ๋‹ค. ์ด๋”ฐ๊ธˆ์”ฉ node_modules ํด๋”๊ฐ€ ์ €๋ฅผ ๊ณ ํ†ต์Šค๋Ÿฝ๊ฒŒ ํ–ˆ๋˜ ์‹œ๊ฐ„๋“ค์ด ์žˆ์—ˆ์ง€๋งŒ, ํ”„๋กœ์ ํŠธ ์ดˆ๊ธฐํ™”์— ์ •๋ง ์ด์ƒํ•œ ํ–‰๋™๋งŒ ํ•˜์ง€ ์•Š์œผ๋ฉด npm i ํ•œ ์ค„๊ณผ ์ปคํ”ผ ํ•œ ์ž”์œผ๋กœ ๋ชจ๋“ ๊ฒŒ ๋ฌธ์ œ ์—†์ด ๋™์ž‘ํ–ˆ์œผ๋‹ˆ๊นŒ์š”. ํ•˜์ง€๋งŒ ์šฐ๋ฆฌ๋Š” ์Šฌ๋ž™์˜ ์–ด๋–ค ๋ถ„์„ ํ†ตํ•ด, npm๋ณด๋‹ค ์ข‹์€ ๋ฐฉ๋ฒ•์ด ์žˆ์Œ์„ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŠธ์—์„œ๋Š” yarn๊ณผ pnpm์„ ์ฒดํ—˜ํ•ด ๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๐Ÿคท TL;DR

  • npm์˜ ์˜์กด์„ฑ ๊ด€๋ฆฌ๋Š” ์‚ฌ์‹ค ๋งค์šฐ ๋น„ํšจ์œจ์ ์ด๋‹ค.
  • ์ด ๋ฌธ์ œ๋ฅผ ๋ณด์™„ํ•œ ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €๊ฐ€ yarn, pnpm์ด๋‹ค.
  • ๊ฐ ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €๋กœ์˜ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์€ ๋งค์šฐ ์‰ฝ๋‹ค. ๊ธ์ •์ ์œผ๋กœ ๊ณ ๋ คํ•ด๋ณด์ž.

๐ŸŽ npm

Untitled

์šฐ์„  npm์ž…๋‹ˆ๋‹ค. npm์— ๋Œ€ํ•ด ๋” ํ•  ์ด์•ผ๊ธฐ๋Š” ์—†์ง€๋งŒ, ์šฐ์„  ๋น„๊ต๋ฅผ ํ•˜๊ธฐ ์œ„ํ•ด ๊ธฐ์ค€์ด ๋  ํ”„๋กœ์ ํŠธ์˜ ์˜์กด์„ฑ์„ ์„ค์น˜ํ•˜๊ณ  ์‹คํ–‰๊นŒ์ง€ ์ง„ํ–‰ํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ๊ธ€์—์„œ ์‹คํ—˜ํ•  ํ”„๋กœ์ ํŠธ๋Š” ์ œ๊ฐ€ ๊ฐœ์ธ์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” React boilerplate์ž…๋‹ˆ๋‹ค. ์–ด๋–ค ๊ฒƒ๋“ค์„ ํฌํ•จํ•˜๋Š”์ง€๋Š” ๋ ˆํฌ์ง€ํ† ๋ฆฌ์˜ README.md๋ฅผ ์ฐธ๊ณ ํ•ด ์ฃผ์„ธ์š”.

Untitled

์„ค์น˜๊ฐ€ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๋Œ€๋กœ package.json์— ์ •์˜๋œ dev ๋ช…๋ น์–ด๋ฅผ ์‹คํ–‰ํ•˜๋ฉด ๋ฆฌ์•กํŠธ ์„œ๋ฒ„์— ์ ‘์†ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

Untitled

๋ฌด๋‚œํ•˜๊ฒŒ ์ง„ํ–‰์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๐Ÿˆ Yarn

Yarn์˜ ๊ฐ€์žฅ ํฐ ํŠน์ง•์€, ๋น„๊ต์  ์ตœ๊ทผ์— ๋‚˜์˜จ ๋ฒ„์ „์ธ Yarn berry์˜ PnP ์ „๋žต์„ ํ†ตํ•œ ํŒŒ์ผ ๊ด€๋ฆฌ์ž…๋‹ˆ๋‹ค. npm์€ ๊ธฐ๋ณธ์ ์œผ๋กœ ํŒจํ‚ค์ง€ A, B๊ฐ€ C๋ฅผ ์ฐธ์กฐํ•œ๋‹ค๋ฉด ํ”„๋กœ์ ํŠธ๊ฐ€ C๋ฅผ ์ง์ ‘ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค๊ณ  ํ•ด๋„ C๋ฅผ node_modules ๋””๋ ‰ํ† ๋ฆฌ ์ตœ์ƒ์œ„๋กœ ํ˜ธ์ด์ŠคํŒ…ํ•˜์—ฌ ์ตœ์ ํ™”๋ฅผ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด ๋•Œ A, B๊ฐ€ ์ฐธ์กฐํ•˜๋Š” C์˜ ๋ฒ„์ „์ด ๋‹ค๋ฅด๋‹ค๋ฉด ๋‘ ๋ฒ„์ „ ์ค‘ ํ•˜๋‚˜๋งŒ์ด ํ˜ธ์ด์ŠคํŒ…๋˜๋ฉฐ, ์ดํ›„ ํ˜ธ์ด์ŠคํŒ…๋˜์ง€ ์•Š์€ ๋ฒ„์ „์„ ์ฐธ์กฐํ•˜๋Š” ํŒจํ‚ค์ง€๊ฐ€ ๋งŽ์•„์ง€๋”๋ผ๋„ ์ด ๊ตฌ์กฐ๋Š” ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ฆ‰ ์™„์ „ํ•œ ์ตœ์ ํ™”๋Š” ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋ฐ˜๋ฉด Yarn berry์—์„œ๋Š” ํŒจํ‚ค์ง€์˜ ๊ฐ ๋ฒ„์ „๋งˆ๋‹ค ํ•˜๋‚˜์˜ .zip ํŒŒ์ผ๋กœ ์„ค์น˜๋˜๊ณ , ์•ž์„œ ๋งํ•œ ์ค‘๋ณต ์„ค์น˜ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. .zip ํŒŒ์ผ๋กœ ์••์ถ•๋˜๋ฉด์„œ ์–ป๋Š” ์šฉ๋Ÿ‰ ์ƒ์˜ ์ด์ ๋„ ์ฑ™๊ธธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ž์„ธํ•œ ์„ค๋ช…์€ ํ† ์Šค ๊ธฐ์ˆ  ๋ธ”๋กœ๊ทธ๋ฅผ ์ฝ์–ด๋ณด์„ธ์š”!

๊ทธ๋Ÿผ ์ด์ œ Yarn ๊ณต์‹ ๋ฌธ์„œ์˜ ์„ค๋ช…์„ ๋”ฐ๋ผ์„œ ์„ค์น˜๋ฅผ ์ง„ํ–‰ํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. NodeJS์˜ Corepack ๊ธฐ๋Šฅ์„ ์ด์šฉํ•ด์•ผ ํ•˜๋Š” ๋ชจ์–‘์ธ๋ฐ, ๋…ธ๋“œ ๋ฒ„์ „ 16.10์„ ๊ธฐ์ค€์œผ๋กœ ์ถ”๊ฐ€ ์กฐ์น˜๊ฐ€ ํ•„์š”ํ•œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ €๋Š” NodeJS v16.16.0์„ ์‚ฌ์šฉ์ค‘์ด๋ฏ€๋กœ ๋ณ„๋„ ์„ค์น˜ ์—†์ด corepack์„ ํ™œ์„ฑํ™”ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

corepack enable
@@ -7,4 +7,5 @@

๐Ÿ’ก yarn init ๋’ค์˜ -2 ๋ผ๋Š” ํ”Œ๋ž˜๊ทธ๊ฐ€ Zero-Installs๋ฅผ ์œ„ํ•œ ํ…œํ”Œ๋ฆฟ์œผ๋กœ ์ดˆ๊ธฐํ™”ํ•ด ์ฃผ๋Š” ๋ชจ์–‘์ธ๋ฐ์š”, Yarn2 (Berry)์˜ ๊ฐ€์žฅ ํฐ ํŠน์ง• ์ค‘ ํ•˜๋‚˜์ธ node_modules๋ฅผ ๋Œ€์ฒดํ•˜๋Š” PnP ํŒจํ‚ค์ง€ ๊ด€๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ํ•ด๋‹น ํ”Œ๋ž˜๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ์–‘์ž…๋‹ˆ๋‹ค. -2๋ฅผ ๋นผ๊ณ  ์ดˆ๊ธฐํ™”ํ•ด๋ณด๋‹ˆ node_modules ํด๋”๋ฅผ ์‚ฌ์šฉํ•˜๋„๋ก ๋˜๋”๋ผ๊ตฌ์š”. Zero-Installs์— ๋Œ€ํ•œ ๋‚ด์šฉ์€ ์—ฌ๊ธฐ์— ๋‚˜์™€ ์žˆ์Šต๋‹ˆ๋‹ค.

npm์œผ๋กœ ํ–ˆ๋˜ ๊ฒƒ์ฒ˜๋Ÿผ boilerplate ํŒŒ์ผ์„ ๋ฐฉ๊ธˆ ์ดˆ๊ธฐํ™”ํ•œ yarn ๋””๋ ‰ํ† ๋ฆฌ์— ๋ณต์‚ฌํ•˜๊ณ  yarn install์„ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.

Untitled

๋ญ”๊ฐ€ ์—ฌ๋Ÿฌ ๋‹จ๊ณ„๋ฅผ ๊ฑฐ์น˜๋Š” ๋“ฏํ•œ ๋ฉ”์‹œ์ง€๋ฅผ ๋ณด์—ฌ์ฃผ๋‹ค๊ฐ€ ์„ค์น˜๊ฐ€ ์™„๋ฃŒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. .yarn/cache ๋””๋ ‰ํ† ๋ฆฌ์— ํŒจํ‚ค์ง€๋“ค์ด .zip ํŒŒ์ผ๋กœ ์••์ถ•๋˜์–ด ๋“ค์–ด์žˆ๋„ค์š”.

Untitled

Untitled

์Œ, ๊ทธ๋Ÿฐ๋ฐ ์ด ์ƒํƒœ๋กœ ๋ฐ”๋กœ ์„œ๋ฒ„๋ฅผ ์‹คํ–‰์‹œํ‚ฌ ์ˆ˜๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ESLint ํ”Œ๋Ÿฌ๊ทธ์ธ๋„ ์–ด๋””๊ฐ€ ๋ถˆํŽธํ•œ์ง€ ๋น„๋ช…์„ ์ง€๋ฅด๊ณ  ์žˆ๊ตฌ์š”. ์ด์œ ๋Š” ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ package.json์—๋Š” ๋ช…์‹œ๋˜์ง€ ์•Š์€ peer-dependency ํŒจํ‚ค์ง€๋“ค์ด ๋น ์ ธ ์žˆ์–ด์„œ ๊ทธ๋Ÿฐ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋‹คํ–‰ํžˆ๋„ package.json์—์„œ ์ž๋™์™„์„ฑ๊ณผ ํ•จ๊ป˜ ๋ฒ„์ „๊นŒ์ง€ ์•Œ์•„์„œ ์ฑ„์›Œ์ฃผ์–ด์„œ ์ ๋‹นํžˆ ์ ์–ด์„œ yarn install์„ ๋‹ค์‹œ ์ง„ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ์— ๋Œ€ํ•œ ์ด์Šˆ๋ฅผ ๋ฐœ๊ฒฌํ–ˆ์ง€๋งŒ ๋‹ต์„ ๊ตฌํ•˜์ง€ ๋ชปํ•˜๊ณ  ๊ฒฐ๊ตญ ์ง์ ‘ ํ•˜๋‚˜์”ฉ ์„ค์น˜ํ•˜๋Š” ์‹์œผ๋กœ ํ•ด๊ฒฐํ–ˆ์Šต๋‹ˆ๋‹ค.

Untitled

๐ŸงŠ pnpm

Untitled

๊ณต์‹ ๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ ํ•˜์˜€๊ณ , yarn๊ณผ ๋ณ„ ์ฐจ์ด ์—†์ด corepack์„ ํ†ตํ•ด ์„ค์น˜ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ช…๋ น์–ด๋งŒ ๋ณด๋ฉด์„œ ํ–ˆ๋Š”๋ฐ ๋ฌธ๋“ ๋ณด๋‹ˆ ๊ณต์‹ ๋ฌธ์„œ๊ฐ€ ์˜์–ด๊ฐ€ ๋ฐ˜, ํ•œ๊ตญ์–ด๊ฐ€ ๋ฐ˜์œผ๋กœ ๋˜์–ด ์žˆ์—ˆ๋„ค์š”. ์œ„ ์‚ฌ์ง„์€ ๊ธ€์„ ์ฝ์ง€ ์•Š๊ณ  ๋ฌด์ž‘์ • ๋ช…๋ น์–ด ์‹คํ–‰ํ•˜๋ฉด์„œ ์ฐ์€ ์‚ฌ์ง„์ธ๋ฐ, Powershell์ด ๋ญ”๊ฐ€ ํ•ดํ•ดํ‚นํ‚น์ด์ด ๋˜๋˜ใ„ด๋Š” ๊ธฐ๋ถ„์ด ๋“ค์–ด์„œ ์˜ฌ๋ ธ์Šต๋‹ˆ๋‹ค.

Untitled

pnpm install์„ ์‹คํ–‰ํ•˜๋‹ˆ, peer dependency ์ด์Šˆ์— ๋Œ€ํ•œ ๋ฉ”์‹œ์ง€๋ฅผ ๋„์›Œ์ค๋‹ˆ๋‹ค. yarn์„ ์‚ฌ์šฉํ–ˆ์„ ๋•Œ์™€ ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ์žˆ๋„ค์š”. ์ด ๋งํฌ์—์„œ ๋‹ต์„ ์ฐพ์•„ pnpm i --shamefully-hoist=true๋กœ ์„ค์น˜ํ•˜๋‹ˆ ์•Œ์•„์„œ ํ”ผ์–ด ์˜์กด์„ฑ ํŒจํ‚ค์ง€๋ฅผ ๊ฐ™์ด ์„ค์น˜ํ•ด ์ค๋‹ˆ๋‹ค.

Untitled

Untitled

๐Ÿคจ ๋ญ๊ฐ€ ๋‹ค๋ฅผ๊นŒ์š”..?

Untitled

์‚ฌ์‹ค ์ด ์ •๋„ ํ…Œ์ŠคํŠธ๋กœ ์ฐจ์ด๋ฅผ ๋Š๋ผ๊ธฐ๋Š” ์–ด๋ ต์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜๋„ ์งง์€ ์‹œ๊ฐ„๋™์•ˆ ๊ฐ ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €๋ฅผ ์ฒดํ—˜ํ•ด ๋ดค์œผ๋‹ˆ, ๊ทธ๋‚˜๋งˆ ๋ˆˆ์— ๋„๋Š” ์ฐจ์ด๋ฅผ ์ •๋ฆฌํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

  • npm์€ ๋…๋ณด์ ์œผ๋กœ ์˜์กด์„ฑ ์„ค์น˜๊ฐ€ ๋Š๋ฆฌ๊ณ , ๋ฌด๊ฑฐ์› ์Šต๋‹ˆ๋‹ค.
  • yarn์˜ ํŒจํ‚ค์ง€ ์šฉ๋Ÿ‰์ด ์ •๋ง ๊ฐ€๋ฒผ์› ์Šต๋‹ˆ๋‹ค. pnpm์€ ํ”„๋กœ์ ํŠธ๊ฐ€ ํฌ์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์ธ์ง€, npm๊ณผ ๋ˆˆ์— ๋„๋Š” ์ฐจ์ด๋Š” ์—†์—ˆ์Šต๋‹ˆ๋‹ค.
  • pnpm์€ peer-dependency ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋Š” ํ”Œ๋ž˜๊ทธ๋ฅผ ์ง€์›ํ•ด ์ฃผ๋Š” ๊ฒƒ์ด ์ข‹์•˜์Šต๋‹ˆ๋‹ค. ์‚ฌ์‹ค ์ œ๊ฐ€ ๊ฒช์€ ๋ฌธ์ œ๊ฐ€ ์ผ๋ฐ˜์ ์ธ ์ผ€์ด์Šค๋Š” ์•„๋‹Œ ๊ฒƒ ๊ฐ™๊ธด ํ•ฉ๋‹ˆ๋‹ค.
  • ๊ฑฑ์ •์ด ๋งŽ์•˜๋˜ ESLint๋Š” ์˜์™ธ๋กœ ๊ธˆ๋ฐฉ ์ ์šฉ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ํ•˜๋Š”๋ฐ๋Š” ๋ฌธ์ œ๊ฐ€ ์—†์„ ๊ฒƒ์ด๋‹ค, ๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ญ๋‹ˆ๋‹ค.

๋ณด์•ˆ์ด๋ผ๋˜์ง€, ์„ฑ๋Šฅ์ด๋ผ๋˜์ง€ ๋น„๊ต๋ฅผ ํ•  ์ˆ˜ ์žˆ์œผ๋ฉด ์ข‹๊ฒ ์ง€๋งŒ, ์ œ ์‹คํ—˜์šฉ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” ์œ ์˜๋ฏธํ•œ ์ฐจ์ด๋ฅผ ๋ณด์ด์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๋‹ค๋งŒ package.json์— ์ •์˜๋œ npm scripts๋ฅผ ๋ฌธ์ œ์—†์ด ์‹คํ–‰ํ•ด ์ค€๋‹ค๋Š” ์ ์ด ์ธ์ƒ ๊นŠ์—ˆ์Šต๋‹ˆ๋‹ค. javascript์—์„œ typescript๋กœ ์˜ฎ๊ฒจ๊ฐˆ ๋•Œ๋ณด๋‹ค ํ›จ์”ฌ ์นœ์ ˆํ•˜๋„ค์š”.

๐Ÿ“– Refs.

https://github.com/yarnpkg/yarn/issues/1503
node_modules๋กœ๋ถ€ํ„ฐ ์šฐ๋ฆฌ๋ฅผ ๊ตฌ์›ํ•ด ์ค„ Yarn Berry
pnpm does not resolve dependencies
[๋ฒˆ์—ญ] JavaScript ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ € ๋น„๊ต - npm, Yarn ๋˜๋Š” pnpm?
npm, yarn, pnpm ๋น„๊ตํ•ด๋ณด๊ธฐ
์„ค์น˜ํ•˜๊ธฐ | pnpm
Installation
yarn berry(yarn2) ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ๋ฐฉ๋ฒ•
yarn berry๋กœ React.js ํ”„๋กœ์ ํŠธ ์‹œ์ž‘ํ•˜๊ธฐ | Kasterra’s Archive
๊ทธ๋ฆฌ๊ณ  ๋ถ€์ŠคํŠธ ์ปจํผ๋Ÿฐ์Šค ํ…Œํฌํ†ก์—์„œ ๋ฉ‹์ง„ ๋ฐœํ‘œ๋ฅผ ํ•ด ์ฃผ์‹  J166 ์ดํœ˜์ฐฌ ์บ ํผ๋‹˜๊ป˜ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค ๐Ÿ™‡

\ No newline at end of file +Hugo. + \ 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 5a15d9e..920b6c7 100644 --- a/posts/2022/11/redux-vs-recoil/index.html +++ b/posts/2022/11/redux-vs-recoil/index.html @@ -1,4 +1,4 @@ -Redux vs Recoil | PrayinForRain.dev +Redux vs Recoil | PrayinForRain.dev

Redux vs Recoil

Table of Contents

๐Ÿคท TL;DR

  • Redux๋Š” ์•ˆ์ •์ ์ด์ง€๋งŒ, ์„ ์–ธ๊ณผ ์‚ฌ์šฉ์ด ๋ณต์žกํ•˜๋‹ค.
  • Recoil์€ ์‚ฌ์šฉ์ด ๋งค์šฐ ์‰ฝ์ง€๋งŒ ์ •์‹ ๋ฒ„์ „์ด ์—†๋‹ค.
  • ํ”„๋กœ์ ํŠธ ๊ทœ๋ชจ์— ๋”ฐ๋ผ ๋งˆ์Œ์— ๋“œ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ ํƒํ•˜์ž

๐Ÿšช ์„œ๋ก 

์šฐ๋ฆฌ๋Š” React๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ๋ณดํ†ต useState๋ฅผ ํ†ตํ•ด ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•ฉ๋‹ˆ๋‹ค. useState๋Š” ์ •๋ง ์„น์‹œํ•˜์ง€๋งŒ, ํ•œ ๊ฐ€์ง€ ๋„ˆ๋ฌด ํฐ ๋‹จ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์ปดํฌ๋„ŒํŠธ๋ผ๋ฆฌ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›๋Š” ๋ฐ ์‚ฌ์šฉํ•˜๊ธฐ๊ฐ€ ํž˜๋“ค๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค. ๊ทธ ์ผ์„ ํ•˜๊ธฐ ์œ„ํ•ด ๋“ฑ์žฅํ•œ ๊ฒƒ์ด ๋ฐ”๋กœ ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ํ•„์š”์„ฑ์— ๋Œ€ํ•ด ๊ณต๊ฐํ•˜์ง€ ๋ชปํ•˜๋Š” ๋ถ„๋“ค์„ ์œ„ํ•ด ์งง์€ ํ† ๋ง‰๊ธ€์„ ๋งˆ๋ จํ•ด ๋ณด์•˜์Šต๋‹ˆ๋‹ค.

โœ… ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์™œ ์‚ฌ์šฉํ•˜๋‚˜์š”?

์œ ์ €๊ฐ€ ๋กœ๊ทธ์ธํ•ด ์žˆ๋Š” ์ •๋ณด๋ฅผ ๋‹ด์€ state๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๋ฉด Root ์ปดํฌ๋„ŒํŠธ๋ฅผ ์•„๋ž˜์™€ ๊ฐ™์ด ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

export default function App() {
@@ -211,4 +211,5 @@

Recoil์€ useState ํ›…๊ณผ ๊ฐ™์€ ์‚ฌ์šฉ๋ฒ•์„ ๊ฐ–์Šต๋‹ˆ๋‹ค. import๋งŒ ์ž˜ ํ•ด์คฌ๋‹ค๋ฉด, useRecoilState๋ฅผ ํ†ตํ•ด atom์„ ์‚ฌ์šฉํ•˜๊ฒ ๋‹ค ์„ ์–ธํ•˜๊ณ  ๋ฐ”๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Recoil์˜ ๊ฐ•์ ์ด ๋“œ๋Ÿฌ๋‚˜๋Š” ๋ถ€๋ถ„์ด๋„ค์š”. ์ฐธ์กฐ๋งŒ ํ•˜๋Š” ๊ฒฝ์šฐ์—๋Š” useRecoilValue, ํ• ๋‹น๋งŒ ํ•˜๋Š” ๊ฒฝ์šฐ์—๋Š” useSetRecoilState ๋ฅผ ํ†ตํ•ด ํ•œ ์ชฝ๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฆฌ์ฝ”์ผ.gif

๊ฒฐ๊ณผ๋ฌผ์€ Redux์™€ ๋˜‘๊ฐ™์ด ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ Recoil ์“ฐ๋‚˜์š”?

์žฅ์ 

  • React์Šค๋Ÿฌ์›€
  • atom์˜ ์„ ์–ธ์ด ๊ฐ„๋‹จํ•˜๋‹ค

๋‹จ์ 

  • ์•„์ง ์‹คํ—˜์  ๊ธฐ๋Šฅ(experimental feature)์ด๋‹ค
  • ๋ฉ”๋ชจ๋ฆฌ ๋ˆ„์ˆ˜ ๋ฌธ์ œ
  • React์— ์ข…์†์ ์ด๋‹ค.

๊ทธ๋ ‡์Šต๋‹ˆ๋‹ค. ์š”์•ฝ๋งŒ ๋ด๋„ ๋Š๊ปด์ง€์ง€๋งŒ Recoil์€ ๊ทธ๋ ‡๊ฒŒ ์•ˆ์ •์ ์ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. ์šฐ์„  ๋ ˆํฌ์ง€ํ† ๋ฆฌ ์ž์ฒด๊ฐ€ facebookexperimental์— ์žˆ๊ณ , issue์— ๊ฒ€์ƒ‰ํ•ด๋ณด๋ฉด ๋ฉ”๋ชจ๋ฆฌ ๋ˆ„์ˆ˜์— ๋Œ€ํ•œ ๋ ˆํฌํŠธ๊ฐ€ ๊ฝค ๋งŽ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฐ ๋ฌธ์ œ ๋•Œ๋ฌธ์— Recoil์€ ์•„์ง๊นŒ์ง€๋„ โ€˜๋ฆฌ์•กํŠธ์Šค๋Ÿฝ๋‹คโ€™๋Š” ์••๋„์ ์ธ ๊ฐ•์ ์„ ๊ฐ€์ง€๊ณ ๋„ ๊ทธ๋ ‡๊ฒŒ ์ข‹์€ ์„ฑ์ ์„ ๋‚ด์ง€ ๋ชปํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์‹ค์ œ ์„œ๋น„์Šค๋ฅผ ๊ตฌํ˜„ํ•˜๋Š”๋ฐ โ€˜์‹คํ—˜์  ๊ธฐ๋Šฅโ€™์— ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ๋ฏฟ๊ณ  ๋งก๊ธธ ์ˆ˜ ์žˆ์„๊นŒ์š”? React๋ฅผ ์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค ๋ณด๋‹ˆ React ์ƒํƒœ๊ณ„์—์„œ ๋ฒ—์–ด๋‚œ๋‹ค๋ฉด ๋˜ ๋‹ค๋ฅธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ณต๋ถ€ํ•ด์•ผ ํ•œ๋‹ค๋Š” ์ ๋„ ๋ฌธ์ œ๊ฐ€ ๋  ๊ฒƒ ๊ฐ™๋„ค์š”. ๋ฉ”๋ชจ๋ฆฌ ๋ˆ„์ˆ˜ ๋ฌธ์ œ์— ๋Œ€ํ•ด ๋” ์ž์„ธํžˆ ์•Œ๊ณ  ์‹ถ์œผ์‹œ๋ฉด ์ด ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”.

ํ•˜์ง€๋งŒ Recoil์€ ๋ถ„๋ช… ๋งค๋ ฅ์ ์ž…๋‹ˆ๋‹ค. ํŠนํžˆ React๋ฅผ ํ†ตํ•ด ๊ตฌํ˜„ํ•œ๋‹ค๋ฉด Recoil์˜ ๋งค๋ ฅ์„ ๋ฟŒ๋ฆฌ์น˜๊ธฐ๋ž€ ์‰ฝ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์™œ๋ƒ๋ฉด Recoil์€ React์Šค๋Ÿฌ์šฐ๋‹ˆ๊นŒ์š”. useState๋ฅผ ์“ฐ๋Š” ๊ฒƒ๊ณผ ์™„์ „ ๋˜‘๊ฐ™์ด ์ „์—ญ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•œ๋‹ค๋‹ˆ, ์ด ํŠน์„ฑ ํ•˜๋‚˜๋งŒ์œผ๋กœ๋„ ์„ ํƒํ•  ์ด์œ ๋Š” ์ถฉ๋ถ„ํ•ด ๋ณด์ž…๋‹ˆ๋‹ค.

โ“ ๊ทธ๋ž˜์„œ ๋ญ ์“ฐ๋‚˜์š”?

Untitled

Redux์™€ Recoil์— ๋Œ€ํ•ด ์•Œ์•„๋ดค์Šต๋‹ˆ๋‹ค. ์‚ฌ์‹ค ์šฐ๋ฆฌ ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ ํƒํ•˜๊ธฐ ์œ„ํ•ด ๊ณต๋ถ€ํ–ˆ๋Š”๋ฐ, ๊ณต๋ถ€ํ•˜๊ณ  ๋‚˜๋‹ˆ ๋” ๋ณต์žกํ•ด์ง€๋„ค์š”. ํ•˜์ง€๋งŒ ์–ด๋Š ํ•œ ์ชฝ์ด โ€˜์ข‹๋‹คโ€™๊ณ  ๊ฒฐ๋ก ์ง€์„ ์ˆ˜ ์žˆ๋Š” ๋ฌธ์ œ๋Š” ์•„๋‹ˆ๊ณ  ํŒฅ๋ถ•์„ ๋จน์„์ง€ ์Šˆ๋ถ•์„ ๋จน์„์ง€, ๊ทธ ๋‚ ์˜ ๊ธฐ๋ถ„์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง€๋Š” ๊ทธ๋Ÿฐ ์„ ํƒ์ผ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ฐธ๊ณ ๋กœ ์ €๋Š” ํŒฅ์„ ์‹ซ์–ดํ•ฉ๋‹ˆ๋‹ค.

์•ž์œผ๋กœ์˜ ํ”„๋กœ์ ํŠธ์—์„œ ์ œ๊ฐ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ณ ๋ฅธ๋‹ค๋ฉด ์–ด๋–ค ๊ธฐ์ค€์œผ๋กœ ์ •ํ•  ์ˆ˜ ์žˆ์„๊นŒ์š”? ์ €๋Š” ํ”„๋กœ์ ํŠธ์˜ ๊ทœ๋ชจ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๊ฒฐ์ •ํ•  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์‚ฌ์‹ค Redux๋Š” ์•ˆ์ •์ ์ด์ง€๋งŒ ํ† ์ด ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•˜๊ธฐ์—๋Š” ๋„ˆ๋ฌด ๋งŽ์€ ๋ฐ‘์ž‘์—…์„ ํ•„์š”๋กœ ํ•˜๊ฑฐ๋“ ์š”. ๋ฐ˜๋ฉด ์ปค๋‹ค๋ž€ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•ด์•ผ ํ•œ๋‹ค๋ฉด Redux๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•  ๋‚ ์ด ์˜ฌ ์ˆ˜๋„ ์žˆ๊ฒ ์ฃ . ๋ง๋ถ™์ด์ž๋ฉด ์ปดํผ๋‹ˆ๋ฐ์ด ๋•Œ ์–ด๋–ค ๊ธฐ์—…์—์„œ๋Š” Redux์™€ Recoil์„ ํ•จ๊ป˜ ์‚ฌ์šฉํ•œ๋‹ค๋Š” ๋‹ต๋ณ€์„ ์ฃผ์‹œ๊ธฐ๋„ ํ–ˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ“– Refs.

TypeScript and redux tool kit , createSlice: Assignment to property of function parameter ‘state’
Getting Started with Redux
๋งค๊ฐœ๋ณ€์ˆ˜ ์žฌํ• ๋‹น์„ ์ง€์–‘ํ•˜์ž(no-param-reassign)
Redux Toolkit with Typescript: How to Get Started
RecoilRoot | Recoil
React์Šค๋Ÿฌ์šด ์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, Recoil์„ ์•Œ์•„๋ณด์ž
Recoil์˜ ๋ฉ”๋ชจ๋ฆฌ ๋ˆ„์ˆ˜ ๋ฌธ์ œ
๊ทธ๋ฆฌ๊ณ  ๋ถ€์ŠคํŠธ์บ ํ”„ ์ปจํผ๋Ÿฐ์Šค๋ฅผ ํ†ตํ•ด Recoil์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ด ์ฃผ์‹  J039 ๊น€์„ฑ์€ ์บ ํผ๋‹˜๊ป˜ ๊ฐ์‚ฌ์˜ ์ธ์‚ฌ๋ฅผ ์˜ฌ๋ฆฝ๋‹ˆ๋‹ค. ๐Ÿ™‡

\ No newline at end of file +Hugo. + \ 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 d070f12..5e41288 100644 --- a/posts/2022/12/finishing-moheyum/index.html +++ b/posts/2022/12/finishing-moheyum/index.html @@ -1,8 +1,9 @@ -๋ชจํ—ค์œฐ mo:heyum - ํ”„๋กœ์ ํŠธ ํšŒ๊ณ  | PrayinForRain.dev +๋ชจํ—ค์œฐ mo:heyum - ํ”„๋กœ์ ํŠธ ํšŒ๊ณ  | PrayinForRain.dev

๋ชจํ—ค์œฐ mo:heyum - ํ”„๋กœ์ ํŠธ ํšŒ๊ณ 

Table of Contents

ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ์— ์ž‘์„ฑํ–ˆ๋˜ ๋ถ€์ŠคํŠธ์บ ํ”„ ํŒ€ ํ”„๋กœ์ ํŠธ์˜ ํšŒ๊ณ  ๊ธ€์ด๋‹ค. [์›๋ณธ ๋งํฌ]

image

๋‚ด๊ฐ€ ํŒ€์›๋“คํ•œํ…Œ ์ด ์–˜๊ธธ ํ–ˆ๋‚˜ ๋ชจ๋ฅด๊ฒ ๋Š”๋ฐ.. ์ด ํŽ˜์ด์ง€ ์ข€ ์ด์˜๋‹ค. ์ž˜๋งŒ๋“œ์…จ๋‹ค..

๋ถ€์ŠคํŠธ์บ ํ”„์˜ ์ตœ์ข… ํŒ€ ํ”„๋กœ์ ํŠธ๋กœ ๋‚˜๋Š” ๋ชจํ—ค์œฐ์ด๋ผ๋Š” SNS๋ฅผ ๋งŒ๋“ค์—ˆ๋‹ค. ๊ฒฐ๊ณผ๋ฌผ์€ ๊ฝค ๊ดœ์ฐฎ๋‹ค. [์—ฌ๊ธฐ]์— ๊ฐ„๋‹จํ•œ ์‹œ์—ฐ ์˜์ƒ์ด ์žˆ๋‹ค. ์‚ฌ์‹ค ํŒ€ ๊ตฌ์ธ์„ ํ•˜๋˜ ๋•Œ๋ถ€ํ„ฐ ๋‚˜๋Š” ๋ฌด์—‡์„ ๋งŒ๋“œ๋Š”์ง€๋Š” ํฌ๊ฒŒ ์ค‘์š”ํ•˜์ง€ ์•Š์•˜๋‹ค. ์—ฌํƒœ๊นŒ์ง€์˜ ํ•™์Šต ์Šคํ”„๋ฆฐํŠธ๋กœ ์ด๋ฏธ ๊ฐœ๋ฐœ์ด๋ผ๋Š” ๊ณผ์ •์€ ์–ด๋Š์ •๋„ ๊ฐ์„ ์ตํ˜”๊ณ , ๋‚ด๊ฐ€ ์„ฑ์žฅํ•จ์— ๋”ฐ๋ผ ์ด ๊ณผ์ •์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ธฐ์ˆ ๋งŒ ์กฐ๊ธˆ์”ฉ ๋ณ€ํ™”ํ•  ๋ฟ์ด๋ผ๊ณ  ์ƒ๊ฐํ–ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋‚ด๊ฐ€ ํŒ€ ํ”„๋กœ์ ํŠธ์—์„œ ๊ฐ€์žฅ ์ค‘์š”ํ•˜๊ฒŒ ์ƒ๊ฐํ–ˆ๋˜ ํฌ์ธํŠธ๋Š” ํ˜‘์—…์ด์—ˆ๋‹ค.

์˜ค๋žœ๋งŒ์— ์ง„์ง€ํ•œ ๊ธ€์„ ์จ๋ณด๋ ค๊ณ  ํ•œ๋‹ค. ์ฃผ์ œ๋Š” ๋ชจํ—ค์œฐ ํ˜‘์—… ํšŒ๊ณ  ์ •๋„๊ฐ€ ๋  ๊ฒƒ ๊ฐ™๋‹ค.

์ฒซ ํ˜‘์—…์ด๋ผ ์•„์‰ฌ์šด ๋ถ€๋ถ„์ด ๋งŽ์•˜์–ด์„œ ๋ฌธ์ œ์ ๋งŒ์„ ์ ์—ˆ์ง€๋งŒ ๋ชจํ—ค์œฐ์€ ์ ˆ๋Œ€ ์‹คํŒจํ•œ ํ”„๋กœ์ ํŠธ๊ฐ€ ์•„๋‹ˆ๋‹ค. ๋ชจํ—ค์œฐ์€ ์œ ์ €์˜ ๊ฐ€์ž… โ†’ ์„œ๋น„์Šค ์ด์šฉ โ†’ ํƒˆํ‡ด๊นŒ์ง€ ์™„์ „ํ•œ ์œ ์ € ์‹œ๋‚˜๋ฆฌ์˜ค๋ฅผ ๊ตฌํ˜„ํ•˜์˜€์œผ๋ฉฐ, ์ปจํ…Œ์ด๋„ˆํ™”๋ฅผ ํ†ตํ•œ ๋ฌด์ค‘๋‹จ ์—…๋ฐ์ดํŠธ๋ฅผ ํ†ตํ•ด ์œ ์ง€๋ณด์ˆ˜๊นŒ์ง€ ์šฉ์ดํ•˜๊ฒŒ ํ•œ ์™„๊ฒฐ์„ฑ์„ ๊ฐ–์ถ˜ ํ”„๋กœ์ ํŠธ์ด๋‹ค. ๋ฌผ๋ก  ํŒ”์€ ์•ˆ์œผ๋กœ ๊ตฝ๋Š”๋‹ค๊ณ  ๋‚ด ์ƒˆ๋ผ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋‚˜๋งŒ ๊ทธ๋ ‡๊ฒŒ ๋Š๋‚„ ์ˆ˜๋„ ์žˆ๋‹ค.

ํ’€์Šคํƒ ๊ฒฝํ—˜์„ ์œ„ํ•œ ํ•„๋“œ ์Šค์™‘

์–ด์ฉŒ๋‹ค ๋ณด๋‹ˆ ์ด ์•„๋ž˜๋กœ๋Š” ์ญ‰ ์ž˜๋ชปํ•œ ๋ถ€๋ถ„๋งŒ ์žˆ๋Š”๋ฐ, ์–˜๋Š” ๊ธธ๊ธฐ๋„ ํ•˜๊ณ .. ์žฅ์ ๋„ ์ ํ˜€ ์žˆ๋Š”๊ฒŒ ์กฐ๊ธˆ ์–ด์ƒ‰ํ•ด์„œ ์ ‘์—ˆ๋‹ค.

ํŒ€ํ”„๋กœ์ ํŠธ์— ์•ž์„œ ๋ถ€์ŠคํŠธ์บ ํ”„ ์šด์˜์ง„ ๋ถ„๋“ค์€ ‘ํ”„๋ก ํŠธ์—”๋“œ, ๋ฐฑ์—”๋“œ ๋ถ„์•ผ๋ฅผ ๋‚˜๋ˆŒ ์ˆ˜๋Š” ์žˆ์–ด๋„ ๋ถ€์ŠคํŠธ์บ ํ”„๋Š” ํ’€์Šคํƒ์„ ๊ธฐ๋ณธ์œผ๋กœ ์ƒ๊ฐํ•œ๋‹ค’๋ผ๊ณ  ๋ช‡ ๋ฒˆ์”ฉ ๊ฐ•์กฐํ•˜์…จ๋‹ค. ๋‚˜ ์—ญ์‹œ ์•ž์œผ๋กœ ๋ฐฑ์—”๋“œ ์ผ์„ ํ•  ์ง€๋Š” ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ, ๋‚ด๊ฐ€ ์ž์˜์ ์œผ๋กœ ๋ฐฑ์—”๋“œ ์ชฝ์˜ ์ž‘์—…์„ ํ•  ๊ฒƒ ๊ฐ™์ง€๋Š” ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์—, ์ง€๊ธˆ ๊ธฐํšŒ๊ฐ€ ์™”์„ ๋•Œ ์ตœ๋Œ€ํ•œ ๊ฒฝํ—˜ํ•ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋‹ค. ํŒ€์›๋“ค๋„ ์–ด๋Š์ •๋„ ๊ณต๊ฐํ•œ ๋“ฏ ํ–ˆ๊ณ , ๊ณ ๋ฏผ ๋์— ์šฐ๋ฆฌ๋Š” ๋งค ์ฃผ ํ”„๋ก ํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ์—์„œ ํ•œ ๋ช…์”ฉ์„ ๊ตํ™˜ํ•˜์ž๋Š” ์ด์•ผ๊ธฐ๋ฅผ ํ–ˆ๋‹ค.

๋” ๋ณด๊ธฐ

Pros.

ํ”„๋ก ํŠธ์—”๋“œ / ๋ฐฑ์—”๋“œ๊ฐ€ ์„œ๋กœ๋ฅผ ์ดํ•ดํ•˜๊ณ  ์†Œํ†ต์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

๋ง ๊ทธ๋Œ€๋กœ๋‹ค. ๋ฐฑ์—”๋“œ๋ฅผ ๋‹ค๋…€์˜ค๋‹ˆ ๋‚ด๊ฐ€ ์–ผ๋งˆ๋‚˜ ์–ผ์ฒ™ ์—†๋Š” ์ด์•ผ๊ธฐ๋ฅผ ๋ฐฑ์—”๋“œ ํŒ€์›๋“ค์—๊ฒŒ ํ•ด์™”๋Š”์ง€ ๋Š๋‚„ ์ˆ˜ ์žˆ์—ˆ๋‹ค. ๋ฌธ์ œ๋Š” ์šฐ๋ฆฌ ๋ชจ๋‘๊ฐ€ ๊ทธ ๋ฌธ์ œ๋ฅผ ์ธ์ง€ํ•˜์ง€ ๋ชปํ•˜๊ณ  ์žˆ์—ˆ๊ณ , ์‹ฌ์ง€์–ด ๋ฉ˜ํ† ๋‹˜์ด ๋ฐฑ์—”๋“œ๊ฐ€ ๋„ˆ๋ฌด ์ฐฉํ•œ ๊ฒƒ ๊ฐ™๋‹ค๊ณ  ๋ง์”€ํ•˜์…จ์Œ์—๋„ ์šฐ๋ฆฌ๋Š” API๊ฐ€ ๋ณด๋‚ด์ค€ ๊ฒฐ๊ณผ๋ฌผ์„ ๊ทธ๋Œ€๋กœ ๋ณด์—ฌ์ฃผ๊ธฐ๋งŒ ํ•˜๋ฉด ๋˜๋Š” ์ˆ˜์ค€์˜ ๊ตฌ์กฐ๊ฐ€ ๊ณ„์†๋˜์—ˆ๋‹ค.

ํŒ€์›์ด ๋ถ„์•ผ๋ฅผ ๊ฐ€๋ฆฌ์ง€ ์•Š๊ณ  ๋ชจ๋“  ์ฝ”๋“œ์— ์ฑ…์ž„์ด ์ƒ๊ธด๋‹ค.

๋ชจ๋“  ์ฝ”๋“œ๊ฐ€ ๋‚ด ์†์„ ๊ฑฐ์ณ ๊ฐ”๋‹ค๋Š” ๊ฒƒ์€, ๋‚ด๊ฐ€ ๋ชจ๋“  ์ฝ”๋“œ์— ์ผ๋ถ€๋ถ„ ์ฑ…์ž„์„ ๊ฐ–๊ฒŒ ๋จ์„ ์˜๋ฏธํ•œ๋‹ค.

ํ•™์Šต ๊ณต์œ ๊ฐ€ ํ›จ์”ฌ ์‰ฌ์›Œ์ง„๋‹ค.

๋ฐฑ์—”๋“œ ์ฝ”๋“œ ๊ตฌ์กฐ๊ฐ€ ๋ˆˆ์— ์ต๋‹ค ๋ณด๋‹ˆ, ์„œ๋กœ๊ฐ€ ์“ด ํ•™์Šต ์ •๋ฆฌ๋ฅผ ์ฝ์„ ๋•Œ ๋‚œ์ด๋„๊ฐ€ ๋ฌด์ฒ™ ๋‚ด๋ ค๊ฐ”๋‹ค. ๊ทธ๋Ÿผ์—๋„ ๋ชจ๋“  ์ฝ”๋“œ๋ฅผ ์˜จ์ „ํžˆ ์ดํ•ดํ•  ์ˆ˜๋Š” ์—†์—ˆ๋‹ค.

Cons.

์ฝ”๋“œ ํ’ˆ์งˆ ์ €ํ•˜๊ฐ€ ์ผ์–ด๋‚ฌ๋‹ค.

์ด๋Š” ๋’ค์—์„œ ์–ธ๊ธ‰ํ•  ๋‹ค๋ฅธ ์ด์œ ๊ฐ€ ์žˆ๊ธฐ๋„ ํ•˜์ง€๋งŒ, PR ๊ฒ€ํ† ๊ฐ€ ์›ํ™œํžˆ ์ด๋ฃจ์–ด์ง€์ง€ ์•Š์•˜๋‹ค. ์ด ๋ถ€๋ถ„์„ ์šฐ๋ คํ•ด์„œ ์•ˆ์ „์žฅ์น˜๋ฅผ ๋’€์ง€๋งŒ ๋ฐ”์œ ์ผ์ • ์†์—์„œ ๊ทธ๋งˆ์ €๋„ ์ง€์ผœ์ง€์ง€ ์•Š์•˜๋‹ค. ์ฝ”๋“œ ์ผ๊ด€์„ฑ์€ ๋ฌผ๋ก ์ด๊ณ  ์•ˆํ‹ฐํŒจํ„ด์ด ๊ณณ๊ณณ์— ์ˆจ์–ด ์žˆ์—ˆ๋‹ค. ๊ฒฐ๊ตญ ํ”„๋ก ํŠธ ๋ฐฑ ์–‘ ์ชฝ์ด ์–ด๋งˆ์–ด๋งˆํ•œ ์–‘์˜ ๋ฆฌํŒฉํ† ๋ง์„ ์ง„ํ–‰ํ•ด์•ผ ํ–ˆ๋‹ค. ์ผ์„ ๋‘ ๋ฒˆ ์”ฉ ํ•œ ์…ˆ์ด๋‹ค. ์„œ๋กœ๊ฐ€ ์„œ๋กœ์—๊ฒŒ ์ฃ„์†กํ–ˆ๋‹ค..

‘๋‚จ์˜ ์˜์—ญ’์ด๋ผ๋Š” ๋ถ€๋‹ด์ด ์ƒ๊ธด๋‹ค.(๋‚ด ๊ธฐ์ค€)

๋‚ด๊ฐ€ ํ”„๋ก ํŠธ์—์„œ ๋ฐฑ ํŒ€์›์„ ๋ฐ›์•˜์„ ๋•Œ์—๋Š” ๋‚ด๊ฐ€ ๋ญ๋“  ๋„์™€๋“œ๋ฆฌ๊ณ  ์‹ถ์—ˆ๋‹ค. ํ•˜์ง€๋งŒ ๊ทธ ๋ถ„์€ ๋†€๋ž๊ฒŒ๋„ ์›”์š”์ผ ๋ฐ˜๋‚˜์ ˆ ๋™์•ˆ ์‚ฌ๋ผ์กŒ๋‹ค๊ฐ€ ๋ฆฌ์•กํŠธ ๋งˆ์Šคํ„ฐ๊ฐ€ ๋˜์–ด ๋Œ์•„์˜ค์…จ๋‹ค. ๋ฐ˜๋ฉด์— ๋‚ด๊ฐ€ ๋ฐฑ์—”๋“œ๋กœ ๊ฐ”์„ ๋•Œ์—๋Š” ‘๋‚ด๊ฐ€ ์ด๊ฑธ ์ด๋ ‡๊ฒŒ ์งฐ๋‹ค๊ฐ€ ์ž˜๋ชป ๋˜์–ด์„œ ๋ฐฑ์—”๋“œ ๋ถ„๋“ค์ด ๊ณ ์ƒํ•˜์‹œ๋ฉด ์–ด์ฉŒ์ง€?’ ํ•˜๋Š” ๊ณ ๋ฏผ์ด ํ•˜๋ฃจ์—๋„ ๋ช‡ ๋ฒˆ์”ฉ ๋“ค์—ˆ๋‹ค. ๊ฒฐ๊ตญ ๊ฒฐ๊ณผ๋ฌผ์ด ์ข‹์ง€๋„ ๋ชปํ–ˆ๊ณ  ์–‘๋„ ๋งŽ์ด ์•Š์•˜๋‹ค. ์กฐ๊ธˆ ๋” ์ ๊ทน์ ์œผ๋กœ ์ฐธ์—ฌํ–ˆ์–ด์•ผ ํ•˜๋Š”๋ฐ, ํ•˜๋Š” ์•„์‰ฌ์›€์ด ๋‚จ๋Š”๋‹ค.

๊ธฐํš ๋‹จ๊ณ„์—์„œ์˜ ๋ฌธ์ œ

๊ธฐํš์ž์™€ ๋””์ž์ด๋„ˆ์˜ ์†Œ์ค‘ํ•จ์„ ์ ˆ์‹คํ•˜๊ฒŒ ๋Š๋‚€ ์‹œ๊ฐ„๋“ค์ด์—ˆ๋‹ค.

๋ฐฑ๋กœ๊ทธ ์ž์ฒด๋ฅผ ๋ช…ํ™•ํ•˜๊ฒŒ ํ•˜์ง€ ์•Š์•˜๋‹ค.

image

๋”ด์†Œ๋ฆฐ๋ฐ, ์ด๊ฑฐ closed ๋๋Š”๋ฐ opened๋กœ ํ‘œ์‹œ๋˜๋Š” ๋ฒ„๊ทธ ์งœ์ฆ๋‚œ๋‹ค

๋”ด์†Œ๋ฆฐ๋ฐ, ์ด๊ฑฐ closed ๋๋Š”๋ฐ opened๋กœ ํ‘œ์‹œ๋˜๋Š” ๋ฒ„๊ทธ ์งœ์ฆ๋‚œ๋‹ค ๋‚˜๋Š” ์†Œํ”„ํŠธ์›จ์–ด๊ณตํ•™ ์ˆ˜์—…์„ ์ •๋ง ์žฌ๋ฏธ์žˆ๊ฒŒ ๋“ค์—ˆ๋‹ค. ์‹ค์Šต์ด๋ผ๊ณค ์ „ํ˜€ ์—†๋˜ ์šฐ๋ฆฌ ํ•™๊ต์—์„œ ์œ ์ผํ•˜๊ฒŒ ์‹ค์ œ ๊ฒฐ๊ณผ๋ฌผ์„ ๋‚ด๋Š” ํ”„๋กœ์ ํŠธ๊ฐ€ ์žˆ์—ˆ๊ธฐ ๋•Œ๋ฌธ์ธ๋ฐ, ๊ต์ˆ˜๋‹˜์ด (์•ฝ๊ฐ„์€ ๊ฐœ๋ฐœ์ž ์นœํ™”์ ์ธ) ๋น„๊ฐœ๋ฐœ์ž ๊ณ ๊ฐ ์ž…์žฅ์—์„œ์˜ ์š”๊ตฌ์‚ฌํ•ญ์„ ์ฃผ์‹œ๋ฉด ๊ทธ๊ฒƒ๋“ค์„ ์šฐ๋ฆฌ๋ผ๋ฆฌ ๋ฐฑ๋กœ๊ทธ ๋ฌธ์„œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ , ์ผ์ •์„ ๊ณ„ํšํ•˜๊ณ  ๊ตฌํ˜„ํ•˜๋Š” ์‹์ด์—ˆ๋‹ค. ๋‚˜๋Š” ๊ทธ ์ˆ˜์—…์„ ๋“ค์œผ๋ฉฐ ๋ฐฑ๋กœ๊ทธ๋ฅผ ์–ด๋–ป๊ฒŒ ์“ฐ๋ฉด ๋˜๋Š”์ง€ ๋„ˆ๋ฌด ๋ช…ํ™•ํ•˜๊ฒŒ ์•Œ๊ณ  ์žˆ์—ˆ๋‹ค.

๊ทธ๋Ÿผ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ๋ชจํ—ค์œฐ์˜ ๋ฐฑ๋กœ๊ทธ๋Š” ์ค‘๊ตฌ๋‚œ๋ฐฉ ๊ทธ ์ž์ฒด์˜€๋‹ค. ์–ด๋–ค ๊ฒƒ์€ ์œ ์ € ์ž…์žฅ์—์„œ ์–ด๋–ค ๋™์ž‘์„ ํ•˜๋ฉด ๋ฌด์—‡์ด ๋ณด์—ฌ์•ผ ํ•œ๋‹ค, ์ด๋ ‡๊ฒŒ ๋‚ด๊ฐ€ ์•„๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ์จ ์žˆ๊ธฐ๋„ ํ–ˆ์ง€๋งŒ, ์–ด๋–ค ๊ฒƒ์€ ๊ฐœ๋ฐœ์ž๊ฐ€ ๊ตฌํ˜„ํ•ด์•ผ ํ•˜๋Š” ํ•จ์ˆ˜๋‚˜ ๋ชจ๋“ˆ ๋‹จ์œ„๋กœ ์žˆ๊ธฐ๋„ ํ–ˆ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ณด๋‹ˆ ๋ฐฑ๋กœ๊ทธ ์ž์ฒด๋„ ๋ฌธ์ œ๊ฐ€ ๋งŽ์•˜๊ณ , ์ด๋ฅผ ๋ฐฑ์—”๋“œ, ํ”„๋ก ํŠธ์—”๋“œ๊ฐ€ ์ž‘์€ ๋‹จ์œ„๋กœ ๋‚˜๋ˆ„์–ด ์ด์Šˆ๋ฅผ ๋งŒ๋“œ๋Š” ๊ณผ์ •์—์„œ๋„ ์ผ๊ด€์„ฑ์ด ์—†์—ˆ๋‹ค. ์™œ ๋‚ด๊ฐ€ ์•„๋Š” ๊ฒƒ์„ ์ ์šฉํ•˜์ง€ ๋ชปํ–ˆ์„๊นŒ? ๊ทธ๊ฑด ๋‚ด๊ฐ€ ์„ค๋ช…ํ•  ์ˆ˜ ์žˆ์„ ๋งŒํผ ์•Œ๊ณ  ์žˆ์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์ด๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค.

๊ธฐํš๊ณผ ๊ณ„ํš์„ ์ถฉ๋ถ„ํžˆ ๋””ํ…Œ์ผํ•˜๊ฒŒ ์ •ํ•˜์ง€ ๋ชปํ–ˆ๋‹ค.

์‚ฌ์‹ค ๋ชจํ—ค์œฐ์€ ๋น„์Šทํ•œ ์ปจ์…‰์˜ ์–ด๋–ค ์„œ๋น„์Šค์—์„œ, ํ•œ๋ฒˆ ๋’ค์ง‘์–ด์กŒ๋‹ค๊ฐ€, ๊ทธ๊ฒŒ ๋˜ ํ•œ ๋ฒˆ ๋’ค์ง‘์–ด์ง€๋ฉด์„œ ์ง€๊ธˆ์˜ ๊ฒฐ๊ณผ๋ฌผ์ด ๋œ ์ผ€์ด์Šค๋‹ค. ๊ธˆ์š”์ผ์ด ๊ธฐํš ๋ฐœํ‘œ์˜€๊ณ , ์ฒซ ์ „๋ณต์ด ์ˆ˜์š”์ผ์ด์—ˆ๊ธฐ ๋•Œ๋ฌธ์—, ์„ธ๋ถ€ ๊ธฐํš์ด ์žˆ๊ธฐ ์–ด๋ ค์šด ์ƒํ™ฉ์ด๊ธด ํ–ˆ๋‹ค. ๊ทธ๋Ÿผ์—๋„ ๊ธฐํš์ด ๋˜‘๋ฐ”๋กœ ์žกํžˆ์ง€ ์•Š๊ณ , ํŒ€์›๋“ค์ด ์ดํ•ดํ•œ ๋ฐ”๊ฐ€ ์กฐ๊ธˆ ์”ฉ ๋‹ฌ๋ผ ์ค‘๊ฐ„์ค‘๊ฐ„ ์ถ”๊ฐ€์ ์ธ ํ† ๋ก ์ด๋‚˜ ๊ธฐ๋Šฅ ๋ณ€๊ฒฝ(ํŠนํžˆ DB ์Šคํ‚ค๋งˆ)์ด ํ•„์š”ํ–ˆ๋‹ค. ์ด๋ฅผํ…Œ๋ฉด ‘ํšŒ์› ํƒˆํ‡ด’๋ฅผ ๊ตฌํ˜„ํ•˜๊ณ  ๋‚˜๋‹ˆ, ํƒˆํ‡ดํ•œ ํšŒ์›์€ ๊ฒ€์ƒ‰์ด ๋˜์ง€ ์•Š์•„์•ผ ํ•˜๊ณ , ๋‚จ๊ธด ๊ธ€์€ ๋ณด์—ฌ์•ผ ํ•˜๊ณ , ๋“ฑ๋“ฑ.. ๊ทธ๋Ÿฐ ์‹œ๋‚˜๋ฆฌ์˜ค๋ฅผ ์ƒ๊ฐํ•ด ๋ณด๋‹ˆ ๋ณ€๊ฒฝํ•ด์•ผ ํ•  ๋ถ€๋ถ„์ด ๋„ˆ๋ฌด๋‚˜๋„ ๋งŽ์•˜๊ณ  ์‹ฌ์ง€์–ด ๋น ๋œจ๋ฆฐ ๊ฒฝ์šฐ๋„ ์žˆ์—ˆ๋‹ค.

๊ฐ€์žฅ ํฐ ๋ฌธ์ œ๋Š” ์•ž์˜ ํ˜‘์—… ๊ทœ์น™๊ณผ ๋งž๋ฌผ๋ ค์„œ ๋‚˜๋Š” ๋‹ค์Œ ์ฃผ์— ๋ฐฑ์—”๋“œ ์ž‘์—…์„ ํ•ด์•ผ ํ•˜๋Š”๋ฐ, ์ด๋ฒˆ ์ฃผ์— ์ž‘์—…์„ ๋งˆ์น˜์ง€ ๋ชปํ•ด์„œ ๋ฏธ์™„๋ฃŒ ์ƒํƒœ๋กœ ๋‘๊ณ  ๊ฐ€๋ฒ„๋ฆฌ๋Š”, ๊ทธ๋Ÿฐ ์ผ€์ด์Šค๊ฐ€ ๋ฐœ์ƒํ•˜๊ธฐ๋„ ํ–ˆ๋‹ค. ์ด๋Ÿฐ ๋ฌธ์ œ๋กœ ํŒ€์›์—๊ฒŒ ์กฐ๊ธˆ ๋‚ ์นด๋กญ๊ฒŒ ๋งํ•œ ๊ธฐ์–ต์ด ์žˆ๋‹ค. ์•„๋‹ˆ๋‹ค, ์ง€๊ธˆ ์ƒ๊ฐํ•ด ๋ณด๋‹ˆ ๋‚ ์นด๋กญ๊ฒŒ ์ƒ๊ฐ๋งŒ ํ•˜๊ณ  ๋ง์€ ์•ˆํ–ˆ๋˜ ๊ฒƒ ๊ฐ™๋‹ค. ์šฐ๋ฆฌ ํŒ€์€ ์ด์•ผ๊ธฐ ํ•˜๋ฉด ๋‹ค ๋“ค์–ด์คฌ์œผ๋‹ˆ๊นŒ. ์•„๋ฌดํŠผ ์ด๋Ÿฐ ๋ฌธ์ œ๊ฐ€ ํฐ ๊ฒฐ๊ณผ๋กœ ์ด์–ด์ง€์ง„ ์•Š์•„์„œ ๋‹คํ–‰์ด์—ˆ๋‹ค.

์šฉ์–ด๋ฅผ ๋ช…ํ™•ํžˆ ์ •ํ•˜์ง€ ์•Š์•˜๋‹ค.

ํŽ˜์ด์Šค๋ถ์˜ ‘๋‹ด๋ฒผ๋ฝ’์ด๋ผ๋Š” ๊ธฐ๋Šฅ์„ ์˜ˆ์‹œ๋กœ ๋“ค์–ด๋ณด์ž. ์ด๋ฆ„์„ ‘๋‹ด๋ฒผ๋ฝ’์ด๋ผ๊ณ  ์ •ํ–ˆ๋‹ค๋ฉด ์‚ฌ๋‚ด์˜ ๋ชจ๋‘๊ฐ€ ์ด ๊ธฐ๋Šฅ์„ ‘ํ”„๋กœํ•„ ํŽ˜์ด์ง€’ ‘๊ฐœ์ธ ํ”ผ๋“œ’ ์ด๋”ฐ์œ„ ์ด๋ฆ„์ด ์•„๋‹Œ ‘๋‹ด๋ฒผ๋ฝ’์ด๋ผ๊ณ ๋งŒ ๋ถˆ๋Ÿฌ์•ผ ํ•œ๋‹ค. ์ด๊ฑด ๋‹จ์ˆœํžˆ ‘๋ณด๊ธฐ ๋ถˆํŽธํ•ด!‘์˜ ๋ฌธ์ œ๊ฐ€ ์•„๋‹ˆ๋ผ ํŒ€์˜ ์˜์‚ฌ์†Œํ†ต์„ ์›ํ™œํ•˜๊ฒŒ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•œ ์•„์ฃผ ์ค‘์š”ํ•˜๊ณ  ๊ธฐ๋ณธ์ ์ธ ๋ฌธ์ œ๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค.

๊ทธ๋Ÿฐ๋ฐ ์šฐ๋ฆฌ๋Š” ๊ธฐํš ๋‹จ๊ณ„์—์„œ ์ด๊ฑธ ์ œ๋Œ€๋กœ ํ•˜์ง€ ์•Š์•˜๋‹ค. ‘๋Œ“๊ธ€’ ‘๋‹ต๊ธ€’, ‘๊ฒŒ์‹œ๊ธ€ ์—ด๋žŒ ํŽ˜์ด์ง€’ ‘๊ฒŒ์‹œ๊ธ€ ๋ณด๊ธฐ ํŽ˜์ด์ง€’ ‘๊ฒŒ์‹œ๊ธ€ ๋ณด๋Š” ํŽ˜์ด์ง€’ ๋“ฑ๋“ฑ, ๋ณด๊ธฐ๋งŒ ํ•ด๋„ ํ•œ์ˆจ์ด ๋‚˜์˜ค๋Š” ์˜ค๋งŒ๊ฐ€์ง€ ์ด๋ฆ„๋“ค์ด ์žˆ์—ˆ๋‹ค. ์ด๋กœ ์ธํ•ด ๋ฐœ์ƒํ•œ ๋ถˆํŽธํ•จ๊ณผ ๋ฌธ์ œ์ ์ด ์ •๋ง ๋งŽ์•˜๋Š”๋ฐ, ๋ง‰์ƒ ์“ฐ๋ ค๋‹ˆ๊นŒ ๋”ฑ ๋Œ€ํ‘œ์ ์ธ ์‚ฌ๋ก€๊ฐ€ ๋– ์˜ค๋ฅด์งˆ ์•Š๋Š”๋‹ค. ์•„๋ฌดํŠผ ์ด๊ฑธ ์ •ํ–ˆ์–ด์•ผ ํ•˜๋Š”๋ฐ, ์ด๋ฏธ ๋‚˜๋Š” ๊ธฐํš ๋‹จ๊ณ„์—์„œ ํšŒ์˜์— ๋„ˆ๋ฌด ๋งŽ์€ ๋ธŒ๋ ˆ์ดํฌ๋ฅผ ๋ฐœ์ƒ์‹œ์ผฐ๊ธฐ ๋•Œ๋ฌธ์— ์ด๋Ÿฐ ๊ฒƒ๊นŒ์ง€ ํŠธ์ง‘์„ ์žก์•˜๋‹ค๊ฐ„ ์‹ธ์›€์ด ๋‚ฌ์„ ์ˆ˜๋„ ใ…‹ใ…‹..

๊ทธ๋ผ์šด๋“œ ๋ฃฐ๊ณผ ์ปจ๋ฒค์…˜ ๋ฌธ์ œ

๋‹น์—ฐํžˆ ์ž‘์—…์„ ์‹œ์ž‘ํ•  ๋•Œ ์šฐ๋ฆฌ๊ฐ€ ํ•œ ์ผ์€, ๊ทธ๋ผ์šด๋“œ ๋ฃฐ๊ณผ ์ปจ๋ฒค์…˜ ์ •๋ฆฝ์ด์—ˆ๋‹ค. ์šฐ๋ฆฌ ์ค‘ ๊ทธ ๋ˆ„๊ตฌ๋„ ํ˜‘์—…์— ๋Œ€ํ•œ ๊ฒฝํ—˜์ด ์—†๋‹ค๋ณด๋‹ˆ, ๋ฌด์—‡๋ฌด์—‡์„ ์ •ํ•ด์•ผ ํ•˜๋Š”๊ฐ€?์— ๋Œ€ํ•œ ๊ฐ๊ฐ์ด ์ „ํ˜€ ์—†๋Š” ์ƒํƒœ์˜€๋‹ค. ๊ทธ๋ž˜๋„ ๋‚˜๋ฆ„์˜ ์ปค๋ฐ‹ ๊ทœ์น™๊ณผ PR์„ ๋จธ์ง€ํ•˜๋Š” ๋ฐฉ๋ฒ• ๋“ฑ์— ๋Œ€ํ•ด ์„ธ์›Œ ๋‚˜๊ฐ”์ง€๋งŒ, ์ด ๋ถ€๋ถ„์€ ์†”์งํžˆ.. ์ „ํ˜€ ์ž˜ํ•œ ์ ๋“ค์ด ์—†์—ˆ๋‹ค.

์ปค๋ฐ‹์˜ ๋‹จ์œ„ ์ž์ฒด๊ฐ€ ์ œ๋Œ€๋กœ ๋‚˜๋‰˜์ง€ ์•Š์•˜๋‹ค.

image

(๊นŠ์€ ํ•œ์ˆจ)

์šฐ๋ฆฌ๋Š” ๋ชจ๋‘ git์˜ staged ๊ฐœ๋…์„ ์ž˜ ์•Œ๊ณ  ์žˆ์—ˆ๋‹ค. ๊ทธ๋Ÿผ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์—ฌ๋Ÿฌ ์ˆ˜์ •์ด๋‚˜ ๊ธฐ๋Šฅ ๊ตฌํ˜„์„ ํ•˜๋‚˜์˜ ์ปค๋ฐ‹์— ์„ž์–ด์„œ ์˜ฌ๋ฆฌ๊ฑฐ๋‚˜, ์ปค๋ฐ‹ ์ปจ๋ฒค์…˜ ์ž์ฒด๋ฅผ ์ง€ํ‚ค์ง€ ์•Š์€ ๊ฒฝ์šฐ๋„ ๋งŽ์•˜๋‹ค. ๋‚˜์˜ ๊ฒฝ์šฐ์—๋Š” ํ”„๋กœ์ ํŠธ ๋‚ด๋‚ด ์•„๋ฌด ์ƒ๊ฐ ์—†์ด ์ปค๋ฐ‹ ๋ฉ”์‹œ์ง€์— ๋‘ ๊ฐ€์ง€ ์ด์ƒ์˜ ์ž‘์—…๋‚ด์šฉ์„ ๋ชฐ์•„ ์จ์„œ ํ•œ ๋ฒˆ์— ์ปค๋ฐ‹์„ ๋‚ ๋ ค ์˜ค๋‹ค๊ฐ€ ๋งˆ์ง€๋ง‰ ๋ฆฌํŒฉํ† ๋ง ๊ธฐ๊ฐ„์ด ๋ฌธ๋“ ์ด ๋ฌธ์ œ๋ฅผ ๊นจ๋‹ฌ์•˜๋‹ค. ์šฐ๋ฆฌ ๋ ˆํฌ์ง€ํ† ๋ฆฌ์˜ ์ปค๋ฐ‹ ๋‚ด์—ญ์„ ๋ณด๊ธฐ ์–ด๋ ค์šด ์ด์œ ๋Š” ๊ทธ์ € ์ปค๋ฐ‹์ด ์ปค๋ฐ‹์˜ ๋‹จ์œ„๋ฅผ ๊ฐ–์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์ด์—ˆ๋‹ค.

์ด์Šˆ๋‚˜ PR์˜ ํ…œํ”Œ๋ฆฟ์„ ๋ช…ํ™•ํ•˜๊ฒŒ ์ •ํ•˜์ง€ ์•Š์•˜๋‹ค.

๋ชจํ—ค์œฐ์˜ ์ด์Šˆ์™€ PR์„ ๋ณด๋ฉด 3์ž ์ž…์žฅ์—์„œ ๋ณด๊ธฐ ๋งค์šฐ ํž˜๋“ค๋‹ค. ์šฐ์„  PR์€ ‘dev๋กœ ์˜ฌ๋ฆฌ๊ณ , mergeํ•˜์ž’ ์ •๋„๋งŒ ์ •ํ•˜๊ณ  PR์˜ ์ œ๋ชฉ์ด๋‚˜ ๋‚ด์šฉ์— ๋Œ€ํ•œ ์ปจ๋ฒค์…˜์ด ์ „ํ˜€ ์—†์—ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ œ๋ชฉ์€ ๊นƒํ—ˆ๋ธŒ๊ฐ€ ์ •ํ•ด์ฃผ๋Š” ๋Œ€๋กœ, ๋‚ด์šฉ์€ ์—†๋Š” ๊ฒฝ์šฐ๋„ ๋งŽ์•˜๋‹ค. ์•„์ฐจ, ์ด๊ฑธ ์ •ํ–ˆ์–ด์•ผ ํ•˜๋Š”๋ฐ, ๋ผ๊ณ  ๋Š๊ผˆ์„ ๋•Œ๋Š” ์ด๋ฏธ ๋Šฆ์—ˆ๋‹ค. ๋‚˜์ค‘์— ์–ด๋–ค PR์„ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•ด์„  ์ž‘์—…ํ•œ ํŒ€์›์—๊ฒŒ ‘์ด๊ฑฐ ์–ด๋–ค PR์ด์—ˆ์ฃ ?’ ํ•˜๊ณ  ๋ฌผ์–ด๋ด์•ผ ํ•˜๋Š” ์–ผํƒฑ์ด ์—†๋Š” ์ƒํ™ฉ์ด ๋˜์–ด๋ฒ„๋ ธ๋‹ค.

์ด์Šˆ ์—ญ์‹œ ๊ทธ๋ ‡๋‹ค. ์•ž์˜ ๋ฐฑ๋กœ๊ทธ ๋ฌธ์ œ์™€๋„ ์—ฐ๊ฒฐ๋˜์ง€๋งŒ, ํ•˜๋‚˜์˜ ๋ฐฑ๋กœ๊ทธ๋ฅผ ์ด์Šˆํ™”ํ•˜๊ณ , ์ด๋ฅผ ์œ„ํ•ด ํ”„๋ก ํŠธ์—”๋“œ - ๋ฐฑ์—”๋“œ๊ฐ€ ๊ตฌํ˜„ํ•  ๊ธฐ๋Šฅ๋“ค์„ ๋˜ ์ž‘์€ ์ด์Šˆ๋กœ ๋‚˜๋ˆ„์—ˆ๋‹ค. ์ด ์ž‘์€ ์ด์Šˆ๋“ค์ด ๋ฐฑ๋กœ๊ทธ ์ด์Šˆ๋ฅผ ์ฐธ์กฐํ•˜๋„๋ก ํ•˜์ž๊ณ  ํ–ˆ์ง€๋งŒ ๋ณ„๋กœ ์ง๊ด€์ ์ด์ง„ ์•Š์•˜๊ณ , Github Project์˜ ์‚ฌ์šฉ ๋ฏธ์ˆ™์œผ๋กœ ์ž‘์€ ์ด์Šˆ๊ฐ€ ๋ฐฑ๋กœ๊ทธ์— ์˜ฌ๋ผ๊ฐ€๋ฒ„๋ฆฌ๋Š” ๋“ฑ์˜ ๋ฌธ์ œ๊ฐ€ ์žˆ๊ธฐ๋„ ํ–ˆ๋‹ค. ๋‹ค์Œ์—” ๊ผญ Jira, Trello๋ผ๋˜์ง€, ์ตœ์†Œํ•œ ๋…ธ์…˜์œผ๋กœ ์ •๋ฆฌํ•˜๋˜๊ฐ€ ํ•˜๋Š”๊ฒŒ ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค.

์Œ.. ๊ทธ๋ฆฌ๊ณ  git cz๋ฅผ ์จ ๋ณด๊ณ  ์‹ถ๋‹ค.

๊ทธ๋‚˜๋งˆ ์ •ํ•œ ๋ฃฐ๋„ ์ œ๋Œ€๋กœ ์ง€์ผœ์ง€์ง€ ์•Š์•˜๋‹ค.

๊ฐ€์žฅ ํฐ ๋ฌธ์ œ์˜€๋‹ค. ์•ž์„œ ์–ธ๊ธ‰ํ–ˆ๋“ฏ ์šฐ๋ฆฌ ํŒ€์€ ํ”„๋กœ์ ํŠธ์˜ ๋ชจ๋“  ์ฝ”๋“œ๋ฅผ, ๋ชจ๋‘๊ฐ€ ์ฑ…์ž„์ง€๋Š” ๊ฒƒ์„ ์ตœ์šฐ์„ ์œผ๋กœ ์—ฌ๊ฒผ๋‹ค. ์ด๋Š” ๋‚ด๊ฐ€ ๋ฐฑ์—”๋“œ ์ฝ”๋“œ๋ฅผ ์ฝ์–ด์•ผ ํ•˜๋Š” ๋ฌธ์ œ ๋ฟ ์•„๋‹ˆ๋ผ, ๋‚ด๊ฐ€ ๋ฐฑ์—”๋“œ ์ž‘์—…์„ ํ•˜๋Š” ์ฃผ๊ฐ„์— ์˜ฌ๋ผ์˜ค๋Š” ํ”„๋ก ํŠธ PR์—๋„ ๋˜‘๊ฐ™์ด ์ ์šฉ๋˜์—ˆ์–ด์•ผ ํ•˜๋Š” ๋ฌธ์ œ์˜€๋‹ค. ๋”ฐ๋ผ์„œ ์šฐ๋ฆฌ๋Š” PR์„ ์˜ฌ๋ฆด ๋•Œ ๋ฆฌ๋ทฐ์–ด๋กœ ์„œ๋กœ๋ฅผ ์ง€์ •ํ•˜๊ณ , approve ๋˜์–ด์•ผ dev ๋ธŒ๋žœ์น˜์— ๋จธ์ง€ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜์ž๊ณ  ์ด์•ผ๊ธฐํ–ˆ์ง€๋งŒ ๊ทธ๋ ‡์ง€ ์•Š์•˜๋‹ค.

์ฒซ์งธ๋กœ ์‹œ๊ฐ„์ด ๋„ˆ๋ฌด ์—†์—ˆ๋‹ค. ์ฒซ ๊ธฐํš์—์„œ ์—ฌ๋Ÿฌ ๋ฒˆ ๋’ค์ง‘์œผ๋ฉฐ ๊ธฐ๋Šฅ์„ ๊ฑฐ์˜ ๋ฐ˜ ์ดํ•˜๋กœ ์ค„์˜€์ง€๋งŒ, ๊ทธ๋ž˜๋„ ์‹œ๊ฐ„์ด ๋„ˆ๋ฌด ๋ชจ์ž๋ž๋‹ค. ๋‚จ์˜ ์ฝ”๋“œ ๋ณด๊ธฐ๋ฅผ ์ตœ๊ณ ๋กœ ์ข‹์•„ํ•˜๋Š” ๋‚˜๋„ ๊ทธ๊ฑธ ๋‹ค ์ฝ๋Š”๊ฒŒ ๋„ˆ๋ฌด๋‚˜ ๋ฒ„๊ฑฐ์› ๊ณ , ์ด๋Ÿฌ๋‹ค๊ฐ„ ์ฃผ๊ฐ„ ๋งˆ์ผ์Šคํ†ค์„ ์ฑ„์šฐ๊ธฐ ์ •๋ง ์–ด๋ ค์›Œ ๋ณด์˜€๋‹ค.

๋‘˜์งธ๋กœ ์ด๋Ÿฐ ํ™˜๊ฒฝ์—์„œ ํŒ€์›์—๊ฒŒ ๋ฆฌ๋ทฐ์š”์ฒญ์„ ๊ฑฐ๋Š” ๊ฒƒ์ด ๋ถ€๋‹ด์ด์—ˆ๋Š”์ง€ ๋ฆฌ๋ทฐ์–ด๊ฐ€ ์—†๋Š” PR์ด ์ฅ๋„ ์ƒˆ๋„ ๋ชจ๋ฅด๊ฒŒ ์˜ฌ๋ผ์™”๋‹ค๊ฐ€, ๋ฐ”๋กœ ๋จธ์ง€๋˜์–ด ๋ฒ„๋ฆฌ๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์•˜๋‹ค. ์กฐ๊ธˆ ์„œ์šดํ•˜๊ธฐ๋„ ํ–ˆ๊ณ , ๋ฆฌํŒฉํ† ๋ง ๊ธฐ๊ฐ„์— ์ •๋ง ๋ง์ด ์•ˆ๋˜๋Š” ์ฝ”๋“œ๊ฐ€ ์žˆ์–ด์„œ ‘์ด๊ฒŒ ์–ด๋–ป๊ฒŒ dev ๋ธŒ๋žœ์น˜๋กœ ์™”์ง€?’ ํ•˜๊ณ  ๋ณด๋ฉด ๊ทธ๋Ÿฐ PR์ด์—ˆ๋˜ ๊ฒฝ์šฐ๊ฐ€ ๋Œ€๋ถ€๋ถ„์ด์—ˆ๋‹ค.

image

๋ฒŒ์น™์„ ๊ฐ™์ด ์ •ํ–ˆ์–ด์•ผ ํ•˜๋Š”๋ฐ ใ…‡ใ…‡..

๊ทธ๋ฆฌ๊ณ  ๋ฃฐ ์–˜๊ธฐ๋ฅผ ํ•˜๋Š” ๊น€์—, ํ›„๋ฐ˜ ๊ฐˆ์ˆ˜๋ก ํŒ€์›๋“ค์ด ์ž  ์•ˆ์ž๊ธฐ ๋Œ€ํšŒ๋ฅผ ํ•˜๋Š” ๊ฒƒ ๊ฐ™์•„ ๋ณด์—ฌ์„œ 3์‹œ ์ดํ›„ ๊ฒŒ๋”ํƒ€์šด ์ปค๋ฐ‹ PR ์ด์Šˆ๋ฐœํ–‰ ๊ธˆ์ง€๋ผ๋Š” ๋ฃฐ์„ ์ถ”๊ฐ€ํ–ˆ๋Š”๋ฐ, ๊ทธ ์‹œ์ ๋ถ€ํ„ฐ 3์‹œ ์ดํ›„๋กœ ์—„์ฒญ๋‚œ ์ปค๋ฐ‹๊ณผ ์ด์Šˆ๊ฐ€ ์˜ฌ๋ผ์˜ค๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค. ๋‹˜ ๊ทธ๋Ÿฌ๋‹ค ์ฃฝ์–ด์š”

ํŒ€์›๋“ค์˜ prettier๊ฐ€ ์ œ๋Œ€๋กœ ์ ์šฉ๋˜์ง€ ์•Š์•˜๋‹ค.

yarn berry๋ฅผ ์ ์šฉํ•˜๋ฉด์„œ, ๋˜ VS์ฝ”๋“œ์˜ ๋ฌธ์ œ๊ฐ€ ์ค‘์ฒฉ๋˜์–ด ๋งŒ๋“ค์–ด์ง„ ๊ฒฐ๊ณผ์ธ๋ฐ, lint ์—†์ด๋Š” ์‚ฌ๋žŒ์ด ์ฃฝ๋Š” ์ค„ ์•„๋Š” ๋‚˜๋ฅผ ์ œ์™ธํ•˜๊ณ  ๋ชจ๋“  ํŒ€์›์ด lint๊ฐ€ ์ œ๋Œ€๋กœ ์ ์šฉ๋˜์ง€ ์•Š๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ๋‹ค. ์‹ฌ์ง€์–ด ์ด๊ฑธ ๋งž์ถ”๋ ค๊ณ  ๋”ฐ๋กœ ์‹œ๊ฐ„์„ ํ• ์• ํ•˜๊ธฐ๊นŒ์ง€ ํ–ˆ๋Š”๋ฐ, ์–ผ๋งˆ ์ง€๋‚˜์ง€ ์•Š์•„ ๋˜ ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ฒผ๋‹ค. ๋Œ€์ฒด ์™œ์˜€์„๊นŒ? ์•„๋ฌดํŠผ ๊ทธ๋ž˜์„œ ๋Œ€๋ถ€๋ถ„์˜ PR์—๋Š”(๋‚ด ๊ฒƒ์„ ํฌํ•จํ•ด์„œ) CI ํ†ต๊ณผ๊ฐ€ ๋˜์ง€ ์•Š์•„ lint error๋ฅผ ์ˆ˜์ •ํ•˜๋Š” ์ปค๋ฐ‹์ด ํ•˜๋‚˜์”ฉ ๋” ๋‹ฌ๋ ค ์žˆ์—ˆ๊ณ , prettier๊ฐ€ ์ ์šฉ๋˜์ง€ ์•Š์€ ์ฝ”๋“œ๋ฅผ ๋‚ด๊ฐ€ ๊ตฌ๊ฒฝํ•  ๋•Œ๊ฐ€ ๋˜์–ด์„œ์•ผ ์ ์šฉ๋˜์–ด ์“ธ๋ฐ ์—†๋Š” ๋ณ€๊ฒฝ์ด ์ƒ๊ฒจ ์ปค๋ฐ‹์ด ๋ง‰ ์ปค์ง€๊ธฐ๋„ ํ–ˆ๋‹ค.

์ž‘์—… ๊ณผ์ •์—์„œ์˜ ๋ฌธ์ œ

์—ฌ๊ธฐ๋ถ€ํ„ฐ๋Š” ๋‚ด๊ฐ€ ๊ฐœ์ธ์ ์œผ๋กœ ๊ฒช์€ ์•„์‰ฌ์›€๋“ค์ด๋‹ค.

๋‚ด๊ฐ€ ๊ธฐ๋Œ€๋ฐ›๋Š” ์—ญํ• ์„ ํ•ด๋‚ด์ง€ ๋ชปํ–ˆ๋‹ค.

๋‚˜์ค‘์— ํŒ€์žฅ๋‹˜์ด ๋‚ด๊ฒŒ ์ œ์•ˆ์„ ํ•œ ์ด์œ ๊ฐ€ ๋Œ€์ถฉ ๋‚ด๊ฐ€ ํ”„๋ก ํŠธ์—”๋“œ ์ „๋ฐ˜์„ ์ž˜ ์žก๊ณ  ํŒ€์›์—๊ฒŒ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋ผ๋Š” ๊ธฐ๋Œ€๋ฅผ ํ–ˆ๋‹ค, ์ด๋Ÿฐ ์ด์•ผ๊ธฐ๋ฅผ ํ–ˆ์ง€๋งŒ, ๋‚˜๋Š” ๊ทธ๋ ‡์ง€ ๋ชปํ–ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ์šฐ์„  ๋‚˜๋Š” ๊ธฐ๋ณธ์ด ์—†์—ˆ๊ณ , ๊ธฐ๋ณธ์ด ์—†๋‹ค๋Š” ์ธ์ง€๋„ ์—†์—ˆ๋‹ค. ์ฝ”๋“œ๋ฅผ ์ฝ์œผ๋ฉฐ ๋‚ด๊ฐ€ ๋Š๋ผ๋Š” ๋ถˆํŽธํ•จ์ด ์ •๋ง ์•ˆํ‹ฐํŒจํ„ด์ด์–ด์„œ์ธ์ง€, ์•„๋‹ˆ๋ฉด ๋‚ด๊ฐ€ ํ•˜๋˜ ๋ฐฉ์‹๊ณผ ๋‹ฌ๋ผ์„œ์ธ์ง€ ๊ตฌ๋ถ„ํ•˜์ง€๋„ ๋ชปํ–ˆ๋‹ค. ์˜คํžˆ๋ ค ๋‚˜๋Š” ‘์ž๊ธฐ๊ฐ€ ์•„๋ฌด๊ฒƒ๋„ ๋ชจ๋ฅธ๋‹ค’๊ณ  ํ•œ ํŒ€์›์—๊ฒŒ ๋ฐฐ์šด๊ฒŒ ๋” ๋งŽ๋‹ค. ํŠนํžˆ Next.js๋Š” ๋ฆฌ์•กํŠธ์™€ ๋น„์Šทํ•˜๋ฉด์„œ ๋‹ค๋ฅธ ๋ถ€๋ถ„๋“ค์ด ์žˆ๋Š”๋ฐ, ๋‚˜๋Š” ํŒ€์›์˜ ํ•™์Šต ์ •๋ฆฌ์— ์˜์กดํ•˜๋ฉฐ ์ด ๋ถ€๋ถ„๋“ค์„ ์ฑ„์›Œ๋‚˜๊ฐ”๋‹ค. ๊ทธ ์™ธ์—๋„ ๋งํ•˜๊ธฐ๋„ ์ฐฝํ”ผํ•œ ๋‚˜์˜ ๋ฌด์ง€ํ•จ์ด ๋ช‡ ๋ฒˆ์”ฉ ํ„ฐ์ ธ ๋‚˜์™”๋‹ค. ์‚ฌ์‹ค ํ”„๋ก ํŠธ์—”๋“œ ์ฝ”๋“œ ์ผ๊ด€์„ฑ์ด ๋ฌด๋„ˆ์ง„ ์ฑ…์ž„์€ ๋Œ€๋ถ€๋ถ„ ๋‚ด๊ฒŒ ์žˆ๋‹ค. ใ…Ž;;

์˜์‚ฌ์†Œํ†ต์ด ๋ ˆํฌ์ง€ํ† ๋ฆฌ ๋ฐ–์—์„œ ์ด๋ฃจ์–ด์กŒ๋‹ค.

์ฝ”๋“œ๋ฆฌ๋ทฐ, ์ˆ˜์ •์š”์ฒญ, ๊ทธ ์™ธ ๊ธฐํƒ€๋“ฑ๋“ฑ์ด ์Šฌ๋ž™์ด๋‚˜ ๊ฒŒ๋”ํƒ€์šด์œผ๋กœ๋งŒ ์ด๋ฃจ์–ด์กŒ๋‹ค. ์ด๊ฒŒ ๋ญ๊ฐ€ ๋ฌธ์ œ๋ƒ๋ฉด, ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋งŒ ๋ด์„œ๋Š” ์ž‘์—…์˜ ๊ณผ์ •์ด ์ „ํ˜€ ๊ฐœ์—ฐ์„ฑ ์—†๊ฒŒ ๋ณด์ธ๋‹ค. ๋”์šฑ์ด ์ด ํ”„๋กœ์ ํŠธ๋Š” ๋ˆ„๊ตฐ๊ฐ€์—๊ฒŒ ๋ณด์—ฌ์ฃผ๊ธฐ ์œ„ํ•œ ํ”„๋กœ์ ํŠธ์ด๊ธฐ ๋•Œ๋ฌธ์— ์ ˆ๋Œ€ ๊ทธ๋ž˜์„œ๋Š” ์•ˆ๋๋‹ค. PR ์ฝ”๋ฉ˜ํŠธ์˜ ๊ฒฝ์šฐ ๋ ˆํฌ์—์„œ ์ง€์ ์„ ํ•˜๋Š” ๊ฒƒ์ด ๋ถ€์ •์ ์ด๊ฒŒ ๋Š๊ปด์ ธ์„œ(๋‚˜์˜ ๊ณ ์งˆ๋ณ‘์ด๋‹ค) ๊ฒŒ๋”ํƒ€์šด์ด๋‚˜ ์Šฌ๋ž™์œผ๋กœ ์ด์•ผ๊ธฐํ•ด์„œ ๊ณ ์น˜๊ณค ํ–ˆ๋‹ค. PR์— ‘ํ”ผ๋“œ๋ฐฑ ๋ฐ˜์˜’ ๋“ฑ์˜ ์ด๋ฆ„์„ ๊ฐ–๋Š” ์ปค๋ฐ‹์ด ์žˆ์œผ๋‚˜ ์ •์ž‘ ๊ทธ PR์— ๋‹ฌ๋ฆฐ ๋ฆฌ๋ทฐ๋Š” ์—†๊ฒŒ ๋˜์—ˆ๋‹ค. ๊ทธ๋ƒฅ ๊ทผ๊ฑฐ๊ฐ€ ์žˆ๋‹ค๋ฉด ํฌ๊ฒŒ ์ง€์ ์œผ๋กœ ๋Š๋‚„ ์‚ฌ๋žŒ๋„ ์—†์—ˆ์„ ํ…๋ฐ ๋‚ด๊ฐ€ ๊ดœํžˆ ๊ทธ๋žฌ๋‹ค. ์ด๊ฑด ํ”„๋กœ์ ํŠธ๊ฐ€ ๋ชจ๋‘ ๋๋‚œ ํ›„์— ๊ฐ‘์ž๊ธฐ ๋“  ์•„์‰ฌ์›€์ด๋‹ค.

์ •์ž‘ ๋‚ด๊ฐ€ ๊ธฐ๋ก์„ ๋งŽ์ด ํ•˜์ง€ ์•Š์•˜๋‹ค.

image

๋งŽ์ด๋„ ํ–ˆ๋‹ค

์šฐ๋ฆฌ ํŒ€์˜ ์ด๋ฆ„์€ ๋ฆฌ์ฝ”๋”์ด๋‹ค. ์ฒ˜์Œ ๊ธฐํš์ด ๊ทธ๋ฃน ๊ตํ™˜์ผ๊ธฐ ์ปจ์…‰์ด์—ˆ์–ด์„œ, ๊ธฐ๋ก์„ ํ•˜๋Š” ์„œ๋น„์Šค๋ผ๋Š” ์ ์— ์ฐฉ์•ˆํ•˜์—ฌ ‘๊ธฐ๋กํ•˜๋Š” ์‚ฌ๋žŒ๋“ค’์ด๋ผ๋Š” ์˜๋ฏธ๋กœ ์ง€์€ ์ด๋ฆ„์ด๋‹ค. ๊ทธ๋ž˜์„œ ์šฐ๋ฆฌ๋„ ํ•™์Šต์ •๋ฆฌ๋ฅผ ์—ด์‹ฌํžˆ ํ•˜์ž, ๊ธฐ๋ก์„ ๋งŽ์ด ๋‚จ๊ธฐ์ž ๋ผ๋Š” ์ œ์•ˆ์„ ํ–ˆ๋‹ค. ์ด๊ฑด ๋‚ด๊ฐ€ ํŒ€์— ๋“ค์–ด๊ฐ€๊ธฐ ์ „์— ํŒ€์žฅ๋‹˜๊ป˜ ์ œ์‹œํ•œ ์กฐ๊ฑด์ด๊ธฐ๋„ ํ–ˆ๋‹ค. ์ œ์‹œํ•œ ์กฐ๊ฑด์ด๋ผ๋‹ˆ๊นŒ ๋ญ๋ผ๋„ ๋˜๋Š” ๊ฒƒ ๊ฐ™์•„ ๋ณด์ธ๋‹ค.

์•„๋ฌดํŠผ ๊ฒฐ๊ณผ์ ์œผ๋กœ ๋‚ด๊ฐ€ ์ •๋ฆฌํ•œ TIL ๋ฌธ์„œ ์ˆ˜๋Š” ๊ผด์ฐŒ์— ๊ฐ€๊นŒ์› ๋‹ค. ๊ฑฐ์˜ ์Šค์Šค๋กœ๋ฅผ ๊ฐˆ์•„๋„ฃ๋Š” ์–ด๋–ค ์ฒœ์žฌ๋ถ„์ด ๋…๋ณด์ ์ด์—ˆ๊ณ *(์†”์งํžˆ ์ด ๋ถ„ ํ•™์Šต๋Ÿ‰์ด ๋ง์ด ์•ˆ๋œ๋‹ค)*, ํŒ€์žฅ๋‹˜์ด ๋‘ ๋ฒˆ์งธ, ๋‚˜๋Š” ๊ฑฐ์˜ ๊ผด์ฐŒ์— ๊ฐ€๊นŒ์› ๋‹ค. ๋‚˜๋ฆ„ ์ƒˆ๋กญ๊ฒŒ ๋ฐฐ์šด ๊ฒƒ๋“ค์€ ๊ฑฐ์˜ ์ผ์ง€๋งŒ, ๋‚ด๊ฐ€ ์•„๋Š” ๋ฒ”์œ„ ๋‚ด์—์„œ ํ•ด๊ฒฐํ•˜๋ ค๋Š” ๋ฒ„๋ฆ‡๊ณผ ๋Š๋ฆฐ ์ž‘์—…์†๋„๊ฐ€ ์›์ธ์ด๋ผ๊ณ  ํ•‘๊ณ„๋ฅผ ๋Œ„๋‹ค. ์ด ๊ฒฐ๊ณผ๋ฅผ ๋ณด๊ณ  ์ง€๊ธˆ๋„ ์ข€ ๋ฌด์•ˆํ•˜๋‹ค. ๋‚˜๋Š” ๊ทธ๋ƒฅ ํšŒ๊ณ ์— ๋„‹๋‘๋ฆฌ๋งŒ ์˜ค์ง€๊ฒŒ ์ ์—ˆ๋‹ค..

ํŒ€์˜ ์ž์›์„ ๋„ˆ๋ฌด ๋‚ญ๋น„ํ–ˆ๋‹ค.

์šฐ๋ฆฌ ํ”„๋กœ์ ํŠธ์˜ ์ฃผ์ œ๋ฅผ ๋†“๊ณ  ๋ณด๋ฉด ๊ทธ๋ ‡๊ฒŒ ๊ฐœ์„ฑ์žˆ์ง„ ์•Š์ง€๋งŒ, ๊ตณ์ด ๊ผฝ์ž๋ฉด ๋งˆํฌ๋‹ค์šด ์—๋””ํ„ฐ๊ฐ€ ์žˆ๋‹ค. ๋‚ด๊ฐ€ ๊ฐœ์ธ์ ์ธ ์š•์‹ฌ์œผ๋กœ ๊ณ ์ง‘ํ•œ ์ปจ์…‰์ด๊ธฐ๋„ ํ•˜๊ณ , ํŒ€์›๋“ค์ด ์ด ๊ฒƒ์„ ์œ„ํ•ด ๋‚˜์—๊ฒŒ ๋งŽ์€ ์‹œ๊ฐ„์„ ๋ชฐ์•„ ์คฌ๋Š”๋ฐ, ๋งˆํฌ๋‹ค์šด ๋ฌธ๋ฒ•์„ ํŒŒ์‹ฑํ•˜๋Š” ๋ถ€๋ถ„์„ ๋งŒ๋“ค๊ธฐ๊ฐ€ ์ •๋ง ์–ด๋ ค์› ๋‹ค. ๊ทธ๋ƒฅ ๊ฐ€๋ณ๊ฒŒ ์ •๊ทœ์‹์œผ๋กœ ์น˜ํ™˜ํ•˜๋ฉด ๋˜๊ฒ ๊ฑฐ๋‹ˆ ์ƒ๊ฐํ–ˆ์ง€๋งŒ ๋ฌธ๋ฒ•๊ณผ ๋ฌธ๋ฒ•๊ฐ„์˜ ํฌํ•จ ๊ฐ€๋Šฅ ์—ฌ๋ถ€๊ฐ€ ๊ฐ์ž ๋‹ฌ๋ž๊ณ , ๋ช‡ ๊ฐ€์ง€ ๊ตฌ์กฐ์  ๋ฌธ์ œ ๋•Œ๋ฌธ์— ์™„๋ฒฝํ•œ ํŒŒ์‹ฑ์„ ์œ„ํ•ด์„œ๋Š” ์ •๋ง ๋ฌธ์ž์—ด์„ lexical analyzeํ•  ํ•„์š”๊ฐ€ ์žˆ์—ˆ๋‹ค. ์ด ๋ฒฝ์— ๊ฐ€๋กœ๋ง‰ํ˜€ ํฌ๊ธฐํ•˜๋ ค๋‹ค๊ฐ€ ์–ด๋–ค ํŒ€์›์˜ ๊ฒฉ๋ ค๋กœ ์–ด๋–ป๊ฒŒ๋“  ๋ช‡ ๊ฐ€์ง€ ๋ˆˆ์†์ž„์„ ๊ฑฐ์ณ ๋น„์Šทํ•œ ๋ชจ์–‘์„ ๋งŒ๋“ค์–ด๋ƒˆ์ง€๋งŒ, ๊ฒฐ๊ณผ๋ฌผ๋งŒ ๋†“๊ณ  ๋ณด๋ฉด ํˆฌ์žํ•œ ์‹œ๊ฐ„์ด ์•„๊นŒ์šด ์ˆ˜์ค€์ด๋‹ค. ์—ฌ๋‹ด์œผ๋กœ ๊ทธ ๋•Œ ๋ฐ›์€ ๊ฒฉ๋ ค๋กœ ์ง„์งœ ์šธ ๋ป”ํ–ˆ๋‹ค ใ…‹ใ…‹..

๊ทธ๋ž˜๋„ ๋‚˜์ค‘์— ๋ฉ˜ํ† ๋‹˜ํ•œํ…Œ ๋“ค์–ด ๋ณด๋‹ˆ, ์• ์ดˆ์— ์™„์ „ํ•œ ํŒŒ์„œ๋ฅผ ๋งŒ๋“ค๊ธฐ๋Š” ์ข€ ํž˜๋“ค ๊ฒƒ์ด๊ณ , ๋ฉ˜ํ† ๋‹˜์ด ๋น„์Šทํ•œ ์ผ์„ ํ•˜์…จ์„ ๋•Œ์—๋„ ์šฐ๋ฆฌ์˜ ๊ฒฐ๊ณผ๋ฌผ๊ณผ ๋น„์Šทํ•œ ๊ตฌ์กฐ๋กœ ๊ตฌํ˜„ํ•˜์…จ๋‹ค๊ณ  ํ•œ๋‹ค. ์ตœ๊ณ ๋Š” ์•„๋‹ˆ์–ด๋„ ๋‚˜๋ฆ„ ์ตœ์„ ์˜ ๊ฒฐ๊ณผ๋ฅผ ๋‚ธ ๊ฒƒ ๊ฐ™๋‹ค.

image

์†”์งํžˆ ๊ธ€์“ฐ๋Š” ๊ฑฐ ์žฌ๋ฏธ์žˆ์—ˆ์Œ

์ฒซ ํ˜‘์—…์ด๋‹ˆ๊นŒ ๋ผ๋Š” ์ด์•ผ๊ธฐ๋Š” ์ข€ ๊ทธ๋ ‡๋‹ค. ์™œ๋ƒ๋ฉด ๋‹ค์Œ ํ˜‘์—…๋•Œ๋Š” ๋˜ ๋‹ค์Œ ํ˜‘์—…์˜ ์•„์‰ฌ์›€์ด ์ด ๋งŒํผ ์Œ“์ผ ๊ฒƒ์ด๊ณ , ๋‚˜๋Š” ‘์ฒ˜์Œ์ด๋‹ˆ๊นŒ’๋ผ๋Š” ์ด์œ ๋ฅผ ์ •๋ง ์‹ซ์–ดํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์ด๋ฒˆ์—” ์ฒ˜์Œ์ด๋ผ๊ณ  ์น˜๊ณ , ๋‹ค์Œ ๋ฒˆ์—๋Š” ์–ด๋–ค ๋ณ€๋ช…์„ ํ•  ์ˆ˜ ์žˆ์„๊นŒ? ๊ทธ๋ƒฅ ์ด ๋ฌธ์ œ๋“ค๋กœ ์ธํ•ด ๋‚ด๊ฐ€ ๋Š๋‚€ ์Šฌํ””์„ ๋จธ๋ฆฟ์†์— ์ƒˆ๊ธฐ๊ณ  ๋‹ค์‹œ๋Š” ๊ฐ™์€ ์‹ค์ˆ˜๋ฅผ ๋ฐ˜๋ณตํ•˜์ง€ ์•Š๋„๋ก ๊ฐ๊ฐ์„ ์ตํžˆ๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•œ ๊ฒƒ ๊ฐ™๋‹ค. ์ด๋ฒˆ์— ์ด๋ ‡๊ฒŒ ํž˜๋“ค์—ˆ๋Š”๋ฐ ๋˜ ๊ฐ™์€ ์‹ค์ˆ˜๋ฅผ ํ•˜๋ฉด ์ •๋ง ์Šฌํ”Œ ๊ฒƒ ๊ฐ™๋‹ค.

์•„์‰ฌ์›€๋งŒ ์ ์—ˆ์ง€๋งŒ ์ •์ž‘ ์šฐ๋ฆฌ์˜ ํ˜‘์—…์€ ์ •๋ง ์žฌ๋ฐŒ์—ˆ๋‹ค. ์ƒˆ๋ฒฝ๊นŒ์ง€ ๊ฒŒ๋”ํƒ€์šด์—์„œ ์žก๋‹ด์„ ํ•˜๊ธฐ๋„ ํ•˜๊ณ , ์›”๋“œ์ปต๋„ ๋ณด๊ณ , ํ…ŒํŠธ๋ฆฌ์Šค๋ฅผ ํ•˜๋ฉด์„œ ๋†€๊ธฐ๋„ ํ–ˆ๋‹ค. ์–ด์„คํ”„๋˜ ์‹œ์ ˆ๋งŒ ๊ธฐ์–ตํ•ด์„œ ๊ทธ๋ ‡์ง€ ๊ฒฐ๊ณผ๋ฌผ๋งŒ ๋†“๊ณ  ๋ณด๋ฉด ๊ฝค ๋ฉ‹์žˆ๋Š” ์•ฑ์ด๊ธฐ๋„ ํ•˜๋‹ค. ์ด ๊ธ€์€ ๋‚˜์˜ ๋ฌธ์ œ๋ฅผ ์ฑ„์ฐ์งˆ ํ•˜๋Š” ๊ธ€์ด ์•„๋‹ˆ๋ผ, ๊ทธ์ € ๋‚ด๊ฐ€ ๋ถ€์ŠคํŠธ์บ ํ”„ ๋‚ด๋‚ด ํ•ด์™”๋˜ ๊ฒƒ์ฒ˜๋Ÿผ ‘๋‹ค์Œ์—๋Š” ์ด๋ ‡๊ฒŒ ํ•ด์•ผ์ง€!’ ๊ณ„ํš์„ ์„ธ์šฐ๋Š” ๊ธ€์ด๋‹ค. ์šฐ๋ฆฌ ํŒ€์€ ๋Œ€๋‹จํ•˜๋‹ค. ์šฐ๋ฆฌ๋‹ˆ๊นŒ ์ด ์ •๋„ ํ•œ๊ฑฐ์•ผ ^^..

\ No newline at end of file +Hugo. + \ 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 5bce4e7..ae02d30 100644 --- a/posts/2022/12/making-editor-markdown/index.html +++ b/posts/2022/12/making-editor-markdown/index.html @@ -1,4 +1,4 @@ -๋งˆํฌ๋‹ค์šด ๋งŒ๋“ค๊ธฐ - Markdown [3/3] | PrayinForRain.dev +๋งˆํฌ๋‹ค์šด ๋งŒ๋“ค๊ธฐ - Markdown [3/3] | PrayinForRain.dev

๋งˆํฌ๋‹ค์šด ๋งŒ๋“ค๊ธฐ - Markdown [3/3]

Table of Contents

๋ชจํ—ค์œฐ์˜ ์—๋””ํ„ฐ ๋งŒ๋“ค๊ธฐ ์‹œ๋ฆฌ์ฆˆ ๋ชจ์•„๋ณด๊ธฐ
์—๋””ํ„ฐ ๋งŒ๋“ค๊ธฐ - ContentEditable [1/3]
์—๋””ํ„ฐ ๋งŒ๋“ค๊ธฐ - getSelection [2/3]
์—๋””ํ„ฐ ๋งŒ๋“ค๊ธฐ - Markdown [3/3]

๋งˆ์ง€๋ง‰์ž…๋‹ˆ๋‹ค. ์ž…๋ ฅํ•˜๊ณ , ๊ฒŒ์‹œํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ์œผ๋‹ˆ, ์ด์ œ ๋‚จ์€ ์ผ์€ ์„œ์‹์„ ์ ์šฉํ•˜๋Š” ๊ฒƒ ๋ฟ์ž…๋‹ˆ๋‹ค. ๋งˆํฌ๋‹ค์šด ๋ฌธ๋ฒ•์„ ์ด์šฉํ•ด ์–ด๋–ป๊ฒŒ ์„œ์‹์„ ์ ์šฉํ•  ์ˆ˜ ์žˆ์„๊นŒ์š”? ๊ทธ ๊ณผ์ •์„ ์ •๋ฆฌํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

๐Ÿคท ์–ด๋–ป๊ฒŒ ํ• ๊นŒ์š”?

์ •๋ง์ด์ง€ ์–ด๋–ป๊ฒŒ ํ•˜๋ฉด ์ข‹์„๊นŒ์š”? ์šฐ์„  ์ œ๊ฐ€ ์ƒ๊ฐํ•˜๋Š” ๊ฐ€์žฅ ์‚ฌ์šฉ์„ฑ์ด ์ข‹์€ ๋งˆํฌ๋‹ค์šด์€ ๊นƒํ—ˆ๋ธŒ์˜ ๊ทธ๊ฒƒ์ด์˜€์Šต๋‹ˆ๋‹ค. GFM(GitHub Flavored Markdown)์ด๋ผ๊ณ  ๋ถ€๋ฅด๋Š” ์ŠคํŽ™์ด ์žˆ๋Š”๋ฐ, ์ฒ˜์Œ์—๋Š” ์ด๊ฑธ ๋ถ€๋ฅด๋Š” ์ด๋ฆ„์ด ์žˆ๋Š” ๊ฒƒ์กฐ์ฐจ ๋ชจ๋ฅด๊ณ  ๋ง‰๋ฌด๊ฐ€๋‚ด๋กœ ๋ฆฌ๋ฒ„์Šค ์—”์ง€๋‹ˆ์–ด๋ง ๋งˆ์ธ๋“œ๋กœ ์ž‘์—…์„ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜ ์‚ฌ์ง„์ฒ˜๋Ÿผ ์•„๋ฌด ์ด์Šˆ๋‚˜ ๋“ค์–ด๊ฐ€์„œ ๋Œ“๊ธ€ ์ฐฝ์— ์‹คํ—˜์„ ํ•˜๋ฉด์„œ์š”.

Untitled

์›๋ž˜๋Œ€๋กœ๋ผ๋ฉด ์ž…๋ ฅ์„ ํ† ํฐ์œผ๋กœ ๋ถ„ํ•ดํ•˜๊ณ , Parse tree๋ฅผ ๊ตฌ์„ฑํ•˜์—ฌ์•ผ ๊ฒ ์ง€๋งŒ, ๋งˆํฌ๋‹ค์šด์ด ๋Š์Šจํ•œ ์–ธ์–ด์ด๊ธฐ ๋•Œ๋ฌธ์— ํ† ํฐ์œผ๋กœ ๋ถ„ํ•ดํ•˜๋Š” ๊ณผ์ •์ด ์ง€๋‚˜์น˜๊ฒŒ ์–ด๋ ค์šธ ๊ฒƒ์ด๋ผ ํŒ๋‹จํ•˜์—ฌ ์‰ฌ์šด ๊ธธ์„ ์„ ํƒํ•˜๊ธฐ๋กœ ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ž์ฃผ ์“ธ ๋ฒ•ํ•œ ๋งˆํฌ๋‹ค์šด ๋ช‡ ๊ฐ€์ง€๋งŒ ์ ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋ฉด ๋˜๊ฒ ์ง€? ํ•˜๋Š” ์ƒ๊ฐ์œผ๋กœ ๊นƒํ—ˆ๋ธŒ๋ฅผ ์—ด์–ด์„œ ์•„๋ฌด ํ…์ŠคํŠธ๋ฅผ ๋งˆ๊ตฌ ์ž…๋ ฅํ•ด ๋ณด๊ธฐ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ€๋ฒผ์šด ๋งˆ์Œ์œผ๋กœ์š”.

function headers(str: string): string {
@@ -74,4 +74,5 @@

๐Ÿ”ฅ ๋งˆ์น˜๋ฉฐ

dhkstjd.gif

์ฒ˜์Œ์— ์‹œ์ž‘ํ•  ๋•Œ์—๋Š” ๋ฌด์ฒ™ ๊ฑฐ์ฐฝํ•˜๊ฒŒ ์‹œ์ž‘ํ–ˆ๋Š”๋ฐ, ์ƒ๊ฐ๋ณด๋‹ค ํˆฌ๋ฐ•ํ•œ ๊ฒฐ๊ณผ๋ฌผ์ด ๋‚˜์™”์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜๋„ ๋ญ”๊ฐ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ํž˜์„ ๋นŒ๋ฆฌ์ง€ ์•Š๊ณ  ์ด ์ •๋„๋ฅผ ๊ตฌํ˜„ํ–ˆ๋‹ค๋Š” ๋ฐ ์˜์˜๋ฅผ ๋‘๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ ์—๋””ํ„ฐ๊ฐ™์€ ๋ถ€๋ถ„์€ ์ฐพ์•„ ๋ณผ์ˆ˜๋ก ๋” ๋งŽ์€ ๊ธฐ๋Šฅ์ด ํ•„์š”ํ•˜๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ ๋˜์–ด์„œ ์•„์‰ฌ์›€์ด ๋” ๋งŽ์ด ์ƒ๊ฒผ์Šต๋‹ˆ๋‹ค. ๋‚˜์ค‘์— ์‹œ๊ฐ„์ด ๋˜๋ฉด undo ๊ธฐ๋Šฅ๋„ ๊ตฌํ˜„ํ•˜๊ณ , ์ด๊ฒƒ์ €๊ฒƒ ๋” ๊ฐœ์„ ํ•ด ๋ณด๊ณ  ์‹ถ๋„ค์š”.

์ง€๊ธˆ๊นŒ์ง€ ๋ชจํ—ค์œฐ์˜ ๋งˆํฌ๋‹ค์šด ์—๋””ํ„ฐ๋ฅผ ๊ตฌํ˜„ํ•œ ๊ณผ์ •์ด์˜€์Šต๋‹ˆ๋‹ค.

๐Ÿ“– Refs.

GitHub Flavored Markdown Spec
markedjs/marked

\ No newline at end of file +Hugo. + \ 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 25d95b8..c9715a5 100644 --- a/posts/2022/12/prevent-sidebar-blinking/index.html +++ b/posts/2022/12/prevent-sidebar-blinking/index.html @@ -1,4 +1,4 @@ -์‚ฌ์ด๋“œ๋ฐ”์•ผ ๊ทธ๋งŒ ๊นœ๋นก์—ฌ๋ผ | PrayinForRain.dev +์‚ฌ์ด๋“œ๋ฐ”์•ผ ๊ทธ๋งŒ ๊นœ๋นก์—ฌ๋ผ | PrayinForRain.dev

์‚ฌ์ด๋“œ๋ฐ”์•ผ ๊ทธ๋งŒ ๊นœ๋นก์—ฌ๋ผ

Table of Contents

๋ชจํ—ค์œฐ์˜ ํ”„๋ก ํŠธ์—”๋“œ ์•ฑ์€ Next.js๋กœ ๋งŒ๋“ค์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. ํŒ€์› ๊ทธ ๋ˆ„๊ตฌ๋„ ์‚ฌ์šฉํ•ด ๋ณธ ์ ์ด ์—†์Œ์—๋„ ๊ตณ์ด ์„ ํƒํ•œ ์ด์œ ๋Š” NestJS๋ฅผ ์จ ๋ณด๋‹ˆ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ํ˜‘์—… ํ™˜๊ฒฝ์—์„œ ์ฝ”๋“œ ์ผ๊ด€์„ฑ์„ ์ง€ํ‚ค๋Š” ๋ฐ ๋„์›€์„ ์ค„ ๊ฒƒ์ด๋ผ๋Š” ๋ง‰์—ฐํ•œ ๊ธฐ๋Œ€์™€, SSR์„ ์ฒดํ—˜ํ•ด ๋ณด๊ณ  ์‹ถ์€ ํ•™์Šต์ ์ธ ์š•์‹ฌ์ด ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์ง€๊ธˆ ๋Œ์•„๋ณด๋‹ˆ โ€˜๋„ˆ์™€ ํ•จ๊ป˜ ํ•˜๊ธธ ์ž˜ ํ–ˆ์–ด!โ€™ ํ•˜๋Š” ๊ฐ์ƒ์€ ์—†๋„ค์š”.

๊ธฐ์™• SSR์„ ์ฒดํ—˜ํ•œ๋‹ค๊ณ  ์‹œ์ž‘ํ•œ ํ”„๋กœ์ ํŠธ์ธ ๋งŒํผ, ์„ฑ๋Šฅ์— ์‹ ๊ฒฝ์„ ์“ฐ์ง€ ์•Š์„ ์ˆ˜ ์—†๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‹ค ์ œ๊ฐ€ ์ข‹์•„ํ•˜๋Š” ์–ด๋–ค ํŒ€์˜ ๋…ธ์…˜์—์„œ memoization์„ ํ†ตํ•œ ์ปดํฌ๋„ŒํŠธ ์ค‘๋ณต ๋ Œ๋”๋ง ๋ฐฉ์ง€์— ๋Œ€ํ•œ ๊ธ€์„ ์ฝ์—ˆ๋Š”๋ฐ์š”, ์ด ๋ถ€๋ถ„์ด ๋•Œ ๋งˆ์นจ Next.js 13์„ ์ ์šฉํ•˜์ง€ ๋ชปํ•ด ํฌ๊ธฐํ•ด์•ผ๋งŒ ํ–ˆ๋˜ ์•„ํ”ˆ ์ƒ์ฒ˜๋ฅผ ์ž๊ทนํ•˜๊ณ  ์žˆ์–ด์„œ ๋ชจํ—ค์œฐ์—๋„ ์‹œ๋„ํ•ด ๋ณด๊ธฐ๋กœ ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

๐Ÿคท TL;DR

  • useMemo๋กœ memoizationํ•˜์—ฌ๋„ context ๊ฐ’์„ ์ฐธ์กฐํ•˜๋ฉด ๋ฆฌ๋ Œ๋”๋ง์ด ์ด๋ฃจ์–ด์ง„๋‹ค.
  • ํฌ๋กฌ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋‚˜ React DevTools๋ฅผ ํ†ตํ•ด ๋ฆฌ๋ Œ๋”๋ง ์ •๋ณด๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.
  • Next.js์—์„œ /pages/_app.tsx์— ๋“ค์–ด๊ฐ„ ์ปดํฌ๋„ŒํŠธ๋Š” ๋ฆฌ๋ Œ๋”๋ง์ด ๋ฐฉ์ง€๋œ๋‹ค.

๐Ÿค” ์‚ฌ์ด๋“œ๋ฐ”์˜ ํ˜„์žฌ ์ƒํ™ฉ

๋ชจํ—ค์œฐ์€ Next.js๊ฐ€ ์š”๊ตฌํ•˜๋Š” ๋Œ€๋กœ pages ๋””๋ ‰ํ† ๋ฆฌ์— ๊ฐ ํŽ˜์ด์ง€์˜ ๋ ˆ์ด์•„์›ƒ์„ ์ปดํฌ๋„ŒํŠธ์˜ ์กฐํ•ฉ์œผ๋กœ ๊ตฌ์„ฑํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜ ์ฝ”๋“œ์ฒ˜๋Ÿผ์š”.

// index.tsx
@@ -56,4 +56,5 @@

_app.tsx๋ฅผ ์ˆ˜์ •ํ•˜๊ณ , pages ๋””๋ ‰ํ† ๋ฆฌ ์•ˆ์˜ ๋ชจ๋“  SideBar๋ฅผ importํ•˜๋Š” ๋ถ€๋ถ„์„ ์ œ๊ฑฐํ–ˆ์Šต๋‹ˆ๋‹ค. ํŽ˜์ด์ง€ ์ˆ˜๊ฐ€ ๋” ๋งŽ์•„์ง€๊ณ  ๋‚˜์„œ ํ–ˆ์œผ๋ฉด ์†๋ชฉ์— ๋ฌด๋ฆฌ๊ฐ€ ์™”์„ ๊ฒƒ ๊ฐ™๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ’ก CSS-in-JS๋Š” React DevTools์—์„œ ๋ Œ๋”๋ง ์ •๋ณด๋ฅผ ์ž˜๋ชป ๋ณด์—ฌ์ค€๋‹ค?
์ •ํ™•ํ•˜์ง€๋Š” ์•Š์€ ์ •๋ณด์ด์ง€๋งŒ, React DevTools๊ฐ€ ๋ณด์—ฌ์ฃผ๋Š” ๋ฆฌ๋ Œ๋”๋ง ์ •๋ณด๊ฐ€ ์‹ค์ œ ๋ธŒ๋ผ์šฐ์ €์˜ ๋ฆฌ๋ Œ๋”๋ง๊ณผ ๋‹ค๋ฅผ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ธ€์„ ๋ดค์Šต๋‹ˆ๋‹ค. ์‹ค์ œ ๋ฆฌ๋ Œ๋”๋ง ์ƒํ™ฉ์„ ๋ณด๊ธฐ ์œ„ํ•ด์„œ๋Š” ํฌ๋กฌ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ์˜ ๋ Œ๋”๋ง โ†’ ํŽ˜์ธํŠธ ํ”Œ๋ž˜์‹œ๋ฅผ ์ฒดํฌํ•ด์„œ ํ™•์ธํ•˜๋ผ๊ณ  ํ•˜๋„ค์š”.
๋ฆฌ์•กํŠธ ๋ฐ๋ธŒํˆด๊ณผ์˜ ์ฐจ์ด๋Š” ๋ฆฌ์•กํŠธ์˜ virtual render์™€ ๋ธŒ๋ผ์šฐ์ €์˜ native rerender๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ์ฐจ์ด๋ผ๊ณ  ํ•˜๋Š”๋ฐ, ์ข€ ๋” ์•Œ์•„๋ณผ ํ•„์š”๊ฐ€ ์žˆ์–ด ๋ณด์ž…๋‹ˆ๋‹ค.
Untitled

aftr.gif

๋ธŒ๋ผ์šฐ์ €์˜ ํŽ˜์ธํŠธ ํ”Œ๋ž˜์‹œ๋ฅผ ์ฒดํฌํ•˜๊ณ  ํ™•์ธํ•ด ๋ณด์•˜์Šต๋‹ˆ๋‹ค. gif ํŒŒ์ผ์„ ๊ณ„์† ํ•˜์ด๋ผ์ดํŠธํ•ด์„œ ์ •์‹ ์ด ์‚ฌ๋‚ฉ์ง€๋งŒ, ์•„๋ฌดํŠผ ์šฐ์ธก์˜ ๋ฉ”์ธ ์„น์…˜์ด ๊ณ„์† ๋ฆฌ๋ Œ๋”๋ง ๋˜๋Š” ๋™์•ˆ ์‚ฌ์ด๋“œ๋ฐ” ๋งŒํผ์€ ํ•œ ๋ฒˆ์˜ ๊นœ๋นก๊ฑฐ๋ฆผ ์—†์ด ๊น”๋”ํ•˜๊ฒŒ ์ž‘๋™ํ•จ์„ ํ™•์ธํ•˜์˜€์Šต๋‹ˆ๋‹ค. ์ด์ œ ์ข€ ๋‚ซ๋„ค์š”!

๐Ÿ“– Refs.

re rendering conditions
Next js how to avoid re-rendering of common components between routed pages?
NEXT JS - How to prevent layout get re-mounted?
How to prevent parent component from re-rendering with React (next.js) SSR two-pass rendering?
๋„ค?? Component๋ฅผ memoizationํ•ด๋„ ๋ฆฌ๋ Œ๋”๋ง์ด ๋ฐœ์ƒํ•œ๋‹ค๊ตฌ์š”..?? ๐Ÿ’ฆ (feat. context)

\ No newline at end of file +Hugo. + \ 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 e076010..0724548 100644 --- a/posts/2023/01/browser-rendering-performance/index.html +++ b/posts/2023/01/browser-rendering-performance/index.html @@ -1,4 +1,4 @@ -๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง๊ณผ ์„ฑ๋Šฅ | PrayinForRain.dev +๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง๊ณผ ์„ฑ๋Šฅ | PrayinForRain.dev

๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง๊ณผ ์„ฑ๋Šฅ

Table of Contents

๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง

์„ฑ๋Šฅ ์ตœ์ ํ™”๋ฅผ ์œ„ํ•ด, ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์–ด๋–ป๊ฒŒ HTML ๋ฌธ์„œ๋ฅผ ํ™”๋ฉด์— ๊ทธ๋ฆฌ๋Š”์ง€ ๊ณผ์ •์— ๋Œ€ํ•ด ์ดํ•ดํ•  ํ•„์š”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง์€ ์•„๋ž˜ ์‚ฌ์ง„๊ณผ ๊ฐ™์€ ํ๋ฆ„์œผ๋กœ ์ด๋ฃจ์–ด์ง‘๋‹ˆ๋‹ค.

Untitled

  • ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ HTML, CSS, JavaScript ํŒŒ์ผ์„ ๋ฐ›์•„์™€ HTML โ†’ DOM, CSS โ†’ CSSOM์œผ๋กœ ๋ณ€ํ™˜ํ•˜๊ณ  Render Tree๋ฅผ ๊ตฌ์„ฑํ•ฉ๋‹ˆ๋‹ค.
  • Render Tree์˜ ๋…ธ๋“œ๋“ค์— ๋Œ€ํ•œ ์œ„์น˜์™€ ํฌ๊ธฐ๋ฅผ ๊ณ„์‚ฐํ•ฉ๋‹ˆ๋‹ค. Render Tree์˜ ๋ฃจํŠธ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์—ฌ ๋ชจ๋“  ๋…ธ๋“œ์— ๋Œ€ํ•ด ๊ณ„์‚ฐ์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค. (Layout)
  • ๊ณ„์‚ฐ๋œ ๊ฒฐ๊ณผ๋ฌผ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ™”๋ฉด์— ์‹ค์ œ ๋…ธ๋“œ๋“ค์„ ๊ทธ๋ฆฝ๋‹ˆ๋‹ค. (Paint)
  • ์‚ฌ์šฉ์ž์˜ ์ƒํ˜ธ์ž‘์šฉ์ด๋‚˜ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ†ตํ•œ ์ œ์–ด ๋“ฑ์œผ๋กœ HTML ์š”์†Œ์˜ ํฌ๊ธฐ๋‚˜ ์œ„์น˜์˜ ๋ณ€๊ฒฝ์ด ์ผ์–ด๋‚˜๋ฉด Reflow๋ผ๋Š” ๊ณผ์ •์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค.
    • Reflow๋Š” Render Tree ๊ตฌ์„ฑ๋ถ€ํ„ฐ ๋ชจ๋“  ์ž‘์—…์„ ๋‹ค์‹œ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค.
    • ๋งŒ์•ฝ ๋ ˆ์ด์•„์›ƒ ์ž์ฒด์—๋Š” ๋ณ€ํ™”๊ฐ€ ์—†๊ณ , ์ƒ‰์ƒ์ด๋‚˜ visibility ๋“ฑ์˜ ๋ณ€๊ฒฝ๋งŒ ์žˆ๋Š” ๊ฒฝ์šฐ์—๋Š” Paint ๊ณผ์ •๋งŒ์„ ๋‹ค์‹œ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค. (Repaint)
    • ๋”ฐ๋ผ์„œ ๋น„์šฉ์ด ํฐ Reflow์˜ ๋ฐœ์ƒ์„ ์ตœ๋Œ€ํ•œ ์ค„์ด๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.

์ด๊ฑฐ ๋˜๊ฒŒ ์ข‹์€ ๋‚ด์šฉ์ธ ๊ฒƒ ๊ฐ™์•„์š” CSS์˜ will-change๋ฅผ ํ†ตํ—ค ๋ถˆํ•„์š”ํ•œ GPU ์ ์œ ๋ฅผ ์ค„์ด๋Š” ๋ฐฉ๋ฒ•๋„ ์†Œ๊ฐœํ•˜๊ณ  ์žˆ๋„ค์š”!

์„ฑ๋Šฅ์„ ์ตœ์ ํ™”ํ•˜๋Š” ๋ฐฉ๋ฒ•

DocumentFragment๋ฅผ ์‚ฌ์šฉ

์•ž์— ์ •๋ฆฌํ•œ ๋‚ด์šฉ๊ณผ ๊ฐ™์ด ๋ธŒ๋ผ์šฐ์ € ์„ฑ๋Šฅ์— ๊ฐ€์žฅ ์˜ํ–ฅ์„ ๋ฏธ์น˜๋Š” ๋ถ€๋ถ„์€ Reflow ๊ณผ์ •์ž…๋‹ˆ๋‹ค. ์ฆ‰ Reflow์˜ ๋ฐœ์ƒ์„ ์ค„์ด๋ฉด ํฐ ์„ฑ๋Šฅ ํ–ฅ์ƒ์„ ๋…ธ๋ฆด ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด๋‹ค. ๋ณดํ†ต์€ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ†ตํ•ด ์š”์†Œ์˜ ๋ ˆ์ด์•„์›ƒ์„ ์ œ์–ดํ•˜๋Š” ์ฝ”๋“œ๋Š” ํ•œ ๋ฒˆ์— ์‹คํ–‰๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ฆ‰ ์—ฌ๋Ÿฌ ์ค„์— ๊ฑธ์ณ ๋ ˆ์ด์•„์›ƒ์„ ์ˆ˜์ •ํ•˜๋Š” ๊ฒฝ์šฐ ๊ฐ ํ–‰์— ๋Œ€ํ•ด Reflow๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. - ๋ธŒ๋ผ์šฐ์ €์— ๋”ฐ๋ผ ์ผ๋ถ€ ์ตœ์ ํ™”๊ฐ€ ์ด๋ฃจ์–ด์ง€๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ์Œ

๋”ฐ๋ผ์„œ ๋ชจ๋“  ์ˆ˜์ •์ด ์™„๋ฃŒ๋œ ํ›„์— ์ตœ์ข… ๊ฒฐ๊ณผ๋ฌผ์— ๋Œ€ํ•ด์„œ๋งŒ Reflow๋ฅผ ์ˆ˜ํ–‰ํ•  ํ•„์š”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. DocumentFragment๊ฐ€ ๊ทธ ํ•ด๊ฒฐ์ฑ… ์ค‘ ํ•˜๋‚˜์ธ๋ฐ, DocumentFragment๋ž€ React์˜ ๋ฒ„์ถ”์–ผ DOM๊ณผ ๋น„์Šทํ•œ ๊ฐœ๋…์œผ๋กœ, DOM๊ณผ ๋น„์Šทํ•˜๊ฒŒ ๋™์ž‘ํ•˜์ง€๋งŒ ์‹ค์ œ HTML DOM์—๋Š” ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๋Š” Document์˜ ๊ฐ€๋ฒผ์šด ๋ฒ„์ „์ž…๋‹ˆ๋‹ค.

DocumentFragment์€ ๋ Œ๋”๋ง ์ž์ฒด๊ฐ€ ์ด๋ฃจ์–ด์ง€์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— Reflow ๊ฑฑ์ • ์—†์ด ๋ณ€๊ฒฝ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ DocumentFragment ๋‚ด๋ถ€์—์„œ ๋ ˆ์ด์•„์›ƒ์„ ๋ณ€๊ฒฝํ•˜๊ณ , ์ตœ์ข… ๊ฒฐ๊ณผ๋ฌผ์„ HTML DOM์— ์‚ฝ์ž…ํ•˜๋ฉด ๋ถˆํ•„์š”ํ•œ Reflow ๋ฐœ์ƒ์„ ๋ง‰์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜๋Š” ๊ฐ„๋‹จํ•œ ์‚ฌ์šฉ ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค.

const documentFragment = new DocumentFragment();
@@ -13,4 +13,5 @@
\ No newline at end of file +Hugo. + \ 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 51f661e..e98587f 100644 --- a/posts/2023/01/css-display/index.html +++ b/posts/2023/01/css-display/index.html @@ -1,7 +1,8 @@ -CSS์˜ display ์†์„ฑ | PrayinForRain.dev +CSS์˜ display ์†์„ฑ | PrayinForRain.dev

CSS์˜ display ์†์„ฑ

Table of Contents

CSS์˜ display ์†์„ฑ์€ HTML element๊ฐ€ block์ธ์ง€, inline์ธ์ง€, ๊ทธ๋ฆฌ๊ณ  ์ž์‹ element๋“ค์„ ์–ด๋–ค ์‹์œผ๋กœ ํ‘œ์‹œํ• ์ง€๋ฅผ ์ •ํ•˜๋Š” ์†์„ฑ์ž…๋‹ˆ๋‹ค. ๋‹ค์‹œ ๋งํ•ด ์š”์†Œ ์ž์ฒด๊ฐ€ ํ˜•์ œ ์š”์†Œ์™€ ๋ฐฐ์น˜๋˜๋Š” ๋ฐฉ๋ฒ•๊ณผ, ์ž์‹ ์š”์†Œ๋ฅผ ๋ฐฐ์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ํ•จ๊ป˜ ์ •์˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์— โ€˜์•ˆ์ชฝโ€™๊ณผ โ€˜๋ฐ”๊นฅ์ชฝโ€™์œผ๋กœ ์†์„ฑ์„ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

display:

๋ฐ”๊นฅ์ชฝ

Untitled

  • block
    • ํ•œ ์ค„์—๋Š” ํ•œ ์š”์†Œ๋งŒ ์˜ฌ ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š” ์†์„ฑ์ž…๋‹ˆ๋‹ค.
  • inline
    • ์š”์†Œ๊ฐ€ ํ•œ ์ค„์— ์—ฌ๋Ÿฌ ๊ฐœ ํ‘œ์‹œ ๋  ์ˆ˜ ์žˆ์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ๋งŒ์•ฝ inline์ด ์ ์šฉ๋œ ์š”์†Œ์˜ ์ „ํ›„์— inline ์š”์†Œ๋ฅผ ํ‘œ์‹œํ•  ๊ณต๊ฐ„์ด ์žˆ๋‹ค๋ฉด ํ•œ ์ค„์— ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

์‚ฌ์ง„์˜ div๋“ค์€ ๊ฐ๊ฐ inline, block ์†์„ฑ์„ ์ง€์ •ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ๋ณด์ด๋Š” ๊ฒƒ๊ณผ ๊ฐ™์ด block ์†์„ฑ์˜ ์š”์†Œ๋Š” ํ•œ ์ค„์— ํ•˜๋‚˜๋งŒ ์กด์žฌํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, inline ์†์„ฑ์€ ์ถฉ๋ถ„ํ•œ ๊ณต๊ฐ„์ด ์žˆ์œผ๋ฉด ํ•œ ์ค„์— ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. span๊ณผ pํƒœ๊ทธ์˜ ์ฐจ์ด์™€ ๋น„์Šทํ•ฉ๋‹ˆ๋‹ค.

๋˜ inline์˜ ๊ฒฝ์šฐ์—๋Š” ํฌ๊ธฐ๊ฐ€ ํ•ญ์ƒ ํฌํ•จํ•˜๋Š” ๋‚ด์šฉ์˜ ํฌ๊ธฐ๋งŒํผ๋งŒ์„ ๊ฐ–๊ธฐ ๋•Œ๋ฌธ์—, ๋”ฐ๋กœ width๋‚˜ height๋ฅผ ์ง€์ •ํ•ด๋„ ์ œ์–ด๊ฐ€ ๋ถˆ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ์ œ์˜ inline div๋Š” width: 500%;๋ฅผ ์ง€์ •ํ•œ ์ƒํƒœ์ด์ง€๋งŒ ํฌํ•จํ•œ ํ…์ŠคํŠธ์˜ ํฌ๊ธฐ๋งŒํผ๋งŒ์„ ๊ฐ€์ง‘๋‹ˆ๋‹ค. ํฌ๊ธฐ๋ฅผ ์กฐ์ ˆํ•  ์ˆ˜ ์žˆ์œผ๋ฉด์„œ inline ์†์„ฑ์˜ ํŠน์„ฑ์„ ๊ฐ–๋„๋ก ํ•˜๋Š” inline-block ์†์„ฑ์ด ์กด์žฌํ–ˆ์œผ๋‚˜, ์ด๋Š” ํ˜„์žฌ ๋ ˆ๊ฑฐ์‹œ๋กœ ๋ถ„๋ฅ˜๋˜์–ด inline flow-root๋กœ ๋Œ€์ฒดํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

์•ˆ์ชฝ

์š”์†Œ๊ฐ€ ํฌํ•จํ•˜๋Š” ์ž์‹ ์š”์†Œ๋“ค์˜ ๋ฐฐ์น˜ ๋ฐฉ๋ฒ•์„ ์ •ํ•˜๋Š” ์†์„ฑ์ž…๋‹ˆ๋‹ค. ์ด ์™ธ์—๋„ ์‹คํ—˜์  ๊ธฐ๋Šฅ์œผ๋กœ flow, ruby๊ฐ€ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค.

  • flow-root
    • ์™ธ๋ถ€์— block, ๋‚ด๋ถ€์— float์ด ์ ์šฉ๋œ ๊ฒƒ๊ณผ ๊ฐ™์ด ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.
  • table
    • <table> ํƒœ๊ทธ์˜ ๋‚ด๋ถ€์ธ ๊ฒƒ์ฒ˜๋Ÿผ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.
  • flex
  • grid

๊ถ๊ธˆ์ฆ๋“ค

inline-block์€ ์™œ ๋ ˆ๊ฑฐ์‹œ๊ฐ€ ๋˜์—ˆ์„๊นŒ?

์•ž์—์„œ ์–ธ๊ธ‰ํ–ˆ๋˜ ๋ฐ”์™€ ๊ฐ™์ด inline-block์€ inline flow-root๋กœ ๋Œ€์ฒด๋˜์–ด ๋ ˆ๊ฑฐ์‹œ๋กœ ๋ถ„๋ฅ˜๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€๋งŒ inline flow-root๋ผ๋Š” ์†์„ฑ์€ ๊ต‰์žฅํžˆ ์ƒ์†Œํ•ฉ๋‹ˆ๋‹ค. ์™œ ์ด๋Ÿฐ ์‹์œผ๋กœ ๋ณ€๊ฒฝ๋˜์—ˆ์„๊นŒ์š”?

CSS2๊นŒ์ง€์˜ ์ŠคํŽ™์—์„œ๋Š” display์— ๋‘ ๊ฐœ ์ด์ƒ์˜ ๊ฐ’์„ ์ง€์ •ํ•  ์ˆ˜ ์—†์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋ฐ”๊นฅ์ชฝ์— inline, ์•ˆ์ชฝ์— flex๋ฅผ ์ง€์ •ํ•˜๊ธฐ ์œ„ํ•ด์„œ inline-flex๊ฐ™์€ ๊ฐ’์„ ๋”ฐ๋กœ ์ •ํ•ด ๋‘๊ณ  ์‚ฌ์šฉํ•ด์•ผ ํ–ˆ๋Š”๋ฐ์š”, inline-block ์—ญ์‹œ ๊ทธ๋Ÿฐ ์ผ€์ด์Šค์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‹ค๊ฐ€ CSS3์ด ๋‚˜์˜ค๋ฉด์„œ display์— ๋‘ ๊ฐœ ์ด์ƒ์˜ ๊ฐ’์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜๋ฉด์„œ ์ด๋Ÿฐ ๊ฐ’๋“ค์ด ์‚ฌ๋ผ์ง„ ๊ฒƒ์ด์ฃ .

๊ทธ๋ ‡๋‹ค๊ณ  ํ•ด์„œ ์ด์ œ inline-block์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ด ์ข‹์€ ๊ฒƒ์€ ์•„๋‹ˆ๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. MDN์—์„œ๋Š” display์— ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๊ฐ’์„ ์ง€์ •ํ•˜๋Š” CSS3์˜ ์ŠคํŽ™์— ๋Œ€ํ•ด ์•„๋ž˜์™€ ๊ฐ™์€ ์–ธ๊ธ‰์„ ์ถ”๊ฐ€ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

The Level 3 specification details two values for theย displayย property โ€” enabling the specification of the outer and inner display type explicitly โ€” but this is not yet well-supported by browsers.

์ฆ‰, ์•„์ง ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์™„์ „ํžˆ ํ˜ธํ™˜๋˜๊ณ  ์žˆ์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— deprecated๊ฐ€ ์•„๋‹Œ legacy๋กœ ๋ถ„๋ฅ˜๋œ ๊ฒƒ์ด๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๊ฒ ๋„ค์š”.

visibility: hidden;๊ณผ display: none;์˜ ์ฐจ์ด๋Š”?

visibility: hidden;๊ณผ display: none;์€ ๋‘˜ ๋‹ค ์‚ฌ์šฉ์ž์˜ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์š”์†Œ๋ฅผ ๋ณด์ด์ง€ ์•Š๊ฒŒ ํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. ๊ฐ™์€ ๋™์ž‘์„ ํ•˜๋Š” ์†์„ฑ์ด ๋‘ ๊ฐœ ์”ฉ์ด๋‚˜ ํ•„์š”ํ• ๊นŒ์š”? ๋‘˜์˜ ์ฐจ์ด์ ์€ ํฌ๊ฒŒ ๋‘ ๊ฐ€์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

  • visibility: hidden;์€ ์š”์†Œ๊ฐ€ ์ฐจ์ง€ํ•˜๋Š” ๊ณต๊ฐ„์€ ๋ณด์กด๋œ๋‹ค.
    • display: none;์€ ์•„์˜ˆ ํŽ˜์ด์ง€ ๋‚ด์—์„œ ์š”์†Œ๊ฐ€ ์—†๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๊ฐ„์ฃผํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์„ฑํ•  ๋•Œ์—๋„ ํ•ด๋‹น ์š”์†Œ๋Š” ๊ณ ๋ คํ•˜์ง€ ์•Š๋Š”๋ฐ์š”, ๋ฐ˜๋ฉด visibility: hidden์€ ํ•ด๋‹น ์š”์†Œ๊ฐ€ ์ฐจ์ง€ํ•˜๋Š” ๊ณต๊ฐ„์€ ๊ทธ๋Œ€๋กœ ๋‘” ์ฑ„ ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์„ฑํ•˜๋ฏ€๋กœ, ํ•ด๋‹น ๋ถ€๋ถ„์€ ๋นˆ ๊ณต๊ฐ„์œผ๋กœ ๋‚จ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
  • innerText๋กœ ์ ‘๊ทผํ–ˆ์„ ๋•Œ์˜ ์ฐจ์ด
    Untitled
    • innerText๋กœ ํ…์ŠคํŠธ๋ฅผ ๊ฐ€์ ธ์˜ค๋ฉด ์œ„ ์‚ฌ์ง„๊ณผ ๊ฐ™์ด ์ฐจ์ด๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฒซ ๋ฒˆ์งธ๋Š” ์ผ๋ฐ˜์ ์ธ(๋ณด์ด๋Š”) ์ƒํƒœ์—์„œ, ๋‘ ๋ฒˆ์งธ๋Š” display: none;, ์„ธ ๋ฒˆ์งธ๋Š” visibility: hidden;์„ ์ ์šฉํ•œ ์ƒํƒœ์ž…๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด innerHTML์€ ์…‹ ๋‹ค ๊ฐ™์€ ๊ฒฐ๊ณผ๋ฅผ ๋ƒ…๋‹ˆ๋‹ค.

๋‘ ๋ฐฉ๋ฒ• ์™ธ์—๋„ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์š”์†Œ๋ฅผ ์ˆจ๊ธฐ๋Š” ๋ฐฉ๋ฒ•์€ ์—ฌ๋Ÿฌ ๊ฐ€์ง€๊ฐ€ ์žˆ๋Š”๋ฐ์š”, ๊ด€์‹ฌ์ด ์žˆ์œผ์‹  ๋ถ„์€ ์ ‘๊ทผ์„ฑ ๋ฌธ์ œ๋„ ์—ฎ์—ฌ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— [์ด ํฌ์ŠคํŠธ]๋ฅผ ์ฐธ๊ณ ํ•ด ๋ณด์‹œ๊ธธ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค.

Refs.

display - CSS: Cascading Style Sheets | MDN

CSS Display Module Level 3

์ ‘๊ทผ ๊ฐ€๋Šฅํ•œ ์ˆจ๊น€ ํ…์ŠคํŠธ

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/posts/2023/01/ecmascript/index.html b/posts/2023/01/ecmascript/index.html index ac62afc..1e0f627 100644 --- a/posts/2023/01/ecmascript/index.html +++ b/posts/2023/01/ecmascript/index.html @@ -1,8 +1,9 @@ -ECMAScript | PrayinForRain.dev +ECMAScript | PrayinForRain.dev

ECMAScript

Table of Contents

untitled

Ecma international

Ecma International is an industry association dedicated to the standardization of information and communication systems Emca International์€ ์ •๋ณดํ†ต์‹  ์‹œ์Šคํ…œ์˜ ํ‘œ์ค€ํ™”๋ฅผ ์œ„ํ•œ ๊ตญ์ œ ํ‘œ์ค€ํ™” ๊ธฐ๊ตฌ์ž…๋‹ˆ๋‹ค. > https://www.ecma-international.org/

Ecma International์€ Ecma ์‚ฌ์ดํŠธ์—์„œ ์†Œ๊ฐœํ•˜๋“ฏ, ์ •๋ณดํ†ต์‹  ์‹œ์Šคํ…œ์˜ ํ‘œ์ค€์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ๊ตญ์ œ ๊ธฐ๊ตฌ์ž…๋‹ˆ๋‹ค. C#, JSON, .u3d ํ™•์žฅ์ž ๋“ฑ ์—ฌ๋Ÿฌ ๋ฐฉ๋ฉด์—์„œ์˜ ํ‘œ์ค€์•ˆ์„ ์ œ์‹œํ•˜์˜€์œผ๋ฉฐ, ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ IEEE๊ฐ™์€ ์กด์žฌ๋กœ ์ดํ•ดํ•˜๋ฉด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.(์ œ ์ƒ๊ฐ)

์œ ๋Ÿฝ์—์„œ ์ปดํ“จํ„ฐ ์‹œ์Šคํ…œ์„ ํ‘œ์ค€ํ™”ํ•˜๊ธฐ ์œ„ํ•ด ์„ค๋ฆฝ๋˜์–ด์„œ ECMA(European Computer Manufacturers Association)๋ผ๋Š” ์ด๋ฆ„์„ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋‚˜ ์œ ๋Ÿฝ๊ตญ๊ฐ€ ๋ฟ ์•„๋‹ˆ๋ผ ์ „์„ธ๊ณ„์˜ ํ‘œ์ค€์œผ๋กœ ํ™œ์šฉ๋˜๊ธฐ ์œ„ํ•ด Ecma International๋กœ ์ด๋ฆ„์„ ๋ณ€๊ฒฝํ•˜์˜€์Šต๋‹ˆ๋‹ค. ECMA ์ž์ฒด๋Š” ๋‘๋ฌธ์ž์–ด์ด์ง€๋งŒ ์ง€๊ธˆ์˜ ์ด๋ฆ„์€ ํ•˜๋‚˜์˜ ๊ณ ์œ ๋ช…์‚ฌ๋กœ ์‚ฌ์šฉ๋˜๋Š” ์…ˆ์ด์ฃ . ๋”ฐ๋ผ์„œ Ecma๋กœ ํ‘œ๊ธฐํ•˜๋Š” ๊ฒƒ์ด ๋งž์Šต๋‹ˆ๋‹ค.

Ecma๊ฐ€ ์ •์˜ํ•œ ํ‘œ์ค€์— ๋Œ€ํ•ด์„œ๋Š” ์•„๋ž˜ ๋งํฌ์—์„œ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Standards - Ecma International

ECMAScript

ECMA์Šคํฌ๋ฆฝํŠธ๋ž€ ์•ž์—์„œ ์„ค๋ช…ํ•œ Ecma ์ธํ„ฐ๋‚ด์…”๋„์ด ์ •์˜ํ•˜๋Š” ์Šคํฌ๋ฆฝํŠธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด(โ‰’์ธํ„ฐํ”„๋ฆฌํ„ฐ ์–ธ์–ด) ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด ์–ธ์–ด๋Š” ๊ณง ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ฐ€๋ฆฌํ‚ต๋‹ˆ๋‹ค. ์ฆ‰ ECMAScript(ECMA-262)์— ์˜ํ•ด ํ‘œ์ค€ํ™”๋œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ด๋ฆ„์ž…๋‹ˆ๋‹ค.

์–ผ๋งˆ ์ „์— ๋ฉด์ ‘์—์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ECMAScript์˜ ํ‘œ์ค€์„ ์ค€์ˆ˜ํ•œ ์–ธ์–ด๋ผ๊ณ  ์ด์•ผ๊ธฐํ–ˆ๋Š”๋ฐ, ์ด๋Š” ํ‹€๋ฆฐ ํ‘œํ˜„์ž…๋‹ˆ๋‹ค. ์ด๋ฅผ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์—ญ์‚ฌ์— ๋Œ€ํ•ด ์ดํ•ดํ•  ํ•„์š”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํƒ„์ƒ

untitled

๋„ท์Šค์ผ€์ดํ”„๋ฅผ ์•„์‹œ๋‚˜์š”? Internet Explorer๊ฐ€ ์„ธ์ƒ์„ ์ง€๋ฐฐํ•˜๊ธฐ ์ „์— ์ฃผ๋กœ ์‚ฌ์šฉ๋˜์—ˆ๋˜ ์ธํ„ฐ๋„ท ๋ธŒ๋ผ์šฐ์ €์ž…๋‹ˆ๋‹ค. ์ง€๊ธˆ์€ ํŒŒ์ด์–ดํญ์Šค๊ฐ€ ๋„ท์Šค์ผ€์ดํ”„์˜ ์—ญ์‚ฌ๋ฅผ ์ด์–ด๊ฐ€๊ณ  ์žˆ๋Š”๋ฐ์š”, ๋‹น์‹œ ์œ ๋ฃŒ์˜€๋˜ ๋„ท์Šค์ผ€์ดํ”„๋Š” ๋ฌด๋ฃŒ๋กœ ๋งˆ๊ตฌ๋งˆ๊ตฌ ๋ฐฐํฌ๋˜๋Š” IE์—๊ฒŒ ๋ฐ€๋ ค๋‚˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

์šฐ๋ฆฌ๊ฐ€ ์•Œ๊ณ  ์žˆ๋Š” ๋ฐ”์™€ ๊ฐ™์ด HTML๊ณผ CSS๋งŒ์œผ๋กœ ์›นํŽ˜์ด์ง€๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ๋ฐ์—๋Š” ๋ช…ํ™•ํ•œ ์ œํ•œ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋™์ ์ธ ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์—†๋‹ค๋Š” ์ ์ด์ฃ . ์ด๋Ÿฌํ•œ ํ•œ๊ณ„๋ฅผ ๊ทน๋ณตํ•˜๊ธฐ ์œ„ํ•ด ๋„ท์Šค์ผ€์ดํ”„๋Š” 1995๋…„, ๊ฐ„๋‹จํ•œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋ฅผ ๋„์ž…ํ•˜๊ธฐ๋กœ ํ–ˆ๊ณ , ์ด ๊ฒƒ์ด ๋ธŒ๋ Œ๋˜ ์•„์ดํฌ๊ฐ€ ๊ฐœ๋ฐœํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ „์‹ , ๋ชจ์นด(Mocha)์ž…๋‹ˆ๋‹ค. ๋ชจ์นด์˜ ์ด๋ฆ„์€ LiveScript๋ฅผ ๊ฑฐ์ณ ์ง€๊ธˆ์˜ JavaScript๊ฐ€ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋‹น์‹œ ์œ ํ–‰ํ•œ Java์™€ ๋ฌธ๋ฒ•์ด ๋น„์Šทํ•˜๋‹ค๋Š” ์ ์„ ๊ฐ•์กฐํ•˜์—ฌ ๋งˆ์ผ€ํŒ… ์ „๋žต์„ ์„ธ์šด ๊ฒƒ์ด์ฃ .

JScript์˜ ๋“ฑ์žฅ๊ณผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํŒŒํŽธํ™”

๊ทธ ์ดํ›„ 1996๋…„์— ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ ์—ญ์‹œ IE์—์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ง€์›ํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‹จ์ˆœ ์ง€์› ๋ฟ ์•„๋‹ˆ๋ผ IE๋งŒ์˜ ๋…์ž์ ์ธ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•ด์„œ ๋น„์Šทํ•˜์ง€๋งŒ ์ฐจ์ด๊ฐ€ ์žˆ๋Š” ์–ธ์–ด๋ฅผ ๊ตฌํ˜„ํ–ˆ์ฃ . ์ด ์–ธ์–ด๋Š” JScript๋ผ๊ณ  ๋ถ€๋ฅด๊ณ , ๊ฐ€์žฅ ํฐ ํŠน์ง•์œผ๋กœ๋Š” ์œˆ๋„์šฐ์— ์ข…์†์ ์ด๋ฉฐ ์•…๋ช…๋†’์€ ActiveX๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋ฐ˜์ด ๋œ๋‹ค๋Š” ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค. JavaScript์™€ ํ˜ธํ™˜์ด ๋˜์ง€ ์•Š๋Š” ๊ฒƒ์€ ์•„๋‹ˆ์ง€๋งŒ ๊ทธ๋ ‡๋‹ค๊ณ  ์™„์ „ํ•˜๊ฒŒ ์ง€์›ํ•˜๋Š” ๊ฒƒ์€ ๋˜ ์•„๋‹ˆ์˜€์Šต๋‹ˆ๋‹ค.

JavaScript์™€ JScript์˜ ์ฐจ์ด๊ฐ€ ์ƒ๊ธฐ๋ฉด์„œ, ์‚ฌ์šฉ์ž๋Š” ํ™˜๊ฒฝ์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋ฅผ ๋ณด๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง• ์ด์Šˆ๊ฐ€ ์ƒ๊ฒจ๋‚œ ๊ฒƒ์ด์ฃ . ๋”๊ตฐ๋‹ค๋‚˜ ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ์˜ ๊ณต๊ฒฉ์ ์ธ ๋งˆ์ผ€ํŒ… ์ „๋žต์œผ๋กœ ์ธํ•ด JScript์˜ ์ ์œ ์œจ์€ ์ ์  ๋†’์•„์ง€๊ณ  ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ํŒŒํŽธํ™” ๋ฌธ์ œ๊ฐ€ ์ ์  ์‹ฌํ™”๋˜์ž ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ๊ฐ™์€ ๊ฒฐ๊ณผ๋ฌผ์„ ๋ณด์—ฌ์ฃผ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ‘œ์ค€์ด ํ•„์š”ํ•ด์กŒ์Šต๋‹ˆ๋‹ค. ์ด์— ๋”ฐ๋ผ ๋„ท์Šค์ผ€์ดํ”„๋Š” Ecma International(๋‹น์‹œ ECMA)์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ‘œ์ค€ํ™”๋ฅผ ์š”์ฒญํ•˜์˜€๊ณ , ๊ทธ๋ ‡๊ฒŒ ECMA-262๋ผ๋Š” ํ‘œ์ค€์ด ํƒ„์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.

์ฆ‰, JavaScript๊ฐ€ ์ƒ๊ฒจ๋‚˜๊ณ , ํŒŒํŽธํ™” ํ˜„์ƒ์ด ์ผ์–ด๋‚˜์ž ์ด๋ฅผ ํ‘œ์ค€ํ™”ํ•˜๊ธฐ ์œ„ํ•ด ECMAScript๊ฐ€ ๋“ฑ์žฅํ•œ ๊ฒƒ์ด๋ผ๊ณ  ์š”์•ฝํ•  ์ˆ˜ ์žˆ๊ฒ ์Šต๋‹ˆ๋‹ค.

ECMAScript ๋ณ€์ฒœ์‚ฌ

ECMAScript๋Š” ์ง€๊ธˆ์— ์™€์„œ๋Š” ๊ฑฐ์˜ ๋งค ๋…„ ์ƒˆ ๋ฒ„์ „์ด ๋ฐฐํฌ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. 2015๋…„๊นŒ์ง€๋Š” ES6์™€ ๊ฐ™์€ ๋„ค์ด๋ฐ์„ ์‚ฌ์šฉํ–ˆ์ง€๋งŒ, ๋ฐฐํฌ ์ฃผ๊ธฐ๊ฐ€ ์—ฐ๋‹จ์œ„๋กœ ๋นจ๋ผ์ง€๋Š” ์ƒํ™ฉ์— ๋งž์ถ”์–ด ES2020๊ณผ ๊ฐ™์€ ๋„ค์ด๋ฐ์„ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋„˜๋ฒ„๋ง์€ ๋Œ€์ถฉ ES6 = ES2015์ดํ›„๋กœ 1๋…„์— 1์”ฉ ๋ฒ„์ „์ด ์˜ค๋ฅธ๋‹ค๊ณ  ์•Œ๊ณ  ๊ณ„์‹œ๋ฉด ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค.

ํŒ์ถœํŒ์ผ์ด๋ฆ„์ด์ „ ํŒ๊ณผ์˜ ์ฐจ์ด์ 
11997๋…„ 6์›”์ดˆํŒ
21998๋…„ 6์›”ISO/IEC 16262 ๊ตญ์ œ ํ‘œ์ค€๊ณผ ์™„์ „ํžˆ ๋™์ผํ•œ ๊ทœ๊ฒฉ์„ ์ ์šฉํ•˜๊ธฐ ์œ„ํ•œ ๋ณ€๊ฒฝ.
31999๋…„ 12์›”๊ฐ•๋ ฅํ•œ ์ •๊ทœ ํ‘œํ˜„์‹, ํ–ฅ์ƒ๋œ ๋ฌธ์ž์—ด ์ฒ˜๋ฆฌ, ์ƒˆ๋กœ์šด ์ œ์–ด๋ฌธ , try/catch ์˜ˆ์™ธ ์ฒ˜๋ฆฌ, ์—„๊ฒฉํ•œ ์˜ค๋ฅ˜ ์ •์˜, ์ˆ˜์น˜ํ˜• ์ถœ๋ ฅ์˜ ํฌ๋งคํŒ… ๋“ฑ.
4๋ฒ„๋ ค์ง4๋ฒˆ์งธ ํŒ์€ ์–ธ์–ด์— ์–ฝํžŒ ์ •์น˜์  ์ฐจ์ด๋กœ ์ธํ•ด ๋ฒ„๋ ค์กŒ๋‹ค. ์ด ํŒ์„ ์ž‘์—… ๊ฐ€์šด๋ฐ ์ผ๋ถ€๋Š” 5๋ฒˆ์งธ ํŒ์„ ์ด๋ฃจ๋Š” ๊ธฐ๋ณธ์ด ๋˜๊ณ  ๋‹ค๋ฅธ ์ผ๋ถ€๋Š” ECMA์Šคํฌ๋ฆฝํŠธ์˜ ๊ธฐ๋ณธ์„ ์ด๋ฃจ๊ณ  ์žˆ๋‹ค.
52009๋…„ 12์›”๋” ์ฒ ์ €ํ•œ ์˜ค๋ฅ˜ ๊ฒ€์‚ฌ๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์˜ค๋ฅ˜ ๊ฒฝํ–ฅ์ด ์žˆ๋Š” ๊ตฌ์กฐ๋ฅผ ํ”ผํ•˜๋Š” ํ•˜๋ถ€์ง‘ํ•ฉ์ธ “strict mode"๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค. 3๋ฒˆ์งธ ํŒ์˜ ๊ทœ๊ฒฉ์— ์žˆ๋˜ ์ˆ˜๋งŽ์€ ์• ๋งคํ•œ ๋ถ€๋ถ„์„ ๋ช…ํ™•ํžˆ ํ•œ๋‹ค.
5.12011๋…„ 6์›”ECMA์Šคํฌ๋ฆฝํŠธ ํ‘œ์ค€์˜ ์ œ 5.1ํŒ์€ ISO/IEC 16262:2011 ๊ตญ์ œ ํ‘œ์ค€ ์ œ3ํŒ๊ณผ ํ•จ๊ป˜ ํ•œ๋‹ค.
62015๋…„ 6์›”ECMAScript 2015 (ES2015)6ํŒ์—๋Š” ํด๋ž˜์Šค์™€ ๋ชจ๋“ˆ ๊ฐ™์€ ๋ณต์žกํ•œ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์„ ์ž‘์„ฑํ•˜๊ธฐ ์œ„ํ•œ ์ƒˆ๋กœ์šด ๋ฌธ๋ฒ•์ด ์ถ”๊ฐ€๋˜์—ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด๋Ÿฌํ•œ ๋ฌธ๋ฒ•์˜ ์˜๋ฏธ๋Š” 5ํŒ์˜ strict mode์™€ ๊ฐ™์€ ๋ฐฉ๋ฒ•์œผ๋กœ ์ •์˜๋œ๋‹ค. ์ด ํŒ์€ “ECMAScript Harmony” ํ˜น์€ “ES6 Harmony” ๋“ฑ์œผ๋กœ ๋ถˆ๋ฆฌ๊ธฐ๋„ ํ•œ๋‹ค.
72016๋…„ 6์›”ECMAScript 2016 (ES2016)์ œ๊ณฑ์—ฐ์‚ฐ์ž ์ถ”๊ฐ€, Array.prototype.includes
82017๋…„ 6์›”ECMAScript 2017 (ES2017)ํ•จ์ˆ˜ ํ‘œํ˜„์‹์˜ ์ธ์ž์—์„œ trailing commas ํ—ˆ์šฉ, Object values/entries ๋ฉ”์†Œ๋“œ, async/await ๋“ฑ.
92018๋…„ 6์›”ECMAScript 2018 (ES2018)Promise.finally, Async iteration, object rest/spread property ๋“ฑ.
102019๋…„ 6์›”ECMAScript 2019 (ES2019)Object.fromEntries, flat, flatMap, Symbol.description, optional catch ๋“ฑ.

๊ถ๊ธˆ์ฆ๋“ค

CommonJS๋Š” ๋ฌด์—‡์ผ๊นŒ?

์ง€๊ธˆ๊นŒ์ง€ ์ด์•ผ๊ธฐํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋ชจ๋‘ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ ํ‘œ์ค€์ด์˜€์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์šฐ๋ฆฌ๋Š” ์ง€๊ธˆ ๋ธŒ๋ผ์šฐ์ € ์—†์ด๋„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ธŒ๋ผ์šฐ์ € ๋ฐ–์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ ๋…ผ์˜๊ฐ€ ๊ณ„์†ํ•ด์„œ ์ด๋ฃจ์–ด์กŒ๊ณ , ์ด๋ฅผ ์œ„ํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ชจ๋“ˆํ™”ํ•  ์ˆ˜ ์žˆ๋Š” ํ‘œ์ค€์ด ์ œ์‹œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ฒƒ์ด CommonJS์ด๊ณ , ์ด๋ฅผ ์ด์šฉํ•ด ๋งŒ๋“ค์–ด์ง„ ๊ฒƒ์ด Node.js์ž…๋‹ˆ๋‹ค.

์•„.. ๋ณต์žกํ•ด์š” ์•„๋ž˜ ๊ธ€ ์ข‹์€ ๊ฒƒ ๊ฐ™์•„์š”.. ๋‚˜์ค‘์— ๋” ์ฐพ์•„๋ณด๊ณ  ์ •๋ฆฌํ• ๊ฒŒ์š”.. ๊ทผ๋ฐ ์‚ฌ์‹ค ์ด๊ฒŒ ๋‹ค๋ผ์„œ ๋” ์ •๋ฆฌํ•ด์•ผ ํ•  ๋‚ด์šฉ์ด ์žˆ๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ์–ด์š”. ES๋„ ๋ชจ๋“ˆํ™”๋ฅผ ์ฑ™๊ธฐ๊ธฐ ์œ„ํ•ด ESM์ด๋ผ๋Š” ํ‘œ์ค€์ด ์žˆ๋‹ค๋Š” ๊ฒƒ ์ •๋„?

[ JavaScript ] ES Modules ์ •๋ฆฌํ•˜๊ธฐ

Refs.

Ecma ์ธํ„ฐ๋‚ด์…”๋„ - ์œ„ํ‚ค๋ฐฑ๊ณผ
Ecma International
Introduction | PoiemaWeb
CommonJS
ES5 to ES6+
ECMAScript ์ŠคํŽ™ ์ฝ๋Š”๋ฒ•

\ No newline at end of file +Hugo. + \ 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 9a2e212..c9356a8 100644 --- a/posts/2023/01/migrating-to-hugo/index.html +++ b/posts/2023/01/migrating-to-hugo/index.html @@ -1,4 +1,4 @@ -Hugo๋กœ ๋ธ”๋กœ๊ทธ๋ฅผ ์˜ฎ๊ธฐ์ž | PrayinForRain.dev +Hugo๋กœ ๋ธ”๋กœ๊ทธ๋ฅผ ์˜ฎ๊ธฐ์ž | PrayinForRain.dev

Hugo๋กœ ๋ธ”๋กœ๊ทธ๋ฅผ ์˜ฎ๊ธฐ์ž

Table of Contents

์•Œ์Œ์•Œ์Œ ํ‹ฐ์Šคํ‘ผ ๊ณต์‚ฌ๋กœ ํ‹ฐ์Šคํ† ๋ฆฌ์—์„œ ์ด ๊ณณ์œผ๋กœ ๋ธ”๋กœ๊ทธ๋ฅผ ์˜ฎ๊ฒผ์Šต๋‹ˆ๋‹ค. ํ‹ฐ์Šคํ† ๋ฆฌ์— ์žˆ๋˜ ์ปจํ…์ธ  ๋Œ€๋ถ€๋ถ„์€ ์˜ฎ๊ธฐ์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๋ณ„ ์˜๋ฏธ๋„ ์—†๊ณ  ๋„ˆ๋ฌด ์‚ฌ์ ์ธ ๋‚ด์šฉ์ด ๋งŽ์•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๋˜ ํ‹ฐ์Šคํ† ๋ฆฌ๋งŒ์˜ ๊ฐ์„ฑ์ด๋ผ๊ณ  ํ•ด์•ผ ํ•˜๋‚˜.. ์•ฝ๊ฐ„ ๊ทธ ๊ณณ์— ๋” ๋งž๋Š” ํฌ์ธํŠธ๋“ค์ด ์žˆ์–ด์„œ ์•„์นด์ด๋ธŒ๊ฐ™์€ ๋Š๋‚Œ์œผ๋กœ ๊ทธ๋ƒฅ ํ‹ฐ์Šคํ† ๋ฆฌ์— ๋‘๊ธฐ๋กœ ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ณณ๊ณณ์— ํ‹ฐ์Šคํ† ๋ฆฌ ๋งํฌ๊ฐ€ ์žˆ์œผ๋‹ˆ ์‹œ๊ฐ„์„ ํšจ์œจ์ ์œผ๋กœ ๋ฒ„๋ฆฌ๊ณ  ์‹ถ์€ ๋ถ„์ด ์žˆ๋‹ค๋ฉด ์ฝ์–ด์ฃผ์…”๋„ ๊ฐ์‚ฌํ•  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. @@ -6,4 +6,5 @@ ๊ทธ๋Ÿฐ ์ƒํ™ฉ์ด ์ƒ๊ธฐ๋ฉด ์•ˆ๋˜๋‹ˆ ์ต๋ช… ๋Œ“๊ธ€ ๊ธฐ๋Šฅ์ด ํ•„์š”ํ•œ๋ฐ SSG ํŠน์„ฑ์ƒ ๊ทธ๊ฒŒ ์–ด๋ ต์Šต๋‹ˆ๋‹ค. ๋‚˜์ค‘์— Firebase๋ฅผ ์ด์šฉํ•ด์„œ ์—ฐ๋™ํ•  ์ˆ˜๋„ ์žˆ์„ ๊ฒƒ ๊ฐ™์€๋ฐ.. ๋‚˜์ค‘์— ์ œ๊ฐ€ ์ง์ ‘ Next.js๋กœ ๋ธ”๋กœ๊ทธ๋ฅผ ๋งŒ๋“ค๋ฉด ๊ผญ ๋ฐ˜์˜ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๋ฐฉ๋Œ€ํ•˜์ง€๋งŒ ์–ด๋”˜๊ฐ€ ๋‚˜์‚ฌ๋น ์ง„ ํ…Œ๋งˆ

์ œ๊ฐ€ ์“ฐ๊ณ  ์žˆ๋Š” Jane์ด๋ผ๋Š” ํ…Œ๋งˆ๋Š” ๊ธฐ๋ณธ์ด ๊ฝค ์ถฉ์‹คํ•ฉ๋‹ˆ๋‹ค. ๋ ˆ์ด์•„์›ƒ์˜ ๋ณ€๊ฒฝ์„ ๊ฑฐ์˜ ๊ฑฐ์น˜์ง€ ์•Š๊ณ  ์‚ฌ์šฉ ์ค‘์ธ๋ฐ, ์ด ๋…€์„์˜ Quick Start ๋ฌธ์„œ๋ฅผ ๋”ฐ๋ผํ•˜๋‹ˆ ๋นŒ๋“œ๋œ ๊ฒฐ๊ณผ๋ฌผ ํŒŒ์ผ์ด ignore๋˜์ง€ ์•Š๋Š”๋‹ค๋˜๊ฐ€, ํŽ˜์ด์ง€๋„ค์ด์…˜์„ ์œ„ํ•œ ๋ฒ„ํŠผ๋“ค์˜ ์ •๋ ฌ์ด๋‚˜ ํฌ๊ธฐ๊ฐ€ ์ œ๊ฐ๊ฐ์ด๋ผ๋˜๊ฐ€, ์ดํ•ด ๋ถˆ๊ฐ€๋Šฅํ•œ ์ผ๋ถ€ ํด๋” ๊ตฌ์กฐ๋ผ๋˜๊ฐ€.. ์ž”์ˆ˜์ •์„ ์ •๋ง์ •๋ง ๋งŽ์ด ํ–ˆ์Šต๋‹ˆ๋‹ค.

TOC์˜ ๋ฌธ์ œ

image

์™œ ํŠน์ • depth๋งŒ ํŒŒ๋ž—๊ฒŒ ์น ํ•˜๋Š”์ง€..

์Šคํฌ๋กค์„ ๋‚ด๋ฆฌ๋ฉด ์šฐ์ธก์— Floating TOC(Table of Contents)๊ฐ€ ํ‘œ์‹œ๋˜๋Š”๋ฐ, ์ด ๋…€์„์ด ๋ฌธ์ œ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค. ์ƒ๊ธด ๊ฒƒ๋„ ์กฐ๊ธˆ ๋ฌธ์ œ๊ณ , h2 ๋‚ด์ง€๋Š” h3 ํƒœ๊ทธ๋งŒ ํŒŒ์‹ฑํ•˜๋Š” ๋ชจ์–‘์ž…๋‹ˆ๋‹ค. h1๋„ ์•ˆ๋˜๊ณ , ๋” ๊นŠ์–ด๋„ ๋ชฉ์ฐจ์— ๋‚˜์˜ค์ง€ ์•Š์Šต๋‹ˆ๋‹ค. h1์€ ์ฐพ์•„๋ณด๋‹ˆ Hugo ์—”์ง„์ด ๊ณ ์˜์ ์œผ๋กœ ๊ทธ๋ ‡๊ฒŒ ๊ตฌํ˜„ํ•œ ๋ชจ์–‘์ธ๋ฐ, ๋” ๊นŠ์ด๋Š” ์™œ ์•ˆ๋˜๋Š”์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ผญ ๋„ฃ๊ณ  ์‹ถ์€ ๊ธฐ๋Šฅ์ด์—ˆ๋Š”๋ฐ ๋„ˆ๋ฌด ๋ชป์ƒ๊ธฐ๊ณ  ์ž‘๋™๋ฐฉ์‹์ด ๋ณ„๋กœ์—ฌ์„œ ๋ˆˆ๋ฌผ์„ ๋จธ๊ธˆ๊ณ  ํ•˜๋ฃจ์˜ ์ˆ˜์ •์‚ฌํ•ญ์„ ๋ชจ๋‘ ๋‚ ๋ ธ์Šต๋‹ˆ๋‹ค.

์•ž์œผ๋กœ์˜ ๊ณ„ํš

image

์Œํ‰ํ•œ ์•ผ๋ง์ด ๋‹ด๊ธด ์š”๊ตฌ์‚ฌํ•ญ ๋ฆฌ์ŠคํŠธ

์šฐ์„ ์€ ์ง€๊ธˆ๊นŒ์ง€ ์ˆ˜์ •ํ•œ ํ…Œ๋งˆ๊ฐ€ ์•„๊น๊ธฐ๋„ ํ•˜๊ณ , ์—„์ฒญ ํ‰์•…ํ•œ ์ˆ˜์ค€์˜ ๋ชป์ƒ๊น€์€ ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์—, ์ผ๋‹จ ์ด๋Œ€๋กœ ์‚ฌ์šฉํ•˜๊ธฐ๋กœ ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€๋งŒ ๋‹ค์Œ ๋ธ”๋กœ๊ทธ๋กœ ๊ฐˆ์•„ํƒˆ ์ค€๋น„๊ฐ€ ๋˜๋ฉด ์ฃผ์ €ํ•˜์ง€ ์•Š์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. Gatsby๋ฅผ ์“ธ ๊ฒƒ์ธ์ง€๋Š” ์ž˜ ๋ชจ๋ฅด๊ฒ ๊ณ , ์–ธ์  ๊ฐ€ ์ง์ ‘ ๋ธ”๋กœ๊ทธ ์—”์ง„์„ ๋งŒ๋“ค์–ด ๋ณผ ์ƒ๊ฐ์€ ์žˆ์Šต๋‹ˆ๋‹ค. ์•ž์„œ ๋งํ•œ ์ต๋ช… ๋Œ“๊ธ€ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด์„œ๋ผ๋‘์š”. ๊ทธ๋Ÿฌ๋ ค๋ฉด ์—„์ฒญ ๊ณต๋ถ€๋ฅผ ๋งŽ์ด ํ•ด์•ผ ํ•  ๊ฒƒ ๊ฐ™๋„ค์š”.. ์ฃผ๋ณ€ ๋ถ„๋“ค์—๊ฒ 5๋…„ ๊ณ„ํš์ด๋ผ๊ณ  ๋งํ–ˆ๋Š”๋ฐ ์ข€ ๋” ๊ธธ๊ฒŒ ๋ถ€๋ฅผ ๊ฑธ ๊ทธ๋žฌ์Šต๋‹ˆ๋‹ค.

Refs.

Site Generators - A List of Static Site Generators for Jamstack Sites
ํœด๊ณ  ๋ธ”๋กœ๊ทธ ๋งŒ๋“ค๊ธฐ
React ๊ธฐ๋ฐ˜ Gatsby๋กœ ๊ธฐ์ˆ  ๋ธ”๋กœ๊ทธ ๊ฐœ๋ฐœํ•˜๊ธฐ
๊ทธ๋ฆฌ๊ณ .. ์ €์˜ ๋œฌ๊ธˆ์—†๊ณ  ๊น๊นํ•œ ์งˆ๋ฌธ์— ์นœ์ ˆํ•˜๊ฒŒ ๋‹ตํ•ด์ฃผ์‹  @wcho21๋‹˜, ์–ธ์ œ๋‚˜ ๋ธ”๋กœ๊ทธ์— ์žˆ์–ด์„œ ํ”„๋กœ ๋งˆ์ธ๋“œ์ด์‹  @kasterra๋‹˜๊ป˜ ๊ฐ์‚ฌ ์ธ์‚ฌ ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

\ No newline at end of file +Hugo. + \ 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 118098a..1fccd90 100644 --- a/posts/2023/01/size-units-in-css/index.html +++ b/posts/2023/01/size-units-in-css/index.html @@ -1,4 +1,4 @@ -CSS์˜ ํฌ๊ธฐ ๋‹จ์œ„ | PrayinForRain.dev +CSS์˜ ํฌ๊ธฐ ๋‹จ์œ„ | PrayinForRain.dev

CSS์˜ ํฌ๊ธฐ ๋‹จ์œ„

Table of Contents

CSS์˜ ํฌ๊ธฐ ๋‹จ์œ„

Untitled

CSS์—๋Š” ๋‹ค์–‘ํ•œ ๋‹จ์œ„๊ฐ€ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ์ž˜ ์•„๋Š” px์™€ %๋ถ€ํ„ฐ, em, rem, pt, vh, vw ๋“ฑ๋“ฑ ๋‹ค์–‘ํ•œ ๋‹จ์œ„๊ฐ€ ์กด์žฌํ•˜๋Š”๋ฐ์š”, ์ด ํฌ๊ธฐ ๋‹จ์œ„๋“ค์„ ์–ธ์ œ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•˜๋ฉด ์ข‹์„์ง€์— ๋Œ€ํ•ด ์ •๋ฆฌํ•ด ๋ณด์•˜์Šต๋‹ˆ๋‹ค.

์ƒ๋Œ€ ๋‹จ์œ„์™€ ์ ˆ๋Œ€ ๋‹จ์œ„

px๊ณผ %๋ฅผ ๋จผ์ € ๋น„๊ตํ•ด ๋ณด๋ฉด, px์€ ์šฐ๋ฆฌ๊ฐ€ ์•Œ๊ณ  ์žˆ๋Š” ์ปดํ“จํ„ฐ ํ™”๋ฉด์˜ 1ํ”ฝ์…€์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ์–ด๋Š ํ™”๋ฉด์—์„œ๋‚˜ ๊ฐ™์€ ํฌ๊ธฐ๋ฅผ ๋‚˜ํƒ€๋‚ด๋ฏ€๋กœ ์ ˆ๋Œ€ ๋‹จ์œ„์— ํ•ด๋‹นํ•ฉ๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด %๋Š” ๋ณดํ†ต ๋ถ€๋ชจ element์˜ ํฌ๊ธฐ๋ฅผ ์ƒ์†๋ฐ›์•„ ๊ทธ์˜ ์ •ํ•ด์ง„ ๋น„์œจ๋งŒํผ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ์ฆ‰ width: 10px;์ธ ๋ถ€๋ชจ๋ฅผ ๊ฐ€์ง„ element์— width: 50%;๋ฅผ ์ฃผ๋ฉด 5px์ด ๋˜๊ฒ ์ฃ . ์ด๋ ‡๊ฒŒ ์ƒํ™ฉ์— ๋”ฐ๋ผ์„œ ๋‹ค๋ฅธ ๊ฐ’์„ ๊ฐ–๋Š” ๋‹จ์œ„๋ฅผ ์ƒ๋Œ€ ๋‹จ์œ„๋ผ๊ณ  ๋ถ€๋ฆ…๋‹ˆ๋‹ค.

์ ˆ๋Œ€ ๋‹จ์œ„

์ ˆ๋Œ€ ๋‹จ์œ„๋Š” ์ธ์น˜์— ํ•ด๋‹นํ•˜๋Š” in์„ ๊ธฐ์ค€์œผ๋กœ MDN์— ์ •์˜๋˜์–ด ์žˆ์œผ๋ฉฐ, ํŽธ์˜์ƒ ์›น์—์„œ ๊ฐ€์žฅ ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ๋‹จ์œ„์ธ px์„ ๊ธฐ์ค€์œผ๋กœ ๋‹ค์‹œ ๊ณ„์‚ฐํ•˜์˜€์Šต๋‹ˆ๋‹ค.

๋‹จ์œ„์ด๋ฆ„ํฌ๊ธฐ
in์ธ์น˜1in = 2.54cm = 96px
pxํ”ฝ์…€96px = 1in
ptํฌ์ธํŠธ3pt = 4px
1pt = 1.33px
cm์„ผํ‹ฐ๋ฏธํ„ฐ1cm = 96px/2.54 = 37.795โ€ฆpx
mm๋ฐ€๋ฆฌ๋ฏธํ„ฐ1mm = 96px/25.4 = 3.7795โ€ฆpx
Q1/4 mm(quater)1Q = 96px/25.4/4 = 0.94488..px
pcPicas
(ํŒŒ์ด์นด ๋ผ๊ณ  ๋ถ€๋ฅด๋Š” ๋‹จ์œ„)1pc = 16px

์ƒ๋Œ€ ๋‹จ์œ„

์ƒ๋Œ€ ๋‹จ์œ„๋Š” ๋ถ€๋ชจ ์š”์†Œ๋‚˜ viewport ํฌ๊ธฐ ๋“ฑ์— ๋น„๋ก€ํ•œ ๊ธธ์ด๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๋‹จ์œ„๋กœ, ํ™”๋ฉด ํฌ๊ธฐ์— ๋งž์ถ”์–ด ๊ฐ ์š”์†Œ๊ฐ€ ๋น„์œจ์„ ๋งž์ถ”์–ด ๊ณต๊ฐ„์„ ์ฐจ์ง€ํ•˜๋„๋ก ์กฐ์ ˆํ•  ์ˆ˜ ์žˆ๋Š” ์œ ์šฉํ•œ ๋‹จ์œ„์ž…๋‹ˆ๋‹ค.

๋‹จ์œ„์„ค๋ช…
em์š”์†Œ์˜ ๊ธ€๊ผด ํฌ๊ธฐ
ex์š”์†Œ ๊ธ€๊ผด์˜ x-height(๋Œ€์ถฉ ์†Œ๋ฌธ์ž๊ฐ€ ์ฐจ์ง€ํ•˜๋Š” ๋†’์ด)
ch์š”์†Œ ๊ธ€๊ผด์˜ glyph โ€œ0โ€์˜ ์‚ฌ์ „ ๊ธธ์ด(๋„ˆ๋น„); ์ฆ‰ ์š”์†Œ์˜ ๊ธ€๊ผด์—์„œ 0์ด ์ฐจ์ง€ํ•˜๋Š” width
rem๋ฃจํŠธ ์š”์†Œ์˜ ๊ธ€๊ผด ํฌ๊ธฐ
lh์š”์†Œ์˜ ๋ผ์ธ ๋†’์ด
vwviewport width์˜ ํผ์„ผํŠธ ๋น„์œจ
vhviewport height์˜ ํผ์„ผํŠธ ๋น„์œจ
vmaxvw, vh ์ค‘ ํฐ ์ชฝ
vminvw, vh ์ค‘ ์ž‘์€ ์ชฝ

em, rem, vw, vh๋Š” ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ๋‹จ์œ„์ด๋‹ˆ ๊ฐ๊ฐ์„ ์ตํ˜€ ๋‘๋Š” ๊ฒƒ์ด ์ข‹์•„ ๋ณด์ž…๋‹ˆ๋‹ค.

em๊ณผ rem

em์€ ํ˜„์žฌ ์š”์†Œ์˜ ๊ธ€๊ผด ํฌ๊ธฐ๋ฅผ ์ฐธ์กฐํ•œ๋‹ค. ์ฆ‰ ํ˜„์žฌ ์š”์†Œ์˜ ๊ธ€๊ผด ํฌ๊ธฐ๊ฐ€ 10px์ธ ์š”์†Œ์˜ 1em์€ 10px์ด ๋ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ์ด์šฉํ•ด h๋‚˜ emํƒœ๊ทธ๊ฐ™์€ ๊ฐ•์กฐ ํƒœ๊ทธ์˜ ๊ธ€๊ผด ํฌ๊ธฐ๋ฅผ ์ƒ๋Œ€์ ์œผ๋กœ ์กฐ์ ˆํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

rem์€ ๋ฌธ์„œ์˜ ์ตœ์ƒ์œ„ ๋…ธ๋“œ์˜ font-size ๊ฐ’์„ ์ฐธ์กฐํ•ฉ๋‹ˆ๋‹ค. ๊ทธ ์™ธ์—๋Š” em๊ณผ ๊ฐ™์€ ์‹์œผ๋กœ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค. HTML ๋ฌธ์„œ์—์„œ์˜ ์ตœ์ƒ์œ„ ๋…ธ๋“œ๋Š” <html> ํƒœ๊ทธ์ด๋ฏ€๋กœ ์ด ์š”์†Œ์˜ font-size ๊ฐ’์ด ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๊ถ๊ธˆ์ฆ๋“ค

1cm๋Š” ์ •๋ง 1 ์„ผํ‹ฐ๋ฏธํ„ฐ์ผ๊นŒ?

๋ชจ๋‹ˆํ„ฐ์—๋Š” ํ•ด์ƒ๋„ ๋ง๊ณ ๋„ PPI*(Pixel per Inch)*๋ผ๋Š” ์ŠคํŽ™์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์ŠคํŽ™์— ๋”ฐ๋ผ, 1px์„ ์‹ค์ œ ๊ธธ์ด๋กœ ์น˜ํ™˜ํ•˜๋ฉด ๋””์Šคํ”Œ๋ ˆ์ด์˜ DPI์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ์‹ค์ œ ๊ธธ์ด๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ 1cm ์—ญ์‹œ ์ƒ๋Œ€ ๋‹จ์œ„์ธ ๊ฒƒ์ด ์•„๋‹๊นŒ์š”? ์‹คํ—˜์„ ์œ„ํ•ด height: 6.8cm;๋ฅผ ์ค€ div์— ์ง€ํ๋ฅผ ๊ฐ–๋‹ค ๋Œ€ ๋ณด์•˜์Šต๋‹ˆ๋‹ค. ์ฐธ๊ณ ๋กœ ์šฐ๋ฆฌ๋‚˜๋ผ ๋ชจ๋“  ์ง€ํ์˜ ๋†’์ด๋Š” 6.8cm์ž…๋‹ˆ๋‹ค.

Untitled

24โ€ FHD ๋ชจ๋‹ˆํ„ฐ์™€ 15โ€ FHD ๋ชจ๋‹ˆํ„ฐ์—์„œ ์‹คํ—˜ํ•ด ๋ณด์•˜์Šต๋‹ˆ๋‹ค. 24โ€์—์„œ๋Š” ์ •ํ™•ํ•˜๊ฒŒ ์ง€ํ์˜ ํฌ๊ธฐ์™€ ์ผ์น˜ํ–ˆ์ง€๋งŒ 15โ€์—์„œ๋Š” ํ•œ์ฐธ ์ž‘์Œ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์ฆ‰ 1cm๊ฐ€ ์ •ํ™•ํžˆ 1์„ผํ‹ฐ๋ฏธํ„ฐ๋ฅผ ์˜๋ฏธํ•˜์ง€๋Š” ์•Š์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ cm๋ผ๋Š” ๋‹จ์œ„๋Š” ์™œ ์กด์žฌํ•˜๋Š” ๊ฒƒ์ผ๊นŒ? ๋‹ต์€ ์ด ๋งํฌ์—์„œ ์ฐพ์„ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

์š”์•ฝํ•˜์ž๋ฉด ํ˜„์žฌ๋Š” ์ธ์‡„๋ฌผ๊ณผ ๊ฐ™์ด ๋†’์€ ํ•ด์ƒ๋„์—์„œ๋Š” cm, in๊ฐ™์€ ๋‹จ์œ„๊ฐ€ ์ •ํ™•ํ•œ ์‹ค์ œ ๊ธธ์ด๋ฅผ ๊ฐ–๋„๋ก ์ถœ๋ ฅ๋˜์ง€๋งŒ, ๋””์Šคํ”Œ๋ ˆ์ด์™€ ๊ฐ™์ด ์ƒ๋Œ€์ ์œผ๋กœ ๋‚ฎ์€ ํ•ด์ƒ๋„์˜ ์ถœ๋ ฅ์—์„œ๋Š” ์ด๊ฒƒ์ด ๋ณด์žฅ๋˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค. ๊ณผ๊ฑฐ์—๋Š” ๋””์Šคํ”Œ๋ ˆ์ด์—์„œ๋„ ์ด ๋ถ€๋ถ„์ด ๋ณด์žฅ๋˜๋„๋ก ์š”๊ตฌ๋˜์—ˆ์ง€๋งŒ 2011๋…„์— ์ด๋Ÿฐ ์š”๊ตฌ์‚ฌํ•ญ์ด ์‚ญ์ œ๋˜์—ˆ๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ ์ด๋Ÿฐ ์‹ค์ œ ๊ธธ์ด ๋‹จ์œ„๋Š” ์ธ์‡„๋ฅผ ๋ชฉ์ ์œผ๋กœ ์ž‘์„ฑ๋˜๋Š” ๋ฌธ์„œ์—์„œ๋งŒ ์‚ฌ์šฉํ•˜๊ณ , ๋””์Šคํ”Œ๋ ˆ์ด์— ์ถœ๋ ฅํ•˜๊ธฐ ์œ„ํ•œ ๋ชฉ์ ์˜ ํŽ˜์ด์ง€๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ์ ˆ๋Œ€ ๋‹จ์œ„๋Š” px๋งŒ ์‚ฌ์šฉํ•  ๊ฒƒ์„ ๊ถŒ์žฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. pt ์—ญ์‹œ ์Šคํ”„๋ ˆ๋“œ์‹œํŠธ๋‚˜ ์›Œ๋“œ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋‹จ์œ„๋กœ ์‹ค์ œ ๊ธธ์ด ๋‹จ์œ„์— ๊ธฐ๋ฐ˜ํ•˜๋ฏ€๋กœ ์ธ์‡„๋ฌผ์— ์ ํ•ฉํ•œ ๋‹จ์œ„์ž…๋‹ˆ๋‹ค.

em๊ณผ %์˜ ์ฐจ์ด๋Š” ๋ฌด์—‡์ผ๊นŒ?

์•„๋ž˜ ์˜ˆ์ œ์—์„œ ๋‘ child ์š”์†Œ๋“ค์€ ๋ชจ๋‘ ๊ฐ™์€ ๊ธ€์ž ํฌ๊ธฐ๋ฅผ ๊ฐ–์Šต๋‹ˆ๋‹ค.

// html
@@ -18,4 +18,5 @@

๊ธฐ๋ณธ์ ์œผ๋กœ font-size๋Š” ๋ถ€๋ชจ ์š”์†Œ์˜ ๊ฐ’์„ ์ƒ์†๋ฐ›์œผ๋ฏ€๋กœ, ํ˜„์žฌ ์š”์†Œ์˜ font-size๋ฅผ ์ฐธ์กฐํ•˜๋Š” em์ด๋‚˜, ๋ถ€๋ชจ ์š”์†Œ์˜ ๊ฐ’์„ ์ฐธ์กฐํ•˜๋Š” %๋‚˜ ๊ฐ™์€ ๊ธฐ์ค€ ๊ฐ’์„ ๊ฐ–๋Š” ๊ฒƒ์ด์ฃ . ์ฆ‰ ๋‘ ์š”์†Œ๋Š” ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ ๊ฐ™์€ ๊ฒฐ๊ณผ๊ฐ’์„ ๊ฐ–์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ ์ด ๋‘˜์˜ ์ฐจ์ด๋Š” ๋ฌด์—‡์ผ๊นŒ์š”?

๊ฐ€์žฅ ํฐ ์ฐจ์ด๋Š”, em์€ ํ•ญ์ƒ font-size๋ฅผ ์ฐธ์กฐํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ชจ๋“  ๋‹จ์œ„๋Š” ๋ชจ๋“  ์š”์†Œ์— ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋งŒ์•ฝ width๋‚˜ height๊ฐ™์€ ์š”์†Œ์— em์„ ์‚ฌ์šฉํ•˜๋”๋ผ๋„, em์€ ํ•ญ์ƒ font-size๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๊ฐ’์„ ๊ณ„์‚ฐํ•ฉ๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด %๋Š” ๋ถ€๋ชจ ์š”์†Œ์˜ ํ•ด๋‹น property ๊ฐ’์„ ์ฐธ์กฐํ•˜๊ธฐ ๋•Œ๋ฌธ์—, width์— %๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์–ธ์ œ๋‚˜ ๋ถ€๋ชจ ์š”์†Œ์˜ width์— ๋Œ€ํ•œ ๋น„์œจ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

Refs.

CSS ๊ฐ’ ๊ณผ ๋‹จ์œ„ - Web ๊ฐœ๋ฐœ ํ•™์Šตํ•˜๊ธฐ | MDN

CSS: em, px, pt, cm, in…

Why em instead of px?

When to use ems instead of percentage in CSS?

\ No newline at end of file +Hugo. + \ 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 62f22c5..f519e1b 100644 --- a/posts/2023/01/tree-shaking/index.html +++ b/posts/2023/01/tree-shaking/index.html @@ -1,4 +1,4 @@ -Tree Shaking | PrayinForRain.dev +Tree Shaking | PrayinForRain.dev

Tree Shaking

Table of Contents

์šฉ๋Ÿ‰์„ ์ ˆ์•ฝํ•˜๋Š” ๋ฐฉ๋ฒ•

bundle_map

์›นํŽ˜์ด์ง€์˜ ์„ฑ๋Šฅ์„ ์ด์•ผ๊ธฐํ•˜๋Š” ๊ฐ€์žฅ ์ง๊ด€์ ์ธ ์ง€ํ‘œ๋Š” ์•„๋งˆ ํŽ˜์ด์ง€์— ์‚ฌ์šฉ๋˜๋Š” ํŒŒ์ผ์˜ ํฌ๊ธฐ์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํŒŒ์ผ์˜ ํฌ๊ธฐ๊ฐ€ ๋ฌด๊ฒ๋‹ค๋ฉด ํŒŒ์ผ์„ ๋‹ค์šด๋ฐ›๋Š” ๋ฐ ์‹œ๊ฐ„์ด ์˜ค๋ž˜ ๊ฑธ๋ฆฌ๊ณ , ๋‹ค์šด๋กœ๋“œํ•œ ํŒŒ์ผ์„ ์ฝ๊ณ  ๋ Œ๋”๋ง ํ•˜๋Š”๋ฐ๋„ ์‹œ๊ฐ„์ด ์˜ค๋ž˜ ๊ฑธ๋ฆด ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋ฒˆ๋“ค ํŒŒ์ผ์˜ ์šฉ๋Ÿ‰์„ ๋‹ค์ด์–ดํŠธ ํ•˜๋Š” ๊ฒƒ์€ ์‚ฌ์ดํŠธ ์„ฑ๋Šฅ์— ๊ฝค ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.

์œ„ ์‚ฌ์ง„์€ ํŒ€ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๋˜ ์ค‘ @next/bundle-analyzer ํŒจํ‚ค์ง€๋ฅผ ์ด์šฉํ•ด ๋ฒˆ๋“ค ๋งต์„ ๊ทธ๋ ธ๋˜ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํด์ˆ˜๋ก ๋ฒˆ๋“ค ์šฉ๋Ÿ‰์ด ํฌ๋‹ค๋Š” ๋œป์ด๋‹ˆ ์ปค๋‹ค๋ž€ ์ฒญํฌ ์œ„์ฃผ๋กœ ์ตœ์ ํ™”๋ฅผ ์‹œ๋„ํ•˜๋ฉด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์–ด๋–ป๊ฒŒ ์šฉ๋Ÿ‰์„ ์ค„์ผ ์ˆ˜ ์žˆ์„๊นŒ์š”? gzip์„ ํ†ตํ•ด ํŒŒ์ผ์„ ์••์ถ•ํ•ด์„œ ๋ณด๋‚ด๋Š” ๋ฐฉ๋ฒ•๋„ ์žˆ๊ฒ ์ง€๋งŒ, ์ฝ”๋“œ์ ์œผ๋กœ ์ตœ์ ํ™”ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์€ Tree-shaking์ž…๋‹ˆ๋‹ค.

ํŠธ๋ฆฌ ์‰์ดํ‚น

tree-shaking

๋‚˜๋ฌด๋ฅผ ๋งˆ๊ตฌ๋งˆ๊ตฌ ํ”๋“ค๋ฉด ์–ด๋–ป๊ฒŒ ๋‚˜๋ญ‡์žŽ์ด๋‚˜ ์—ด๋งค๊ฐ™์€ ๊ฒƒ๋“ค์ด ์กฐ๊ธˆ์”ฉ ๋–จ์–ด์ง€๋ฉด์„œ ๋‚˜๋ฌด๊ฐ€ ์ ์  ์•™์ƒํ•ด ์งˆ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํŠธ๋ฆฌ ์‰์ดํ‚น์€ ์ด์™€ ๋น„์Šทํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ์ฝ”๋“œ๋“ค์ด ๋ฒˆ๋“ค์— ํฌํ•จ๋˜๋Š” ๊ฒƒ๋“ค์„ ์ง€์›Œ์„œ ํŒŒ์ผ ํฌ๊ธฐ๋ฅผ ์ค„์ด๋Š” ์ผ์ž…๋‹ˆ๋‹ค. ๋ง ๊ทธ๋Œ€๋กœ ๋‚˜๋ฌด(ํŒŒ์ผ)๋ฅผ ๋งˆ๊ตฌ ํ”๋“ค์–ด์„œ ๋‚˜๋ญ‡์žŽ(๋ฏธ์‚ฌ์šฉ ์ฝ”๋“œ)์„ ๋œ์–ด๋‚ด๋Š” ๊ฐœ๋…์ด์ฃ . ์–ด๋–ค ๊ณผ์ •์„ ํ†ตํ•ด ์ด๋ฃจ์–ด ์งˆ๊นŒ์š”? ์•„๋ž˜ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

example-app

https://github.com/malchata/webpack-tree-shaking-example

์‹คํ–‰ํ•ด๋ณด๊ธฐ

์šฐ์„  npm run buildํ›„ npm run start๋ฅผ ํ†ตํ•ด ์‹คํ–‰ํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์€ ๊ฒฐ๊ณผ๋ฌผ์ด ๋ณด์ž…๋‹ˆ๋‹ค.

bundle size before tree shaking

๋ฒˆ๋“ค๋œ ํŒŒ์ผ ๋‘๊ฐœ๋ฅผ ๋‹ค์šด๋ฐ›์•˜๊ณ , 38.4KB, 21.6KB์˜ ํฌ๊ธฐ๋ฅผ ๊ฐ–์Šต๋‹ˆ๋‹ค. ๊ฐ๊ด€์ ์œผ๋กœ ๊ฐ€๋ณ๊ธด ํ•˜์ง€๋งŒ ์—ฌ๊ธฐ์„œ ๊ตณ์ด ํŠธ๋ฆฌ ์‰์ดํ‚น์„ ํ†ตํ•ด ์šฉ๋Ÿ‰์„ ๋” ์ค„์—ฌ ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

ํ•„์š”ํ•œ ๊ฒƒ๋งŒ importํ•˜๊ธฐ

analyzing scripts

์ด ์•ฑ์˜ ์ปดํฌ๋„ŒํŠธ์ธ FilterablePedalList.js๋ฅผ ๋ณด๋ฉด utils.js ํŒŒ์ผ์„ importํ•ด์˜ค๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ utils.js ํŒŒ์ผ์€ 1300์—ฌ ์ค„์ด ๋˜๋Š” ์•„์ฃผ ๊ธด ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. ๊ฐ์ข… ์ •๋ ฌ๊ณผ, ๋ฐฐ์—ด์„ ๋‹ค๋ฃจ๋Š” ์œ ํ‹ธ๋ฆฌํ‹ฐ ํ•จ์ˆ˜๋ฅผ ํฌํ•จํ•˜๊ณ  ์žˆ๋Š”๋ฐ, ์ •์ž‘ ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” simpleSort๋งŒ์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ฒซ 13์ค„ ์•„๋ž˜๋กœ๋Š” ๋ชจ๋‘ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ํ•จ์ˆ˜๋“ค์ธ๋ฐ๋„ ๋ถˆ๋Ÿฌ์˜ค๊ณ  ์žˆ๋Š” ๊ฒƒ์ด์ฃ . ์‹ค์ œ๋กœ ๋ฒˆ๋“ค ํŒŒ์ผ์—์„œ๋„ simpleSort ์™ธ์— uasort, uksort ๋“ฑ ์—ฌ๋Ÿฌ ํ•จ์ˆ˜๋“ค์ด ๊ฐ™์ด ๋ฒˆ๋“ค๋ง๋œ ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ import๋ฌธ์„ ์•„๋ž˜์™€ ๊ฐ™์ด ๋ณ€๊ฒฝํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

// FilterablePedalList.js
@@ -17,4 +17,5 @@
 *false๋กœ ์ง€์ •ํ•˜๋ฉด ES ๋ชจ๋“ˆ์˜ ๋ฌธ๋ฒ•์„ ์œ ์ง€ํ•ฉ๋‹ˆ๋‹ค. ์•ฑ์„ ES ๋ชจ๋“ˆ๋กœ๋งŒ ์ œ๊ณตํ•˜๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ์—๋งŒ ์‚ฌ์šฉํ•˜์„ธ์š”. Babel์— ๋ฒˆ๋“ค๋Ÿฌ๋ฅผ ์ถ”๊ฐ€๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ, modules: โ€œautoโ€๋ฅผ ์‚ฌ์šฉํ•  ๊ฒƒ์„ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค.*
์‚ฌ์‹ค modules์—๋Š” auto๋ผ๋Š” ๊ฐ’์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” Babel 7.x ๋ฒ„์ „๋ถ€ํ„ฐ ์ƒ๊ธด caller ์˜ต์…˜์„ ํ™œ์šฉํ•˜์—ฌ ์ถ”๊ฐ€๋œ ๊ฐ’์ธ๋ฐ์š”, auto๋กœ ์„ค์ •ํ•  ๊ฒฝ์šฐ ๋ฐ”๋ฒจ์€ callerData๋ฅผ ์ด์šฉํ•˜์—ฌ ES ๋ชจ๋“ˆ ๋ฌธ๋ฒ•์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ์ง€ ํŒ๋‹จํ•˜๊ณ , ์ด์— ๋งž์ถ”์–ด ํŠธ๋žœ์ŠคํŒŒ์ผ ํ•  ์ง€๋ฅผ ์ž๋™์œผ๋กœ ํŒ๋‹จํ•ฉ๋‹ˆ๋‹ค. ์‚ฌ์šฉํ•œ ์˜ˆ์ œ์—์„œ๋Š” ๋‚ฎ์€ ๋ฒ„์ „์˜ ๋ฐ”๋ฒจ์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์—ˆ๊ธฐ ๋•Œ๋ฌธ์— false๋ฅผ ์ง€์ •ํ–ˆ์ง€๋งŒ, ์ง€๊ธˆ์€ ๊ธฐ๋ณธ๊ฐ’์ด auto๋กœ ๋˜์–ด ์žˆ์–ด import ๋ฒ”์œ„๋งŒ ์กฐ์ ˆํ•˜๋ฉด ์•Œ์•„์„œ ํŠธ๋ฆฌ ์‰์ดํ‚น์ด ์ด๋ฃจ์–ด์งˆ ๊ฒƒ์œผ๋กœ ๋ณด์ž…๋‹ˆ๋‹ค.
Refs.
Next ๋ฐฐํฌ๋ฅผ ์œ„ํ•œ ์ค€๋น„(bundle-analyzer, tree shaking, gzip)
์›น ์„ฑ๋Šฅ ์ตœ์ ํ™”๋ฅผ ์œ„ํ•œ Tree Shaking ์†Œ๊ฐœ
Reduce JavaScript payloads with tree shaking
Tree Shaking | ์›นํŒฉ
@babel/preset-env ยท Babel
https://github.com/babel/babel-loader/issues/521
https://github.com/babel/babel-loader/pull/660
\ No newline at end of file +Hugo. + \ 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 57b07c5..0bb762f 100644 --- a/posts/2023/02/firebase-with-typescript/index.html +++ b/posts/2023/02/firebase-with-typescript/index.html @@ -1,4 +1,4 @@ -Firebase๋ฅผ TypeScript์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ | PrayinForRain.dev +Firebase๋ฅผ TypeScript์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ | PrayinForRain.dev

Firebase๋ฅผ TypeScript์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ

Table of Contents

์ตœ๊ทผ์— ๋“ค์–ด์„œ Firebase๊ฐ€ ํ•„์š”ํ•œ ์ผ์ด ์žˆ์—ˆ๋‹ค. ๋Œ€ํ•™๊ต์—์„œ ์จ๋ณธ ๊ฒฝํ—˜์€ ์žˆ์—ˆ๋Š”๋ฐ, ์˜ค๋žœ๋งŒ์— ๋งŒ๋‚œ Firebase๋Š” ์˜ˆ์ „๊ฐ™์ง€ ์•Š์•˜๋‹ค. ๊ฐ€์žฅ ํฐ ๋ฌธ์ œ๋Š” Firebase๊ฐ€ ์ œ๊ณตํ•˜๋Š” ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์ธ Firestore๋Š” ๋ฌธ์„œ๋ฅผ ๊ฐ€์ ธ์™€๋„ ํƒ€์ž…์„ ์ œ๋Œ€๋กœ ์ •์˜ํ•  ์ˆ˜ ์—†๋‹ค๋Š” ๊ฒƒ.

image

์ž๋™์™„์„ฑ์ด ์•ˆ๋˜๋Š” ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š”.. ๊ทธ.. ์™œ..?

๋ฌผ๋ก  ๋ฐ์ดํ„ฐ์Šคํ‚ค๋งˆ๋ฅผ ๋”ฐ๋กœ ์ •์˜ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— Firebase ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ DocumentData ํƒ€์ž…์„ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๋งž์ถฐ์ค„ ์˜๋ฌด๋Š” ์—†์ง€๋งŒ, ์ ์–ด๋„ React.useState์ฒ˜๋Ÿผ ์ œ๋„ค๋ฆญ์œผ๋กœ ํƒ€์ž…์„ ๋ฐ›์•„ ์–ด๋Š์ •๋„ ์•ฝ์†ํ•ด ์ฃผ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ค. ์•„๋‹ˆ ๋ฐ”๋ผ๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ ๋˜์–ด์•ผ ํ•˜๋Š” ๊ฑฐ ์•„๋‹Œ๊ฐ€..?

๋ถ•๋Œ€ ๊ฐ๊ธฐ

์šฐ์„  Firebase์˜ ์ฟผ๋ฆฌ ์‹คํ–‰ ๊ฒฐ๊ณผ๋กœ ์˜ค๋Š” DocumentData๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ •์˜๋˜์–ด ์žˆ๋‹ค.

export declare interface DocumentData {
@@ -72,4 +72,5 @@
 FirestoreDataConverter interface - Firebase JavaScript API
\ No newline at end of file +Hugo. + \ 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 e403d06..4205d02 100644 --- a/posts/2023/02/typescript-generic/index.html +++ b/posts/2023/02/typescript-generic/index.html @@ -1,4 +1,4 @@ -Typescript Generic | PrayinForRain.dev +Typescript Generic | PrayinForRain.dev

Typescript Generic

Table of Contents

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์™€ ๋ฆฌ์•กํŠธ๋ฅผ ๊ฐ™์ด ์‚ฌ์šฉํ•  ๋•Œ, ์šฐ๋ฆฌ๋Š” useState ํ›…์„ ์•„๋ž˜์™€ ๊ฐ™์ด ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

const [name, setName] = useState<string>("์ง€์ƒ๋ ฌ");
@@ -71,4 +71,5 @@

์œ„์™€ ๊ฐ™์ด ์ œ๋„ค๋ฆญ์„ ์ด์šฉํ•ด ์„ ์–ธ๋œ ํƒ€์ž…์ด ์‚ฌ์šฉํ•˜๋Š” ์ œ๋„ค๋ฆญ ํƒ€์ž…์„ ๋‹ค์‹œ ์ฐธ์กฐํ•˜๋Š” ๊ฒƒ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

Refs.

์ฝ”๋”ฉ๊ต์œก ํ‹ฐ์”จํ”ผ์Šค์ฟจ
์ œ๋„ค๋ฆญ ํด๋ž˜์Šค ๋ฐ ๋ฉ”์„œ๋“œ
Documentation - Generics
์ œ๋„ค๋ฆญ | ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ํ•ธ๋“œ๋ถ

\ No newline at end of file +Hugo. + \ 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 27751c5..218a073 100644 --- a/posts/2023/03/nodejs-for-baekjoon/index.html +++ b/posts/2023/03/nodejs-for-baekjoon/index.html @@ -1,4 +1,4 @@ -๋ฐฑ์ค€์„ ์œ„ํ•œ node.js | PrayinForRain.dev +๋ฐฑ์ค€์„ ์œ„ํ•œ node.js | PrayinForRain.dev

๋ฐฑ์ค€์„ ์œ„ํ•œ node.js

Table of Contents

JS๋ผ๋„ ๋ฐฑ์ค€์ด ํ•˜๊ณ ์‹ถ์–ด

Programmers IDE

๊ณต์ฑ„ ์‹œ์ฆŒ์ด๋‹ค. ๊ฐœ์ธ์ ์œผ๋กœ ์ฝ”๋”ฉ ํ…Œ์ŠคํŠธ๋ฅผ ์ •๋ง์ •๋ง ์ž์‹  ์—†์–ดํ–ˆ๋Š”๋ฐ, ๋” ์ด์ƒ ๋ฏธ๋ฃฐ ์ˆ˜ ์—†์–ด ์•ผ๊ธˆ์•ผ๊ธˆ ๊ณต๋ถ€๋ฅผ ์‹œ์ž‘ํ–ˆ๋‹ค.
๋ถˆํŽธํ•œ ์ ์ด ์žˆ๋‹ค๋ฉด, ๋ฐฑ์ค€์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ์•„์ฃผ ๋ถˆ์นœ์ ˆํ•˜๋‹ค๋Š” ์ ์ด๋‹ค. ๋‚ด๊ฐ€ ํ•™๋ถ€์ƒ ๋•Œ ์ž˜ ํ•˜์ง€๋„ ๋ชปํ•˜๋Š” C++๋กœ ๊พธ์—ญ๊พธ์—ญ ๋ฌธ์ œ๋ฅผ ํ’€์—ˆ๋˜ ์ด์œ  ์ค‘ ํ•˜๋‚˜์ด๊ธฐ๋„ ํ–ˆ๋‹ค. ๊ทธ ๋•Œ๋Š” ์•„๋Š” PS ํ”Œ๋žซํผ์ด ๋ฐฑ์ค€ ๋ฟ์ด๋‹ˆ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์–ด์ฉ” ์ˆ˜ ์—†๋Š” ํ•œ๊ณ„์ธ๊ฐ€๋ณด๋‹ค ํ–ˆ๋‹ค.

๊ทธ๋Ÿฐ๋ฐ ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค๋ฅผ ๋ง› ๋ณด๊ณ  ๋‚˜๋‹ˆ ๋จธ๋ฆฌ๊ฐ€ ์ปค์ ธ์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋ฐฑ์ค€์—๊ฒŒ ๋ถ€๋‹นํ•œ ์ฐจ๋ณ„์„ ๋ฐ›๋Š”(?) ๊ธฐ๋ถ„์ด ๋“ค์—ˆ๋‹ค. ์ง„์งœ๋กœ ํ™”๊ฐ€ ๋‚œ ๊ฑด ์•„๋‹ˆ์ง€๋งŒ ๊ทธ๋ž˜๋„ ํ™”๊ฐ€ ๋‚ฌ๋‹ค. ์šฉ์„œํ•  ์ˆ˜๊ฐ€ ์—†์–ด ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ–ˆ๋‹ค.

ํ•œ 4~5๋ฌธ์ œ ํ…Œ์ŠคํŠธํ•ด ๋ดค๋Š”๋ฐ ์ œ๋Œ€๋กœ ์ž‘๋™ํ•˜๋Š” ๊ฒƒ ๊ฐ™๋‹ค.
๋ฐฑ์ค€์€ ์›Œ๋‚™ ์ž…๋ ฅ ํ˜•์‹๋„ ์ถœ๋ ฅ ํ˜•์‹๋„ ๋‹ค์–‘ํ•˜๊ธฐ ๋•Œ๋ฌธ์—, ๋ชจ๋“  ๋ฌธ์ œ์— ๋Œ€ํ•ด ์ผ๋ฐ˜์ ์œผ๋กœ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ฝ”๋“œ๋Š” ์•„๋‹ˆ์ง€๋งŒ.. ์ด ์ •๋„๋กœ ์ฐธ๊ณ  ์“ธ๋ž€๋‹ค.

Baekjoon Node.js template

function solution(input) {
@@ -23,4 +23,5 @@
\ No newline at end of file +Hugo. + \ 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 395242e..b744086 100644 --- a/posts/2023/03/npm-scripts-doesnt-work/index.html +++ b/posts/2023/03/npm-scripts-doesnt-work/index.html @@ -1,4 +1,4 @@ -VSCode์˜ NPM Scripts๊ฐ€ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ์‚ฌ๋žŒ | PrayinForRain.dev +VSCode์˜ NPM Scripts๊ฐ€ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ์‚ฌ๋žŒ | PrayinForRain.dev

VSCode์˜ NPM Scripts๊ฐ€ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ์‚ฌ๋žŒ

Table of Contents
image

๋Šฆ์ž ์ž๊ณ  ๊ฐ“์ƒ์‚ฌ๋Š” ์ฒ™ ํ•˜๋Š” ์‚ถ์ด๋ž€…

๋งฅ๋ถ๊ณผ ์นœํ•ด์ง€๊ธฐ ์‹œ์ž‘ํ•œ์ง€ 2๋‹ฌ์ด ๋˜์—ˆ๋‹ค. ์œˆ๋„์šฐ ๋…ธํŠธ๋ถ์„ ์‚ฌ์šฉํ•˜๋‹ค๊ฐ€ ๊ฐˆ์•„ ํƒ„ ์ด์œ ๋Š”, ๋งฅ์—์„œ ๋˜๋Š” ๊ฒƒ์ด ์œˆ๋„์šฐ์—์„œ ๋˜๊ณ , ์œˆ๋„์šฐ์—์„œ ๋˜๋Š” ๊ฒƒ์€ ๋งฅ์—์„œ ์•ˆ๋˜๋Š” ๋ฌธ์ œ๋ฅผ ๋„ˆ๋ฌด ๋งŽ์ด ๊ฒช์—ˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์ฃผ๋ณ€์˜ ๋งฅ ์œ ์ €์—๊ฒŒ ๊ณ„์†ํ•ด์„œ ํ…Œ์ŠคํŠธ๋ฅผ ์š”์ฒญํ•˜๊ธฐ๋„ ๋ˆˆ์น˜๋ณด์ด๊ณ , ์–ธ์  ๊ฐ€๋Š” ๋งˆ์ฃผํ•ด์•ผ๊ฒ ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋˜ ๋…€์„์ด๊ธฐ ๋•Œ๋ฌธ์— ๊ณผ๊ฐํ•œ ํˆฌ์ž๋ฅผ ํ–ˆ๋‹ค. ๊ทธ ๊ณผ์ •์—์„œ ๋‚ด๊ฐ€ ์œˆ๋„์šฐ์— ์ง€๋‚˜์น˜๊ฒŒ ๊ฐ•๊ฒฐํ•ฉ(?) ๋˜์–ด ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ๊นจ๋‹ฌ์•˜๊ณ , ์ง€๊ธˆ์€ ๋งฅ๋„ ์œˆ๋„์šฐ๋„ ๋ชป ์“ฐ๋Š” ๊ทธ ์–ด๋”˜๊ฐ€์˜ ์ง€์ ์— ์žˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์ตœ๊ทผ์—๋Š” ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๊ณ  ์žˆ๋‹ค. ๋ถ€์ŠคํŠธ์บ ํ”„์—์„œ ๋งŒ๋‚œ ์‚ฌ๋žŒ๋“ค๊ณผ ์Šคํ„ฐ๋””๋ฅผ ํ•˜๋‹ค๊ฐ€, ๋””์ž์ธ ์‹œ์Šคํ…œ์„ ๋งŒ๋“ค์–ด ๋ณด์ž๋Š” ์ด์•ผ๊ธฐ๊ฐ€ ๋‚˜์™€์„œ ๋‹ค๊ฐ™์ด ํ‹ฐ์Šคํ‘ผ ๊ณต์‚ฌ ์ค‘์ด๋‹ค. ์ด ๊ฒƒ์— ๋Œ€ํ•ด์„œ๋„ ๊ธ€์„ ์จ์•ผ ํ•˜๋Š”๋ฐ ์˜ค๋Š˜ ํฌ์ŠคํŒ…ํ•  ๋‚ด์šฉ์€ ์ด ๊ฒƒ๋„ ์•„๋‹ˆ๋‹ค. ํšŒ๊ณ ๋ฅผ ์•ˆ ์“ฐ๋‹ˆ ์ด์•ผ๊ธฐ๊ฐ€ ๋งŽ์ด ๋ฐ€๋ ค ํšก์„ค์ˆ˜์„ค ํ•˜๋Š”๊ตฌ๋‚˜..

์•„๋ฌดํŠผ… ํ”„๋กœ์ ํŠธ ํ™˜๊ฒฝ ์„ค์ •์„ ํ•˜๋ฉด์„œ ๊ฒช์—ˆ๋˜ ๋ฌธ์ œ๋ฅผ ๊ธฐ๋กํ•˜๊ณ ์ž ํ•œ๋‹ค.

NPM Scripts๊ฐ€ ์•ˆ ๋œ๋‹ค

NPM Scripts

VSCode๋Š” ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋ฅผ ์—ด์—ˆ์„ ๋•Œ package.json ํŒŒ์ผ์„ ํŒŒ์‹ฑํ•˜์—ฌ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ์Šคํฌ๋ฆฝํŠธ๋“ค์„ ํ•˜๋‹จ์— ๋ณด์—ฌ์ค€๋‹ค. ์ด๊ฒŒ ์›๋ž˜๋Š” ์ต์Šคํ…์…˜์˜ ๊ธฐ๋Šฅ์ด์—ˆ๋‹ค๊ฐ€, ์–ธ์  ๊ฐ€ ์ต์Šคํ…์…˜์ด deprecated๊ฐ€ ๋˜๊ณ  ๊ธฐ๋ณธ ๊ธฐ๋Šฅ์ด ๋œ ๋ชจ์–‘์ด๋‹ค. ์•„๋ฌดํŠผ ์ €๊ฑธ ์‚ฌ์šฉํ•˜๋ฉด ๊ตณ์ด ํ„ฐ๋ฏธ๋„์„ ์—ด์–ด์„œ ๋ช…๋ น์–ด๋ฅผ ํˆฌ๋‹ฅํˆฌ๋‹ฅ ์ž…๋ ฅํ•˜์ง€ ์•Š์•„๋„ ์•Œ์•„์„œ ์ƒˆ ํ„ฐ๋ฏธ๋„์„ ์—ด์–ด์„œ ๋ช…๋ น์–ด๋ฅผ ์‹คํ–‰ํ•ด ์ค€๋‹ค. ํŠนํžˆ FE์™€ BE๋ฅผ ๊ฐ™์ด ์‹คํ–‰ํ•  ๋•Œ ๋„ˆ๋ฌด๋„ˆ๋ฌด ํŽธํ•˜๋‹ค.

๊ทธ๋Ÿฐ๋ฐ ๋งฅ๋ถ์—์„œ ์š”๋†ˆ์ด ์‹คํ–‰์ด ์•ˆ๋œ๋‹ค.

Error message

๋‹ค๋ฅธ ํ”„๋กœ์ ํŠธ๋„ ์•ˆ ๋œ๋‹ค. ์ด ํ”„๋กœ์ ํŠธ๋Š” ๋”๋”์šฑ ์•ˆ๋œ๋‹ค. ์›๋ž˜ ๊ทธ๋ ‡๊ฒŒ ์ธ์‹ํ•˜์ง€ ๋ชปํ•˜๊ณ  ์‚ฌ์šฉํ•˜๋˜ ๊ธฐ๋Šฅ์ธ๋ฐ, ์•ˆ ๋œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋‹ˆ ๊ฐ‘์ž๊ธฐ ๋ญ”๊ฐ€ ์กฑ์‡„๋ฅผ ์ฐฌ ๊ธฐ๋ถ„์ด๊ณ .. ์–ด์ฉŒ๊ณ  ์ €์ฉŒ๊ณ ..
์•„๋ฌดํŠผ ๋ฉ”์‹œ์ง€๋ฅผ ์ฝ์–ด ๋ณด๊ณ  ์ฒ˜์Œ์—๋Š” ํ”„๋กœ์ ํŠธ๊ฐ€ yarn 1.22.19 ๋ฒ„์ „์„ ์‚ฌ์šฉํ•˜๋Š”๋ฐ ๋‚ด ๊ธ€๋กœ๋ฒŒ์— yarn berry๋งŒ ์„ค์น˜๋˜์–ด ์žˆ์–ด์„œ ๊ทธ๋Ÿฐ๊ฐ€ ํ•˜๊ณ  ๊ธฐ๋ณธ ๋ฒ„์ „์„ ๋ฐ”๊ฟ€ ๋ฐฉ๋ฒ•์„ ์ฐพ์•„ ๋‹ค๋…”๋‹ค. ๋ฌผ๋ก  ์ •๋‹ต์ด ์•„๋‹ˆ์—ˆ๋‹ค.

ํ•ด๊ฒฐ ๊ณผ์ •

๋‚˜๋Š” ์ฒ˜์Œ์— node์™€ yarn์„ ์„ค์น˜ํ•  ๋•Œ, ~/.zshrc ํŒŒ์ผ์— ์•„๋ž˜์™€ ๊ฐ™์ด ์„ค์ •์„ ๋„ฃ์—ˆ์—ˆ๋‹ค. ๊ทธ ๋•Œ๋Š” ํ•˜๋„ ๊น”์•„์•ผ ํ•˜๋Š” ๊ฒƒ์ด ๋งŽ๋‹ค๋ณด๋‹ˆ ์ด๊ฒƒ์ €๊ฒƒ ์ฐพ์•„์„œ ๋ฌป์ง€๋„ ๋”ฐ์ง€์ง€๋„ ์•Š๊ณ  ๋งˆ๊ตฌ ๋”ฐ๋ผํ–ˆ์—ˆ๋Š”๋ฐ,

export NVM_DIR="$HOME/.nvm"
@@ -10,4 +10,5 @@

์Œ… ๊ทธ ์™ธ์—๋„ ~/.zshenv ๋‚ด์šฉ์„ source ~/.zshrc๋กœ ๋ณ€๊ฒฝํ•ด์„œ zshrc ํŒŒ์ผ์˜ ๋‚ด์šฉ์„ ์ฐธ์กฐํ•˜๋„๋ก ์ˆ˜์ •ํ–ˆ๋‹ค.

๊ทธ๋Ÿฐ๋ฐ ์ € ์„ค์ • ํŒŒ์ผ์€ ๋Œ€์ฒด ์–ด๋””์„œ ์ž‘์„ฑ๋œ ๊ฒƒ์ผ๊นŒ? nvm์˜ ๊ณต์‹ ๋ฌธ์„œ์—๋„ $NVM_DIR๋ฅผ ์ฐธ์กฐํ•˜๋„๋ก ์“ฐ์—ฌ ์žˆ์—ˆ๊ณ , ์ € ์ฝ”๋“œ๊ฐ€ ์ฒ˜์Œ ๋‚˜์˜จ ์ปค๋ฐ‹์„ ์ฐพ์•„ ๋ณด๋‹ˆ ์—ญ์‹œ ์ฒ˜์Œ๋ถ€ํ„ฐ NVM_DIR๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜์–ด ์žˆ์—ˆ๋‹ค.

Finding origin
๊ธฐ์›์„ ์ฐพ๊ณ  ์‹ถ์—ˆ์œผ๋‚˜ ๊ฒ€์ƒ‰๋˜๋Š” ๊ฐ€์žฅ ์˜ค๋ž˜๋œ ๊ฒฐ๊ณผ๋Š” ์–ด๋Š gist์— ์ €์žฅ๋œ bash_profile ์ฝ”๋“œ์˜€๋‹ค. ๋‚ด๊ฐ€ ์‰˜์— ๋Œ€ํ•ด ๊นŠ์ด ์•Œ๊ณ  ์žˆ์ง€ ์•Š์•„์„œ ๋” ์ด์ƒ ๊นŠ์ด ์›์ธ์„ ์ฐพ์œผ๋ ค๋ฉด ๋งŽ์€ ์‹œ๊ฐ„์ด ํ•„์š”ํ•ด ๋ณด์ธ๋‹ค. 2๋‹ฌ๋งŒ์— ๋˜์ฐพ์€ NPM Scripts ๋ฉ”๋‰ด์— ๋ฌด์ฒ™ ๊ธฐ๋ถ„์ด ์ข‹๋‹ค.

Refs.

VSCODE build error `The terminal process “/bin/zsh ‘-c’, … - stack overflow
zsh: command not found: nvm ์˜ค๋ฅ˜ํ•ด๊ฒฐ๋ฒ•

\ No newline at end of file +Hugo. + \ 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 c1adf3f..586304f 100644 --- a/posts/2023/04/nextjs-storybook-with-pnp/index.html +++ b/posts/2023/04/nextjs-storybook-with-pnp/index.html @@ -1,4 +1,4 @@ -Next.js Storybook์— Yarn PnP ์ ์šฉํ•˜๊ธฐ | PrayinForRain.dev +Next.js Storybook์— Yarn PnP ์ ์šฉํ•˜๊ธฐ | PrayinForRain.dev

Next.js Storybook์— Yarn PnP ์ ์šฉํ•˜๊ธฐ

Table of Contents

Storybook์„ ์“ฐ๋ ค๊ณ  ํ–ˆ๋Š”๋ฐ

์ตœ๊ทผ Storybook์„ ์‚ฌ์šฉํ•  ์ผ์ด ๋ฌด์ฒ™ ๋งŽ์•˜๋‹ค. ์–ธ์  ๊ฐ€๋Š” ํฌ์ŠคํŒ…์„ ํ•ด์•ผ ํ•  CDS ํ”„๋กœ์ ํŠธ๋ถ€ํ„ฐ ๋„˜๋ธ” ์ฑŒ๋ฆฐ์ง€๋„ ์žˆ์—ˆ๊ณ … ์ฒ˜์Œ์—” ๋„ˆ๋ฌด ๋‚ฏ์„ค์—ˆ์ง€๋งŒ ๊ณตํ†ต๋œ ์ปดํฌ๋„ŒํŠธ๋“ค์„ ๋ฏธ๋ฆฌ ์„ค๊ณ„ํ•ด ๋‘๊ณ  ์žฌ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข€ ๋” ๊น”๋”ํ•œ ์„ค๊ณ„๊ฐ€ ๋˜๋Š” ๊ฒƒ ๊ฐ™์•„ ๋งค๋ ฅ์„ ๋Š๊ผˆ๋‹ค.

๊ทธ๋Ÿฐ๋ฐ ๋ฌธ์ œ๋Š” ๋‚ด ์ž‘์—… ํ™˜๊ฒฝ์— ์žˆ์—ˆ๋‹ค. ๊ฝค ์—ฐ์‹์ด ๋œ ์œˆ๋„์šฐ ๋ฐ์Šคํฌํƒ‘์— ์ˆ˜์‹ญ๊ฐ€์ง€ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ์„ž์–ด ๋†“๊ณ , ์š”์ƒˆ๋Š” ๊ฒŒ์ž„์—๋„ ๋ชป ์“ฐ๋Š” ์ฒ˜์ฐธํ•œ ์„ฑ๋Šฅ์˜ HDD์— ๋ ˆํฌ๋ฅผ ๋‘๊ณ  ์“ฐ๋‹ˆ ์ข…์†์„ฑ ํŒจํ‚ค์ง€ ์„ค์น˜๋„ ์ปคํ”ผ ํ•œ ์ž” ํƒ€์™€์•ผ ํ•˜๋Š” ์‹œ๊ฐ„์ด ๊ฑธ๋ฆฌ๋‹ˆ Yarn Berry์˜ ์‚ฌ์šฉ์ด ๋ฐ˜ํ•„์ˆ˜๊ฐ€ ๋˜์–ด๋ฒ„๋ ธ๋‹ค. ๋„˜๋ธ” ์ฑŒ๋ฆฐ์ง€ ๋•Œ Yarn Berry๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์—ˆ์ง€๋งŒ ์• ์„ํ•˜๊ฒŒ๋„ ์ˆ˜ ๋งŽ์€ ๋ฌธ์ œ์— ์‹œ๋‹ฌ๋ ค ํฌ๊ธฐํ–ˆ๋Š”๋ฐ, ์—ฌ์œ ๊ฐ€ ์ƒ๊ธด ์ง€๊ธˆ ๋งˆ์Œ์„ ๋‹ค์žก๊ณ  ๋‹ค์‹œ ์‹œ๋„ํ•ด ๋ณด๊ธฐ๋กœ ํ–ˆ๋‹ค.

Yarn Berry์˜ ๊ฐ€์žฅ ํฐ ๋ณ€ํ™”๋Š” Plug n Play ๋ฐฉ์‹์˜ ํŒจํ‚ค์ง€ ๊ด€๋ฆฌ ๋ฐฉ์‹์„ ์ง€์›ํ•œ๋‹ค๋Š” ์ ์ด์ง€, Yarn Berry = PnP์ธ ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค. Yarn Berry๋„ nodeLinker ์˜ต์…˜์„ node-modules๋กœ ์ง€์ •ํ•œ๋‹ค๋ฉด node_modules ๋””๋ ‰ํ† ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์—, ์•„๋ž˜๋ถ€ํ„ฐ๋Š” Berry ๋Œ€์‹  PnP ๋ผ๋Š” ํ‘œํ˜„์„ ์‚ฌ์šฉํ•˜์˜€๋‹ค.

๊ทธ๋Ÿผ ์“ฐ์„ธ์š”

create-next-app์œผ๋กœ ํ”„๋กœ์ ํŠธ ์ค€๋น„

์šฐ์„  Next.js ์•ฑ์„ ์ƒ์„ฑํ•˜๊ณ , Yarn PnP๋กœ ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €๋ฅผ ๋ณ€๊ฒฝํ•ด ๋ณด์ž.

yarn create next-app
@@ -42,4 +42,5 @@

ํ•˜์ง€๋งŒ node_modules๊ฐ€ ์ƒ๊ธฐ์ž–์•„์š”

node_modules folder

storybook ๋ฟ ์•„๋‹ˆ๋ผ ์—ฌ๋Ÿฌ ํŒจํ‚ค์ง€์—์„œ ๋ฐœ์ƒํ•˜๋Š” ์ผ์ธ๋ฐ, PnP๋ชจ๋“œ์—์„œ๋„ ์Šคํ† ๋ฆฌ๋ถ์„ ์‹คํ–‰ํ•˜๋ฉด node_modules ๋””๋ ‰ํ† ๋ฆฌ๊ฐ€ ์ƒ์„ฑ๋˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ์ด ์•ˆ์—๋Š” ๋Œ€์ถฉ… ์Šคํ† ๋ฆฌ๋ถ dev ์„œ๋ฒ„ ์‹คํ–‰์— ํ•„์š”ํ•œ ์ž„์‹œ ํŒŒ์ผ๋“ค์ด ์ €์žฅ๋˜์–ด ์žˆ๋‹ค. ๋‚˜๋ฅผ ํฌํ•จํ•ด์„œ ๋งŽ์€ Yarn PnP ์‚ฌ์šฉ์ž๋“ค์ด ์ด ํ˜„์ƒ์— ๋Œ€ํ•ด ๋ถˆํŽธํ•จ(?)์„ ๊ฒช๊ณ  ์žˆ๋Š”๋ฐ, Storybook์˜ ๊ธฐ์—ฌ์ž๊ฐ€ ์ด์Šˆ ๋Œ“๊ธ€์—์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ทผ๊ฑฐ๋ฅผ ์ด์•ผ๊ธฐํ•ด ์ฃผ์—ˆ๋‹ค.

  • node_modules/.cache/package-name์— ์ž„์‹œ ํŒŒ์ผ์„ ์ €์žฅํ•˜๋Š” ๊ฒƒ์€ ์—ฌ๋Ÿฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” ํŒจํ„ด์ด๋‹ค.
  • node_modules๋Š” ๋ชจ๋“  Javascript/Typescript ํ”„๋กœ์ ํŠธ์—์„œ .gitignore๋กœ ๋ฌด์‹œ๋˜๊ณ  ์žˆ๋‹ค.
  • node_modules์—๋Š” ๋ณดํ†ต ์–ธ์ œ๋“  ์ง€์šธ ์ˆ˜ ์žˆ๋Š” ํŒŒ์ผ๋“ค์ด ๋“ค์–ด๊ฐ€ ์žˆ๊ณ , ๋ฌธ์ œ ๋ฐœ์ƒ ์‹œ ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์ž์ฃผ ์‚ญ์ œ๋œ๋‹ค.
  • ํ˜„์žฌ ์‹œ์ ์—์„œ NPM, Yarn(PnP ์‚ฌ์šฉ ์—ฌ๋ถ€์— ๊ด€๊ณ„ ์—†์ด) ๋ชจ๋‘์—์„œ ์ œ๋Œ€๋กœ ์ž‘๋™ํ•˜๊ณ  ์žˆ๋‹ค.

๋”ฐ๋ผ์„œ ์ด ๊ฒƒ์ด ๋ฌธ์ œ๊ฐ€ ๋˜๋Š” ๋ฒ„๊ทธ ๋Š” ์•„๋‹ˆ๊ณ , ๊ธฐ๋Œ€๋œ ๋™์ž‘(Expected Behavior) ์œผ๋กœ ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๋“ฏ ํ•˜๋‹ค. ๋Œ“๊ธ€์— ๋ณด๋ฉด Yarn ๋ ˆํฌ์ง€ํ† ๋ฆฌ ์ด์Šˆ์— ์ด ์บ์‹œ ํŒŒ์ผ๋“ค์„ ์ œ๊ฑฐํ•˜๊ธฐ ์œ„ํ•œ ๋‚ด์šฉ์ด ์˜ฌ๋ผ์™€ ์žˆ๋Š”๋ฐ, 3๋…„์ด ์ง€๋‚œ ์ง€๊ธˆ๊นŒ์ง€ ์ฐธ์กฐ ๋˜๋Š” ๊ฐฑ์‹ ๋˜์ง€ ์•Š๋Š” ๊ฒƒ์œผ๋กœ ๋ณด์•„ ๊ธ‰ํ•œ ๋ฌธ์ œ๊ฐ€ ์•„๋‹ˆ์–ด์„œ ์ž ์ • ๋ณด๋ฅ˜๋œ ๋ชจ์–‘์ด๋‹ค. ์ข€ ํ•ด ์ฃผ๋ฉด ์ข‹์„ํ…๋ฐ..์ฉ..

๋‚ด๊ฐ€ ์ด๊ฒผ๋‹ค ์Šคํ† ๋ฆฌ๋ถ์•„

์•ž์„œ ๋งํ•œ ๋‚ด ์ƒํ™ฉ ๋•Œ๋ฌธ์— ๋‚˜๋Š” ์ฃผ๋ณ€์— ๊ฝค๋‚˜ Yarn berry ์ฒ˜๋Œ์ด(?)๋กœ ํผ์ ธ ์žˆ๋Š”๋ฐ ์ •์ž‘ ํ”„๋กœ์ ํŠธ ํ•  ๋•Œ์—๋Š” ํ•œ์ •๋œ ์‹œ๊ฐ„ ์•ˆ์—์„œ ๋” ์ด์ƒ ์ง€์ฒดํ•  ์ˆ˜๊ฐ€ ์—†์–ด node_modules๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ์ด ๋„ˆ๋ฌด ์•„์‰ฌ์› ๋‹ค. ์ด๋ฏธ ํ”„๋กœ์ ํŠธ๊ฐ€ ๋ชจ๋‘ ์ •๋ฆฌ๋œ ํ›„์ง€๋งŒ ๊ทธ๋ž˜๋„ ์ง€๊ธˆ์— ์™€์„œ๋‚˜๋งˆ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์–ด์„œ ๊ทธ๋ž˜๋„ ๋‹คํ–‰์ด๋‹ค.

ํ•˜๋‚˜ ์†์ƒํ•œ ์—ํ”ผ์†Œ๋“œ๊ฐ€ ์žˆ๋Š”๋ฐ.. ๋‚ด๊ฐ€ ์ฒ˜์Œ์— ๋ดค๋˜ instruction์—์„œ npx ์ปค๋งจ๋“œ๋งŒ์„ ์ด์•ผ๊ธฐํ•˜๊ณ  ์žˆ๊ณ , ๋‚˜๋Š” npx๊ฐ€ npm๊ณผ yarn ์ค‘ ์ƒํ™ฉ์— ๋งž๋Š” ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €๋ฅผ ์•Œ์•„์„œ ์„ ํƒํ•ด ์ค€๋‹ค๊ณ  ์•Œ๊ณ  ์žˆ์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์˜์‹ฌ ์—†์ด ์‚ฌ์šฉํ–ˆ๋‹ค๊ฐ€ ์—๋Ÿฌ๋ฅผ ํ•˜๋‚˜ ๋” ๋งŒ๋‚˜ ์กฐ๊ธˆ ๋” ๊ณ ์ƒํ–ˆ๋‹ค.
๊ทธ๋Ÿฌ๋‹ค๊ฐ€ ๋ฐ”๋กœ ์–ผ๋งˆ ์ „์— ๊ณต์‹ ๋ฌธ์„œ์—์„œ ๋ˆ„๋ฝ๋œ ๋ถ€๋ถ„์ด ์ˆ˜์ •๋œ PR์„ ๋ฐœ๊ฒฌํ–ˆ๋Š”๋ฐ.. ์Šคํ† ๋ฆฌ๋ถ ์ดˆ๊ธฐํ™”๋Š” yarn dlx storybook ๋ช…๋ น์–ด๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ๋ชจ์–‘์ด๋‹ค. npx๋กœ ํ•ด๋„ ํ•ด๊ฒฐ ๊ณผ์ •์— ํฐ ์ฐจ์ด๋Š” ์—†์ง€๋งŒ ์•„์ด๊ณ  ์†ํ„ฐ์ ธ

Refs.

\ No newline at end of file +Hugo. + \ 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 577f378..bf48704 100644 --- a/posts/2023/04/numble-talk/index.html +++ b/posts/2023/04/numble-talk/index.html @@ -1,4 +1,4 @@ -๋„˜๋ธ” OpenAI ๋‹จํ†ก๋ฐฉ ์ฑŒ๋ฆฐ์ง€ - ํ”„๋กœ์ ํŠธ ํšŒ๊ณ  | PrayinForRain.dev +๋„˜๋ธ” OpenAI ๋‹จํ†ก๋ฐฉ ์ฑŒ๋ฆฐ์ง€ - ํ”„๋กœ์ ํŠธ ํšŒ๊ณ  | PrayinForRain.dev

๋„˜๋ธ” OpenAI ๋‹จํ†ก๋ฐฉ ์ฑŒ๋ฆฐ์ง€ - ํ”„๋กœ์ ํŠธ ํšŒ๊ณ 

Table of Contents

์‹œ์ž‘ํ•˜๊ฒŒ ๋œ ๊ณ„๊ธฐ

ui design

3์›”์— ์ •๋ง ๋งŽ์€ ์ผ๋“ค์ด ์žˆ์—ˆ๋‹ค. ์•„์ง ๋ญ”๊ฐ€ ์„ฑ๊ณผ๋ผ๊ณ  ๋‚ด์„ธ์šธ ๊ฒฐ๊ณผ๋ฌผ์ด ์—†๊ธด ํ•˜์ง€๋งŒ ๊ทธ๋ž˜๋„ ๋ฌด์˜๋ฏธํ•˜์ง„ ์•Š์•˜๋‹ค(?)๊ณ  ์ฃผ์žฅํ•  ์ˆ˜ ์žˆ๋Š” ๊ทธ๋Ÿฐ ์‹œ๊ฐ„์ด์—ˆ๋‹ค. ์ ์  ์ผ์ด ์ •๋ฆฌ๊ฐ€ ๋˜๊ณ  ์—ฌ์œ ๊ฐ€ ์ƒ๊ธฐ๋ฉด์„œ ๋ฒˆ์•„์›ƒ์ด ์˜จ ์‚ฌ๋žŒ์ฒ˜๋Ÿผ ํ‘น ๋Š˜์–ด์ง€๋Š” ๋Š๋‚Œ์ด ์žˆ์—ˆ๋Š”๋ฐ, ๊ทธ ์™€์ค‘์— ๋ˆ„๊ฐ€ ๋„˜๋ธ”์„ ์†Œ๊ฐœํ•ด ์ฃผ์…จ๋‹ค.

๋Œ€์ถฉ.. ํ”„๋กœ์ ํŠธ ์ฃผ์ œ์™€ ์š”๊ตฌ์‚ฌํ•ญ์„ ์ฃผ๊ณ  ๊ตฌํ˜„์„ ํ•ด ๋ณด๋Š”? ํ”„๋กœ์„ธ์Šค์˜ ํ™œ๋™์œผ๋กœ ์ดํ•ดํ–ˆ๋‹ค. ๊ธฐ๊ฐ„์ด ์งง์•„ ํ™• ๋ชฐ์ž…ํ•˜๊ธฐ ์ข‹๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์„ ํ•ด์„œ ํ•œ ๋ฒˆ ๋ง›๋งŒ ๋ณด๊ธฐ๋กœ ํ–ˆ๋‹ค. OpenAI API๋ฅผ ํ™œ์šฉํ•ด ๋ณด๋Š” ํ”„๋กœ์ ํŠธ๋ผ๋Š” ์ ์ด ๊ด€์‹ฌ์„ ๋Œ๊ธฐ๋„ ํ–ˆ๋‹ค. ์š”์ƒˆ ์ฑ—์Œคํ•œํ…Œ ์ด๋Ÿฐ์ €๋Ÿฐ ๋„์›€๋„ ๋ฐ›์•˜๊ณ  ๊ด€๋ จ ์•„ํ‹ฐํด๋„ ๋งŽ์ด ๋ณด์ด๊ณ ..

๋ง›์„ ๋ณด์ž

์Šคํ† ๋ฆฌ๋ถ์„ ์“ฐ์ž

ํ•ต์‹ฌ ๊ธฐ๋Šฅ ์™ธ์—๋„ storybook์˜ ์ž‘์„ฑ์ด ์š”๊ตฌ๋˜์—ˆ๋‹ค. ๋‹คํ–‰ํžˆ๋„ storybook์€ ์ง€๊ธˆ ํ•˜๊ณ  ์žˆ๋Š” ํ”„๋กœ์ ํŠธ์—์„œ ์‚ฌ์šฉ ๊ฒฝํ—˜์ด ์žˆ์–ด์„œ ๋น„๊ต์  ๊ฐ€๋ฒผ์šด ๋งˆ์Œ์œผ๋กœ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ฒ ๋‹ค ์ƒ๊ฐํ–ˆ๋Š”๋ฐ.. storybook ์„ค์น˜๋ถ€ํ„ฐ ํฐ ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ๋‹ค. ์šฐ์„  ํ”„๋กœ์ ํŠธ์—์„œ ์š”๊ตฌํ•˜๋Š” ๊ฒƒ์ด Next.js์˜€๊ณ , ๋‚ด ๊ฐœ์ธ์ ์ธ ์„ ํ˜ธ๋กœ Yarn berry(PnP)๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌ์„ฑํ•˜๋ ค๊ณ  ํ–ˆ์—ˆ๋Š”๋ฐ, Next.js ํ”„๋กœ์ ํŠธ์—์„œ storybook์„ ์‚ฌ์šฉํ•˜๋ ค๋ฉด ํŠน์ • builder add-on์„ ์‚ฌ์šฉํ•ด์•ผ ํ–ˆ๊ณ , ๋Œ€์ถฉ ์ด ๊ทผ์ฒ˜ ์ง€์ ์—์„œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ด์„œ ์‹คํ–‰์ด ๋ถˆ๊ฐ€๋Šฅํ–ˆ๋‹ค. ๋‚ด๊ฐ€ ๋Œ€์ถฉ ์ง์ž‘ํ•œ ์š”์ธ์€ ์ด๋žฌ๋‹ค.

  • ์ตœ๊ทผ์— ์—…๋ฐ์ดํŠธ๋œ storybook 7๊ณผ storybook/nextjs ๋นŒ๋”์˜ ํ˜ธํ™˜ ๋ฌธ์ œ
  • storybook 7๊ณผ yarn PnP์˜ ํ˜ธํ™˜ ๋ฌธ์ œ
  • Next.js 13์—์„œ ์‚ฌ์šฉํ•œ๋‹ค๋Š” turbopack๊ณผ์˜ ํ˜ธํ™˜ ๋ฌธ์ œ
  • ๋‚ด ์ปดํ“จํ„ฐ ๋ฌธ์ œ(์ด์ „์—๋„ storybook ๊ด€๋ จํ•ด์„œ ๋‚ด ์ปดํ“จํ„ฐ ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ๋‹ค)

๊ฝค ๋งŽ์€ ๋ ˆํผ๋Ÿฐ์Šค๋ฅผ ์ฐพ์•„๋‹ค๋‹ˆ๋ฉฐ ํ•ด๊ฒฐ์„ ์‹œ๋„ํ–ˆ์ง€๋งŒ ๊ฒฐ๊ตญ Yarn PnP๋ฅผ ํฌ๊ธฐํ•˜๋Š” ๊ฒƒ์œผ๋กœ ํ•ด๊ฒฐ๋˜์—ˆ๋‹ค. PnP๋ฅผ ์“ฐ์ง€ ์•Š์œผ๋ฉด ์ง€๊ธˆ ๋ฐ์Šคํฌํƒ‘์ด ๊ฝค ๋Š๋ฆฐ ์ƒํƒœ์—ฌ์„œ ์กฐ๊ธˆ ์†์ƒํ•œ ๋ถ€๋ถ„์ด ์žˆ์—ˆ๋‹ค. ์ด ๋‚ด์šฉ์€ ๋‚˜์ค‘์— ์ •๋ฆฌ๊ฐ€ ๋œ๋‹ค๋ฉด ๋‹ค๋ฅธ ๊ธ€๋กœ ์ •๋ฆฌํ•˜๊ณ  ์‹ถ๋‹ค.

OpenAI์™€ ์นœํ•ด์ง€์ž

๊ฒฐ๊ณผ๋ฌผ ์‚ฌ์ง„

์ฑ—์œ์„ ์ œ๋Œ€๋กœ ๋ชจ์‹œ๊ธฐ ์œ„ํ•ด์„œ๋Š” API ๋ฌธ์„œ๋ฅผ ์ฝ์–ด์•ผ ํ–ˆ๋‹ค. ๋‚ด๊ฐ€ ์ง์ ‘ ๋งจ๋•…์—์„œ ๋ฌธ์„œ๋ฅผ ์ •๋…ํ•˜๋ฉฐ ๋ฌด์–ธ๊ฐ€ ์‹œ์ž‘ํ•ด ๋ณธ ๊ฒฝํ—˜์ด ์žˆ๋˜๊ฐ€? ์•„๋ฌดํŠผ ๊ฐ€๋œฉ์ด๋‚˜ ๋ฏธ์ง€์˜ ์˜์—ญ์ธ๋ฐ ์˜์–ด๋กœ ์จ์žˆ๋‹ค๋Š” ์ ์ด ํฐ ๊ฑธ๋ฆผ๋Œ์ด ๋˜์—ˆ๋‹ค.

๋‹คํ–‰ํžˆ ๋‚ด๊ฐ€ ์ฝ์–ด์•ผ ํ•˜๋Š” ๋ถ€๋ถ„์ด ๋ช…ํ™•ํ–ˆ๊ณ , ๋จผ์ € ๋ฌธ์„œ๋ฅผ ์ฝ์–ด ๋ณด์‹  ์„ ๋ฐœ๋Œ€(?) ํŒ€์› ๋ถ„๋“ค์˜ ํ›„๊ธฐ๋ฅผ ํ†ตํ•ด ๊ฝค ๊ดœ์ฐฎ์€ ์ง€์ ์—์„œ ์‹œ์ž‘ํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค. ๊ฑฑ์ •ํ–ˆ๋˜ ๊ฒƒ๋ณด๋‹ค ๊ธˆ๋ฐฉ ChatGPT๋ฅผ ์“ฐ๋Š” ๋Š๋‚Œ์ฒ˜๋Ÿผ ๋Œ€ํ™”๋ฅผ ์ฃผ๊ณ  ๋ฐ›์„ ์ˆ˜ ์žˆ์—ˆ๋‹ค.
๋ฌธ์ œ๋Š” ๋‹จ์ˆœํžˆ 1:1 ๋Œ€ํ™”๋งŒ ํ•˜๋Š” ์ฑ—์Œค์„ ์–ด๋–ป๊ฒŒ 1:N, ๊ทธ๋ฆฌ๊ณ  ai๋ผ๋ฆฌ๋„ ๋Œ€ํ™”๋ฅผ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ตฌํ˜„์„ ํ• ๊นŒ ํ•˜๋Š” ๋ฌธ์ œ์˜€๋‹ค. ์ด๋Ÿฐ์ €๋Ÿฐ ๊ณ ๋ฏผ์„ ํ•˜๋‹ค๊ฐ€ OpenAI ์ปค๋ฎค๋‹ˆํ‹ฐ ๊ธ€์—์„œ ํžŒํŠธ๋ฅผ ์–ป์—ˆ๋‹ค. ์ฑ—๋ด‡์—๊ฒŒ ์š”์ฒญ์„ ๋ณด๋‚ผ ๋•Œ ์‹œ์Šคํ…œ ๋ฉ”์‹œ์ง€๊ฐ€ ๋ฌด์Šจ ์—ญํ• ์„ ํ•˜๋Š” ์ง€ ์™€๋‹ฟ์ง€ ์•Š์•˜๋Š”๋ฐ, ์‹œ์Šคํ…œ ๋ฉ”์‹œ์ง€๋ฅผ ํ†ตํ•ด ์ฑ—๋ด‡์—๊ฒŒ ๋„ˆ๋Š” ๋ˆ„๊ตฌ๋‹ค ํ•˜๋Š” ๊ฒƒ์„ ์„ค๋ช…ํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค. ์ด ๋ฉ”์‹œ์ง€๋ฅผ ํ†ตํ•ด ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ๋‹ต์„ ์–ป์–ด๋‚ด๋ฉด ๋  ๊ฒƒ์ด๋ผ ์ƒ๊ฐํ–ˆ๋‹ค.

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'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.
@@ -8,4 +8,5 @@

ํ•œ ๋ฒˆ์˜ ์š”์ฒญ์—์„œ ์ฃผ๊ณ ๋ฐ›๋Š” ํ† ํฐ (๋Œ€์ถฉ ๋ฉ”์‹œ์ง€์˜ ๊ธธ์ด) ์ˆ˜์˜ ์ œํ•œ์ด ์žˆ์–ด์„œ, ์ง€๋‚˜์น˜๊ฒŒ ๊ธธ์ง€ ์•Š์œผ๋ฉด์„œ๋„ ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ๊ฒฐ๊ณผ๋ฅผ ๋‚ด๋„๋ก ๋ฉ”์‹œ์ง€๋ฅผ ๋„ฃ์—ˆ๋‹ค. ํ•™๋ถ€์ƒ ๋•Œ OpenAI Gym์„ ํ•ด ๋ณธ ๊ฒฝํ—˜์ด ์กฐ๊ธˆ ์˜ค๋ฒ„๋žฉ๋˜๋ฉด์„œ ๋Š๋‚Œ์ด ๋ฌ˜ํ–ˆ๋‹ค. ์–˜์•ผ ์ด๊ฑด ์ด๋ ‡๊ฒŒ ๋‹ตํ•ด์•ผ ํ•œ๋‹จ๋‹ค..
๋ฌธ์ œ๋Š” ์ฑ—์Œค์ด ๊ธฐ๋ถ„์— ๋”ฐ๋ผ ๋Œ€๋‹ต์„ ์ž˜ ํ•ด์ฃผ๊ธฐ๋„, ๊ธฐ๋ณธ์ ์ธ ์‘๋‹ต ํฌ๋งท๋„ ์ง€ํ‚ค์ง€ ์•Š๋Š” ์ผ๋„ ์žˆ์–ด์„œ ์ด๋Ÿฐ ์˜ˆ์™ธ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค์ง€ ์•Š์œผ๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ• ์ง€ ๊ณ ๋ฏผ์„ ๋งŽ์ด ํ–ˆ๋‹ค. ๋‚ด๊ฐ€ ์‹œ์Šคํ…œ ๋ฉ”์‹œ์ง€๋กœ ์š”๊ตฌํ•˜๋Š” ๋‚ด์šฉ ์ž์ฒด๊ฐ€ ์ค‘์˜์ ์œผ๋กœ ํ•ด์„๋  ์†Œ์ง€๊ฐ€ ์žˆ๋Š” ๊ฒƒ์ด ๋ฌธ์ œ๋ผ๊ณ  ์ƒ๊ฐํ•ด์„œ ์ด๊ฒƒ์ €๊ฒƒ ๋ฐ”๊พธ๋ฉด์„œ ์กฐ์ ˆํ–ˆ๋‹ค. ๊ฒฐ๊ณผ์ ์œผ๋กœ๋Š” ํ•ญ์ƒ ์ข‹์€ ๊ฒฐ๊ณผ๋ฅผ ๋ณด์—ฌ์ฃผ์ง„ ์•Š์ง€๋งŒ ์ ์–ด๋„ ๋ฉ”์‹œ์ง€ ํฌ๋งท์€ ์ง€์ผœ์„œ ์ด์•ผ๊ธฐํ•˜๋„๋ก ๋งŒ๋“œ๋Š”๋ฐ๋Š” ์„ฑ๊ณตํ–ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  API ์š”์ฒญ์„ ๋ณด๋‚ผ ๋•Œ.. ์š”๊ตฌ์‚ฌํ•ญ์—์„œ๋Š” ai๋ผ๋ฆฌ๋„ ๊ณ„์† ์ฑ„ํŒ…์„ ํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๊ตฌํ˜„ํ•˜๋ผ๊ณ  ๋˜์–ด ์žˆ์—ˆ๋Š”๋ฐ, ์ง€์†์ ์œผ๋กœ API ์š”์ฒญ์„ ๋ณด๋‚ด์„œ ์˜๋ฏธ ์—†๋Š” ๋Œ€ํ™”๋ฅผ ์ƒ์‚ฐํ•˜๋Š” ๊ฒƒ์ด ๋ญ”๊ฐ€ ์ด์ƒํ•˜๊ธฐ๋„ ํ–ˆ๊ณ  OpenAI์—์„œ ์ œ๊ณตํ•˜๋Š” ๋ฌด๋ฃŒ ์‚ฌ์šฉ๋Ÿ‰์œผ๋กœ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‚˜ ์‹ถ์€ ๊ฑฑ์ •์— ๊ฐ ๋ด‡์ด ์„œ๋กœ์—๊ฒŒ ํ•  ๋ง์ด ์žˆ๋Š” ๊ฒฝ์šฐ์— ํ•œ๋ฒˆ์— ๋Œ€ํ™”๋ฅผ ๋งŒ๋“ค์–ด ๋ณด๋‚ด๋„๋ก ๊ตฌํ˜„ํ–ˆ๋‹ค.

์ข‹์€ ํŒ€!

bug issue

๊ณผ์ •์„ ํ˜ผ์ž๋ณด๋‹ค๋Š” ์—ฌ๋Ÿฟ์ด์„œ ๊ฒช์œผ๋ฉด ๋” ์–ป๋Š” ๊ฒŒ ์žˆ์„ ๊ฑฐ๋ž€ ์ƒ๊ฐ์— ํŒ€์—๋„ ์ฐธ์—ฌํ–ˆ๋‹ค. ๋‚˜์™€ ๋น„์Šทํ•œ ์‹ ์ž… ๋ถ„๋“ค์ด์…จ๊ณ , ์ •๋ง ์šด ์ข‹๊ฒŒ๋„ ์„œ๋กœ ์„ฑ๊ฒฉ์ด ์ž˜ ๋งž์•„์„œ ์ฆ๊ฒ๊ฒŒ ์Šคํฌ๋Ÿผ์„ ํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค. ๋‹ค๋ฅธ ํ”„๋กœ์ ํŠธ์™€ ๊ฒน์น˜๋ฉด์„œ ๋ง‰๋ฐ”์ง€์— ๊ฑฐ์˜ ํ•ด์ปคํ†ค ๋งˆ์ธ๋“œ(?)๋กœ ํ•˜๋‹ค๊ฐ€ ์–ด๋–ป๊ฒŒ ์Šคํฌ๋Ÿผ ๋•Œ 1์ฐจ ๋ฐฐํฌ๊นŒ์ง€ ๋งˆ์น˜๊ณ  ๊ฒฐ๊ณผ๋ฌผ์„ ๋ณด์—ฌ๋“œ๋ ธ๋Š”๋ฐ, ํ•œ ๋ถ„์ด ๋ฒ„๊ทธ๊นŒ์ง€ ๋ฐœ๊ฒฌํ•ด ์ฃผ๊ธฐ๋„ ํ–ˆ๋‹ค. ์žฌ๋ฐŒ๋Š” ๊ฒฝํ—˜์ด์—ˆ๋‹ค ใ…‹ใ…‹..
๋„ˆ๋ฌด ํ™œ๊ธฐ์ฐจ๊ณ  ์ ๊ทน์ ์œผ๋กœ ํ•จ๊ป˜ ํ•ด ์ฃผ์…”์„œ ๋„ˆ๋ฌด ๊ฐ์‚ฌ๋“œ๋ ค์š”!

๋งˆ์น˜๋ฉฐ

์ƒ๊ฐ๋ณด๋‹ค ์ผ์ •์ด ๋นก๋นกํ–ˆ๊ณ , ๊ฑฑ์ •๋ณด๋‹ค๋Š” ํ•  ๋งŒ ํ–ˆ๋˜ ์ฑŒ๋ฆฐ์ง€์˜€๋‹ค. ์•„์‰ฌ์šด ์ ์ด ์žˆ๋‹ค๋ฉด ์ฑ—์Œค๋“ค์ด ๊ธฐ๋ถ„์— ๋”ฐ๋ผ ๋Œ€ํ™”์— ์†Œ๊ทน์ ์œผ๋กœ ์ฐธ์—ฌํ•œ๋‹ค๋Š” ์ ๊ณผ API ํ…Œ์ŠคํŠธ๋ผ๋Š” ๊ฒƒ์„ ์–ด๋–ค ๊ฒƒ์„ ์–ด๋–ป๊ฒŒ ํ…Œ์ŠคํŠธํ•ด์•ผ ํ• ์ง€ ๊ฐ์ด ์˜ค์ง€ ์•Š์•„์„œ ๊ตฌํ˜„ํ•˜์ง€ ๋ชปํ•œ ๊ฒƒ.. ์–ด๋–ป๊ฒŒ ํ–ˆ์–ด์•ผ ํ• ๊นŒ? ๋‚˜์ค‘์— ๋ชจ๋ฒ” ์‚ฌ๋ก€๋ผ๊ณ  ํ•ด์•ผ ํ•˜๋‚˜.. ์ž˜ ํ•˜์‹  ๋ถ„๋“ค์˜ ํ”„๋กœ์ ํŠธ๊ฐ€ ๊ณต๊ฐœ๋œ๋‹ค๋ฉด ํ•œ ๋ฒˆ ๋ณด๊ณ  ์‹ถ๋‹ค.

๋„˜๋ธ”ํ†ก ๋ ˆํฌ์ง€ํ† ๋ฆฌ
๋„˜๋ธ”ํ†ก ๋ฐฐํฌ ๋งํฌ

\ No newline at end of file +Hugo. + \ 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 1842f90..0d98714 100644 --- a/posts/2023/05/exploring-yarn-berry/index.html +++ b/posts/2023/05/exploring-yarn-berry/index.html @@ -1,4 +1,4 @@ -์–€ ๋ฒ ๋ฆฌ ํƒํ—˜ํ•˜๊ธฐ | PrayinForRain.dev +์–€ ๋ฒ ๋ฆฌ ํƒํ—˜ํ•˜๊ธฐ | PrayinForRain.dev

์–€ ๋ฒ ๋ฆฌ ํƒํ—˜ํ•˜๊ธฐ

Table of Contents

๋‚ด ๋ ˆํฌ์˜ ์œ„ํ—˜ํ•œ ๋…€์„

cds issue

์ตœ๊ทผ ์ฐจ๊ฐ€์šด ๋””์ž์ธ ์‹œ์Šคํ…œ(CDS)์˜ ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €๋ฅผ Yarn berry๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ํ•˜๋Š” ์ž‘์—…์„ ํ•˜๊ณ  ์žˆ๋‹ค. ์ด์œ ๋Š” ํ›„์ˆ ํ•  node_modules ์ž์ฒด์˜ ๋‹จ์ ๋„ ์žˆ๊ณ , ๋‚ด ๋ฐ์Šคํฌํƒ‘์ด HDD๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— node_modules์˜ ์ˆ˜์‹ญ๋งŒ ๊ฐœ์˜ ํŒŒ์ผ๋“ค์„ ๋‹ค๋ฃจ๋Š” ๊ฒƒ์ด ๋„ˆ๋ฌด ๋Š๋ ค์„œ ๊ฐ•๋ ฅ ์ถ”์ฒœํ–ˆ๋‹ค.

ํ•˜์ง€๋งŒ ์‚ฌ์‹ค ๋‚˜๋Š” PnP๊ฐ€ ์–ด๋–ป๊ฒŒ ํŒจํ‚ค์ง€๋“ค์„ resolveํ•˜๋Š”์ง€ ์ „ํ˜€ ๋ชจ๋ฅธ๋‹ค. ๊ทธ์ € ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ์˜ค๋ฅ˜ ์—†์ด ์“ธ ์ˆ˜ ์žˆ๋Š”์ง€๋งŒ ์—ด์‹ฌํžˆ ๊ณ ๋ฏผํ–ˆ๋Š”๋ฐ, ํŒ€์›๋“ค์—๊ฒŒ ์„ค๋ช…ํ•  ๋•Œ ๋งˆ๋‹ค ๋ง‰์—ฐํžˆ ์–€๋ฒ ๋ฆฌ๊ฐ€ ์ž˜๋ชปํ–ˆ๊ฒ ์ฃ ~ ํ•˜๋Š” ์Šค์Šค๋กœ์—๊ฒŒ ์ž๊ดด๊ฐ์„ ๋Š๊ปด ์ด ๊ธฐํšŒ์— ํ•œ ๋ฒˆ Yarn PnP๋ฅผ ๋˜‘๋ฐ”๋กœ ๋งˆ์ฃผํ•ด ๋ณด๊ธฐ๋กœ ํ–ˆ๋‹ค.

์šฐ๋ฆฌ๊ฐ€ ์•„๋Š” node_modules

ํŒจํ‚ค์ง€๋ฅผ ์ฐพ์•„์„œ ํ—ค๋งค๊ธฐ

Node.js์—๋Š” ์‚ฌ์‹ค ํŒจํ‚ค์ง€์˜ ๊ฐœ๋…์ด ๋ช…์‹œ์ ์œผ๋กœ ์ •์˜๋˜์–ด ์žˆ์ง€ ์•Š์•˜๋‹ค. ๋”ฐ๋ผ์„œ ๋‹ค๋ฅธ ๋ชจ๋“ˆ์„ ์‚ฌ์šฉํ•  ๋•Œ์— Node.js๋Š” ํŒจํ‚ค์ง€๊ฐ€ ์•„๋‹Œ ํŒŒ์ผ ๋‹จ์œ„๋กœ ๋ชจ๋“ˆ์„ ์ฐพ์•„์„œ resolveํ•˜๊ณ  ์žˆ์—ˆ๋‹ค.

๊ธฐ์กด npm์˜ ๊ฒฝ์šฐ์—๋Š” ํŒจํ‚ค์ง€์˜ node_modules, npm์ด ์„ค์น˜๋œ ๋””๋ ‰ํ† ๋ฆฌ์˜ ์ „์—ญ ํด๋” ๋“ฑ๋“ฑ ์—ฌ๋Ÿฌ ๊ณณ์„ ์ฐจ๋ก€๋กœ ํŒจํ‚ค์ง€๋ฅผ ์ฐพ์•„ ๋‚˜๊ฐ”๋‹ค.

$ node
@@ -113,4 +113,5 @@

optimizeDeps.js๋ผ๋Š” ํŒŒ์ผ์—์„œ ํ•„์š”๋กœ ํ•˜๋Š” ์™ธ๋ถ€ ๋ชจ๋“ˆ๋“ค์„ ๋”ฐ๋กœ ์ ์–ด ๋‘๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด์—ˆ๋‹ค. ์•„๋งˆ ์ด ํŒŒ์ผ์€ vite์˜ ๋””ํŽœ๋˜์‹œ ์ตœ์ ํ™” ์˜ต์…˜์„ ์„ค์ •ํ•˜๋Š” ํŒŒ์ผ๋กœ ๋ณด์ธ๋‹ค.

์Šคํ† ๋ฆฌ๋ถ์€ ๋ฆฌ์•กํŠธ๋ฅผ CRA๋ฅผ ํ†ตํ•ด ์ดˆ๊ธฐ ์„ค์ •์„ ํ•˜๋“ฏ์ด ํ†ต์ƒ npx storybook init์„ ํ†ตํ•ด ์ดˆ๊ธฐ ์„ค์ •์„ ์ง„ํ–‰ํ•˜๊ธฐ ๋•Œ๋ฌธ์— package.json์— ์˜์กด์„ฑ์ด ์ œ๋Œ€๋กœ ๋ช…์‹œ๋˜์–ด ์žˆ์ง€ ์•Š์€ ๋“ฏ ํ•˜๋‹ค. ์–ด์ฐŒ ๋ณด๋ฉด ์œ ๋ น ์˜์กด์„ฑ ํ˜„์ƒ์„ ์ด์šฉํ•˜๋Š” ์…ˆ์ด๋‹ค.

์ด๊ฒŒ @storybook/builder-vite@0.4.2 ๋ฒ„์ „์˜ ์ฝ”๋“œ์ธ๋ฐ, Storybook 7์˜ ๋ฆด๋ฆฌ์ฆˆ ์ดํ›„๋กœ builder ํ”Œ๋Ÿฌ๊ทธ์ธ๋“ค์ด ์Šคํ† ๋ฆฌ๋ถ ๋ฉ”์ธ ๋ ˆํฌ์ง€ํ† ๋ฆฌ์— ๋ชจ๋…ธ๋ ˆํฌ ํ˜•ํƒœ๋กœ ํ†ตํ•ฉ๋˜๋˜ ์‹œ๊ธฐ ๊ทผ์ฒ˜๋กœ ์˜์กด์„ฑ ์—ญ์‹œ ์ œ๋Œ€๋กœ ๋ช…์‹œ๋˜์—ˆ๋‹ค. [๊ด€๋ จ ์ปค๋ฐ‹] ๋”ฐ๋ผ์„œ ์ง€๊ธˆ์€ ํ•ด๋‹น๋˜์ง€ ์•Š๋Š” ์ด์Šˆ์ด๋ฉฐ, ๋นŒ๋”์˜ ๋ฒ„์ „ ์—ญ์‹œ ๋‹ค๋ฅธ addon๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์Šคํ† ๋ฆฌ๋ถ์˜ ๋ฒ„์ „๊ณผ ํ†ต์ผ๋˜์—ˆ๋‹ค.

๋งˆ์น˜๋ฉฐ..

cds issue

์‚ฌ์‹ค ์กฐ๊ธˆ ๋œฌ๊ธˆ์—†์ด ์ค€๋น„ํ•œ ๋ฐœํ‘œ ์ž๋ฃŒ์ธ๋ฐ, ๊ฐ€๋ณ๊ฒŒ๋งŒ ํ•ด์•ผ์ง€.. ํ•˜๊ณ  ์‹œ์ž‘ํ–ˆ๋‹ค๊ฐ€ ์–ด๋ ดํ’‹์ด ์˜ˆ์ƒํ–ˆ๋˜ ๋‚ด์šฉ์ด ํ‹€๋ฆฌ๊ณ  ํ‹€๋ฆฌ๊ณ ๋ฅผ ๋ฐ˜๋ณตํ•ด์„œ ๊ฒ€์ฆ์„ ๋ฐ˜๋ณตํ•˜๋‹ค๊ฐ€ ๊ธ€์ด ํƒœ์‚ฐ์œผ๋กœ ๊ฐ€๋ฒ„๋ ธ๋‹ค. ๋งˆ์ง€๋ง‰์—๋Š” ๋‚ด๊ฐ€ ์™œ ์ด๊ฑธ ๋ณด๊ณ  ์žˆ์—ˆ๋Š”์ง€๋ฅผ ๊นŒ๋จน์–ด์„œ ์†์„ ๋†“๊ณ  ๋‹ค์‹œ ์ปจํ…์ŠคํŠธ๋ฅผ ๋”ฐ๋ผ๊ฐ€๊ธฐ๋„ ํ–ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‹ˆ๊นŒ ์Œ.. ๋งค๋„๋Ÿฌ์šด ๊ธ€์€ ์•„๋‹Œ ๊ฒƒ ๊ฐ™๋‹ค. ๋‚ด์šฉ ์—†์ด ์ฃผ์ œ๋งŒ ์ •ํ•˜๊ณ  ์‹œ์ž‘ํ•œ ๊ธ€์ด๋ผ ๊ทธ๋Ÿฐ๊ฐ€..

์ด ๊ธ€์„ ๋์œผ๋กœ ๋” ์ด์ƒ ์–€๋ฒ ๋ฆฌ๋ฅผ ๋ถ™๋“ค๊ณ  ์”จ๋ฆ„ํ•˜๋Š” ์ผ์€ ์—†์—ˆ์œผ๋ฉด ์ข‹๊ฒ ์ง€๋งŒ ์•„๋งˆ ๊ทธ๋ ‡์ง„ ๋ชปํ•  ๊ฒƒ ๊ฐ™๊ณ .. ๋‹ค์Œ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•œ๋‹ค๋ฉด ๋ฐ˜๋“œ์‹œ pnpm์„ ์จ ๋ณด๊ณ  ์‹ถ๋‹ค๋Š” ์ƒ๊ฐ์„ ํ•˜๊ณ  ์žˆ๋‹ค. CDS๋ฅผ ํ•˜๋ฉด์„œ pnpm์„ ์‚ฌ์šฉํ•˜๋Š” ๋ ˆํผ๋Ÿฐ์Šค๊ฐ€ ๊ฝค ๋งŽ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ์•˜๊ณ , Yarn์—์„œ๋„ pnpm ๋ง์ปค๋ฅผ ์ง€์›ํ•˜๊ณ  ์žˆ์œผ๋‹ˆ pnpm๋„ ๊ทธ๋งŒ์˜ ์žฅ์ ์ด ์žˆ๊ฒ ๊ตฌ๋‚˜ ํ•˜๋Š” ๋ง‰์—ฐํ•œ ์ƒ๊ฐ ์ค‘.

Refs.

GitHub - yarnpkg/berry: ๐Ÿ“ฆ๐Ÿˆ Active development trunk for Yarn โš’
Plug’n’Play
(๋ฒˆ์—ญ) ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Import Map์— ๋Œ€ํ•ด ์•Œ์•„์•ผ ํ•  ๋ชจ๋“  ๊ฒƒ
package.json์— ์Œ“์—ฌ์žˆ๋Š” ๊ฐœ๋ฐœ ๋ถ€์ฑ„
node_modules๋กœ๋ถ€ํ„ฐ ์šฐ๋ฆฌ๋ฅผ ๊ตฌ์›ํ•ด ์ค„ Yarn Berry
npm 7 is now generally available!
Next.js Storybook์— Yarn PnP ์ ์šฉํ•˜๊ธฐ | PrayinForRain.dev
Vite
Yarn PnP ์˜์กด์„ฑ ์—๋Ÿฌ ํ•ด๊ฒฐ๊ธฐ
GitHub - nodejs/node: Node.js JavaScript runtime
Modules: ECMAScript modules | Node.js v20.2.0 Documentation

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/posts/index.html b/posts/index.html index 64a7e30..52571ce 100644 --- a/posts/index.html +++ b/posts/index.html @@ -1,7 +1,8 @@ -Posts | PrayinForRain.dev +Posts | PrayinForRain.dev

Posts

2023

2022

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/style.min.719fdca77f0bf265e82d40c1ca95ade579b043df686b013ea25c4ef001e9a87f.css b/style.min.719fdca77f0bf265e82d40c1ca95ade579b043df686b013ea25c4ef001e9a87f.css deleted file mode 100644 index aca11c0..0000000 --- a/style.min.719fdca77f0bf265e82d40c1ca95ade579b043df686b013ea25c4ef001e9a87f.css +++ /dev/null @@ -1 +0,0 @@ -@charset "UTF-8";@font-face{font-display:swap;font-family:roboto;font-style:normal;font-weight:400;src:url(fonts/Roboto/roboto-v30-latin-regular.eot);src:url(fonts/Roboto/roboto-v30-latin-regular.eot?#iefix)format("embedded-opentype"),url(fonts/Roboto/roboto-v30-latin-regular.woff2)format("woff2"),url(fonts/Roboto/roboto-v30-latin-regular.woff)format("woff"),url(fonts/Roboto/roboto-v30-latin-regular.ttf)format("truetype"),url(fonts/Roboto/roboto-v30-latin-regular.svg#Roboto)format("svg")}*{-webkit-transition:background-color 75ms ease-in,border-color 75ms ease-in;-moz-transition:background-color 75ms ease-in,border-color 75ms ease-in;-ms-transition:background-color 75ms ease-in,border-color 75ms ease-in;-o-transition:background-color 75ms ease-in,border-color 75ms ease-in;transition:background-color 75ms ease-in,border-color 75ms ease-in}.notransition{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}html{overflow-x:hidden;width:100%}body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,dl,dd,ol,ul,figure{margin:0;padding:0}body{min-height:100vh;overflow-x:hidden;position:relative;color:#434648;background-color:#fff;font:16px/1.85 Roboto,sans-serif;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-webkit-font-feature-settings:"kern" 1;-moz-font-feature-settings:"kern" 1;-o-font-feature-settings:"kern" 1;font-feature-settings:"kern" 1;font-kerning:normal;box-sizing:border-box}h1,h2,h3,h4,h5,h6,p,blockquote,pre,ul,ol,dl,figure{margin-top:10px;margin-bottom:10px}strong,b{font-weight:700;color:#0d122b}hr{border-bottom:0;border-style:solid;border-color:#ececec}img{max-width:100%;vertical-align:middle;-webkit-user-drag:none;margin:0 auto;text-align:center}figure{position:relative}figure>img{display:block;position:relative}figcaption{font-size:13px;text-align:center}ul li{display:list-item;text-align:-webkit-match-parent}ol li{position:relative}ul,ol{margin-top:0;margin-left:30px}li{padding-bottom:1px;padding-top:1px}li:before{color:#0d122b}li>ul,li>ol{margin-bottom:2px;margin-top:0}h1,h2,h3,h4,h5,h6{color:#0d122b;font-weight:700}h1+ul,h1+ol,h2+ul,h2+ol,h3+ul,h3+ol,h4+ul,h4+ol,h5+ul,h5+ol,h6+ul,h6+ol{margin-top:10px}@media screen and (max-width:768px){h1,h2,h3,h4,h5,h6{scroll-margin-top:65px}}h1>a,h2>a,h3>a,h4>a,h5>a,h6>a{text-decoration:none;border:none}h1>a:hover,h2>a:hover,h3>a:hover,h4>a:hover,h5>a:hover,h6>a:hover{text-decoration:none;border:none}a{color:inherit;text-decoration-color:#d2c7c7}a:hover{color:#003fff}a:focus{outline:3px solid rgba(0,54,199,.6);outline-offset:2px}del{color:inherit}em{color:inherit}blockquote{color:#525b66;opacity:.9;border-left:5px solid #c4c8cc;padding:0 0 0 1rem;margin-left:.3rem;margin-right:.3rem;font-size:1em}blockquote>:last-child{margin-bottom:0;margin-top:0}.wrapper{max-width:-webkit-calc(720px - (30px * 2));max-width:calc(720px - (30px * 2));position:relative;margin-right:auto;margin-left:auto;padding-right:30px;padding-left:30px}@media screen and (max-width:768px){.wrapper{max-width:-webkit-calc(720px - (30px));max-width:calc(720px - (30px));padding-right:20px;padding-left:20px}.wrapper.blurry{animation:.2s ease-in forwards blur;-webkit-animation:.2s ease-in forwards blur}}u{text-decoration-color:#d2c7c7}small{font-size:14px}sup{border-radius:10%;top:-3px;left:2px;font-size:small;position:relative;margin-right:2px}.overflow-table{overflow-x:auto}table{width:100%;margin-top:15px;border-collapse:collapse;font-size:14px}table thead{font-weight:700;color:#0d122b;border-bottom:1px solid #ececec}table th,table td,table tr{border:1px solid #ececec;padding:2px 7px}.navbar:after,.wrapper:after{content:"";display:table;clear:both}mark,::selection{background:#fffba0;color:#0d122b}.gist table{border:0}.gist table tr,.gist table td{border:0}.navbar{height:auto;max-width:calc(890px - (30px * 2));max-width:-webkit-calc(890px - (30px * 2));position:relative;margin-right:auto;margin-left:auto;border-bottom:1px solid #ececec;padding:.5rem .3rem}.logo{float:left;margin:.5rem 0 0 1rem}.logo>svg{opacity:.7}.logo:hover>svg{opacity:1}.menu{user-select:none;-ms-user-select:none;-webkit-user-select:none;display:flex;flex-direction:row;justify-content:space-between}.menu ul{margin:0}.menu .menu-separator{margin-right:.7rem}@media screen and (max-width:768px){.menu .menu-separator{display:none}}.menu a#mode{-webkit-transform:scale(1,1);transform:scale(1,1);opacity:.7;z-index:1}.menu a#mode:hover{cursor:pointer;opacity:1}.menu a#mode:active{-webkit-transform:scale(.9,.9);transform:scale(.9,.9)}.menu a#mode .mode-moon{display:block}.menu a#mode .mode-moon line{stroke:#0d122b;fill:none}.menu a#mode .mode-moon circle{fill:#0d122b;stroke:#0d122b}.menu a#mode .mode-sunny{display:none}.menu a#mode .mode-sunny line{stroke:#eaeaea;fill:none}.menu a#mode .mode-sunny circle{fill:none;stroke:#eaeaea}.menu .trigger{float:right;display:flex;align-items:center}.menu .menu-trigger{display:none}.menu .menu-icon{display:none}.menu li{display:inline-block;margin:0;padding:0;list-style:none}@media screen and (max-width:768px){.menu li{display:block;margin:0;padding:0;list-style:none}}.menu .menu-link{color:#0d122b;line-height:2.25;text-decoration:none;padding:.3rem .5rem;opacity:.7;letter-spacing:.015rem}.menu .menu-link:hover{opacity:1}.menu .menu-link:not(:last-child){margin-right:5px}@media screen and (max-width:768px){.menu .menu-link{opacity:.8}}.menu .menu-link.active{opacity:1;font-weight:600}@media screen and (max-width:768px){.menu{position:fixed;top:0;left:0;right:0;z-index:2;text-align:center;height:50px;background-color:#fff;border-bottom:1px solid #ececec;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.menu a#mode{left:10px;top:12px}.menu .menu-icon{display:block;cursor:pointer;text-align:center;z-index:1;margin:.5rem 1rem 0 0}.menu .menu-icon>svg{opacity:.7}.menu .menu-icon:hover>svg{opacity:1}.menu .menu-icon:active{-webkit-transform:scale(.9,.9);transform:scale(.9,.9)}.menu input[type=checkbox]:checked~label>.menu-icon{position:absolute;top:0;right:0;padding-top:.2rem}.menu input[type=checkbox]:not(:checked)~.trigger{clear:both;visibility:hidden;display:none}.menu input[type=checkbox]:checked~.trigger{position:fixed;animation:.2s ease-in forwards fadein;-webkit-animation:.2s ease-in forwards fadein;flex-direction:column;justify-content:center;height:100vh;width:100%;top:0}.menu .menu-link{display:block;box-sizing:border-box;font-size:1.1em}.menu .menu-link:not(:last-child){margin:0;padding:2px 0}}.author{margin-top:6.3rem;margin-bottom:7.2rem;text-align:center}@media screen and (max-width:768px){.author{margin-bottom:3em}}.author .author-avatar{width:70px;height:70px;border-radius:100%;user-select:none;background-color:#0d122b;-ms-user-select:none;-webkit-user-select:none;-webkit-animation:.5s ease-in forwards fadein;animation:.5s ease-in forwards fadein;opacity:1;object-fit:cover}.author .author-name{font-size:1.7em;margin-bottom:2px}.author .author-bio{margin:0 auto;opacity:.9;max-width:393px;line-height:1.688}.posts-item-note{padding-bottom:.3rem;font-weight:500;color:#0d122b}.post-item{display:flex;padding-top:5px;padding-bottom:6px;justify-content:space-between;flex-direction:row;align-items:center;white-space:nowrap}.post-item:not(:first-child){border-top:1px solid #ececec}.post-item a{color:#434648;text-decoration:none}.post-item a:hover,.post-item afocus{color:#0d122b}.post-item .post-item-date{min-width:96px;color:#0d122b;white-space:nowrap}@media screen and (max-width:768px){.post-item .post-item-date{font-size:16px}}.post-item .post-item-title{margin:0;border:0;padding:0;font-size:16px;font-weight:400;letter-spacing:.1px;overflow-x:hidden;white-space:nowrap;text-overflow:ellipsis}.post-item .post-item-content{overflow-x:hidden;white-space:nowrap;text-overflow:ellipsis}.post-item .post-item-summary{font-size:.7em;padding:0 1em;overflow-x:hidden;white-space:nowrap;text-overflow:ellipsis;color:#0d122b}@media screen and (max-width:768px){.post-item .post-item-summary{display:none}}.footer{margin-top:8em;margin-bottom:2em;text-align:center}@media screen and (max-width:768px){.footer{margin-top:3em}}.footer span.footer_item{opacity:.8;font-weight:700;font-size:14px}.footer a.footer_item{opacity:.8;text-decoration:none}.footer a.footer_item:not(:last-child){margin-right:10px}.footer a.footer_item:not(:last-child):hover{opacity:1}.footer_copyright{font-size:13px;display:block;color:#6b7886;opacity:.8;margin-top:.7rem;padding:.3rem .95rem}.footer_social-icons a{text-decoration:none;margin-right:.31rem}.footer_social-icons svg{color:#888a90;height:24px;width:24px}.footer_social-icons svg:hover{color:#ddd}.not-found{text-align:center;display:flex;justify-content:center;flex-direction:column;height:75vh}.not-found .title{font-size:5em;font-weight:700;line-height:1.1;color:#0d122b;text-shadow:1px 0 0 #003fff}.not-found .phrase{color:#434648}.not-found .solution{color:#003fff;letter-spacing:.5px}.not-found .solution:hover{color:#0036c7}.search-article{position:relative;margin-bottom:50px}.search-article label[for=search-input]{position:relative;top:10px;left:11px}.search-article input[type=search]{top:0;left:0;border:0;width:100%;height:40px;outline:none;position:absolute;border-radius:5px;padding:10px 10px 10px 35px;color:#434648;-webkit-appearance:none;font-size:16px;background-color:rgba(128,128,128,.1);border:1px solid rgba(128,128,128,.1)}.search-article input[type=search]::-webkit-input-placeholder{color:gray}.search-article input[type=search]::-webkit-search-decoration,.search-article input[type=search]::-webkit-search-results-decoration{display:none}#search-results{text-align:center}#search-results li{text-align:left}.archive-tags{height:auto}.archive-tags .tag-item{padding:1px 3px;border-radius:2px;border:1px solid rgba(128,128,128,.1);background-color:rgba(128,128,128,.1)}sub,sup{font-size:79%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}kbd{font-size:85%;border-radius:3px;color:#333638;background:#d8dbe2;display:inline-block;font-family:Consolas,monaco,monospace;line-height:1;padding:2px 4px;white-space:nowrap}mark{background:#ff0;color:#000;border-radius:3px}@media screen and (max-width:768px){.wrapper.post{padding-left:15px;padding-right:15px}}.header{margin-top:7.8em}.header .header-title{font-size:2em;line-height:1.2;margin-top:10px;margin-bottom:20px}.header .header-title.center{text-align:center}@media screen and (max-width:768px){.header .header-title{font-size:1.9em}}.post-meta{padding-top:3px;line-height:1.3;color:#6b7886}.post-meta time{position:relative;margin-right:1.5em}.post-meta span[itemprop=author]{border-bottom:1px dotted #ececec}.page-content{padding-top:8px}.page-content iframe{text-align:center}.page-content figure img{border-radius:2px}.page-content figure figcaption{margin-top:5px;font-style:italic;font-size:14px}.page-content a{color:#003fff;text-decoration-color:#003fff}.page-content a[target=_blank]::after{content:" \2197";font-size:14px;line-height:0;position:relative;bottom:5px;vertical-align:baseline}.page-content a:hover{color:#0036c7}.page-content a:focus{color:#003fff}.page-content>p{margin:0;padding-top:15px;padding-bottom:15px}.page-content ul.task-list{list-style:none;margin:0}.page-content ul.task-list li::before{content:""}.page-content ul.task-list li input[type=checkbox]{margin-right:10px}.page-content dl dt{font-weight:700}.page-content h1,.page-content h2,.page-content h3,.page-content h4,.page-content h5,.page-content h6{color:#0d122b;font-weight:700;margin-top:30px;margin-bottom:0;letter-spacing:.03rem}.page-content h1:hover .anchor-head,.page-content h2:hover .anchor-head,.page-content h3:hover .anchor-head,.page-content h4:hover .anchor-head,.page-content h5:hover .anchor-head,.page-content h6:hover .anchor-head{color:#003fff;opacity:1}.page-content h1 .anchor-head,.page-content h2 .anchor-head,.page-content h3 .anchor-head,.page-content h4 .anchor-head,.page-content h5 .anchor-head,.page-content h6 .anchor-head{position:relative;opacity:0;outline:none}.page-content h1 .anchor-head::before,.page-content h2 .anchor-head::before,.page-content h3 .anchor-head::before,.page-content h4 .anchor-head::before,.page-content h5 .anchor-head::before,.page-content h6 .anchor-head::before{content:"#";position:absolute;right:-3px;width:1em;font-weight:700}.page-content h1{font-size:28px}.page-content h2{font-size:24px}.page-content h3{font-size:20px}.page-content h4{font-size:20px}.page-content h5{font-size:16px}.page-content h6{font-size:14px}.page-content aside{background-color:#ececec;padding:.2em 1em;border-radius:5px}article .page-content h1,article .page-content h2{border-bottom:1px solid #c4c8cc}.post-nav{display:flex;position:relative;margin-top:5em;border-top:1px solid #ececec;line-height:1.4}.post-nav .post-nav-item{border-bottom:0;font-weight:700;padding-bottom:10px;width:50%;padding-top:10px;text-decoration:none;box-sizing:border-box}.post-nav .post-nav-item .post-title{color:#0d122b}.post-nav .post-nav-item:hover .post-title,.post-nav .post-nav-item:focus .post-title{color:#0036c7;opacity:.9}.post-nav .post-nav-item .nav-arrow{font-weight:400;font-size:14px;color:#6b7886;margin-bottom:3px}.post-nav .post-nav-item:nth-child(odd){padding-left:0;padding-right:20px}.post-nav .post-nav-item:nth-child(even){text-align:right;padding-right:0;padding-left:20px}@media screen and (max-width:768px){.post-nav{display:block;font-size:14px}.post-nav .post-nav-item{display:block;width:100%}.post-nav .post-nav-item:nth-child(even){border-left:0;padding-left:0;border-top:1px solid #ececec}}.post-updated-at{font-family:ubuntu mono,monospace}.badge-list{list-style:none;line-height:2.5rem;overflow-wrap:break-word}.badge-list .badge-item{display:inline}.badge-list .badge-item a{border:1px solid #003fff;margin:.3em;padding:.3em;white-space:nowrap;border-radius:.5em;color:#434648;text-decoration:none}.badge-list .badge-item a:hover{background-color:#003fff;color:#ececec}.badge-list .badge-item a:active{background-color:#0036c7}code{font-family:Consolas,monospace;text-rendering:optimizeLegibility;font-feature-settings:"calt" 1;font-variant-ligatures:normal;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;font-size:inherit}p>code,li>code{font-size:.9em;padding:1px 3px;position:relative;top:-1px;color:#333638;background-color:#d8dbe2;border-radius:2px;border:1px solid rgba(128,128,128,.1)}pre{background-color:#1a1b21;border-radius:.3rem;padding:.5rem 1rem;display:block;overflow-x:auto}@media screen and (max-width:768px){pre{margin:0 calc(51% - 51vw)}}pre::-webkit-scrollbar{height:.5rem}pre::-webkit-scrollbar-track{background:#606071;border-radius:.1rem}pre::-webkit-scrollbar-thumb{background:#999ea2;border-radius:.3rem}pre::-webkit-scrollbar-thumb:hover{background:#424546}pre>code{color:#fff;max-width:50rem;margin-left:auto;margin-right:auto;line-height:1.5;display:block;border:0}details{cursor:pointer}.toc{margin:1.1rem 0 1rem;padding:.5rem 1rem;border-radius:.3rem;border-width:1px;border-style:solid;border-color:#c4c8cc;background-color:#fefefe}.toc #TableOfContents{transition:.3s ease;transform:translateY(-10%);opacity:0}.toc[open]>#TableOfContents{margin-top:0;opacity:1;transform:translateY(0)}.toc ul,.toc ol{padding-top:1rem;margin-left:1rem;padding-left:1rem}.toc ul li,.toc ol li{margin-bottom:.5em;line-height:1.4}.toc ul li a,.toc ol li a{text-decoration:none}@keyframes fadein{0%{opacity:.2}100%{opacity:.8}}@keyframes blur{0%{filter:blur(0)}100%{filter:blur(4px)}}.embed-responsive{height:0;max-width:100%;overflow:hidden;position:relative;padding-bottom:56.25%;margin-top:20px}.embed-responsive iframe,.embed-responsive object,.embed-responsive embed{top:0;left:0;width:100%;height:100%;position:absolute}.main-404{padding:9rem 0;text-align:center}@media(prefers-color-scheme:dark){html:not(.light) body{color:#babdc4;background-color:#131418}html:not(.light) h1,html:not(.light) h2,html:not(.light) h3,html:not(.light) h4,html:not(.light) h5,html:not(.light) h6{color:#eaeaea}html:not(.light) table thead{color:#eaeaea;border-color:#1b1d25}html:not(.light) table th,html:not(.light) table td,html:not(.light) table tr{border-color:#1b1d25}html:not(.light) .page-content a{color:#77a8fd;text-decoration-color:#77a8fd}html:not(.light) .page-content a:hover,html:not(.light) .page-content a:active,html:not(.light) .page-content a:focus{color:#5292ff}html:not(.light) .page-content h3{border-color:#1b1d25}html:not(.light) .page-content h1,html:not(.light) .page-content h2,html:not(.light) .page-content h3,html:not(.light) .page-content h4,html:not(.light) .page-content h5,html:not(.light) .page-content h6{border-color:#4a4d56}html:not(.light) .page-content h1 .anchor-head,html:not(.light) .page-content h2 .anchor-head,html:not(.light) .page-content h3 .anchor-head,html:not(.light) .page-content h4 .anchor-head,html:not(.light) .page-content h5 .anchor-head,html:not(.light) .page-content h6 .anchor-head{color:#77a8fd}html:not(.light) .page-content aside{background-color:#1b1d25}html:not(.light) p>code{font-size:.9em;padding:1px 3px;position:relative;top:-1px;color:#c2c4ca;background-color:#2d2d2d;border-radius:2px;border:1px solid rgba(128,128,128,.1)}html:not(.light) .toc{background-color:#323232;border-color:#c4c8cc}html:not(.light) #totop{color:#babdc4;background-color:#676767b3}html:not(.light) #totop:hover{background-color:#676767}html:not(.light) li>code,html:not(.light) p>code{font-size:.9em;padding:1px 3px;position:relative;top:-1px;color:#c2c4ca;background-color:#2d2d2d;border-radius:2px;border:1px solid rgba(128,128,128,.1)}html:not(.light) kbd{color:#c2c4ca;background-color:#2d2d2d}html:not(.light) hr{border-color:#1b1d25}html:not(.light) .post-meta{color:#767f87}html:not(.light) .post-meta time::after{background-color:#1b1d25}html:not(.light) .post-meta span[itemprop=author]{border-color:#1b1d25}html:not(.light) a{color:inherit;text-decoration-color:#4a4d56}html:not(.light) a:hover{color:#77a8fd}html:not(.light) a:focus{outline-color:rgba(44,118,246,.6)}html:not(.light) li:before{color:#eaeaea}html:not(.light) blockquote{color:#9b9ba3;border-color:#4a4d56}html:not(.light) strong,html:not(.light) b{color:#eaeaea}html:not(.light) .navbar{border-color:#1b1d25}html:not(.light) .navbar .menu a#mode .mode-sunny{display:block}html:not(.light) .navbar .menu a#mode .mode-moon{display:none}html:not(.light) .navbar .menu .menu-link{color:#eaeaea}}@media screen and (prefers-color-scheme:dark) and (max-width:768px){html:not(.light) .navbar .menu{background-color:#131418;border-color:#1b1d25}html:not(.light) .navbar .menu input[type=checkbox]:checked~.trigger{background:#131418}}@media(prefers-color-scheme:dark){html:not(.light) .post-item:not(:first-child){border-color:#1b1d25}html:not(.light) .post-item .post-item-date{color:#eaeaea}html:not(.light) .post-item .post-item-title a{color:#babdc4}html:not(.light) .post-item .post-item-title a:hover,html:not(.light) .post-item .post-item-title afocus{color:#eaeaea}html:not(.light) .post-nav{border-color:#1b1d25}html:not(.light) .post-nav .post-nav-item{font-weight:700}html:not(.light) .post-nav .post-nav-item .post-title{color:#eaeaea;opacity:.9}html:not(.light) .post-nav .post-nav-item:hover .post-title,html:not(.light) .post-nav .post-nav-item:focus .post-title{color:#5292ff}html:not(.light) .post-nav .post-nav-item .nav-arrow{color:#767f87}}@media screen and (prefers-color-scheme:dark) and (max-width:768px){html:not(.light) .post-nav .post-nav-item:nth-child(even){border-color:#1b1d25}}@media(prefers-color-scheme:dark){html:not(.light) .footer span.footer_item{color:#eaeaea}html:not(.light) .footer a.footer_item:not(:last-child){color:#eaeaea}html:not(.light) .footer .footer_copyright{color:#767f87;opacity:1}html:not(.light) .not-found .title{color:#eaeaea;text-shadow:1px 0 0 #77a8fd}html:not(.light) .not-found .phrase{color:#babdc4}html:not(.light) .not-found .solution{color:#77a8fd}html:not(.light) .not-found .solution:hover{color:#5292ff}html:not(.light) .search-article input[type=search]{color:#babdc4}html:not(.light) .search-article input[type=search]::-webkit-input-placeholder{color:rgba(128,128,128,.8)}html:not(.light) .badge-list .badge-item a{border-color:#babdc4;color:#babdc4}html:not(.light) .badge-list .badge-item a:hover{background-color:#77a8fd;color:#1b1d25}html:not(.light) .badge-list .badge-item a:active{background-color:#5292ff}html:not(.light) .not-found .error-emoji{color:#c2c4ca}html:not(.light) .not-found .error-text{color:#9b9ba3}html:not(.light) .not-found .error-link a{color:#77a8fd}html:not(.light) .not-found .error-link a:hover{color:#5292ff}html:not(.light) .not-found .error-notice{border:1px solid #4a4d56}html:not(.light) .not-found .error-notice a{color:#77a8fd}html:not(.light) .not-found .error-article-list li a{border-color:#2d2d2d;color:#babdc4}html:not(.light) .not-found .error-article-list li a:hover{color:#77a8fd}}html.dark body{color:#babdc4;background-color:#131418}html.dark h1,html.dark h2,html.dark h3,html.dark h4,html.dark h5,html.dark h6{color:#eaeaea}html.dark table thead{color:#eaeaea;border-color:#1b1d25}html.dark table th,html.dark table td,html.dark table tr{border-color:#1b1d25}html.dark .page-content a{color:#77a8fd;text-decoration-color:#77a8fd}html.dark .page-content a:hover,html.dark .page-content a:active,html.dark .page-content a:focus{color:#5292ff}html.dark .page-content h3{border-color:#1b1d25}html.dark .page-content h1,html.dark .page-content h2,html.dark .page-content h3,html.dark .page-content h4,html.dark .page-content h5,html.dark .page-content h6{border-color:#4a4d56}html.dark .page-content h1 .anchor-head,html.dark .page-content h2 .anchor-head,html.dark .page-content h3 .anchor-head,html.dark .page-content h4 .anchor-head,html.dark .page-content h5 .anchor-head,html.dark .page-content h6 .anchor-head{color:#77a8fd}html.dark .page-content aside{background-color:#1b1d25}html.dark p>code{font-size:.9em;padding:1px 3px;position:relative;top:-1px;color:#c2c4ca;background-color:#2d2d2d;border-radius:2px;border:1px solid rgba(128,128,128,.1)}html.dark .toc{background-color:#323232;border-color:#c4c8cc}html.dark #totop{color:#babdc4;background-color:#676767b3}html.dark #totop:hover{background-color:#676767}html.dark li>code,html.dark p>code{font-size:.9em;padding:1px 3px;position:relative;top:-1px;color:#c2c4ca;background-color:#2d2d2d;border-radius:2px;border:1px solid rgba(128,128,128,.1)}html.dark kbd{color:#c2c4ca;background-color:#2d2d2d}html.dark hr{border-color:#1b1d25}html.dark .post-meta{color:#767f87}html.dark .post-meta time::after{background-color:#1b1d25}html.dark .post-meta span[itemprop=author]{border-color:#1b1d25}html.dark a{color:inherit;text-decoration-color:#4a4d56}html.dark a:hover{color:#77a8fd}html.dark a:focus{outline-color:rgba(44,118,246,.6)}html.dark li:before{color:#eaeaea}html.dark blockquote{color:#9b9ba3;border-color:#4a4d56}html.dark strong,html.dark b{color:#eaeaea}html.dark .navbar{border-color:#1b1d25}html.dark .navbar .menu a#mode .mode-sunny{display:block}html.dark .navbar .menu a#mode .mode-moon{display:none}html.dark .navbar .menu .menu-link{color:#eaeaea}@media screen and (max-width:768px){html.dark .navbar .menu{background-color:#131418;border-color:#1b1d25}html.dark .navbar .menu input[type=checkbox]:checked~.trigger{background:#131418}}html.dark .post-item:not(:first-child){border-color:#1b1d25}html.dark .post-item .post-item-date{color:#eaeaea}html.dark .post-item .post-item-title a{color:#babdc4}html.dark .post-item .post-item-title a:hover,html.dark .post-item .post-item-title afocus{color:#eaeaea}html.dark .post-nav{border-color:#1b1d25}html.dark .post-nav .post-nav-item{font-weight:700}html.dark .post-nav .post-nav-item .post-title{color:#eaeaea;opacity:.9}html.dark .post-nav .post-nav-item:hover .post-title,html.dark .post-nav .post-nav-item:focus .post-title{color:#5292ff}html.dark .post-nav .post-nav-item .nav-arrow{color:#767f87}@media screen and (max-width:768px){html.dark .post-nav .post-nav-item:nth-child(even){border-color:#1b1d25}}html.dark .footer span.footer_item{color:#eaeaea}html.dark .footer a.footer_item:not(:last-child){color:#eaeaea}html.dark .footer .footer_copyright{color:#767f87;opacity:1}html.dark .not-found .title{color:#eaeaea;text-shadow:1px 0 0 #77a8fd}html.dark .not-found .phrase{color:#babdc4}html.dark .not-found .solution{color:#77a8fd}html.dark .not-found .solution:hover{color:#5292ff}html.dark .search-article input[type=search]{color:#babdc4}html.dark .search-article input[type=search]::-webkit-input-placeholder{color:rgba(128,128,128,.8)}html.dark .badge-list .badge-item a{border-color:#babdc4;color:#babdc4}html.dark .badge-list .badge-item a:hover{background-color:#77a8fd;color:#1b1d25}html.dark .badge-list .badge-item a:active{background-color:#5292ff}html.dark .not-found .error-emoji{color:#c2c4ca}html.dark .not-found .error-text{color:#9b9ba3}html.dark .not-found .error-link a{color:#77a8fd}html.dark .not-found .error-link a:hover{color:#5292ff}html.dark .not-found .error-notice{border:1px solid #4a4d56}html.dark .not-found .error-notice a{color:#77a8fd}html.dark .not-found .error-article-list li a{border-color:#2d2d2d;color:#babdc4}html.dark .not-found .error-article-list li a:hover{color:#77a8fd}.list-page .post-year{padding-bottom:.5rem}.not-found{text-align:center;display:flex;justify-content:center;flex-direction:column;margin-top:3rem}.not-found .error-emoji{color:#333638;font-size:3rem}.not-found .error-text{color:#525b66;font-size:1.25rem}.not-found .error-link{margin-top:2rem}.not-found .error-link a{color:#003fff}.not-found .error-link a:hover{color:#0036c7}.not-found .error-notice{border:1px solid #c4c8cc;border-radius:10px;padding:1rem;width:fit-content;margin:0 auto}.not-found .error-notice a{color:#003fff;text-decoration:underline}.not-found .error-article-list{width:fit-content;margin:1em auto;text-align:left;padding-left:0}.not-found .error-article-list li{list-style-type:none;margin:.7rem 0}.not-found .error-article-list li a{border:1px solid;border-color:#d8dbe2;width:inherit;padding:.3rem .5rem;display:block;border-radius:10px;text-decoration:none;color:#0d122b}.not-found .error-article-list li a::before{content:"๐Ÿ“";margin-right:1rem}.not-found .error-article-list li a:hover{color:#003fff}html{scroll-behavior:smooth}#totop{visibility:hidden;color:#434648;position:fixed;bottom:60px;right:30px;z-index:1;border-radius:10%;background-color:#dfe0e397;transition:visibility .5s,opacity .8s linear}#totop:hover{background-color:#dfe0e3}#totop svg{margin:auto;display:block;height:40px;width:40px} \ No newline at end of file diff --git a/style.min.aeb767baf02f3dda74ea2e3ef925f0623934ecb20f669d6d9f524fa6a2651622.css b/style.min.aeb767baf02f3dda74ea2e3ef925f0623934ecb20f669d6d9f524fa6a2651622.css new file mode 100644 index 0000000..7c763c4 --- /dev/null +++ b/style.min.aeb767baf02f3dda74ea2e3ef925f0623934ecb20f669d6d9f524fa6a2651622.css @@ -0,0 +1 @@ +@charset "UTF-8";@font-face{font-display:swap;font-family:roboto;font-style:normal;font-weight:400;src:url(fonts/Roboto/roboto-v30-latin-regular.eot);src:url(fonts/Roboto/roboto-v30-latin-regular.eot?#iefix)format("embedded-opentype"),url(fonts/Roboto/roboto-v30-latin-regular.woff2)format("woff2"),url(fonts/Roboto/roboto-v30-latin-regular.woff)format("woff"),url(fonts/Roboto/roboto-v30-latin-regular.ttf)format("truetype"),url(fonts/Roboto/roboto-v30-latin-regular.svg#Roboto)format("svg")}*{-webkit-transition:background-color 75ms ease-in,border-color 75ms ease-in;-moz-transition:background-color 75ms ease-in,border-color 75ms ease-in;-ms-transition:background-color 75ms ease-in,border-color 75ms ease-in;-o-transition:background-color 75ms ease-in,border-color 75ms ease-in;transition:background-color 75ms ease-in,border-color 75ms ease-in}.notransition{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}html{overflow-x:hidden;width:100%}body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,dl,dd,ol,ul,figure{margin:0;padding:0}body{min-height:100vh;overflow-x:hidden;position:relative;color:#434648;background-color:#fff;font:16px/1.85 Roboto,sans-serif;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-webkit-font-feature-settings:"kern" 1;-moz-font-feature-settings:"kern" 1;-o-font-feature-settings:"kern" 1;font-feature-settings:"kern" 1;font-kerning:normal;box-sizing:border-box}h1,h2,h3,h4,h5,h6,p,blockquote,pre,ul,ol,dl,figure{margin-top:10px;margin-bottom:10px}strong,b{font-weight:700;color:#0d122b}hr{border-bottom:0;border-style:solid;border-color:#ececec}img{max-width:100%;vertical-align:middle;-webkit-user-drag:none;margin:0 auto;text-align:center}figure{position:relative}figure>img{display:block;position:relative}figcaption{font-size:13px;text-align:center}ul li{display:list-item;text-align:-webkit-match-parent}ol li{position:relative}ul,ol{margin-top:0;margin-left:30px}li{padding-bottom:1px;padding-top:1px}li:before{color:#0d122b}li>ul,li>ol{margin-bottom:2px;margin-top:0}h1,h2,h3,h4,h5,h6{color:#0d122b;font-weight:700}h1+ul,h1+ol,h2+ul,h2+ol,h3+ul,h3+ol,h4+ul,h4+ol,h5+ul,h5+ol,h6+ul,h6+ol{margin-top:10px}@media screen and (max-width:768px){h1,h2,h3,h4,h5,h6{scroll-margin-top:65px}}h1>a,h2>a,h3>a,h4>a,h5>a,h6>a{text-decoration:none;border:none}h1>a:hover,h2>a:hover,h3>a:hover,h4>a:hover,h5>a:hover,h6>a:hover{text-decoration:none;border:none}a{color:inherit;text-decoration-color:#d2c7c7}a:hover{color:#003fff}a:focus{outline:3px solid rgba(0,54,199,.6);outline-offset:2px}del{color:inherit}em{color:inherit}blockquote{color:#525b66;opacity:.9;border-left:5px solid #c4c8cc;padding:0 0 0 1rem;margin-left:.3rem;margin-right:.3rem;font-size:1em}blockquote>:last-child{margin-bottom:0;margin-top:0}.wrapper{max-width:-webkit-calc(720px - (30px * 2));max-width:calc(720px - (30px * 2));position:relative;margin-right:auto;margin-left:auto;padding-right:30px;padding-left:30px}@media screen and (max-width:768px){.wrapper{max-width:-webkit-calc(720px - (30px));max-width:calc(720px - (30px));padding-right:20px;padding-left:20px}.wrapper.blurry{animation:.2s ease-in forwards blur;-webkit-animation:.2s ease-in forwards blur}}u{text-decoration-color:#d2c7c7}small{font-size:14px}sup{border-radius:10%;top:-3px;left:2px;font-size:small;position:relative;margin-right:2px}.overflow-table{overflow-x:auto}table{width:100%;margin-top:15px;border-collapse:collapse;font-size:14px}table thead{font-weight:700;color:#0d122b;border-bottom:1px solid #ececec}table th,table td,table tr{border:1px solid #ececec;padding:2px 7px}.navbar:after,.wrapper:after{content:"";display:table;clear:both}mark,::selection{background:#fffba0;color:#0d122b}.gist table{border:0}.gist table tr,.gist table td{border:0}.navbar{height:auto;max-width:calc(890px - (30px * 2));max-width:-webkit-calc(890px - (30px * 2));position:relative;margin-right:auto;margin-left:auto;border-bottom:1px solid #ececec;padding:.5rem .3rem}.logo{float:left;margin:.5rem 0 0 1rem}.logo>svg{opacity:.7}.logo:hover>svg{opacity:1}.menu{user-select:none;-ms-user-select:none;-webkit-user-select:none;display:flex;flex-direction:row;justify-content:space-between}.menu ul{margin:0}.menu .menu-separator{margin-right:.7rem}@media screen and (max-width:768px){.menu .menu-separator{display:none}}.menu a#mode{-webkit-transform:scale(1,1);transform:scale(1,1);opacity:.7;z-index:1}.menu a#mode:hover{cursor:pointer;opacity:1}.menu a#mode:active{-webkit-transform:scale(.9,.9);transform:scale(.9,.9)}.menu a#mode .mode-moon{display:block}.menu a#mode .mode-moon line{stroke:#0d122b;fill:none}.menu a#mode .mode-moon circle{fill:#0d122b;stroke:#0d122b}.menu a#mode .mode-sunny{display:none}.menu a#mode .mode-sunny line{stroke:#eaeaea;fill:none}.menu a#mode .mode-sunny circle{fill:none;stroke:#eaeaea}.menu .trigger{float:right;display:flex;align-items:center}.menu .menu-trigger{display:none}.menu .menu-icon{display:none}.menu li{display:inline-block;margin:0;padding:0;list-style:none}@media screen and (max-width:768px){.menu li{display:block;margin:0;padding:0;list-style:none}}.menu .menu-link{color:#0d122b;line-height:2.25;text-decoration:none;padding:.3rem .5rem;opacity:.7;letter-spacing:.015rem}.menu .menu-link:hover{opacity:1}.menu .menu-link:not(:last-child){margin-right:5px}@media screen and (max-width:768px){.menu .menu-link{opacity:.8}}.menu .menu-link.active{opacity:1;font-weight:600}@media screen and (max-width:768px){.menu{position:fixed;top:0;left:0;right:0;z-index:2;text-align:center;height:50px;background-color:#fff;border-bottom:1px solid #ececec;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.menu a#mode{left:10px;top:12px}.menu .menu-icon{display:block;cursor:pointer;text-align:center;z-index:1;margin:.5rem 1rem 0 0}.menu .menu-icon>svg{opacity:.7}.menu .menu-icon:hover>svg{opacity:1}.menu .menu-icon:active{-webkit-transform:scale(.9,.9);transform:scale(.9,.9)}.menu input[type=checkbox]:checked~label>.menu-icon{position:absolute;top:0;right:0;padding-top:.2rem}.menu input[type=checkbox]:not(:checked)~.trigger{clear:both;visibility:hidden;display:none}.menu input[type=checkbox]:checked~.trigger{position:fixed;animation:.2s ease-in forwards fadein;-webkit-animation:.2s ease-in forwards fadein;flex-direction:column;justify-content:center;height:100vh;width:100%;top:0}.menu .menu-link{display:block;box-sizing:border-box;font-size:1.1em}.menu .menu-link:not(:last-child){margin:0;padding:2px 0}}.author{margin-top:6.3rem;margin-bottom:7.2rem;text-align:center}@media screen and (max-width:768px){.author{margin-bottom:3em}}.author .author-avatar{width:70px;height:70px;border-radius:100%;user-select:none;background-color:#0d122b;-ms-user-select:none;-webkit-user-select:none;-webkit-animation:.5s ease-in forwards fadein;animation:.5s ease-in forwards fadein;opacity:1;object-fit:cover}.author .author-name{font-size:1.7em;margin-bottom:2px}.author .author-bio{margin:0 auto;opacity:.9;max-width:393px;line-height:1.688}.posts-item-note{padding-bottom:.3rem;font-weight:500;color:#0d122b}.post-item{display:flex;padding-top:5px;padding-bottom:6px;justify-content:space-between;flex-direction:row;align-items:center;white-space:nowrap}.post-item:not(:first-child){border-top:1px solid #ececec}.post-item a{color:#434648;text-decoration:none}.post-item a:hover,.post-item afocus{color:#0d122b}.post-item .post-item-date{min-width:96px;color:#0d122b;white-space:nowrap}@media screen and (max-width:768px){.post-item .post-item-date{font-size:16px}}.post-item .post-item-title{margin:0;border:0;padding:0;font-size:16px;font-weight:400;letter-spacing:.1px;overflow-x:hidden;white-space:nowrap;text-overflow:ellipsis}.post-item .post-item-content{overflow-x:hidden;white-space:nowrap;text-overflow:ellipsis}.post-item .post-item-summary{font-size:.7em;padding:0 1em;overflow-x:hidden;white-space:nowrap;text-overflow:ellipsis;color:#0d122b}@media screen and (max-width:768px){.post-item .post-item-summary{display:none}}.footer{margin-top:8em;margin-bottom:2em;text-align:center}@media screen and (max-width:768px){.footer{margin-top:3em}}.footer span.footer_item{opacity:.8;font-weight:700;font-size:14px}.footer a.footer_item{opacity:.8;text-decoration:none}.footer a.footer_item:not(:last-child){margin-right:10px}.footer a.footer_item:not(:last-child):hover{opacity:1}.footer_copyright{font-size:13px;display:block;color:#6b7886;opacity:.8;margin-top:.7rem;padding:.3rem .95rem}.footer_social-icons a{text-decoration:none;margin-right:.31rem}.footer_social-icons svg{color:#888a90;height:24px;width:24px}.footer_social-icons svg:hover{color:#ddd}.not-found{text-align:center;display:flex;justify-content:center;flex-direction:column;height:75vh}.not-found .title{font-size:5em;font-weight:700;line-height:1.1;color:#0d122b;text-shadow:1px 0 0 #003fff}.not-found .phrase{color:#434648}.not-found .solution{color:#003fff;letter-spacing:.5px}.not-found .solution:hover{color:#0036c7}.search-article{position:relative;margin-bottom:50px}.search-article label[for=search-input]{position:relative;top:10px;left:11px}.search-article input[type=search]{top:0;left:0;border:0;width:100%;height:40px;outline:none;position:absolute;border-radius:5px;padding:10px 10px 10px 35px;color:#434648;-webkit-appearance:none;font-size:16px;background-color:rgba(128,128,128,.1);border:1px solid rgba(128,128,128,.1)}.search-article input[type=search]::-webkit-input-placeholder{color:gray}.search-article input[type=search]::-webkit-search-decoration,.search-article input[type=search]::-webkit-search-results-decoration{display:none}#search-results{text-align:center}#search-results li{text-align:left}.archive-tags{height:auto}.archive-tags .tag-item{padding:1px 3px;border-radius:2px;border:1px solid rgba(128,128,128,.1);background-color:rgba(128,128,128,.1)}sub,sup{font-size:79%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}kbd{font-size:85%;border-radius:3px;color:#333638;background:#d8dbe2;display:inline-block;font-family:Consolas,monaco,monospace;line-height:1;padding:2px 4px;white-space:nowrap}mark{background:#ff0;color:#000;border-radius:3px}@media screen and (max-width:768px){.wrapper.post{padding-left:15px;padding-right:15px}}.header{margin-top:7.8em}.header .header-title{font-size:2em;line-height:1.2;margin-top:10px;margin-bottom:20px}.header .header-title.center{text-align:center}@media screen and (max-width:768px){.header .header-title{font-size:1.9em}}.post-meta{padding-top:3px;line-height:1.3;color:#6b7886}.post-meta time{position:relative;margin-right:1.5em}.post-meta span[itemprop=author]{border-bottom:1px dotted #ececec}.page-content{padding-top:8px}.page-content iframe{text-align:center}.page-content figure img{border-radius:2px}.page-content figure figcaption{margin-top:5px;font-style:italic;font-size:14px}.page-content a{color:#003fff;text-decoration-color:#003fff}.page-content a[target=_blank]::after{content:" \2197";font-size:14px;line-height:0;position:relative;bottom:5px;vertical-align:baseline}.page-content a:hover{color:#0036c7}.page-content a:focus{color:#003fff}.page-content>p{margin:0;padding-top:15px;padding-bottom:15px}.page-content ul.task-list{list-style:none;margin:0}.page-content ul.task-list li::before{content:""}.page-content ul.task-list li input[type=checkbox]{margin-right:10px}.page-content dl dt{font-weight:700}.page-content h1,.page-content h2,.page-content h3,.page-content h4,.page-content h5,.page-content h6{color:#0d122b;font-weight:700;margin-top:30px;margin-bottom:0;letter-spacing:.03rem}.page-content h1:hover .anchor-head,.page-content h2:hover .anchor-head,.page-content h3:hover .anchor-head,.page-content h4:hover .anchor-head,.page-content h5:hover .anchor-head,.page-content h6:hover .anchor-head{color:#003fff;opacity:1;fill:currentColor}.page-content h1:hover .anchor-head:hover,.page-content h2:hover .anchor-head:hover,.page-content h3:hover .anchor-head:hover,.page-content h4:hover .anchor-head:hover,.page-content h5:hover .anchor-head:hover,.page-content h6:hover .anchor-head:hover{text-decoration:underline;border-bottom:1px solid}.page-content h1 .anchor-head,.page-content h2 .anchor-head,.page-content h3 .anchor-head,.page-content h4 .anchor-head,.page-content h5 .anchor-head,.page-content h6 .anchor-head{position:relative;margin-left:5px;opacity:0;outline:none}.page-content h1{font-size:28px}.page-content h2{font-size:24px}.page-content h3{font-size:20px}.page-content h4{font-size:20px}.page-content h5{font-size:16px}.page-content h6{font-size:14px}.page-content aside{background-color:#ececec;padding:.2em 1em;border-radius:5px}article .page-content h1,article .page-content h2{border-bottom:1px solid #c4c8cc}.post-nav{display:flex;position:relative;margin-top:5em;border-top:1px solid #ececec;line-height:1.4}.post-nav .post-nav-item{border-bottom:0;font-weight:700;padding-bottom:10px;width:50%;padding-top:10px;text-decoration:none;box-sizing:border-box}.post-nav .post-nav-item .post-title{color:#0d122b}.post-nav .post-nav-item:hover .post-title,.post-nav .post-nav-item:focus .post-title{color:#0036c7;opacity:.9}.post-nav .post-nav-item .nav-arrow{font-weight:400;font-size:14px;color:#6b7886;margin-bottom:3px}.post-nav .post-nav-item:nth-child(odd){padding-left:0;padding-right:20px}.post-nav .post-nav-item:nth-child(even){text-align:right;padding-right:0;padding-left:20px}@media screen and (max-width:768px){.post-nav{display:block;font-size:14px}.post-nav .post-nav-item{display:block;width:100%}.post-nav .post-nav-item:nth-child(even){border-left:0;padding-left:0;border-top:1px solid #ececec}}.post-updated-at{font-family:ubuntu mono,monospace}.badge-list{list-style:none;line-height:2.5rem;overflow-wrap:break-word}.badge-list .badge-item{display:inline}.badge-list .badge-item a{border:1px solid #003fff;margin:.3em;padding:.3em;white-space:nowrap;border-radius:.5em;color:#434648;text-decoration:none}.badge-list .badge-item a:hover{background-color:#003fff;color:#ececec}.badge-list .badge-item a:active{background-color:#0036c7}code{font-family:Consolas,monospace;text-rendering:optimizeLegibility;font-feature-settings:"calt" 1;font-variant-ligatures:normal;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;font-size:inherit}p>code,li>code{font-size:.9em;padding:1px 3px;position:relative;top:-1px;color:#333638;background-color:#d8dbe2;border-radius:2px;border:1px solid rgba(128,128,128,.1)}pre{background-color:#1a1b21;border-radius:.3rem;padding:.5rem 1rem;display:block;overflow-x:auto}@media screen and (max-width:768px){pre{margin:0 calc(51% - 51vw)}}pre::-webkit-scrollbar{height:.5rem}pre::-webkit-scrollbar-track{background:#606071;border-radius:.1rem}pre::-webkit-scrollbar-thumb{background:#999ea2;border-radius:.3rem}pre::-webkit-scrollbar-thumb:hover{background:#424546}pre>code{color:#fff;max-width:50rem;margin-left:auto;margin-right:auto;line-height:1.5;display:block;border:0}details{cursor:pointer}.toc{margin:1.1rem 0 1rem;padding:.5rem 1rem;border-radius:.3rem;border-width:1px;border-style:solid;border-color:#c4c8cc;background-color:#fefefe}.toc #TableOfContents{transition:.3s ease;transform:translateY(-10%);opacity:0}.toc[open]>#TableOfContents{margin-top:0;opacity:1;transform:translateY(0)}.toc ul,.toc ol{padding-top:1rem;margin-left:1rem;padding-left:1rem}.toc ul li,.toc ol li{margin-bottom:.5em;line-height:1.4}.toc ul li a,.toc ol li a{text-decoration:none}@keyframes fadein{0%{opacity:.2}100%{opacity:.8}}@keyframes blur{0%{filter:blur(0)}100%{filter:blur(4px)}}.embed-responsive{height:0;max-width:100%;overflow:hidden;position:relative;padding-bottom:56.25%;margin-top:20px}.embed-responsive iframe,.embed-responsive object,.embed-responsive embed{top:0;left:0;width:100%;height:100%;position:absolute}.main-404{padding:9rem 0;text-align:center}@media(prefers-color-scheme:dark){html:not(.light) body{color:#babdc4;background-color:#131418}html:not(.light) h1,html:not(.light) h2,html:not(.light) h3,html:not(.light) h4,html:not(.light) h5,html:not(.light) h6{color:#eaeaea}html:not(.light) table thead{color:#eaeaea;border-color:#1b1d25}html:not(.light) table th,html:not(.light) table td,html:not(.light) table tr{border-color:#1b1d25}html:not(.light) .page-content a{color:#77a8fd;text-decoration-color:#77a8fd}html:not(.light) .page-content a:hover,html:not(.light) .page-content a:active,html:not(.light) .page-content a:focus{color:#5292ff}html:not(.light) .page-content h3{border-color:#1b1d25}html:not(.light) .page-content h1,html:not(.light) .page-content h2,html:not(.light) .page-content h3,html:not(.light) .page-content h4,html:not(.light) .page-content h5,html:not(.light) .page-content h6{border-color:#4a4d56}html:not(.light) .page-content h1 .anchor-head,html:not(.light) .page-content h2 .anchor-head,html:not(.light) .page-content h3 .anchor-head,html:not(.light) .page-content h4 .anchor-head,html:not(.light) .page-content h5 .anchor-head,html:not(.light) .page-content h6 .anchor-head{color:#77a8fd}html:not(.light) .page-content aside{background-color:#1b1d25}html:not(.light) p>code{font-size:.9em;padding:1px 3px;position:relative;top:-1px;color:#c2c4ca;background-color:#2d2d2d;border-radius:2px;border:1px solid rgba(128,128,128,.1)}html:not(.light) .toc{background-color:#323232;border-color:#c4c8cc}html:not(.light) #totop{color:#babdc4;background-color:#676767b3}html:not(.light) #totop:hover{background-color:#676767}html:not(.light) li>code,html:not(.light) p>code{font-size:.9em;padding:1px 3px;position:relative;top:-1px;color:#c2c4ca;background-color:#2d2d2d;border-radius:2px;border:1px solid rgba(128,128,128,.1)}html:not(.light) kbd{color:#c2c4ca;background-color:#2d2d2d}html:not(.light) hr{border-color:#1b1d25}html:not(.light) .post-meta{color:#767f87}html:not(.light) .post-meta time::after{background-color:#1b1d25}html:not(.light) .post-meta span[itemprop=author]{border-color:#1b1d25}html:not(.light) a{color:inherit;text-decoration-color:#4a4d56}html:not(.light) a:hover{color:#77a8fd}html:not(.light) a:focus{outline-color:rgba(44,118,246,.6)}html:not(.light) li:before{color:#eaeaea}html:not(.light) blockquote{color:#9b9ba3;border-color:#4a4d56}html:not(.light) strong,html:not(.light) b{color:#eaeaea}html:not(.light) .navbar{border-color:#1b1d25}html:not(.light) .navbar .menu a#mode .mode-sunny{display:block}html:not(.light) .navbar .menu a#mode .mode-moon{display:none}html:not(.light) .navbar .menu .menu-link{color:#eaeaea}}@media screen and (prefers-color-scheme:dark) and (max-width:768px){html:not(.light) .navbar .menu{background-color:#131418;border-color:#1b1d25}html:not(.light) .navbar .menu input[type=checkbox]:checked~.trigger{background:#131418}}@media(prefers-color-scheme:dark){html:not(.light) .post-item:not(:first-child){border-color:#1b1d25}html:not(.light) .post-item .post-item-date{color:#eaeaea}html:not(.light) .post-item .post-item-title a{color:#babdc4}html:not(.light) .post-item .post-item-title a:hover,html:not(.light) .post-item .post-item-title afocus{color:#eaeaea}html:not(.light) .post-nav{border-color:#1b1d25}html:not(.light) .post-nav .post-nav-item{font-weight:700}html:not(.light) .post-nav .post-nav-item .post-title{color:#eaeaea;opacity:.9}html:not(.light) .post-nav .post-nav-item:hover .post-title,html:not(.light) .post-nav .post-nav-item:focus .post-title{color:#5292ff}html:not(.light) .post-nav .post-nav-item .nav-arrow{color:#767f87}}@media screen and (prefers-color-scheme:dark) and (max-width:768px){html:not(.light) .post-nav .post-nav-item:nth-child(even){border-color:#1b1d25}}@media(prefers-color-scheme:dark){html:not(.light) .footer span.footer_item{color:#eaeaea}html:not(.light) .footer a.footer_item:not(:last-child){color:#eaeaea}html:not(.light) .footer .footer_copyright{color:#767f87;opacity:1}html:not(.light) .not-found .title{color:#eaeaea;text-shadow:1px 0 0 #77a8fd}html:not(.light) .not-found .phrase{color:#babdc4}html:not(.light) .not-found .solution{color:#77a8fd}html:not(.light) .not-found .solution:hover{color:#5292ff}html:not(.light) .search-article input[type=search]{color:#babdc4}html:not(.light) .search-article input[type=search]::-webkit-input-placeholder{color:rgba(128,128,128,.8)}html:not(.light) .badge-list .badge-item a{border-color:#babdc4;color:#babdc4}html:not(.light) .badge-list .badge-item a:hover{background-color:#77a8fd;color:#1b1d25}html:not(.light) .badge-list .badge-item a:active{background-color:#5292ff}html:not(.light) .not-found .error-emoji{color:#c2c4ca}html:not(.light) .not-found .error-text{color:#9b9ba3}html:not(.light) .not-found .error-link a{color:#77a8fd}html:not(.light) .not-found .error-link a:hover{color:#5292ff}html:not(.light) .not-found .error-notice{border:1px solid #4a4d56}html:not(.light) .not-found .error-notice a{color:#77a8fd}html:not(.light) .not-found .error-article-list li a{border-color:#2d2d2d;color:#babdc4}html:not(.light) .not-found .error-article-list li a:hover{color:#77a8fd}}html.dark body{color:#babdc4;background-color:#131418}html.dark h1,html.dark h2,html.dark h3,html.dark h4,html.dark h5,html.dark h6{color:#eaeaea}html.dark table thead{color:#eaeaea;border-color:#1b1d25}html.dark table th,html.dark table td,html.dark table tr{border-color:#1b1d25}html.dark .page-content a{color:#77a8fd;text-decoration-color:#77a8fd}html.dark .page-content a:hover,html.dark .page-content a:active,html.dark .page-content a:focus{color:#5292ff}html.dark .page-content h3{border-color:#1b1d25}html.dark .page-content h1,html.dark .page-content h2,html.dark .page-content h3,html.dark .page-content h4,html.dark .page-content h5,html.dark .page-content h6{border-color:#4a4d56}html.dark .page-content h1 .anchor-head,html.dark .page-content h2 .anchor-head,html.dark .page-content h3 .anchor-head,html.dark .page-content h4 .anchor-head,html.dark .page-content h5 .anchor-head,html.dark .page-content h6 .anchor-head{color:#77a8fd}html.dark .page-content aside{background-color:#1b1d25}html.dark p>code{font-size:.9em;padding:1px 3px;position:relative;top:-1px;color:#c2c4ca;background-color:#2d2d2d;border-radius:2px;border:1px solid rgba(128,128,128,.1)}html.dark .toc{background-color:#323232;border-color:#c4c8cc}html.dark #totop{color:#babdc4;background-color:#676767b3}html.dark #totop:hover{background-color:#676767}html.dark li>code,html.dark p>code{font-size:.9em;padding:1px 3px;position:relative;top:-1px;color:#c2c4ca;background-color:#2d2d2d;border-radius:2px;border:1px solid rgba(128,128,128,.1)}html.dark kbd{color:#c2c4ca;background-color:#2d2d2d}html.dark hr{border-color:#1b1d25}html.dark .post-meta{color:#767f87}html.dark .post-meta time::after{background-color:#1b1d25}html.dark .post-meta span[itemprop=author]{border-color:#1b1d25}html.dark a{color:inherit;text-decoration-color:#4a4d56}html.dark a:hover{color:#77a8fd}html.dark a:focus{outline-color:rgba(44,118,246,.6)}html.dark li:before{color:#eaeaea}html.dark blockquote{color:#9b9ba3;border-color:#4a4d56}html.dark strong,html.dark b{color:#eaeaea}html.dark .navbar{border-color:#1b1d25}html.dark .navbar .menu a#mode .mode-sunny{display:block}html.dark .navbar .menu a#mode .mode-moon{display:none}html.dark .navbar .menu .menu-link{color:#eaeaea}@media screen and (max-width:768px){html.dark .navbar .menu{background-color:#131418;border-color:#1b1d25}html.dark .navbar .menu input[type=checkbox]:checked~.trigger{background:#131418}}html.dark .post-item:not(:first-child){border-color:#1b1d25}html.dark .post-item .post-item-date{color:#eaeaea}html.dark .post-item .post-item-title a{color:#babdc4}html.dark .post-item .post-item-title a:hover,html.dark .post-item .post-item-title afocus{color:#eaeaea}html.dark .post-nav{border-color:#1b1d25}html.dark .post-nav .post-nav-item{font-weight:700}html.dark .post-nav .post-nav-item .post-title{color:#eaeaea;opacity:.9}html.dark .post-nav .post-nav-item:hover .post-title,html.dark .post-nav .post-nav-item:focus .post-title{color:#5292ff}html.dark .post-nav .post-nav-item .nav-arrow{color:#767f87}@media screen and (max-width:768px){html.dark .post-nav .post-nav-item:nth-child(even){border-color:#1b1d25}}html.dark .footer span.footer_item{color:#eaeaea}html.dark .footer a.footer_item:not(:last-child){color:#eaeaea}html.dark .footer .footer_copyright{color:#767f87;opacity:1}html.dark .not-found .title{color:#eaeaea;text-shadow:1px 0 0 #77a8fd}html.dark .not-found .phrase{color:#babdc4}html.dark .not-found .solution{color:#77a8fd}html.dark .not-found .solution:hover{color:#5292ff}html.dark .search-article input[type=search]{color:#babdc4}html.dark .search-article input[type=search]::-webkit-input-placeholder{color:rgba(128,128,128,.8)}html.dark .badge-list .badge-item a{border-color:#babdc4;color:#babdc4}html.dark .badge-list .badge-item a:hover{background-color:#77a8fd;color:#1b1d25}html.dark .badge-list .badge-item a:active{background-color:#5292ff}html.dark .not-found .error-emoji{color:#c2c4ca}html.dark .not-found .error-text{color:#9b9ba3}html.dark .not-found .error-link a{color:#77a8fd}html.dark .not-found .error-link a:hover{color:#5292ff}html.dark .not-found .error-notice{border:1px solid #4a4d56}html.dark .not-found .error-notice a{color:#77a8fd}html.dark .not-found .error-article-list li a{border-color:#2d2d2d;color:#babdc4}html.dark .not-found .error-article-list li a:hover{color:#77a8fd}.list-page .post-year{padding-bottom:.5rem}.not-found{text-align:center;display:flex;justify-content:center;flex-direction:column;margin-top:3rem}.not-found .error-emoji{color:#333638;font-size:3rem}.not-found .error-text{color:#525b66;font-size:1.25rem}.not-found .error-link{margin-top:2rem}.not-found .error-link a{color:#003fff}.not-found .error-link a:hover{color:#0036c7}.not-found .error-notice{border:1px solid #c4c8cc;border-radius:10px;padding:1rem;width:fit-content;margin:0 auto}.not-found .error-notice a{color:#003fff;text-decoration:underline}.not-found .error-article-list{width:fit-content;margin:1em auto;text-align:left;padding-left:0}.not-found .error-article-list li{list-style-type:none;margin:.7rem 0}.not-found .error-article-list li a{border:1px solid;border-color:#d8dbe2;width:inherit;padding:.3rem .5rem;display:block;border-radius:10px;text-decoration:none;color:#0d122b}.not-found .error-article-list li a::before{content:"๐Ÿ“";margin-right:1rem}.not-found .error-article-list li a:hover{color:#003fff}html{scroll-behavior:smooth}#totop{visibility:hidden;color:#434648;position:fixed;bottom:60px;right:30px;z-index:1;border-radius:10%;background-color:#dfe0e397;transition:visibility .5s,opacity .8s linear}#totop:hover{background-color:#dfe0e3}#totop svg{margin:auto;display:block;height:40px;width:40px} \ No newline at end of file diff --git a/tags/algorithm/index.html b/tags/algorithm/index.html index e3eb171..6561567 100644 --- a/tags/algorithm/index.html +++ b/tags/algorithm/index.html @@ -1,7 +1,8 @@ -algorithm | PrayinForRain.dev +algorithm | PrayinForRain.dev

algorithm

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/baekjoon/index.html b/tags/baekjoon/index.html index 45a6da9..f091812 100644 --- a/tags/baekjoon/index.html +++ b/tags/baekjoon/index.html @@ -1,7 +1,8 @@ -baekjoon | PrayinForRain.dev +baekjoon | PrayinForRain.dev

baekjoon

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/blog/index.html b/tags/blog/index.html index 54ff136..9b31806 100644 --- a/tags/blog/index.html +++ b/tags/blog/index.html @@ -1,7 +1,8 @@ -blog | PrayinForRain.dev +blog | PrayinForRain.dev

blog

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/browser/index.html b/tags/browser/index.html index 4bdc713..951a9a7 100644 --- a/tags/browser/index.html +++ b/tags/browser/index.html @@ -1,7 +1,8 @@ -browser | PrayinForRain.dev +browser | PrayinForRain.dev

browser

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/css-in-js/index.html b/tags/css-in-js/index.html index 3caf337..5d45003 100644 --- a/tags/css-in-js/index.html +++ b/tags/css-in-js/index.html @@ -1,7 +1,8 @@ -CSS-in-JS | PrayinForRain.dev +CSS-in-JS | PrayinForRain.dev

CSS-in-JS

2022

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/css/index.html b/tags/css/index.html index 3517fff..350e000 100644 --- a/tags/css/index.html +++ b/tags/css/index.html @@ -1,7 +1,8 @@ -CSS | PrayinForRain.dev +CSS | PrayinForRain.dev

CSS

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/ecmascript/index.html b/tags/ecmascript/index.html index c52ca22..5cf95b2 100644 --- a/tags/ecmascript/index.html +++ b/tags/ecmascript/index.html @@ -1,7 +1,8 @@ -ECMAScript | PrayinForRain.dev +ECMAScript | PrayinForRain.dev

ECMAScript

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/emotion/index.html b/tags/emotion/index.html index 3c7cdf8..51001d8 100644 --- a/tags/emotion/index.html +++ b/tags/emotion/index.html @@ -1,7 +1,8 @@ -Emotion | PrayinForRain.dev +Emotion | PrayinForRain.dev

Emotion

2022

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/firebase/index.html b/tags/firebase/index.html index 624bfd6..4b616fa 100644 --- a/tags/firebase/index.html +++ b/tags/firebase/index.html @@ -1,7 +1,8 @@ -Firebase | PrayinForRain.dev +Firebase | PrayinForRain.dev

Firebase

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/generic/index.html b/tags/generic/index.html index 2d3e34b..d7d5ebb 100644 --- a/tags/generic/index.html +++ b/tags/generic/index.html @@ -1,7 +1,8 @@ -Generic | PrayinForRain.dev +Generic | PrayinForRain.dev

Generic

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/hugo/index.html b/tags/hugo/index.html index d3af446..3f8ad1a 100644 --- a/tags/hugo/index.html +++ b/tags/hugo/index.html @@ -1,7 +1,8 @@ -hugo | PrayinForRain.dev +hugo | PrayinForRain.dev

hugo

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/index.html b/tags/index.html index 573b62d..a5cfa4e 100644 --- a/tags/index.html +++ b/tags/index.html @@ -1,7 +1,8 @@ -Tags | PrayinForRain.dev +Tags | PrayinForRain.dev

Tags

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/javascript/index.html b/tags/javascript/index.html index 9c0b710..41592f5 100644 --- a/tags/javascript/index.html +++ b/tags/javascript/index.html @@ -1,7 +1,8 @@ -javascript | PrayinForRain.dev +javascript | PrayinForRain.dev

javascript

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/macos/index.html b/tags/macos/index.html index 46331da..f45cc70 100644 --- a/tags/macos/index.html +++ b/tags/macos/index.html @@ -1,7 +1,8 @@ -macOS | PrayinForRain.dev +macOS | PrayinForRain.dev

macOS

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/moheyum/index.html b/tags/moheyum/index.html index 33073ae..1ff137c 100644 --- a/tags/moheyum/index.html +++ b/tags/moheyum/index.html @@ -1,7 +1,8 @@ -moheyum | PrayinForRain.dev +moheyum | PrayinForRain.dev

moheyum

2022

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/nextjs/index.html b/tags/nextjs/index.html index cca2b87..e8d494f 100644 --- a/tags/nextjs/index.html +++ b/tags/nextjs/index.html @@ -1,7 +1,8 @@ -nextjs | PrayinForRain.dev +nextjs | PrayinForRain.dev

nextjs

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/nodejs/index.html b/tags/nodejs/index.html index d3a1c67..7d53570 100644 --- a/tags/nodejs/index.html +++ b/tags/nodejs/index.html @@ -1,7 +1,8 @@ -nodejs | PrayinForRain.dev +nodejs | PrayinForRain.dev

nodejs

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/npm/index.html b/tags/npm/index.html index ec324fa..6cf6e9f 100644 --- a/tags/npm/index.html +++ b/tags/npm/index.html @@ -1,7 +1,8 @@ -npm | PrayinForRain.dev +npm | PrayinForRain.dev

npm

2023

2022

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/numble/index.html b/tags/numble/index.html index 64a5a49..1846df7 100644 --- a/tags/numble/index.html +++ b/tags/numble/index.html @@ -1,7 +1,8 @@ -numble | PrayinForRain.dev +numble | PrayinForRain.dev

numble

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/nvm/index.html b/tags/nvm/index.html index e1e49d9..b351aec 100644 --- a/tags/nvm/index.html +++ b/tags/nvm/index.html @@ -1,7 +1,8 @@ -nvm | PrayinForRain.dev +nvm | PrayinForRain.dev

nvm

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/pnp/index.html b/tags/pnp/index.html index b8e2602..f23b8f5 100644 --- a/tags/pnp/index.html +++ b/tags/pnp/index.html @@ -1,7 +1,8 @@ -pnp | PrayinForRain.dev +pnp | PrayinForRain.dev

pnp

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/pnpm/index.html b/tags/pnpm/index.html index b7a0667..a319f52 100644 --- a/tags/pnpm/index.html +++ b/tags/pnpm/index.html @@ -1,7 +1,8 @@ -pnpm | PrayinForRain.dev +pnpm | PrayinForRain.dev

pnpm

2022

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/project/index.html b/tags/project/index.html index 0629917..db8e35f 100644 --- a/tags/project/index.html +++ b/tags/project/index.html @@ -1,7 +1,8 @@ -project | PrayinForRain.dev +project | PrayinForRain.dev

project

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/ps/index.html b/tags/ps/index.html index d37a598..8a23d60 100644 --- a/tags/ps/index.html +++ b/tags/ps/index.html @@ -1,7 +1,8 @@ -ps | PrayinForRain.dev +ps | PrayinForRain.dev

ps

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/recoil/index.html b/tags/recoil/index.html index 25fe3ed..87ded11 100644 --- a/tags/recoil/index.html +++ b/tags/recoil/index.html @@ -1,7 +1,8 @@ -recoil | PrayinForRain.dev +recoil | PrayinForRain.dev

recoil

2022

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/redux/index.html b/tags/redux/index.html index 2db2419..70f00ee 100644 --- a/tags/redux/index.html +++ b/tags/redux/index.html @@ -1,7 +1,8 @@ -redux | PrayinForRain.dev +redux | PrayinForRain.dev

redux

2022

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/storybook/index.html b/tags/storybook/index.html index 2a99fa3..2b7d1e8 100644 --- a/tags/storybook/index.html +++ b/tags/storybook/index.html @@ -1,7 +1,8 @@ -storybook | PrayinForRain.dev +storybook | PrayinForRain.dev

storybook

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/tree-shaking/index.html b/tags/tree-shaking/index.html index ecddc99..ee298e3 100644 --- a/tags/tree-shaking/index.html +++ b/tags/tree-shaking/index.html @@ -1,7 +1,8 @@ -tree-shaking | PrayinForRain.dev +tree-shaking | PrayinForRain.dev

tree-shaking

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/typescript/index.html b/tags/typescript/index.html index af27738..a7d4ef1 100644 --- a/tags/typescript/index.html +++ b/tags/typescript/index.html @@ -1,7 +1,8 @@ -TypeScript | PrayinForRain.dev +TypeScript | PrayinForRain.dev

TypeScript

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/vscode/index.html b/tags/vscode/index.html index 5962577..9949424 100644 --- a/tags/vscode/index.html +++ b/tags/vscode/index.html @@ -1,7 +1,8 @@ -vscode | PrayinForRain.dev +vscode | PrayinForRain.dev

vscode

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/web/index.html b/tags/web/index.html index 88ff096..93624bc 100644 --- a/tags/web/index.html +++ b/tags/web/index.html @@ -1,7 +1,8 @@ -Web | PrayinForRain.dev +Web | PrayinForRain.dev

Web

2023

\ No newline at end of file +Hugo. + \ No newline at end of file diff --git a/tags/yarn/index.html b/tags/yarn/index.html index 3f88572..a5b68a8 100644 --- a/tags/yarn/index.html +++ b/tags/yarn/index.html @@ -1,7 +1,8 @@ -yarn | PrayinForRain.dev +yarn | PrayinForRain.dev

yarn

2023

2022

\ No newline at end of file +Hugo. + \ No newline at end of file