Material UI Tutorial #1 - Intro & Setup

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 ํฐํŠธ๋ฅผ ๋‹ค์šด๋กœ๋“œํ•˜๊ฑฐ๋‚˜ ์ œ๊ณต๋œ ๋งํฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
Video description

Hey gang & welcome to this Material UI tutorial for React. In this series we'll be looking at what Material UI is & how to use it to create greate-looking React applications. To begin with we'll set up our starter project. ๐Ÿฑโ€๐Ÿ’ป ๐Ÿฑโ€๐Ÿ’ป Course Files: + https://github.com/iamshaunjp/material-ui-tut ๐Ÿฑโ€๐Ÿ‘ค๐Ÿฑโ€๐Ÿ‘ค JOIN THE GANG - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/join ๐Ÿฑโ€๐Ÿ’ป ๐Ÿฑโ€๐Ÿ’ป My Udemy Courses: + Modern JavaScript - https://www.thenetninja.co.uk/udemy/modern-javascript + Vue JS 3 & Firebase - https://www.thenetninja.co.uk/udemy/vue-and-firebase + D3.js & Firebase - https://www.thenetninja.co.uk/udemy/d3-and-firebase ๐Ÿฑโ€๐Ÿ’ป ๐Ÿฑโ€๐Ÿ’ป Useful playlists: + Full React tutorial - https://www.youtube.com/watch?v=j942wKiXFu8&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d + JSON Server Tutorial - https://www.youtube.com/watch?v=mAqYJF-yxO8&list=PL4cUxeGkcC9i2v2ZqJgydXIcRq_ZizIdD ๐Ÿฑโ€๐Ÿ’ป ๐Ÿฑโ€๐Ÿ’ป Other links: + Material UI docs - https://material-ui.com/getting-started/installation/ + Get VS Code - https://code.visualstudio.com/ ๐Ÿฑโ€๐Ÿ’ป ๐Ÿฑโ€๐Ÿ’ป Social Links: Facebook - https://www.facebook.com/thenetninjauk Twitter - https://twitter.com/thenetninjauk Instagram - https://www.instagram.com/thenetninja/