[동빈나] React로 고객 관리 시스템 만들기 - 01

사진의 dev에 적힌 내용에 따라 cd customer_management 폴더에서 yarn dev를 실행시키면 두가지 다 실행이 된다.

[노드 js 서버 코드]

sudo npm -g install nodemon
sudo npm install -g concurrently
yarn dev

====================================================================직접 구현한 api 서버로부터 고객 데이터 받아와서 화면에 출력해보기

고객 목록을 알려주는 Rest API 개발하기

상당수의 웹서버 프레임워크에서 기본적으로 지원하는 기능으로서 서버와 클라이언트가 웹 프로토콜을 기반으로 하여 효과적으로 데이터를 주고받을 수 있도록 해준다.

jsonlint : 올바른 json 형식인지 확인해준다
https://jsonlint.com/

====================================================================

props는 변경될 여지가 없는것, state는 변경될 여지가 있는 것
하드 코딩 했던 부분 api로 바꿔주기

[state 추가했으니 사용부분에 this.state 추가해주기]

==================================================================== 리액트 라이프 사이클 이해하고 api 로딩처리 출력해보기

api 를 요청했을 때 서버에서 응답을 늦게 해줄 경우 로딩메시지 띄우는 법

import CircularProgress from '@material-ui/core/CircularProgress';

const styles = theme => ({
  progress: {
    margin: theme.spacing(2)
  }
})

class App extends Component {
  state = {
    customers: "",
    completed: 0,
  }
  
  progress = () => {
    const { completed } = this.state;
    this.setState({ completed: completed >= 100 ? 0 : completed + 10 });
  }
  
  render() {
    <TableRow>
      <TableCell colSpan="6" align="center">
        <CircularProgress className={classes.progress} value={this.state.completed} />
      </TableCell>
    </TableRow>
  }
}

export default withStyles(styles)(App);