Mi Lugarcito

icons 라이브러리 설치부터 먼저 해주기 ** 주의 ** client 폴더에 설치해야한다!! cd client // client 폴더로 이동 npm install --save @material-ui/icons //client 폴더에 설치하기 cd .. // 하위폴더로 빠져나오기 yarn dev //실행하기 material-ui.com/components/app-bar/ App Bar React component - Material-UI The App Bar displays information and actions relating to the current screen. material-ui.com import AppBar from '@material-ui/core/AppBar'; import Tool..

CustomerAdd.js //고객추가 양식 만들기 //서버와의 통신 목적의 라이브러리 설치하기 import React from 'react'; import {post} from 'axios'; //dialog 모달 팝업창 import Dialog from '@material-ui/core/Dialog'; import DialogActions from '@material-ui/core/DialogActions'; import DialogTitle from '@material-ui/core/DialogTitle'; import DialogContent from '@material-ui/core/DialogContent'; import TextField from '@material-ui/core/TextFi..

USE management; ALTER TABLE CUSTOMER ADD createdDate DATETIME; ALTER TABLE CUSTOMER ADD isDeleted INT; UPDATE CUSTOMER SET createdDate =NOW(); UPDATE CUSTOMER SET isDeleted =0; 컬럼 2개 더 추가하기 고객데이터 삭제 기능 추가하기 CustomerDelete.js import React from 'react'; class CustomerDelete extends React.Component{ //삭제 기능 api 함수 만들어주기 deleteCustomer(id){ // 예시 : /api/customers/7 const url='/api/customers/' + id; ..

#전체페이지 새로고침 하는것이 아니라, 필요한 부분만 새로고침 할 수 있도록 하기 #부모 -> 자식 컴포넌트로 함수를 props형태로 건내주는 방식으로 구현한다. app.js import logo from './logo.svg'; import './App.css'; import { Component } from 'react'; import Customer from './components/Customer'; //고객추가양식 import CustomerAdd from './components/CustomerAdd'; import Paper from '@material-ui/core/Paper'; import Table from '@material-ui/core/Table'; import TableHead ..

이미지파일처리를 위해서 라이브러리 추가 해야함 npm install --save multer Customer.js import React from 'react'; import TableRow from '@material-ui/core/TableRow'; import TableCell from '@material-ui/core/TableCell'; class Customer extends React.Component{ // 한명의 고객에 대한 정보를 출력하는 역할 render(){ return( {this.props.id} {this.props.name} {this.props.birthday} {this.props.gender} {this.props.job} ) } } export default Custo..

서버와의 통신 목적의 라이브러리 설치하기 cd client npm install --save axios CustomerAdd.js //고객추가 양식 만들기 //서버와의 통신 목적의 라이브러리 설치하기 import React from 'react'; import {post} from 'axios'; class CustomerAdd extends React.Component{ constructor(props){ super(props); //모든 변수 초기화해주기 this.state={ file:null, userName:'', birthday:'', gender:'', job:'', fileName:'' } } //함수 만들어야한다. 총 3가지 handleFormSubmit = (e) =>{ e.preven..

CUSTOMER 테이블 먼저 생성하기 USE management; CREATE TABLE CUSTOMER( id INT PRIMARY KEY AUTO_INCREMENT, image VARCHAR(1024), name VARCHAR(64), birthday VARCHAR(64), gender VARCHAR(64), job VARCHAR(64) )DEFAULT CHARACTER SET UTF8 COLLATE utf8_general_ci; insert into CUSTOMER values(1,'https://placeimg.com/64/64/1', '홍길동','112233','남자','학생1'); insert into CUSTOMER values(2,'https://placeimg.com/64/64/2', '..

고객목록을 불러오는 api 를 요청했을때 서버에서 응답을 늦게하는 경우 로딩메시지를 화면에 띄우기 material-ui.com/components/progress/ Circular, Linear progress React components - Material-UI Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process. The animation works with CSS, not JavaScript. material-ui.com app.js import logo from './logo.svg'; import './App.css'; import { Com..

npm install express-session --save 설치해주고 다시 node server.js 실행하면 잘 돌아간다!! 서버 중지 원하면 맥북에서 command + C 가 아닌 ctrl + C 눌러주기@@

vscode terminal 에서 yarn dev// 명령어 입력후 클라이언트 창과 서버창 동시에 실행이 되는지 확인하기 yarn dev 명령실행하니 localhost:3000이 자동 실행되었다. (client & server 동시 동작한다@@) **express 에서 REST API 직접 구현하는 예제 (고객 목록을 알려주는 하나의 rest api 개발예정) 먼저, 기존의 서버 모듈에 전체 고객 목록을 불러오는 api 를 구현 먼저 해야한다. server.js (res,send() 가 아니라 res.send() 이다@@@@) const express =require('express'); const bodyParser = require('body-parser'); const app =express(); ..