Getting Started With Material-UI For React (Material Design For React)
This post has been published first on CodingTheSmartWay.com.
medium.com
$ npx create-react-app react-material-ui
- reate-material-ui 이름의 react 앱을 생성
$ cd react-material-ui
$ npm install @material-ui/core
$ npm install contentful
- material-ui 및 javascript 관련 기능 설치
-> 여기까지 진행하면 준비는 끝남
$ npm start
- react 로고가 돌아가는 웹 페이지가 열리면 정상적으로 동작된거임
src/App.js : starting point
1. function App() 내 return 구문 내에 있는 내용을 싹 다 날리고 <div> </div> 내용만 삽입
2. import logo 관련 내용 삭제
3. logo 관련 파일 (logo.svg) 삭제
-> 여기까지 진행하고 저장하면 열려있던 웹페이지가 비워져있음. 여기서 자신의 코드를 넣으면 됨
-> 이후에는 Content 폴더 하나 만들고, 안에다가 NavBar, Card 등등 js 코드 추가해서 이것저것 했는데 사실 하나하나 보면서 이해할 필요가 있음
-> js 문법도 아직 잘 모르고, Material의 기능이 뭔지도 살펴보기 위해서 관련 매뉴얼을 숙지할 필요가 있다.
-> Contentful? 이거를 Back-end라고 표현한거 같다. 실제 사용자가 서버를 구축하지 않고도 웹 상에서 제공해주는 Back-end 서비스로 보인다. 나중에 한번 확인해볼것.. 나중에 직접 서버를 구축하면 해당 서비스를 이용하지 않을 수 있을 것으로 보인다. API도 만들고 그래야겠지..
관련 github: github.com/syoh1113/course-list-viewer-with-material-react
'웹 공부' 카테고리의 다른 글
| mariaDB 이슈 정리 (0) | 2021.03.22 |
|---|---|
| F12 개발자 모드 사용을 사용한 웹페이지 분석 시작 (0) | 2021.03.12 |