Add Get Customers REST API Module

@@ -31,5 +31,6 @@
       "last 1 firefox version",
       "last 1 firefox version",
       "last 1 safari version"
       "last 1 safari version"
     ]
     ]
-  }
+  },
+  "proxy": "http://localhost:5000/"
 }
 }

@@ -20,35 +20,25 @@ const styles = theme => ({
   }
   }
 })
 })
 
 
-const customers =[
-  {
-  'id': 1,
-  'image': 'https://placeimg.com/64/64/any',
-  'name': '이혜연',
-  'birthday': '000416',
-  'gender': '여자',
-  'job': '대학생'
-},
-{
-  'id': 2,
-  'image': 'https://placeimg.com/64/64/2',
-  'name': '김다은',
-  'birthday': '000101',
-  'gender': '여자',
-  'job': '재수생'
-},
-{
-  'id': 3,
-  'image': 'https://placeimg.com/64/64/3',
-  'name': '김석희',
-  'birthday': '900103',
-  'gender': '남자',
-  'job': '회사원'
-},
+class App extends Component {
+  state = {
+    customers: ""
+  }
+
+  //모든 컴포넌트 준비 완료일 때 실행 -- react가 라이브러리이기 때문 !
+  componentDidMount() {
+    this.callApi()
+      .then(res => this.setState({customers: res}))
+      .catch(err => console.log(err));
+  }
 
 
-]
+  callApi = async() => {
+    //local의/api/customers에 접속해 response로 받아오고 이를 body변수에 담아주겠다
+    const response = await fetch('/api/customers');
+    const body = await response.json();
+    return body;
+  }
 
 
-class App extends Component {
   render() {
   render() {
     const { classes } = this.props;
     const { classes } = this.props;
     return (
     return (
@@ -66,7 +56,9 @@ class App extends Component {
           </TableHead>
           </TableHead>
 
 
           <TableBody>
           <TableBody>
-        {customers.map(c=> { return (<Customer key={c.id} id={c.id} image={c.image} name={c.name} birthday={c.birthday} gender={c.gender} job={c.job} />)})}
+            {this.state.customers ? this.state.customers.map (c=> {
+              return (<Customer key={c.id} id={c.id} image={c.image} name={c.name} birthday={c.birthday} gender={c.gender} job={c.job} />)
+            }) : ""}
           </TableBody>
           </TableBody>
         </Table>
         </Table>
       </Paper>
       </Paper>

+{
+    "name" : "management",
+    "version": "1.0.0",
+    "scripts":{
+        "client": "cd client && yarn start",
+        "server": "node server.js",
+        "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
+    },
+    "dependencies": {
+        "body-parser": "^1.18.3",
+        "express": "^4.16.4"
+    },
+    "devDependencies": {
+        "concurrently":"^"
+    }
+}

@@ -6,9 +6,35 @@ const port = process.env.PORT || 5000;
 app.use(bodyParser.json());
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ exrended : true }));
 app.use(bodyParser.urlencoded({ exrended : true }));
 
 
-//api의 hello라는 경로로 들어갔을때의 처리
-app.get('/api/hello', (req,res)=>{
-    res.send({message: 'Hello Express!'});
+app.get('/api/customers', (req, res) => {
+    res.send([
+        {
+        'id': 1,
+        'image': 'https://placeimg.com/64/64/any',
+        'name': '이혜연',
+        'birthday': '000416',
+        'gender': '여자',
+        'job': '대학생'
+      },
+      {
+        'id': 2,
+        'image': 'https://placeimg.com/64/64/2',
+        'name': '김다은',
+        'birthday': '000101',
+        'gender': '여자',
+        'job': '재수생'
+      },
+      {
+        'id': 3,
+        'image': 'https://placeimg.com/64/64/3',
+        'name': '김석희',
+        'birthday': '900103',
+        'gender': '남자',
+        'job': '회사원'
+      }
+      
+      ])
+
 })
 })
 
 
 app.listen(port, () => console.log(`Listening on port ${port}`));
 app.listen(port, () => console.log(`Listening on port ${port}`));
\ No newline at end of file