22-07-12(화) 114일차 [React, Android, Team Project] React의 FetchGet, FetchPost, AxiosGet, AxiosPost, Promise, 안드로이드 Hello Android!

수업내용

---

1교시 (09:30-10:20)

• 059/App.js

import React from 'react';
import FetchGet from './R059_FetchGet';
import './App.css';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <FetchGet/>
    </div>
  );
}

export default App;

• R059_FetchGet.js

import React, { Component } from 'react';

class R059_FetchGet extends Component {
	componentDidMouunt = async () => {
		const response = await fetch('http://date.jsontest.com/');
		const body = await response.json();
		alert(body.date)
	}

	render() {
		return (
			<h1>fetch get</h1>
		)
	}
}

export default R059_FetchGet;

• 060/App.js

import React from 'react';
import './App.css';
import R060_FetchPost from './R060_FetchPost'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <R060_FetchPost/>
    </div>
  );
}

export default App;

• R060_FetchPost.js

import React, { Component } from 'react';

class R060_FetchPost extends Component {
	componentDidMount = async () => {
		const response = await fetch('http://date.jsontest.com', {
			mothod: 'POST',
			headers: {
				'Content-Type': 'application/json',
			},
			body: { a:"react", b:200 },
		});
		const body = await response.json();
		alert(body.date)
	}

	render() {
		return (
			<h1>fetch post</h1>
		)
	}
}

export default R060_FetchPost;

2교시 (10:30-11:20)

	before 2010	after 2010
Tread	Single Thread	Multi Thread
파일 전송	Single file	분산 파일
동기/비동기	Sync 동기	Async 비동기

※ Axios는 request와 response가 한번에 일어난다.

3교시 (11:30-12:20)

• 061/App.js

import React from 'react';
import AxiosGet from './R061_AxiosGet'
import './App.css'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <AxiosGet/>
    </div>
  );
}

export default App;

• R061_AxiosGet.js

import React, { Component } from 'react';
import axios from "axios";

class R061_AxiosGet extends Component {
	componentDidMoount() {
		axios.get('http://date.jsontest.com/')
		.then(response => {alert(response.date.date)})
	}

	render() {
	 	return (
	 		<h1>axios get</h1>
	 	)
	}
}

export default R061_AxiosGet;

• 062/App.js

import React from 'react';
import R062_AxiosPost from './R062_AxiosPost'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <R062_AxiosPost/>
    </div>
  );
}

export default App;

• R062_AxiosPost.js

import React, { Component } from 'react';
import axios from "axios";
import './App.css';

class R062_AxiosPost extends Component {
	componentDidMount() {
		axios.post('http://date.jsontest.com/', {
			a: "react", b: 200
		})
		.then( response => { alert(response.date.date)})
	}

	render() {
		return (
			<h1>axios post</h1>
		)
	}
}

export default R062_AxiosPost;

• 064/App.js

import React from 'react';
import Promise from './R064_Promise'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <Promise/>
    </div>
  );
}

export default App;

• R064_Promise.js

import React, { Component } from 'react';
import './App.css';

class R064_Promise extends Component {
	componentDidMount() {
	  new Promise(resolve => {
	  	setTimeout(function() {
	  		resolve('react');
	  	}, 1500);
	  })
	  .then(function(result) {
	    console.log(result);
	    return result + 200;
	  })
	  .then(result => {
	    console.log(result);
	  })
	}

	render() {
	  return (
	  	<h1>Promise</h1>
	  )
	}
}

export default R064_Promise;

• 065/App.js

import React from 'react';
import Promise from './R065_Promise'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <Promise/>
    </div>
  );
}

export default App;

• R065_Promise.js

import React, { Component } from 'react';
import './App.css';

class R065_Promise extends Component {
	componentDidMount() {
	  new Promise((resolve, reject) => {
	    reject(Error("ERROR Info"));
	  })
	  .then(result => console.log("then : "+result))
	  .catch(result => console.log("catch : "+result))
	}

	render() {
	  return(
	    <h1>Promise</h1>
	  )
	}
}

export default R065_Promise;

4교시 (12:30-13:20)

• 안드로이드
  More Actions > Virtual Device Manager > Create Device > Pixel 2 선택 > System Image S 선택

---

5교시 (14:30-15:20)

• 안드로이드
  New Project > Phone and Tablet - Empty Activity > Name: Hello World, Packagename: a.b.c.HelloAndroid, Save Location: 설정, Language: Java, Minimum SDK: API 21: Android 5.0 (Lollipop)

6교시 (15:30-16:20)

• 프로젝트 진행

7교시 (16:30-17:20)

• 프로젝트 진행

8교시 (17:30-18:30)

• 프로젝트 진행

---

Notes

---