728x90
수업내용
1교시 (09:30-10:20)
- 지난 시간 복습
- CRA : React, ReactDOM, babel, webpack
- props, state가 데이터에서 중요
2교시 (10:30-11:20)
- 014/App.css
.div {
background-color: rgb(162, 127, 243);
color: rgb(255, 255, 255);
padding: 40px;
font-family: 고딕;
text-align: center;
}
h1 {
color: white;
background-color: #2EFE2E;
padding: 10px;
font-family: 궁서;
}- 014/App.js
import React from 'react';
import './App.css';
import ForEach from './R014_ForEach'
function App() {
return (
<div>
<h1>Start React 200!</h1>
<p>CSS 적용하기</p>
<ForEach/>
</div>
);
}
export default App;- R014_ForEach.js
import React, { Component } from 'react';
class R014_ForEach extends Component {
/*
https://ko.reactjs.org/
https://ko.reactjs.org/docs/react-component.html
마운트
: 아래 메서드들은 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출됩니다.
constructor()
static getDerivedStateFromProps()
render()
componentDidMount()
업데이트
: props 또는 state가 변경되면 갱신이 발생합니다.
아래 메서드들은 컴포넌트가 다시 렌더링될 때 순서대로 호출됩니다.
static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
*/
componentDidMount() {
var Es5_Arr = [ 3, 2, 8, 8 ]
var Es5_newArr = []
for (var i = 0; i < Es5_Arr.length; i++) {
Es5_newArr.push(Es5_Arr[i])
}
console.log("1. Es5_newArr : ["+Es5_newArr+"]")
var Es6_Arr = [ 3, 3, 9, 8 ]
var Es6_newArr = []
Es6_Arr.forEach((result) => {
Es6_newArr.push(result)
})
console.log("2. Es6_newArr : ["+Es6_newArr+"]")
}
render() {
return (
<h2>[ THIS IS ForEach ]</h2>
)
}
}
export default R014_ForEach;
- 015/App.css
div {
background-color: rgb(162, 127, 243);
color: rgb(255, 255, 255);
padding: 40px;
font-family: 고딕;
text-align: center;
}
h1 {
color: white;
background-color: #2EFE2E;
padding: 10px;
font-family: 궁서;
}- 015/App.js
import React from 'react';
import './App.css';
import Map from './R015_Map'
function App() {
return (
<div>
<h1>Start React 200!</h1>
<p>CSS 적용하기</p>
<Map/>
</div>
);
}
export default App;- R015_Map.js
import React, { Component } from 'react';
class R015_Map extends Component {
componentDidMount() {
var Map_Arr = [3, 2, 8, 8]
let Map_newArr = Map_Arr.map(x => x)
console.log("1. Map_newArr : [" + Map_newArr + "]")
let Map_multiArr = Map_Arr.map(x => x * 2)
console.log("2. Map_multiArr : [" + Map_multiArr + "]")
var ObjArray = [{key: 'react', value: '200'},
{key: '리액트', value: 'TwoHundred'}];
let Map_objArr = ObjArray.map((obj,index) => {
console.log((index+3)+".obj : " + JSON.stringify(obj))
var Obj = {};
Obj[obj.key] = obj.value;
return Obj;
});
console.log("5. Map_objArr : " + JSON.stringify(Map_objArr))
}
render() {
return (
<h2>[ THIS IS Map ]</h2>
)
}
}
export default R015_Map;
3교시 (11:30-12:20)
- search.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function test(){
var text_data = $('#item_id').val();
$.ajax({
type : 'POST', <!--GET / POST-->
url : 'http://127.0.0.1:5000/item_request',
data : {
item_id:text_data <!--key : "value"-->
},
dataType : 'JSON',
success : function(result){
alert("result = "+ result);
$('#a').html(result);
},
error : function(xtr,status,error){
alert(xtr +":"+status+":"+error);
}
});
}
</script>
</head>
<body>
<p>find item</p>
<input type = "text" name="item_id" id="item_id"/>
<input type = "button" value = "send" onclick="test()"/>
<h1 id ="a"></h1>
</body>
</html>- flask_04.py
from flask import Flask, jsonify, render_template
from flask_cors import CORS
app = Flask(__name__)
app.debug = True
CORS(app)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/search')
def item_search():
return render_template('search.html')
@app.route('/item_request', methods=['POST'])
def item_query():
return jsonify('{"id":1, "name":"smith"}')
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5000)
4교시 (12:30-13:20)
- FlaskController.java
package a.b.c.com.flask.controller;
import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import org.apache.log4j.LogManager;
import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class FlaskController {
Logger logger = LogManager.getLogger(FlaskController.class);
@RequestMapping(value="flask_test", method = RequestMethod.GET)
public ModelAndView flask_test() {
ModelAndView mav = new ModelAndView();
String url = "http://127.0.0.1:5000/tospring";
String sb = "";
try {
HttpURLConnection conn = (HttpURLConnection) new URL(url).openConnection();
BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream(), "utf-8"));
String line = null;
while ((line = br.readLine()) != null) {
sb = sb + line + "\n";
}
logger.info("========br======" + sb.toString());
if (sb.toString().contains("ok")) {
logger.info("test");
}
br.close();
logger.info("" + sb.toString());
} catch (Exception e) {
logger.info("error >>> : " + e.getMessage());
}
mav.addObject("test1", sb.toString()); //
mav.addObject("fail", false);
mav.setViewName("jsp_flask");
return mav;
}
}- jsp_flask.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
${test1} <!-- -->
</body>
</html>5교시 (14:30-15:20)
- index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>Project Pilot Test</h3>
<hr>
<a href="testFileUploadForm.k">fileupload Form</a><br>
<a href="flask_test.k">flask 연동 테스트</a><br>
</body>
</html>- flask_05.py
from flask import Flask
import urllib.request
app = Flask(__name__)
@app.route("/tospring")
def spring():
return "test"
if __name__ == '__main__':
app.run(debug=False, host="127.0.0.1", port=5000)
6교시 (15:30-16:20)
- flask_07.py
from flask import Flask
import os, requests
app = Flask(__name__)
@app.route('/', methods=['GET'])
def home():
construct_url = "https://api.openweathermap.org/data/2.5/weather?q=London&appid=" + "8bd01bdf534febe4e1f977ad888ff41e"
response = requests.get(construct_url)
list_of_data = response.json()
html_data = f"""
<table border="1">
<tr>
<td>country_code</td>
<td>coordinate</td>
<td>temp</td>
<td>pressure</td>
<td>humidity</td>
</tr>
<tr>
<td>{str(list_of_data['sys']['country'])}</td>
<td>{str(list_of_data['coord']['lon']) + ' '
+ str(list_of_data['coord']['lat'])}</td>
<td>{str(list_of_data['main']['temp']) + 'k'}</td>
<td>{str(list_of_data['main']['pressure'])}</td>
<td>{str(list_of_data['main']['humidity'])}</td>
</tr>
</table>
"""
return html_data
if __name__ == "__main__":
app.run(port=5000, debug=True)
- flask_08.py
from flask import Flask
from urllib import request
from bs4 import BeautifulSoup
app = Flask(__name__)
@app.route("/")
def hello():
target = request.urlopen("http://www.kma.go.kr/weather/forecast/mid-term-rss3.jsp?stnId=108")
soup = BeautifulSoup(target, "html.parser")
output = ""
for location in soup.select("location"):
output += "<div style='width: 30%;background: #eee;padding-left: 30px;'>"
output += "<h3>{}</h3>".format(location.select_one("province").string)
output += "<h4>{}</h4>".format(location.select_one("city").string)
output += "weather: {}<br/>".format(location.select_one("wf").string)
output += "min/max temperature: {}/ {}"\
.format(\
location.select_one("tmn").string,\
location.select_one("tmx").string\
)
output += "</div>"
output += "<hr/>"
return output
app.run()
7교시 (16:30-17:20)
- 프로젝트 진행
8교시 (17:30-18:30)
- 프로젝트 진행
Notes
728x90