๋ฐ˜์‘ํ˜•

mui study 2

[React] Material-UI (mui) theme.spacing(1) ๋‹จ์œ„ ์˜๋ฏธ + ํ”ฝ์…€

Intro ์•ˆ๋…•ํ•˜์„ธ์š”. ์ด๋ฒˆ์— MUI ๊ธฐ๋ฐ˜ ํšŒ์‚ฌ ํ™ˆํŽ˜์ด์ง€ ๊ฐœ๋ฐœ ์—…๋ฌด๋ฅผ ์ง€์›ํ•˜์—ฌ ๋งก๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. mui ๋ฅผ ์‚ฌ์šฉํ•˜๋‹ค๋ณด๋ฉด ์•„๋ž˜์™€ ๊ฐ™์€ ์†Œ์Šค์ฝ”๋“œ๋ฅผ ๋งŽ์ด ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. theme.spacing(1) ์ฒ˜์Œ์—๋Š” 2px์ธ๊ฐ€ ์‹ถ์—ˆ๋Š”๋ฐ, 2px์ด ์•„๋‹ˆ๋”๋ผ๊ณ ์š”. theme.spacing(2) ์˜๋ฏธ Material-UI (mui) ์—์„œ 1์€ theme.spacing(1)๊ณผ ๊ฐ™์€ ์˜๋ฏธ๋ฅผ ๊ฐ–์Šต๋‹ˆ๋‹ค. ๋ณดํ†ต theme.spacing()์€ ํ…Œ๋งˆ ์„ค์ •์— ๋”ฐ๋ผ ๋‹ค๋ฅด์ง€๋งŒ, ๊ธฐ๋ณธ์ ์œผ๋กœ 8px์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. 1์€ ๊ธฐ๋ณธ์ ์œผ๋กœ 8px์„ ๋‚˜ํƒ€๋‚ด๋ฉฐ, 2๋Š” 16px, 3์€ 24px, ... ์™€ ๊ฐ™์ด 8px ๊ฐ„๊ฒฉ์œผ๋กœ ์ฆ๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด ํ”ฝ์…€ ์ปค์Šคํ…€์ด ๋ถˆ๊ฐ€๋Šฅํ•œ๊ฐ€? ์ปค์Šคํ…€๋„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. createTheme() ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค...

Framework/React 2023.05.08

[Next.js] Next์˜ Link์™€ MUI(Material-UI)์˜ Link ์ฐจ์ด

Intro ์•ˆ๋…•ํ•˜์„ธ์š”. ์ด๋ฒˆ์‹œ๊ฐ„์—๋Š” Next์˜ Link์™€ MUI(Material-UI)์˜ Link ์ฐจ์ด์ ์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. Next์˜ Link์™€ MUI(Material-UI)์˜ Link Next.js + React + MUI ์กฐํ•ฉ์œผ๋กœ ๊ฐœ๋ฐœ๊ฒฝํ—˜์ด ์žˆ์œผ์‹  ๋ถ„๋“ค์ด ๊ฝค ์žˆ์œผ์‹ค ํ…๋ฐ์š”, ๊ฐœ๋ฐœํ•˜๋‹ค๋ณด๋ฉด Link ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฑฐ์˜ ํ•„์ˆ˜๋กœ ์‚ฌ์šฉํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. Next.js์™€ MUI ์—๋Š” ๊ณตํ†ต์œผ๋กœ Link ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋“ค์–ด์žˆ์Šต๋‹ˆ๋‹ค. ๋ณดํ†ต ์ž๋™ IDE ํˆด์„ ์‚ฌ์šฉํ•˜๋ฉด ์ž๋™์œผ๋กœ import ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์€๋ฐ์š”, ๊ผญ ํ™•์ธํ•˜๊ณ  import๋ฅผ ํ•˜์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค. Next.js์˜ Link์™€ MUI(Material-UI)์˜ Link๋Š” ๋ชฉ์ ์ด ๋‹ค๋ฅธ ์š”์†Œ์ด๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. Why? Next.js์˜ Link ์ปดํฌ๋„ŒํŠธ Next.js์˜ Link ๋Š”..

Framework/Next.js 2023.05.03
๋ฐ˜์‘ํ˜•