728x90
수업내용
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
728x90