커리까지

handleFormSubmit = (e) => { e.preventDefault() this.addCustomer() .then((response) => { console.log(response.data); this.props.stateRefresh(); }) this.setState({ file: null, userName: '', birthday: '', gender: '', job: '', fileName: '', open: false }) } CosromerAdd.js를 수정해줌 npm install --save multer 사용자 이미지도 업로드해야하기 때문에 새로운 패키지 설치 const multer = require(&#..

npm install --save axios 서버와 통신하는 axios 설치하기 class CustomerAdd extends React.Component { constructor(props) { super(props); this.state = { file: null, userName: '', birthday: '', gender: '', job: '', fileName: '', open: false } } } this.state 으로 초기화하기 render() { return ( 고객 추가 프로필 이미지 : 이름 : 생년월일 : 성별 : 직업 : 추가하기 ) } } export default CustomerAdd; 고객 정보를 fo..

npm i concurrently express --save 설치 그러니 yarn dev으로 해도 잘 구동되었다. 강의 프로젝트 중간에 자꾸 오류가 발생해서 답답했는데 이제 제대로 할 수 있다. 그래서 프로젝트도 삭제하고 처음부터 다시 만들었다.

테이블 생성 CREATE TABLE CUSTOMER ( id INT PRIMARY KEY AUTO_INCREMENT; image VARCHAR(1024), name VARCHAR(64), birthady VARCHAR(64), gender VARCHAR(64), job VARCHAR(64) ) DEFAULT CHARACTER SET UTF8 COLLATE UTF8_GENERAL_CI; /* SQL 오류 (1064): You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 2 */ 오류가 발..

cost export service 내가 쓴 비용 탐색해서 비용을 계산하자 RDS 여기서 인스턴스는 컴퓨터 한 대라고 생각해도 된다. mysql 5.6.x 버전과 프리티어 버전, 그리고 가장 저렴한 버전들을 사용 4 :16 utf-8로 설정하기 파라미터 그룹으로 가서 하나 만들고 편집에서 char과 collation을 검색하여 utf-8이 적용 가능한 것들은 다 바꿔준다. HeidiSQL 데이터 베이스가 재부팅중일 때 접속 가능하게 해줌 보안그룹에 가서 0.0.0.0/0을 추가해서 모든 접속 허용가능하게 한다.

리액트 라이브러리가 처음 컴포넌트를 실행하는 순서 constructor()를 불러온다. componentWillMount() 컴포넌트를 마운트 하기 전에 이 함수를 불러온다. render() 실제로 컴포넌트를 화면에 그린다. componentDidMount() 그 다음에 이 함수가 불러와진다. props or state -> shouldComponentUpdate() 값이 변경되었을 경우 이 함수를 불러온다. import CircularProgress from '@material-ui/core/CircularProgress'; const styles = theme => ({ root:{ width:'100%', marginTop:theme.spacing.unit * 3, ov..

yarn dev 서버와 클라이언트가 설치된다. 윈도우가 한글이름이면 오류가 발생할 수 있다. yarn의 환경변수를 등록해줘도 오류를 해결할 수 있다. 데이터를 클라이언트가 가지고 있는게 아니라 필요할 때마다 불러와서 써야한다. 제이슨 형태로 보낸다. 5000 포트가 열리지 않을 때 yarn add http-proxy-middleware cilent > src에 setupProxy.js를 생성하고 아래의 내용을 넣어준다. const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api', createProxyMiddleware({ tar..

npm install -g nodemon 으로 서버 환경 만들기 Cannot find module 'express' npm install express 위 구문으로 해결 그러면 Listening on port 5000 가 뜨면서 실행된다.

5강 - 고객 컴포넌트 구조화하기 map함수를 이용하면 for문처럼 여러개의 데이터를 출력할 수 있다. 6강 - Material UI를 적용하여 고객 테이블 디자인하기 import Paper from '@material-ui/core/Paper'; import Table from '@material-ui/core/Table'; import TableHead from '@material-ui/core/TableHead'; import TableBody from '@material-ui/core/TableBody'; import TableRow from '@material-ui/core/TableRow'; import TableCell ..

리액트의 기본 구조 import React from 'react'; class Customer extends React.Component { render() { return( ) } } export default Customer; import로 패키지를 불러오고 export로 class를 내보낸다. import './App.css'; import Customer from './components/Customer' import React from 'react'; class App extends React.Component { render() { return ( ); } } export default App; 그러면 App.js에서 실제로 페이지에 그려지게 되니깐 여기서 만들었던 Customer을 불러서 넣..