728x90
수업내용
1교시 (09:30-10:20)
- [교재 53p] 자바스크립트 모듈에 대한 설명
2교시 (10:30-11:20)
- [교재 48p] async/await
- Ajax에서 비동기 처리 방식으로 할 때 async/await로 동기 방식 처리 가능
- script_17.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promises with fetch</title>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<h1>Promises with fetch</h1>
<p>Open the console</p>
<script type="text/babel">
fetch("https://api.randomuser.me/?nat=US&results=10")
.then(response => response.json())
.then(members => console.log(members))
.catch(err => console.error(err))
</script>
</body>
</html>
- script_16.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promises</title>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<h1>Promises</h1>
<p>Open the console</p>
<!--
프로미스의 생성
-----------------------------
형태 의미 구현
pending 비동기 처리가 아직 수행되지 않은 상태 resolve 또는 reject 함수가 아직 호출되지 않은 상태
fulfilled 비동기 처리가 수행된 상태 (성공) resolve 함수가 호출된 상태
rejected 비동기 처리가 수행된 상태 (실패) reject 함수가 호출된 상태
settled 비동기 처리가 수행된 상태 (성공 또는 실패) resolve 또는 reject 함수가 호출된 상태
프로미스의 후속 처리 메소드
-----------------------------
then
then 메소드는 두 개의 콜백 함수를 인자로 전달 받는다.
첫 번째 콜백 함수는 성공(fulfilled, resolve 함수가 호출된 상태) 시 호출되고
두 번째 함수는 실패(rejected, reject 함수가 호출된 상태) 시 호출된다.
then 메소드는 Promise를 반환한다.
catch
예외(비동기 처리에서 발생한 에러와 then 메소드에서 발생한 에러)가 발생하면 호출된다.
catch 메소드는 Promise를 반환한다.
-->
<script type="text/babel">
const getFakeMembers = count => new Promise((resolves, rejects) => {
const api = `https://api.randomuser.me/?nat=US&results=${count}`
const request = new XMLHttpRequest()
request.open('GET', api)
request.onload = () =>
(request.status === 200) ?
resolves(JSON.parse(request.response).results) :
reject(Error(request.statusText))
request.onerror = (err) => rejects(err)
request.send()
})
getFakeMembers(5).then(
members => console.log(members),
err => console.error(
new Error("randomuser.me에서 멤버를 가져올 수 없습니다."))
)
</script>
</body>
</html>
- 자바스크립트 비동기 방식 처리할 때(ECMS6)
- catch, then
- async/await
- Promises
3교시 (11:30-12:20)
- express_09.js
// Express 기본 모듈 불러오기
var express = require('express')
, http = require('http')
, path = require('path');
// Express의 미들웨어 불러오기
var bodyParser = require('body-parser')
, cookieParser = require('cookie-parser')
, static = require('serve-static');
// 익스프레스 객체 생성
var app = express();
// 기본 속성 설정
app.set('port', process.env.PORT || 3000);
// body-parser를 이용해 application/x-www-form-urlencoded 파싱
app.use(bodyParser.urlencoded({ extended: false }))
// body-parser를 이용해 application/json 파싱
app.use(bodyParser.json())
app.use('/public', static(path.join(__dirname, 'public')));
// cookie-parser 설정
app.use(cookieParser());
// 라우터 사용하여 라우팅 함수 등록
var router = express.Router();
router.route('/process/showCookie').get(function(req, res) {
console.log('/process/showCookie 호출됨');
res.send(req.cookies);
});
router.route('/process/setUserCookie').get(function(req, res) {
console.log('/process/setUserCookie 호출됨');
// 쿠기 설정
res.cookie('user', {
id: 'mike',
name: '소녀시대',
authorized: true
});
// redirect로 응답
res.redirect('/public/cookie.html');
});
app.use('/', router);
// Express 서버 시작
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
4교시 (12:30-13:20)
- login2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인 테스트</title>
</head>
<body>
<h3>로그인</h3>
<hr>
<form method="get" action="/process/login">
<table>
<tr>
<td><label>아이디</label></td>
<td><input type="text" name="id"></td>
</tr>
<tr>
<td><label>비밀번호</label></td>
<td><input type="text" name="password"></td>
</tr>
</table>
<input type="submit" value="전송" name="">
</form>
</body>
</html>- product.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>상품정보 페이지</h3>
<hr/>
<p>로그인 후 볼 수 있는 상품정보 페이지입니다.</p>
<br><br>
<a href='/process/logout'>로그아웃하기</a>
</body>
</html>- express_10.js
// Express 기본 모듈 불러오기
var express = require('express')
, http = require('http')
, path = require('path');
// Express의 미들웨어 불러오기
var bodyParser = require('body-parser')
, cookieParser = require('cookie-parser')
, static = require('serve-static');
// Session 미들웨어 불러오기
var expressSession = require('express-session');
// 익스프레스 객체 생성
var app = express();
// 기본 속성 설정
app.set('port', process.env.PORT || 3000);
// body-parser를 이용해 application/x-www-form-urlencoded 파싱
app.use(bodyParser.urlencoded({ extended: false }))
// body-parser를 이용해 application/json 파싱
app.use(bodyParser.json())
app.use('/public', static(path.join(__dirname, 'public')));
// cookie-parser 설정
app.use(cookieParser());
// 세션 설정
app.use(expressSession({
secret:'my key',
resave:true,
saveUninitialized:true
}));
// 라우터 사용하여 라우팅 함수 등록
var router = express.Router();
router.route('/process/login').get(function(req, res) {
console.log('/process/login 호출됨');
var paramId = req.body.id || req.query.id;
var paramPassword = req.body.password || req.query.password;
if (req.session.user) {
// 이미 로그인된 상태
console.log('이미 로그인되어 상품 페이지로 이동합니다.');
res.redirect('/public/product.html');
}else {
// 세션 저장
req.session.user = {
id: paramId,
name: '소녀시대',
authorized: true
};
res.writeHead('200', {'Content-Type': 'text/html;charset=utf8'});
res.write('<h1>로그인 성공</h1>');
res.write('<div><p>Param id : ' + paramId + '</p></div>');
res.write('<div><p>Param password : ' + paramPassword + '</p></div>');
res.write("<br><br><a href='/process/product'>상품 페이지로 이동</a>");
res.end();
}
});
// 로그아웃 라우팅 함수 - 로그아웃 후 세션 삭제함
router.route('/process/logout').get(function(req, res) {
console.log('/process/logout 호출됨.');
if (req.session.user){
// 로그인된 상태
console.log('로그아웃합니다.');
req.session.destroy(function(err) {
if (err) {throw err;}
console.log('세션을 삭제하고 로그아웃되었습니다.');
res.redirect('/public/login2.html');
});
}else {
// 로그인 안된 상태
console.log('아직 로그인되어있지 않습니다.');
res.redirect('/public/login2.html');
}
});
// 상품정보 라우팅 함수
router.route('/process/product').get(function(req, res) {
console.log('/process/product 호출됨.');
if(req.session.usr) {
res.redirect('/public/product.html');
}else {
res.redirect('/public/login2.html');
}
});
app.use('/', router);
// 등록되지 않은 패스에 대해 페이지 오류 응답
// app.all('*', function(req, res) {
// res.status(404).send('<h1>ERROR - 페이지를 찾을 수 없습니다.</h1>');
// });
// Express 서버 시작
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
5교시 (14:30-15:20)
- 프로젝트 진행 세부 사항에 대한 설명
- 요구사항정의서
- 요구사항ID 업무구분 내용 유형 반영 도출날짜
- 요건정의서
- 요건정의서 - 이벤트 중심
- 화면 설계서
- 테이블 설계서
- ERD 설계서
- 클래스 설계서
- kick off - 분석, 설계 - 개발 - 안정화(단위테스트/통합테스트) - 완료
- 요구사항정의서
6교시 (15:30-16:20)
- 프로젝트 진행 세부 사항에 대한 설명
7교시 (16:30-17:20)
- urllib_4.py
import urllib.request
import urllib.parse
API="http://www.weather.go.kr/weather/forecast/mid-term-rss2.jsp"
# stnId : 기상정보 지역 변수이름
# 전국 : 108
# 서울/경기도 : 109
# 강원도 : 105
# 충청북도 : 131
# 충청남도 : 133
# 전라북도 : 146
# 전라남도 : 156
# 경상북도 : 143
# 경상남도 : 159
# 제주특별자치도 : 184
values = {'stnId':'109'}
params = urllib.parse.urlencode(values)
url = API+"?"+params
print("url >>> : ", url)
data = urllib.request.urlopen(url).read()
text = data.decode("UTF-8")
print(text)
- urllib_5.py
import urllib.request
import urllib.parse
import sys
# 명령행 인자 받아서 실행
# stnId : 기상정보 지역 변수이름
# 전국 : 108
# 서울/경기도 : 109
# 강원도 : 105
# 충청북도 : 131
# 충청남도 : 133
# 전라북도 : 146
# 전라남도 : 156
# 경상북도 : 143
# 경상남도 : 159
# 제주특별자치도 : 184
if len(sys.argv) <= 1:
print("USAGE: urllib_5 <Region Number>")
sys.exit()
regionNumber = sys.argv[1]
API = "http://www.weather.go.kr/weather/forecast/mid-term-rss3.jsp"
values = {'stnId':regionNumber}
params=urllib.parse.urlencode(values)
url=API+"?"+params
print("url >>> : ", url)
data=urllib.request.urlopen(url).read()
text=data.decode("UTF-8")
print(text)
8교시 (17:30-18:30)
- 스프링 코드 버전업하기
Notes
728x90