REACT
-
React - Nodejs 연결React & Node.js 2020. 4. 29. 16:31
이전까지 개발한 프론트엔드와 서로 데이터를 주고 받을수 있는 API역할을 수행하는 Node.JS 구축 후 React와 연결한다. Client 설정 client > App.js 이전까지 개발한 프론트엔드와 서로 데이터를 주고 받을수 있는 API역할을 수행하는 Node.JS를 구축한다. import React, { Component } from 'react'; import './App.css'; import Customer from './components/Customer.js'; import Table from '@material-ui/core/Table'; import Paper from '@material-ui/core/Paper'; import TableHead from '@material-ui/co..
-
[React] 웹사이트 꾸미기: Material UIReact & Node.js 2020. 4. 29. 11:35
Material UI를 적용해 보고 자신만의 스타일을 'withStyles'를 이용해서 적용해 보자 (Material UI 참고 사이트: https://material-ui.com/demos/tables) Material UI 설치: npm install @material-ui/core --- src > App.js import React, { Component } from 'react'; import './App.css'; import Customer from './components/Customer.js'; import Table from '@material-ui/core/Table'; import Paper from '@material-ui/core/Paper'; import TableHead fr..
-
[React] 고객 컴포넌트를 분리하여 다수의 고객 정보 보여주기React & Node.js 2020. 4. 29. 11:05
폴더 구조 src > App.js src > components > Customer.js --------------- src > App.js import React, { Component } from 'react'; import './App.css'; import Customer from './components/Customer.js'; const customers = [ { 'id': 1, 'image': 'https://placeimg.com/64/64/1', 'name': '홍길동', 'birthday': '12345', 'gender': '남자', 'job': '대학생' }, { 'id': 2, 'image': 'https://placeimg.com/64/64/2', 'name': '이순진', '..