Material UI Tutorial #1 - Intro & Setup
์ฒซ ๋ฒ์งธ Material UI ํํ ๋ฆฌ์ผ
์ฑ๋ ์ง์ ๋ฐ ๊ฐ์ ๋ฐฉ๋ฒ
- ํํ ๋ฆฌ์ผ ์์ ์ ์, ์ฑ๋์ ์ง์ํ๊ณ ๊ณต์์ ์ผ๋ก ๊ฐ์ ํ๋ ๋ฐฉ๋ฒ ์ค๋ช .
- ์ 99์ผํธ๋ก ๊ฐ์ ํ๋ฉด ๋๊ธ์ ์ถฉ์ฑ๋ ๋ฐฐ์ง๋ฅผ ๋ถ์ฌ๋ฐ์.
Material UI๋ ๋ฌด์์ธ๊ฐ?
- Material UI๋ React๋ฅผ ์ํ UI ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก, ๋ฒํผ, ๋ด๋น๊ฒ์ด์ ๋ฐ, ํผ ์์ ๋ฑ ๋ค์ํ ์ฌ์ฉํ๊ธฐ ์ฌ์ด ์ปดํฌ๋ํธ๋ฅผ ์ ๊ณตํจ.
- Google์ ๋์์ธ ์ฒ ํ์ธ Material Design์ ๋ฐ๋ฅด๋ฉฐ, ์น์ฌ์ดํธ์ ์ฑ ์ฌ์ฉ์์๊ฒ ์ผ๊ด๋๊ณ ์พ์ ํ ๊ฒฝํ์ ์ ๊ณตํจ.
ํ๋ก์ ํธ ๊ฐ์
- ์ด ํํ ๋ฆฌ์ผ์์ ๊ตฌ์ถํ ๋ฏธ๋ ํ๋ก์ ํธ ์๊ฐ.
- ์นด๋, ์ฑ ๋ฐ, ์๋ฐํ, ์์ด์ฝ ๋ฑ ๋ค์ํ Material UI ์ปดํฌ๋ํธ๋ฅผ ๊ตฌํํ ์์ ์.
์ฝ๋ ๊ตฌ์กฐ ๋ฐ ์ค์
- Material UI ์ฌ์ฉ ์ ๋ฏธ๋ฆฌ ๋ง๋ค์ด์ง ์ปดํฌ๋ํธ๋ฅผ ํ์ฉํ์ฌ ๊ฐ๋ฐ ๊ฐ๋ฅํ๋ฉฐ, props๋ฅผ ํตํด ์ปค์คํฐ๋ง์ด์ง ๊ฐ๋ฅํจ.
- GitHub์ ์ ๋ก๋๋ ์คํํฐ ํ๋ก์ ํธ๋ฅผ ๋ค์ด๋ก๋ํ์ฌ ์ฌ์ฉํ ์ ์์.
ํ๋ก์ ํธ ์ด๊ธฐํ ๋ฐ ์์กด์ฑ ์ค์น
- VS Code์์ ์คํํฐ ํ๋ก์ ํธ ์ด๊ธฐ ๋ฐ ๊ธฐ๋ณธ์ ์ธ ํ์ผ ๊ตฌ์กฐ ์ค๋ช .
- ํฐ๋ฏธ๋์์ npm install ๋ช ๋ น์ด๋ก ์์กด์ฑ์ ์ค์นํด์ผ ํจ.
๋ธ๋ผ์ฐ์ ์์ ์คํํ๊ธฐ
- npm start ๋ช ๋ น์ด๋ก ๋ก์ปฌ ๊ฐ๋ฐ ์๋ฒ๋ฅผ ์คํํ์ฌ ๊ฒฐ๊ณผ ํ์ธ ๊ฐ๋ฅํจ.
Material UI ์ค์น ๋ฐฉ๋ฒ
Material UI ์ค์น ๋ฐ Roboto ํฐํธ ์ถ๊ฐ
Material UI ์ค์น ๊ณผ์
- ํ๋ก์ ํธ์์ ์๋ก์ด ํฐ๋ฏธ๋์ ์ด๊ณ , ๋ณต์ฌํ ๋ช ๋ น์ด๋ฅผ ๋ถ์ฌ๋ฃ๊ธฐ ํ ํ ์ํฐ๋ฅผ ๋๋ฌ Material UI๋ฅผ ์ค์นํฉ๋๋ค.
- Material UI๋ ๊ธฐ๋ณธ์ ์ผ๋ก Roboto ํฐํธ๋ฅผ ์ฌ์ฉํ์ง๋ง, ์ด ํฐํธ๋ ํต์ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํฌํจ๋์ด ์์ง ์์ผ๋ฏ๋ก ๋ณ๋๋ก ์ค์นํด์ผ ํฉ๋๋ค.
Roboto ํฐํธ ์ถ๊ฐ ๋ฐฉ๋ฒ
- Google Fonts ์น์ฌ์ดํธ์์ Roboto ํฐํธ๋ฅผ ๋ค์ด๋ก๋ํ๊ฑฐ๋ ์ ๊ณต๋ ๋งํฌ๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค.