๐ช Programming
[React] ๋ฆฌ์กํธ์์ Rendering ๋ ๋๋ง์ด๋?
[React] ๋ฆฌ์กํธ์์ Rendering ๋ ๋๋ง์ด๋?
2024.05.16TL;DR๋ง์ดํธ : ์ปดํฌ๋ํธ๊ฐ ์ต์ด๋ก DOM์ ์ฝ์
๋๋ ๊ณผ์ . ์ปดํฌ๋ํธ ์๋ช
์ฃผ๊ธฐ์์ ํ ๋ฒ๋ง ๋ฐ์๋ ๋ : ์ปดํฌ๋ํธ๋ฅผ ์คํํด์ ๋ณ๊ฒฝ์ฌํญ์ ๊ณ์ฐ(์ปดํฌ๋ํธ ์ถ๋ ฅ ๊ฒฐ์ )ํ๋ ๊ณผ์ . ์๋ก์ด ๊ฐ์ DOM์ ์์ฑํ๊ณ ์ด ์๋ก์ด ๊ฐ์ DOM๊ณผ ์ด์ ๊ฐ์ DOM์ ๋น๊ตํ์ฌ ์ค์ DOM์ ๋ฐ์ํ ๋ณ๊ฒฝ์ฌํญ ํ์
์ปค๋ฐ : ๋ ๋ ๋จ๊ณ๋ฅผ ํตํด ํ์
๋ ๋ณ๊ฒฝ์ฌํญ๋ค์ด ์ค์ ๋ธ๋ผ์ฐ์ DOM์ ์ ์ฉ๋๋ ๊ณผ์ ๋ ๋๋ง์ด๋์ผ๋ฐ์ ์ผ๋ก ๋ ๋๋ง(Rendering)์ ์๋ 2๊ฐ์ง ๊ณผ์ ์ ์ง์นญํ๋ค. HTML / CSS / JS๋ก ์์ฑ๋ ๋ฌธ์๋ฅผ ํด์(ํ์ฑ)ํด์ ๋ธ๋ผ์ฐ์ ์ ์๊ฐ์ ์ผ๋ก ์ถ๋ ฅํ๋ ๊ณผ์ ์๋ฒ์์ ๋ฐ์ดํฐ๋ฅผ HTML๋ก ๋ณํํด์ ๋ธ๋ผ์ฐ์ ์๊ฒ ์ ๋ฌํ๋ ๊ณผ์ (SSR) ๋ฐ๋ฉด ๋ฆฌ์กํธ์์ ๋งํ๋ ๋ ๋๋ง์ ๋ธ๋ผ์ฐ์ DOM ์์ ๋น์ฉ์ ์ค์ด๊ธฐ ์ํด ์ํํ๋ ์์
์..
[TS] TypeScript ํ์
์คํฌ๋ฆฝํธ satisfies ์ฐ์ฐ์
[TS] TypeScript ํ์ ์คํฌ๋ฆฝํธ satisfies ์ฐ์ฐ์
2024.05.16ํ์
์คํฌ๋ฆฝํธ 4.9 ๋ฒ์ ๋ถํฐ ์์ ํ *์
์บ์คํ
์ ์ง์ํ๋ satisfies ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ ์ ์๋ค. satisfies ์ฐ์ฐ์๋ฅผ ํ์ฉํ๋ฉด ํ์
์ ๋ณ๊ฒฝํ์ง ์๊ณ ๋ ๋ณ์์ *์ ์ฝ ์กฐ๊ฑด(constraint)์ ์ ์ฉํ ์ ์๋ค. ์ฆ, ๊ฐ์ฒด ํ๋กํผํฐ์ ์ ์ฝ ์กฐ๊ฑด์ ์ ์ฉํ๋ฉด์ ๊ฐ ํ๋กํผํฐ์ ํ์
์ ์ฌ๋ฐ๋ฅด๊ฒ ์ถ๋ก ํ ์ ์๋ค. ๐ก ์ฉ์ด ์ค๋ช
์บ์คํ
: ํ์
๋ณํ์
์บ์คํ
: ์์ ํด๋์ค๋ฅผ ๋ถ๋ชจ ํด๋์ค ํ์
์ผ๋ก ์บ์คํ
(์์ ํ์
์ผ๋ก ๋ณํ)๋ค์ด์บ์คํ
: ๋ถ๋ชจ ํด๋์ค๋ฅผ ์์ ํด๋์ค ํ์
์ผ๋ก ์บ์คํ
(ํ์ ํ์
์ผ๋ก ๋ณํ)์ ์ฝ ์กฐ๊ฑด : ํน์ ํ์
์ด๋ ๊ตฌ์กฐ๋ฅผ ๊ฐ์ ํ์ฌ ์ฝ๋์ ์์ ์ฑ๊ณผ ์ผ๊ด์ฑ์ ๋ณด์ฅํ๋ ๋ฐฉ๋ฒ ๋ฌธ์ ์๋ ์ฐธ๊ฐ์ ์ ๋ณด๋ฅผ ๋ํ๋ด๋ attendee ๊ฐ์ฒด๊ฐ ์๋ค. ๊ฐ์ฒด๋ฅผ ์ ์ธํ๋ฉด ํ์
์คํฌ๋ฆฝํธ๋ ๊ฐ์ฒด์ ๊ฐ ํ๋กํผํฐ ํ์
์ ์๋..
[React/JS] Promise ํ๋ก๋ฏธ์ค๋ฅผ ํ์ฉํ UX ๊ฐ์ — ํด ๋ฏธ๋ฃจ๊ธฐ
[React/JS] Promise ํ๋ก๋ฏธ์ค๋ฅผ ํ์ฉํ UX ๊ฐ์ — ํด ๋ฏธ๋ฃจ๊ธฐ
2024.05.16๋๊ธฐ ์์
์ ๊ธฐ๋ค๋ฆฌ๋ ํ๋ก๋ฏธ์คํ๋ก๋ฏธ์ค๋ ๋ชจ๋ ๋๊ธฐ ์์
์ ์๋ฃํ ํ์ ์คํํ ์ ์๋ค. ์๋ ์์์์ then ํ์ ์ฒ๋ฆฌ ๋ฉ์๋์ ๋๊ธด console.log๋ ์ ๋ ์คํ๋์ง ์๋๋ค.// ์ฝ๋ ์ฐธ๊ณ via ์ค๋์ ํ๋ก๊ทธ๋๋ฐnew Promise((resolve) => { console.log('1'); // ๋๊ธฐ ์์ญ resolve('2');}).then(console.log); // ๋น๋๊ธฐ ์์ญlet i = 0;while (true) { i += 1;} ํ๋ก๋ฏธ์ค ์์ฑ์์ ๋๊ธด ์ฝ๋ฐฑ ํจ์๋ ๋๊ธฐ์ ์ผ๋ก ์ฒ๋ฆฌํ๋ฏ๋ก ์ฝ์์ 1์ ์ถ๋ ฅํ๋ค. resolve ํจ์๊ฐ ์คํ๋๋ฉด ํ๋ก๋ฏธ์ค๋ ์ดํ(fulfilled) ์ํ๊ฐ ๋๊ณ ๊ฒฐ๊ณผ ๊ฐ๊ณผ ํจ๊ป ์๋ก์ด ํ๋ก๋ฏธ์ค๋ฅผ ๋ฆฌํดํ๋ค. ๊ทธ๋ผ then ํ์ ์ฒ๋ฆฌ ๋ฉ์๋๋ก ์คํ ํด์ด ๋..
[React] ๋ฆฌ์กํธ Profiler ํ๋กํ์ผ๋ฌ์ Hook ์์
[React] ๋ฆฌ์กํธ Profiler ํ๋กํ์ผ๋ฌ์ Hook ์์
2024.05.16๋ฆฌ์กํธ ์ปดํฌ๋ํธ์ ๋ฆฌ๋ ๋๋ง ์์ธ์ ํ์
ํ ๋ ๋ฆฌ์กํธ ๊ฐ๋ฐ์ ๋๊ตฌ์ Profiler(ํ๋กํ์ผ๋ฌ) ํญ์ ํ์ฉํ๋ค. ๋ง์ฝ Profiler ํญ์์ Hook 1 changed๋ฅผ ํ์ํ๋ค๋ฉด, Hook 1์ Components ํญ → ํด๋น ์ปดํฌ๋ํธ์ hooks ํญ๋ชฉ์์ 1๋ฒ์งธ ๋ด์ฅ ํ
์(useState ๋ฑ) ๊ฐ๋ฆฌํจ๋ค. ์ด๋ ์ฃผ์ํ ์ ์ Profiler์์ ํ
์ ์นด์ดํธํ ๋ useContext, ์ปค์คํ
ํ
์ ์๋ตํ๋ค๋ ๊ฒ์ด๋ค. ๋์ ์ปค์คํ
ํ
์ ๋ด๋ถ์ ์๋ ๋ชจ๋ ๋ด์ฅ ํ
(useContext ์ ์ธ)์ ์นด์ดํธ ํ๋ค. ์๋ฅผ ๋ค์ด ๋ด์ฅ ํ
1๊ฐ์ ์ปค์คํ
ํ
์ ์ฌ์ฉํ๋ ์ปดํฌ๋ํธ๊ฐ ์๋ค๊ณ ๊ฐ์ ํด๋ณด์. ์ปค์คํ
ํ
์์์ ๋ด์ฅ ํ
2๊ฐ๋ฅผ ์ฌ์ฉํ๊ณ ์๋ค. ๊ทธ๋ผ ์ด ์ปดํฌ๋ํธ์ ํ
์ธ๋ฑ์ค๋ ์ปดํฌ๋ํธ ๋ด์ฅ ํ
1, ์ปค์คํ
ํ
๋ด์ฅ ํ
2,..
[DevTools] iPhone ์์ดํฐ ์ฌํ๋ฆฌ์์ ๋๋ฒ๊น
/ ์ฝ์ ์ฌ์ฉํ๊ธฐ
[DevTools] iPhone ์์ดํฐ ์ฌํ๋ฆฌ์์ ๋๋ฒ๊น / ์ฝ์ ์ฌ์ฉํ๊ธฐ
2024.05.16Safari ๊ฐ๋ฐ์ ๋๊ตฌ๐ก ์์ดํฐ ํ๋ฉด์ด ์ ๊ฒจ์์ ๋ ์ฝ์์ ์ฌ์ฉํ ์ ์๋ค. โถ ๋งฅ๋ถ โ ์์ดํฐ USB ์ฐ๊ฒฐโท ์์ดํฐ ์ค์ → Safari → ๊ณ ๊ธ → ์ฒดํฌโธ macOS ์ฌํ๋ฆฌ ์ค์ → ๊ณ ๊ธ → ์ฒดํฌโน macOS ์ฌํ๋ฆฌ ์๋จ ๋ฉ๋ด → ๊ฐ๋ฐ์์ฉ → ์์ดํฐ ๊ธฐ๊ธฐ ์ด๋ฆ → ์์ดํฐ ์ฌํ๋ฆฌ์ ์ด๋ ค์๋ ์น์ฌ์ดํธ ์ ํโบ macOS ์ฌํ๋ฆฌ ์ฝ์ ์ฐฝ์์ ํ์ฌ ์ฐ๋์ค์ธ ์น์ฌ์ดํธ์ ์์ฑ ํ์ธ iOS Simulator๐ก Status bar(๋
ธ์น ์์ญ), Nav bar, Tab bar(์ฃผ์์ฐฝ ์์ญ), Home indicator ๊ฐ์ ์์ดํฐ UI๋ฅผ ๊ทธ๋๋ก ํํํ๋ฏ๋ก ์ค๋ฌผ ๊ธฐ๊ธฐ๋ฅผ ์ด์ฉํ ๋ ์ด๋ป๊ฒ ๋ณด์ผ์ง ํ์ธํ ์ ์๋ค. ์ค์ ์ ์๋ฃํ ํ Xcode ์คํ ์์ด ์คํฌํธ๋ผ์ดํธ์์ Simulator๋ฅผ ๊ฒ์ํ ํ ๋ฐ๋ก ์คํํ ์..
[JS/React] input ํ๋์ ์ซ์๋ง ์
๋ ฅ ํ์ฉํ๊ธฐ (ํ๊ธ ์
๋ ฅ ๋ฐฉ์ง)
[JS/React] input ํ๋์ ์ซ์๋ง ์ ๋ ฅ ํ์ฉํ๊ธฐ (ํ๊ธ ์ ๋ ฅ ๋ฐฉ์ง)
2024.05.16text ํ์
์ผ ๋onKeyDown, onKeyPress ์ด๋ฒคํธ๋ ํธ๋ค๋ฌ ์์์ e.preventDefault() ๋ฉ์๋๋ฅผ ํธ์ถํ๋ฉด ์
๋ ฅ์ ๋ง์ ์ ์๋ค. ํ์ง๋ง ํ๊ธ์ ํฌํจํ CJK ๋ฌธ์(์กฐํฉ ๋ฌธ์)๋ ๋ฉ์๋๋ฅผ ํธ์ถํด๋ ๊ทธ๋๋ก ์
๋ ฅ๋๋ค. ์ด ๋ฐฉ๋ฒ์ ์ซ์๋ ์์ด ์
๋ ฅ์ ๋ง์๋๋ง ์ ํจํ๋ค. ์๋ ๋ฐฉ๋ฒ์ผ๋ก ํด๊ฒฐํ ์ ์๋ค.export default function App() { const OnKeyDown = (e) => { e.preventDefault(); }; return ( Only allow numbers in input Text Type );} ๐ก React์์ onKeyDown → onKeyPress → onC..
[JS] Promise ํ๋ก๋ฏธ์ค ๋ณ๋ ฌ์ฒ๋ฆฌ ๋ฉ์๋ ํบ์๋ณด๊ธฐ
[JS] Promise ํ๋ก๋ฏธ์ค ๋ณ๋ ฌ์ฒ๋ฆฌ ๋ฉ์๋ ํบ์๋ณด๊ธฐ
2024.05.14TL;DR๐ก ์ฒ๋ฆฌ(settled) ์ํ๋ ์ดํ(fulfilled) ๋๋ ๊ฑฐ์ (rejected) ์ํ๋ฅผ ๋ชจ๋ ํฌํจํ๋ค. Promise.all : ๋ชจ๋ ํ๋ก๋ฏธ์ค๊ฐ ์ดํ๋์ด์ผ๋ง ์ฒ๋ฆฌ ๊ฒฐ๊ณผ๋ฅผ ๋ฐฐ์ด๋ก ๋ฐํํ๋ค. ํ๋ก๋ฏธ์ค๊ฐ ํ๋๋ผ๋ ๊ฑฐ์ ๋๋ฉด ์ ์ฒด๊ฐ ๊ฑฐ์ ๋๋ค.Promise.allSettled : ๋ชจ๋ ํ๋ก๋ฏธ์ค๊ฐ ์ฒ๋ฆฌ(์ดํ ๋๋ ๊ฑฐ์ )๋ ๋๊น์ง ๊ธฐ๋ค๋ฆฐ ํ ๊ฒฐ๊ณผ๋ฅผ ๋ฐฐ์ด๋ก ๋ฐํํ๋ค.Promise.race : ๊ฐ์ฅ ๋จผ์ ์ฒ๋ฆฌ(์ดํ ํน์ ๊ฑฐ์ ) ์ํ๊ฐ ๋ ํ๋ก๋ฏธ์ค ์ฒ๋ฆฌ๋ฅผ ๋ฐํํ๋ค.Promise.any : ํ๋ก๋ฏธ์ค ์ค ํ๋๋ผ๋ ์ดํ๋๋ฉด ํด๋น ๊ฐ์ ๋ฐํํ๋ค. ๋ชจ๋ ํ๋ก๋ฏธ์ค๊ฐ ๊ฑฐ์ ๋๋ฉด ๊ฑฐ์ ์ด์ ๋ฅผ ๋ด์ AggregateError๋ฅผ ๋ฐํํ๋ค. Promise.all๐ก ํ๋ก๋ฏธ์ค ํ์ ์ฒ๋ฆฌ ๋ฉ์๋๋ฅผ ์ด์ฉํ ์ฒด์ด๋์ ์์ฐจ์ ์ฒ๋ฆฌ, P..
[JS] ํ์
์ด๋ฆ์ ๋ฐํํ๋ getType ์ ํธ ํจ์
[JS] ํ์ ์ด๋ฆ์ ๋ฐํํ๋ getType ์ ํธ ํจ์
2024.05.14value๋ฅผ ์ธ์๋ก ๋ฐ์ ํด๋นํ๋ ํ์
์ด๋ฆ(์๋ฌธ์)์ ๋ฐํํ๋ getType ํจ์. ํ๋ก์ ํธ ๊ณตํต ์ ํธ๋ฆฌํฐ ํ์ผ์ ์ถ๊ฐํด๋๊ณ ์ฌ์ฉํ๋ฉด ์ ์ฉํ๊ฒ ์ธ ์ ์๋ค.const getType = (value: any) => { if (value === undefined) return 'undefined'; if (value === null) return 'null'; return value.constructor.name.toLowerCase();};getType(8); // 'number'getType([8]); // 'array'getType(() => {}); // 'function'getType('8'); // 'string'getType({ id: 8 }); // 'object'getType(new ..
[Next.js] ๋ผ์ฐํธ ๋ณ๊ฒฝ / ์๋ก๊ณ ์นจ ์ทจ์ํ๊ธฐ (๋ค๋น๊ฒ์ด์
๊ฐ๋)
[Next.js] ๋ผ์ฐํธ ๋ณ๊ฒฝ / ์๋ก๊ณ ์นจ ์ทจ์ํ๊ธฐ (๋ค๋น๊ฒ์ด์ ๊ฐ๋)
2024.05.14ํ์๊ฐ์
, ๊ธ์ฐ๊ธฐ ๋ฑ ์
๋ ฅ Form ํ์ด์ง์์ ์ค์๋ก ๋ค๋ฅธ ๋งํฌ๋ฅผ ํด๋ฆญํ๊ฑฐ๋, ์ ์ฅํ๋ ๊ฒ์ ๊น๋นกํ๊ณ ๋ค๋ฅธ ํ์ด์ง๋ก ์ด๋ํ๋ฉด ์ ์ ์
์ฅ์์ ๋ฌด์ฒ ์ง์ฆ๋๋ ์ํฉ์ด ๋๋ค. ์ฒ์๋ถํฐ ํผ์ ๋ค์ ์์ฑํ๊ฑฐ๋ ์์ ํด์ผ ํ๊ธฐ ๋๋ฌธ์ด๋ค. ์์ ์ ์ฅ ๊ธฐ๋ฅ์ด ์๋ค๋ฉด ๊ด์ฐฎ์ง๋ง, ๊ทธ๋ ์ง ์๋ค๋ฉด ํ์ด์ง ์ดํ์ ๋ํ Confirm ๋จ๊ณ๋ฅผ ์ถ๊ฐํด์ ์ฌ์ฉ์ฑ์ ๊ฐ์ ํ ์ ์๋ค. ์ค์ ๋ก ์ฌ๋ฌ ์น ์๋น์ค์์ Form ํ์ด์ง ์ดํ์ ‘์ ์ฅํ์ง ์์ ๋ด์ฉ์ ์ญ์ ๋๋ค’๋ ์๋ด ๋ฌธ๊ตฌ๋ฅผ ๋์ด๋ค. ๊ตฌํ ๋ฐฉ๋ฒNextJS ์์ฒด์ ์ผ๋ก ์ฌ๋ฌ ๋ผ์ฐํธ ์ด๋ฒคํธ๋ฅผ ์ ๊ณตํ๋๋ฐ routeChangeStart๋ ๋ผ์ฐํธ ๋ณ๊ฒฝ์ ์์ํ ๋ ํธ๋ฆฌ๊ฑฐ๋๋ ์ด๋ฒคํธ๋ค. ํ์ด์ง๋ฅผ ์ธ๋ก๋(์๋ก๊ณ ์นจ)ํ ๋ window ๊ฐ์ฒด์์ ๋ฐ์ํ๋ beforeunload ์ด๋ฒคํธ๋ฅผ ์ด์ฉํ๋ฉด ๋๋ค. ..
[JS] API ์์ฒญ / ๋น๋๊ธฐ ์์
์ทจ์ํ๊ธฐ - Abort Controller
[JS] API ์์ฒญ / ๋น๋๊ธฐ ์์ ์ทจ์ํ๊ธฐ - Abort Controller
2024.05.14AbortController๋ 1๊ฐ ์ด์์ API ์์ฒญ์ ์ทจ์ํ ๋ ์ฌ์ฉํ๋ ์ธํฐํ์ด์ค๋ค. ์ฃผ๋ก ์ค๋ณต ์์ฒญ์ด ์์ ๋ ์ด์ ์์ฒญ์ ์ทจ์ํ ๋ ์ฌ์ฉํ๋ฉฐ, ๋น๋๊ธฐ ์์
์ ๋ค๋ฃฐ ๋๋ ํ์ฉํ ์ ์๋ค. Axios 0.22 ๋ฒ์ ๋ถํฐ AbortController๋ฅผ ์ด์ฉํด์ API ์์ฒญ์ ์ทจ์ํ ์ ์๋ค. Cancel ํ ํฐ์ ์ด์ฉํ๋ ๋ฐฉ์์ deprecated ๋๋ค. ๊ธฐ๋ณธ ์ฌ์ฉ ๋ฐฉ๋ฒAbortController๋ ์๋ 3๊ฐ์ง ๋จ๊ณ๋ก ์ฌ์ฉํ๋ค. abortController.abort() ๋ฉ์๋๋ฅผ ํธ์ถํ๋ฉด abort ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ฉฐ fetch ํ๋ก๋ฏธ์ค๋ rejected ์ํ๊ฐ ๋๊ณ ์ ์ด๋ catch ๋ธ๋ญ์ผ๋ก ์ง์
ํ๋ค.AbortController ์ธ์คํด์ค ์์ฑ์ธ์คํด์ค์ signal ํ๋กํผํฐ๋ฅผ fetch์ signal ์ต์
..
[Next.js] Next/Image base64 placeholder ๋ง๋ค๊ธฐ (๋ธ๋ฌ ์ฒ๋ฆฌ๋ ํ๋ ์ด์คํ๋)
[Next.js] Next/Image base64 placeholder ๋ง๋ค๊ธฐ (๋ธ๋ฌ ์ฒ๋ฆฌ๋ ํ๋ ์ด์คํ๋)
2024.05.14Next/Image๋ ํฌ๊ฒ ๋ก์ปฌ ์ด๋ฏธ์ง(์ ์ ์ด๋ฏธ์ง)์ ๋ฆฌ๋ชจํธ ์ด๋ฏธ์ง(๋ค์ด๋๋ฏน ์ด๋ฏธ์ง)๋ก ๋๋๋ค. /public ํด๋์ ์ ์ฅํ ๋ก์ปฌ ์ด๋ฏธ์ง๋ ๋น๋ ํ์์ importํ ์ด๋ฏธ์ง ํ์ผ์ width, height๋ฅผ ์๋์ผ๋ก ์ง์ ํ๊ณ base64๋ก ์ธ์ฝ๋ฉํ ์ด๋ฏธ์ง๊ฐ ์์ฑ๋๋ค. ๋ฐ๋ผ์ ์ถ๊ฐ ์์
์์ด ๋ธ๋ฌ ์ฒ๋ฆฌ๋ Placeholder๋ฅผ ์ฌ์ฉํ ์ ์๋ค.// public ํด๋์ ์๋ me.png ํ์ผ์ ์ฌ์ฉํ๊ณ ์๋ค; ๊ทธ ์ธ ์ํฉ์ ๋ฆฌ๋ชจํธ ์ด๋ฏธ์ง๋ก ๊ตฌ๋ถํ๋ค. ์ด๋ ๋ธ๋ฌ ์ฒ๋ฆฌ๋ Placeholder๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด plaiceholder ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ ์บ๋ฒ์ค API๋ฅผ ์ด์ฉํด์ 4×4 ์ ๋์ ์ฌ์ด์ฆ(๋ณดํต 300๋ฐ์ดํธ ๋ฏธ๋ง)๋ก ์ค์ธ ํ base64๋ก ๋ณํํ๋ ์์
์ด ํ์ํ๋ค. NextJS ๊ณต์ ๋ฌธ์์์ 10 ..
[DevTools] Tailwind CSS ์ ํธ๋ฆฌํฐ ํด๋์ค ์๋ ์ ๋ ฌ ํ๋ฌ๊ทธ์ธ
[DevTools] Tailwind CSS ์ ํธ๋ฆฌํฐ ํด๋์ค ์๋ ์ ๋ ฌ ํ๋ฌ๊ทธ์ธ
2024.05.13prettier-plugin-tailwindcss ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํ๋ฉด TailwindCSS์ ์ ํธ๋ฆฌํฐ ํด๋์ค ์ ๋ ฌ ๊ท์น์ ๋ฐ๋ผ ํด๋์ค๋ฅผ ์๋ ์ ๋ ฌํด์ค๋ค. ์ด์ ๊น์ง Tailwind Formatter ๊ฐ์ IDE ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํด์ ์ ๋ ฌ์ด ํ์ํ ๋๋ง๋ค ๋ถ๊ฐ๊ธฐ๋ฅ์ ์คํ(โ โง H)ํ๋๋ฐ ๊ทธ๋ด ํ์๊ฐ ์์ด์ก๋ค. prettier-plugin-tailwindcss ํ๋ฌ๊ทธ์ธ์ ์ค์นํ๊ณ ํ์ผ ์ ์ฅ์ ์๋ ํฌ๋งคํ
๋๋๋ก IDE๋ฅผ ์ค์ ํ๋ฉด, ์ ํธ๋ฆฌํฐ ํด๋์ค๋ ํจ๊ป ์ ๋ ฌ๋ผ์ ํธํ๋ค. ์ฐธ๊ณ ๋ก ํด๋์ค ์๋ ์ ๋ ฌ ์ธ์๋ ์๋ชป ์
๋ ฅํ ํด๋์ค ์ค๋ฅ ํ์, ์ถ์ฝ(shorthand) ์ฌ์ฉ ๊ฐ์ , ์์(arbitrary) ๊ฐ ์ฌ์ฉ ๊ธ์ง ๊ฐ์ ๊ท์น์ด ์ ์ฉ๋ eslint-plugin-tailwindcss ESLint ํ๋ฌ๊ทธ์ธ๋ ์๋ค. ์ค์ ..