๐ช Programming
[Git] ๋ณํฉ(Merge) ์ถฉ๋ ๋ฐฉ์ง๋ฅผ ์ํ ๋ฆฌ๋ฒ ์ด์ค Rebase
[Git] ๋ณํฉ(Merge) ์ถฉ๋ ๋ฐฉ์ง๋ฅผ ์ํ ๋ฆฌ๋ฒ ์ด์ค Rebase
2024.05.12merge ์ถฉ๋ ๋ฐฉ์ง๋ฅผ ์ํ ๋ฆฌ๋ฒ ์ด์ค(Rebase) โญ๏ธPR ๋ณด๋ด๊ธฐ ์ ๋ค๋ฅธ ์ฌ๋์ด ์๋ก์ด ์ปค๋ฐ์ ์ถ๊ฐํ ์ํ๋ผ๋ฉด ์ถฉ๋ ๋ฐฉ์ง๋ฅผ ์ํด ๋ก์ปฌ ๋ ํฌ์งํ ๋ฆฌ๋ฅผ ์ต์ ํํ๊ณ (upstream โ origin ๋ ํฌ์งํ ๋ฆฌ ๋๊ธฐํ), ํ์ฌ ์์
์ค์ธ ๊ธฐ๋ฅ/๋ฒ๊ทธ ๋ธ๋์น์ base๋ฅผ develop ๋ธ๋์น์ ๋ง์ง๋ง ์ปค๋ฐ์ผ๋ก ๋ณ๊ฒฝํ๋ ๋ฆฌ๋ฒ ์ด์ค(Rebase) ์์
์ด ํ์ํ๋ค — ์ฐธ๊ณ ๊ธ1 | ์ฐธ๊ณ ๊ธ2 โถ ํ์ฌ ์ํ# ํ์ฌ ์์น feature-branch 8๋ฒ ์ปค๋ฐ1 - 2 - 3 - 5 (devlop) \ 4 - 6 - 7 - 8 (feature-branch)develop ๋ธ๋์น์ 1~2 ์ปค๋ฐ : ๋ก์ปฌ ๋ ํฌ์งํ ๋ฆฌ์ develop ๋ธ๋์น ์ปค๋ฐdevelop ๋ธ๋์น์ 3~5 ์ปค๋ฐ : ์๊ฒฉ(upstream) ๋ ํฌ์งํ ๋ฆฌ์์ ์๋ก..
[React] svg ํ์ผ → ๋ฆฌ์กํธ ์ปดํฌ๋ํธ ๋ณํํ๊ธฐ - React SVGR
[React] svg ํ์ผ → ๋ฆฌ์กํธ ์ปดํฌ๋ํธ ๋ณํํ๊ธฐ - React SVGR
2024.05.12๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ์ค์นyarn add "@svgr/cli"yarn add -D "@svgr/webpack" CLI ๋ช
๋ น์ด๐ก ๊ฒฝ๋ก๋ง ์
๋ ฅํ๋ฉด svg path๋ฅผ ์ง์ ํ๋ ๊ฒ๊ณผ ๋์ผ. -- double dash๋ ์ปค๋งจ๋ ์ต์
์ด ๋๋๋ค๋๊ฑธ ์๋ฏธํ๋ฏ๋ก(์ฐธ๊ณ ๊ธ) -- ๋ค์ ๊ฒฝ๋ก๋ฅผ ์
๋ ฅํ๋ฉด svg path๊ฐ ์ง์ ๋จ(์ต์
์ด ์๋ค๋ฉด ๊ตณ์ด ์๋ถ์ฌ๋ ๋จ).# config ํ์ผ์ด ์์ ๋ # svgr -d svgr ./assets/icons/raw/bulb.svg -d ./assets/icons/dist# config ํ์ผ์ด ์์ ๋# svgr --config-file -d svgr --config-file ./svgr.config.js ./assets/icons/raw/bulb.svg -d ./assets/icons/dis..
[React] ๋ฆฌ์กํธ Context API ๋ ๋๋ง ์ต์ ํํ๊ธฐ
[React] ๋ฆฌ์กํธ Context API ๋ ๋๋ง ์ต์ ํํ๊ธฐ
2024.05.11TL;DR๋ฆฌ์กํธ์์ ์ ๊ณตํ๋ ContextAPI๋ฅผ ์ฌ์ฉํ๋ฉด ์ํ๋ ์ํ(๊ฐ)๋ฅผ ์ ์ญ์ ์ผ๋ก ์ฌ์ฉํ ์ ์๋ค. ์ปดํฌ๋ํธ๋ผ๋ฆฌ ํน์ ์ํ๋ฅผ ๊ณต์ ํ ๋๋ ์ ์ฉํ๋ค. ํ์ง๋ง Context.Provider ํ์์์ ์ปจํ
์คํธ๋ฅผ ๊ตฌ๋
ํ๋ ๋ชจ๋ ์ปดํฌ๋ํธ๋ ๊ฐ์ ๋ณ๊ฒฝํ ๋๋ง๋ค ๋ฆฌ๋ ๋๋ง ๋๋ค. Context.Provider ๊ฐ์ด ์
๋ฐ์ดํธ๋๋ฉด useContext ํ
์ด ์ต์ ์ปจํ
์คํธ ๊ฐ์ ์ฌ์ฉํด ์ปดํฌ๋ํธ ๋ฆฌ๋ ๋๋ฅผ ํธ๋ฆฌ๊ฑฐํ๊ธฐ ๋๋ฌธ์ด๋ค. ์ด์ฒ๋ผ ContextAPI๋ ๋ ๋๋ง ์ต์ ํ์ ์ผ์ผ์ด ์ ๊ฒฝ์จ์ผํ๋ ๋จ์ ์ด ์๋ค. ์ฌ๋ฌ ์ต์ ํ ๋ฐฉ๋ฒ์ค์์ ์ํ/๋์คํจ์น ๋จ์๋ก ์ปจํ
์คํธ๋ฅผ ์ชผ๊ฐ๋ ๋ฐฉ์์ด ๊ฐ์ฅ ๊ฐ๋จํ๋ค. ๋์ Provider๊ฐ ๋๋ฌด ๋ง์์ง๋ ๋จ์ (Wrapper Hell)์ด ์๋ค. Context ์ํ๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง๋ค ํด๋น Context.P..
[HTML/CSS] form ์ธ๋ถ์์ form ์ฐ๊ฒฐ / document ๊ฐ์ฒด๋ก form ์ ๊ทผํ๊ธฐ
[HTML/CSS] form ์ธ๋ถ์์ form ์ฐ๊ฒฐ / document ๊ฐ์ฒด๋ก form ์ ๊ทผํ๊ธฐ
2024.05.11form ์ธ๋ถ์์ form ๊ด๋ จ ์์ ์ฐ๊ฒฐform ๊ด๋ จ ์์(button, input ๋ฑ)์ form ์์ฑ์ผ๋ก ์ด๋ค form์ ์ํ ์ง(์ฐ๊ฒฐ) ์ง์ ํ ์ ์๋ค. ์ฃผ๋ก form ์ธ๋ถ์ ์๋ form ๊ด๋ จ ์์๋ฅผ form์ ์ฐ๊ฒฐํ ๋ ์ฌ์ฉํ๋ค. ์ด๋ form ์์์ id ๊ฐ๊ณผ form ๊ด๋ จ ์์์ form ์์ฑ ๊ฐ์ด ๋์ผํด์ผ ํ๊ณ , ๊ฐ์ ๋ฌธ์(document)์ ์์ด์ผ ๋๋ค. form ๋ด๋ถ์ ์๋ form ๊ด๋ จ ์์๋ ์๋์ผ๋ก ํด๋น form์ ์ํ๋ฏ๋ก form ์์ฑ์ผ๋ก ๋ช
์ํ์ง ์์๋ ๋๋ค. Submit ๐ก button ์์์ type ์์ฑ ๊ธฐ๋ณธ ๊ฐ์ submit์ด๋ฉฐ, ํด๋ฆญํด์ ์์์ ์ ์ถํ๋ฉด ์๋ก๊ณ ์นจํ๋ ๊ธฐ๋ณธ ๋์์ ๊ฐ์ง๋ค. ์๋ก๊ณ ์นจ์ ๋ฐฉ์งํ๋ ค๋ฉด form ์์ onsubmit ํธ๋ค๋ฌ์ event.p..
[HTML/CSS] Tailwind CSS์์ ํ์ ์
๋ ํฐ(~) ์ฌ์ฉํ๊ธฐ
[HTML/CSS] Tailwind CSS์์ ํ์ ์ ๋ ํฐ(~) ์ฌ์ฉํ๊ธฐ
2024.05.11Tailwind CSS 2.2 ๋ฒ์ ๋ถํฐ peer-* variants๋ก ํ์ ์์๋ฅผ ์ ํํ ์ ์๋ค. input ์์์ peer ํด๋์ค๋ฅผ ์ ์ํด๋๋ฉด, ํ์ ์์์์ peer ํด๋์ค๋ฅผ ์ด์ฉํด input ์์๋ฅผ ์ ํํ ์ ์๋ค. ์ฃผ๋ก peer-checked ์ฒ๋ผ ์์์ ํน์ ์ํ๋ฅผ ์ ํํ ๋ ์ฌ์ฉํ๋ค. peer-checked๋ (์ฒดํฌ๋ฐ์ค ๋ฑ)์์๊ฐ ์ฒดํฌ๋ ์ํ์ผ ๋ ์ ์ฉ๋๋ค. ์ด์ธ์๋ ๋ค์ํ ๊ฐ์ ํด๋์ค ์
๋ ํฐ๋ฅผ ์ฌ์ฉํ ์ ์๋ค. e.g. peer-hover peer-focus peer-disabled ์ฐธ๊ณ ๋ก ์ peer-checked ํด๋์ค๋ ~ ํ์ ์
๋ ํฐ๋ฅผ ์ฌ์ฉํ CSS ์ฝ๋๋ก ๋ณํ๋๋ค..peer:checked ~ .peer-checked\:bg-blue-500 { background-c..
[HTML/CSS] ์คํฌ๋กค๋ฐ ํ์๋ก ์ธํ ๋ ์ด์์ ๋ณํ ๋ฐฉ์งํ๊ธฐ - Scrollbar Gutter
[HTML/CSS] ์คํฌ๋กค๋ฐ ํ์๋ก ์ธํ ๋ ์ด์์ ๋ณํ ๋ฐฉ์งํ๊ธฐ - Scrollbar Gutter
2024.05.11ํ๋ฉด์ ๋ค ํ์ํ ์ ์์ ์ ๋๋ก ์ฝํ
์ธ ๊ฐ ๊ธธ๋ค๋ฉด ์ธ๋ก ์คํฌ๋กค๋ฐ๊ฐ ์๊ธด๋ค. ๊ทธ๋ผ ์ธ๋ก ์คํฌ๋กค๋ฐ์ ํญ ๋๋ฌธ์ ์ฝํ
์ธ ๋ฅผ ํ์ํ ์์ญ์ด ์ค์ด๋ค์ด ์ ์ด๋ฏธ์ง์ฒ๋ผ ๋ ์ด์์์ด ๋ณํ๋๋ค. ์คํฌ๋กค๋ฐ๊ฐ ์๊ฒจ์ ๋ ์ด์์์ด ๋ณํ๋๋ ๊ฒ์ ๋ฐฉ์งํ๊ณ ์ถ๋ค๋ฉด scrollbar-gutter ์์ฑ์ ์ฌ์ฉํ๋ฉด ๋๋ค. scrollbar-gutter๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์คํฌ๋กค๋ฐ ์์ญ์ ๋ฏธ๋ฆฌ ํ๋ณดํ๋๋ก ํ๋ ์์ฑ์ด๋ค. ์คํฌ๋กค๋ฐ ์์ญ์ ๋ฏธ๋ฆฌ ํ๋ณดํ์ผ๋ฏ๋ก ์คํฌ๋กค์ด ์๊ฒจ๋ ๋ ์ด์์ ๋ณํ์ด ์๋ค. scrollbar-gutter: auto | stable && both-edges?.box { padding: 1rem; max-height: 220px; overflow-y: auto; scrollbar-gutter: stable; /* sc..
[TS] ํ์
์คํฌ๋ฆฝํธ์์ CSS Module ์ฌ์ฉํ๊ธฐ
[TS] ํ์ ์คํฌ๋ฆฝํธ์์ CSS Module ์ฌ์ฉํ๊ธฐ
2024.05.11ํ์
์คํฌ๋ฆฝํธ CSS Module ์ค๋ฅ ํด๊ฒฐํ์
์คํฌ๋ฆฝํธ์์ CSS Module์ ์ฌ์ฉํ๋ฉด ๋ชจ๋/์ ์ธ์ ์ฐพ์ ์ ์๋ค๋ ํ์
์๋ฌ๊ฐ ๋์จ๋ค. src ํน์ ์ปดํฌ๋ํธ ํด๋์ ์๋ ๋ด์ฉ์ด ๋ด๊ธด typings.d.ts ํ์ผ์ ์ถ๊ฐํ๋ฉด ํด๊ฒฐํ ์ ์๋ค. via StackOverFlow// Toggle/typings.d.tsdeclare module '*.module.css' { const classes: { [key: string]: string }; export default classes;} CSS Module ์ฌ์ฉ๋ฒโถ [name].module.css ํํ๋ก CSS ๋ชจ๋ ํ์ผ์ ์์ฑํ๊ณ /* Toggle/Toggle.module.css */.toggle-bg:after { /* ... */} โท ์ปดํฌ๋ํธ์์ ..
[React] falsy ๊ฐ์ ์ฌ์ฉํ ๋ฆฌ์กํธ ์กฐ๊ฑด๋ถ ๋ ๋๋ง์ ์ฃผ์ํ ์
[React] falsy ๊ฐ์ ์ฌ์ฉํ ๋ฆฌ์กํธ ์กฐ๊ฑด๋ถ ๋ ๋๋ง์ ์ฃผ์ํ ์
2024.05.11๋ฆฌ์กํธ์์ null, undefined, boolean ์ด๋ ๊ฒ 3๊ฐ์ง ํ์
๋ง ๋ ๋๋ง์ ๊ฑด๋๋ฐ๋ ์ ๊ธฐ์ต ์๋ฐ์คํฌ๋ฆฝํธ์์ 0(ํน์ -0, 0n)์ 6๊ฐ์ง falsy ๊ฐ ์ค ํ๋๋ค. && AND ๋
ผ๋ฆฌ ์ฐ์ฐ์๋ ์ฒซ๋ฒ์งธ falsy ๊ฐ์ ์ฐพ์์ ๋ฐํํ๊ณ , falsy ๊ฐ์ด ์์ผ๋ฉด(ํผ์ฐ์ฐ์๊ฐ ๋ชจ๋ true์ด๋ฉด) ๋ง์ง๋ง ํผ์ฐ์ฐ์๋ฅผ ๋ฐํํ๋ค(๋ฐ๋๋ก || OR ์ฐ์ฐ์๋ ์ฒซ ๋ฒ์งธ truthy ๊ฐ์ ์ฐพ์ ๋ฐํํ๊ณ , truthy ๊ฐ์ด ์์ผ๋ฉด && ์ฐ์ฐ์์ฒ๋ผ ๋ง์ง๋ง ํผ์ฐ์ฐ์๋ฅผ ๋ฐํํ๋ค).0 && 'bit'; // 0-0 && 'bit'; // -00n && 'bit'; // 0n React์์ ์กฐ๊ฑด๋ถ ๋ ๋๋ง ์ฝ๋๋ฅผ ์์ฑํ ๋ && ์ฐ์ฐ์๋ฅผ ์์ฃผ ์ฌ์ฉํ๋ค. ์๋ ์์์์ count ๋ณ์์ ๋ด๊ธด 0์ falsy ๊ฐ์ด๋ฏ๋ก ํ๋ฉด์ ์๋ฌด..
[JS] ํน์ ์์ ์์น๋ก ์คํฌ๋กค ์ด๋ํ๊ธฐ - scrollIntoView
[JS] ํน์ ์์ ์์น๋ก ์คํฌ๋กค ์ด๋ํ๊ธฐ - scrollIntoView
2024.05.11๋ฌธ๋ฒํน์ ์์๊ฐ ์์นํ ๊ณณ๊น์ง ์คํฌ๋กค์ ์ด๋ํ๊ณ ์ถ์ ๋ element.scrollIntoView ๋ฉ์๋๋ฅผ ์ด์ฉํ๋ฉด ๊ฐํธํ๊ฒ ๊ตฌํํ ์ ์๋ค. scrollIntoView ๋ฉ์๋๋ ์ด 3๊ฐ์ง ๋ฐฉ๋ฒ์ผ๋ก ์ฌ์ฉํ ์ ์๋ค. (MDN)element.scrollIntoView(align) โถ ํ๋ผ๋ฏธํฐ ์์ — element๊ฐ ๋ธ๋ผ์ฐ์ ํ๋ฉด ๊ฐ์ฅ ์๋ก ์ค๋๋ก ์คํฌ๋กค(์ ๋ ฌ)element.scrollIntoView(); // element.scrollIntoView(true)์ ๋์ผ โท boolean ํ๋ผ๋ฏธํฐ// { block: "start", inline: "nearest" } ์ต์
๊ณผ ๋์ผelement.scrollIntoView(true); // { block: "end", inline: "nearest" } ์ต์
๊ณผ ..
[React] ๋ฆฌ์กํธ Render Props ํจํด 2๊ฐ์ง ์ฌ์ฉ ๋ฐฉ๋ฒ
[React] ๋ฆฌ์กํธ Render Props ํจํด 2๊ฐ์ง ์ฌ์ฉ ๋ฐฉ๋ฒ
2024.05.11children Prop์ ์ด์ฉํด ์ปดํฌ๋ํธ ํฉ์ฑ(component composition) ํํ๋ก ์์ฑํ๋ฉด ๋ถ๋ชจ ์ปดํฌ๋ํธ๋ฅผ ์์ ํ์ง ์๊ณ ๋ ์์ ์ปดํฌ๋ํธ๋ฅผ ์์ ๋กญ๊ฒ ์ถ๊ฐํด์ ์ฌ์ฉํ ์ ์๋ค. ์ผ๋ฐ์ ์ผ๋ก ๋ฐ์ดํฐ(์ํ) ๊ณต์ ๋ ์ํ ๋์ด์ฌ๋ฆฌ๊ธฐ ๋ฐฉ๋ฒ์ด ๊ฐ์ฅ ๊ฐ๋จํ์ง๋ง ์ต์์ ์ปดํฌ๋ํธ๊ฐ ๋ฐ์ดํฐ(์ํ)์ ๋ชจ๋ ํ์ ์ปดํฌ๋ํธ๋ฅผ ๊ฐ๊ณ ์์ผ๋ฉด ํด๋น ์ํ์ ๊ด๋ จ ์๋ ๋ชจ๋ ํ์ ์ปดํฌ๋ํธ๋ ๋ ๋๋ง์ ์ํฅ์ ์ฃผ๋ ๋จ์ ์ด ์๋ค(์ํ ๋์ด์ฌ๋ฆฌ๊ธฐ๋ก ๋ถ๋ชจ ์ปดํฌ๋ํธ ์ํ๊ฐ ๋ณ๊ฒฝ๋ผ์ ์
๋ฐ์ดํธํ๋ฉด ํ์ ์ปดํฌ๋ํธ๋ ๋ค์ ๋ ๋๋ง ํ๋ฏ๋ก). ์ด๋ Render Props ํจํด์ ํ์ฉํ ์ ์๋ค. ์ด๋ค ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ ์ง์ ๋ํ ๋ก์ง์ ์์ ์ปดํฌ๋ํธ๊ฐ ๊ฒฐ์ ํ๊ณ , ํ์ ์ปดํฌ๋ํธ๋ ์์ ์ด ๊ด๋ฆฌํ๋ ์ํ๋ฅผ ์ธ์๋ก ๋ฐ์ render(ํน์ childre..
[TS] ํ์
์คํฌ๋ฆฝํธ ํ์
๊ฐ๋ is / asserts ํค์๋ ์ฐจ์ด์
[TS] ํ์ ์คํฌ๋ฆฝํธ ํ์ ๊ฐ๋ is / asserts ํค์๋ ์ฐจ์ด์
2024.05.10TL;DRparameterName is Type : ์กฐ๊ฑด๋ฌธ์์ ์ฌ์ฉ (if๋ฌธ์ผ๋ก ํ์
์ ๋ถ๊ธฐ ์ฒ๋ฆฌํ ๋ ์ฌ์ฉ)asserts parameterName is Type : ์์ธ๋ฅผ ๋ฐ์์ํด (์ค์ฝํ ๋ด์์ ์ ํจํ ํ์
์ธ์ง ํ๋จํ ๋ ์ฌ์ฉ) is ํค์๋ํ์
์คํฌ๋ฆฝํธ์์ ํ์
๋ฒ์๋ฅผ ์ขํ๋๊ฐ๋ ์์
(๊ธฐ๋ฅ)์ ํ์
๊ฐ๋๋ผ๊ณ ๋ถ๋ฅธ๋ค. ๊ฐ๋จํ ํ์
์ in, typeof ํค์๋ ๋ฑ์ ์ฌ์ฉํ ์ ์์ง๋ง โํ์
์ด ๋ณต์กํ๊ฑฐ๋ โํ์
์ฒดํฌ ๋ก์ง์ ์ฌ์ฌ์ฉํ๊ณ ์ถ์ ๋ ์ฌ์ฉ์ ์ ์ ํ์
๊ฐ๋ ํจ์๋ฅผ ๋ง๋ค์ด์ ์ฌ์ฉํ๋ค. ํ์
๊ฐ๋ ํจ์๋ ๋ฆฌํด๋ฌธ์ is ํค์๋๋ฅผ ์ด์ฉํด์ “์ด๋ค ์ธ์๋ ์ด๋ค ํ์
์ด๋ค” ๋ผ๋ ๊ฐ(ํ์
๋ช
์ /์ ๋ถ; Predicate)์ ๋ฆฌํดํ๋ ํจ์๋ผ๊ณ ๋ณผ ์ ์๋ค. ๐ก ์ ๋ถ(Predicate; ่ฐ่ฏ)๋? ์ฃผ์ด์ ์ํ, ์ฑ์ง..
[DevTools] ๊ฐ๋ฐ์ ์นํ์ ์ธ ํฐ๋ฏธ๋ LS — PLS
[DevTools] ๊ฐ๋ฐ์ ์นํ์ ์ธ ํฐ๋ฏธ๋ LS — PLS
2024.05.10pls๋ ๊ฐ๋ฐ์ ์นํ์ ์ธ ๊ธฐ๋ฅ์ ๊ฐ์ง ์ด์๊ณ ๊ฐ๋ ฅํ ํฐ๋ฏธ๋ ls ํด์ด๋ค. pls์์ p๋ ์๋ ์๋ฏธ๋ฅผ ํฌํจํ๋ค.Pretty (the output from pls surely looks better)Powerful (pls has lots of features and endless customisation)Programmer (pls is geared towards developers)Professional (pls can be extensively tweaked by the pros)Python (pls is written in Python!) ์ฌ์ด ์ฌ์ฉ๋ฒ, ํด๋/ํ์ผ ์์ด์ฝ ํ์, ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ณ ํ์ผ๋ช
์์ ๊ตฌ๋ถ(*.js ํ์ผ ๋
ธ๋ฝ์์ผ๋ก ํ์ ๋ฑ), ์ค์ ํ์ผ์ ๊ตต๊ฒ ํน์ ๋ฐ์ค๋ก ํ์, ์ค์ํ์ง ์..