황진하 / 2017-1-WebServiceProgramming-2012104136

Go to a project
Toggle navigation Toggle navigation pinning
황진하
5de4926b 0 parents

수업 자료 추가

Inline Side-by-side
Showing 62 changed files with 1927 additions and 0 deletions
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>실습 1</title>
</head>
<body>
<p>
<a href="http://www.khu.ac.kr">경희대학교</a>
</p>
<p>컴퓨터공학과</p>
<p>2017123456</p>
<p>
<h1>트와이스</h1>
<i>Twice</i><br>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>실습 2</title>
</head>
<body>
<h1>
<a href="http://twice.jype.com/">
트와이스
</a>
</h1>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/160507_Twice_guerrilla_concert.jpg/186px-160507_Twice_guerrilla_concert.jpg">
<ul>
<li>구성원</li>
<ul>
<li> 지효 </li>
<li> 나연 </li>
<li> 정연 </li>
<li> 모모 </li>
<li> 사나 </li>
<li> 미나 </li>
<li> 다현 </li>
<li> 채영 </li>
<li> 쯔위 </li>
</ul>
<li> 설명:
<blockquote>
트와이스(2015년 10월 20일 ~ 현재)는 대한민국의 9인조 걸 그룹으로, JYP 엔터테인먼트 소속이다.
2015년 5월 5일부터 두 달동안 진행된 서바이벌 프로그램 Mnet 《SIXTEEN》을 통해 9명의 최종 멤버들이 선발되었으며,
2015년 10월 19일 타이틀곡 "OOH-AHH하게" 뮤직비디오와 음원을 공개하고, 20일 첫 번째 EP 앨범 《THE STORY BEGINS》 발매와 동시에 데뷔 쇼케이스로 데뷔하였다. 2016년 4월 25일 두 번째 EP 앨범 《PAGE TWO》를 발매하였고, 데뷔 1주년인 2016년 10월 24일 세 번째 EP 앨범 《TWICEcoaster : LANE 1》을 발매하였다.
</blockquote>
</li>
<li>소속사:
<a href="http://www.jype.com/" target="blank">
JYP 엔터테인먼트
</a>
</li>
<li>
앨범
<ol>
<li><a href="https://ko.wikipedia.org/wiki/THE_STORY_BEGINS">THE STORY BEGINS</a></li>
<li><a href="https://ko.wikipedia.org/wiki/PAGE_TWO">PAGE TWO</a></li>
<li><a href="https://ko.wikipedia.org/wiki/TWICEcoaster_:_LANE_1">TWICEcoaster : LANE 1</a></li>
</ol>
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>실습 3 - 테이블 만들기</title>
</head>
<body>
<table border="1">
<tr>
<th>분류</th><th>제품명</th>
<th>단가</th><th>수량</th>
<th>금액</th>
</tr>
<tr>
<td rowspan="3">공산품</td>
<td>iPhone</td>
<td>900,000</td>
<td>2</td>
<td>1,800,000</td>
</tr>
<tr>
<td>LED TV</td>
<td>3,000,000</td>
<td>3</td>
<td>9,000,000</td>
</tr>
<tr>
<td colspan="3" style="text-align:center">소계</td>
<td>10,800,000</td>
</tr>
<tr>
<td rowspan="2">농산품</td>
<td>인삼</td>
<td>10,000</td>
<td>200</td>
<td>2,000,000</td>
</tr>
<tr>
<td colspan="3" style="text-align:center">소계</td>
<td>2,000,000</td>
</tr>
<tr>
<td colspan="4" style="text-align:center">합계</td>
<td>12,800,000</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>실습 4 - form,table 만들기</title>
</head>
<body>
<form action="#" method="post">
<table border="1">
<tr>
<th>아이디</th>
<td colspan="3">
<input type="text" name="id"/>
<input type="button" value="중복조회"/>
</td>
</tr>
<tr>
<th>비밀번호</th>
<td>
<input type="text" name="password"/>
</td>
<th>확인</th>
<td>
<input type="password" name="password_confirmation"/>
</td>
</tr>
<tr>
<th>이름</th>
<td colspan="3">
<input type="text" name="name"/>
</td>
</tr>
<tr>
<th>이메일</th>
<td colspan="3">
<input type="text" name="email"/>
</td>
</tr>
<tr>
<th>성별</th>
<td colspan="3">
<input type="radio" name="gender" value="m"/>남
<input type="radio" name="gender" value="f"/>녀
</td>
</tr>
<tr>
<th>지역</th>
<td colspan="3">
<select name="location">
<option value="seoul">서울</option>
<option value="busan">부산</option>
<option value="etc">기타</option>
</select>
</td>
</tr>
<tr>
<td colspan="4">
<input type="checkbox" name="tems"/>약관에 동의합니다.
</td>
</tr>
</table>
<input type="submit" value="회원가입" />
</form>
</body>
</html>
a {
text-decoration: none;
color: #2f58c2;
}
h1 {
font-size: 3em;
text-align: center;
border: 2px solid #dd2c7c;
background-color: #e442a8;
width: 90%;
border-radius: 10px;
margin: 30px auto;
}
h1 > a {
text-decoration: none;
color: #fff;
}
#main-img {
width: 100%
}
blockquote {
border: 1px solid #f1f5a9;
border-left: 30px solid #f1f5a9;
padding: 10px;
margin-left: 0px;
}
ul > li {
margin: 10px;
}
span.type {
font-size: 1.1em;
margin-right: 2em;
font-weight: bold;
}
.highlight {
color: #e80859;
}
ol {
margin: 1px 0;
padding: 0;
width: 100%;
}
ol > li {
list-style: none;
width: 200px;
float: left;
text-align: center;
padding: 0 10px;
line-height: 130px;
background: #eee;
margin: 10px 5px;
}
html{
color: #000;
background: #fff;
padding: 20px 0;
font: 14px/28px "맑은 고딕", "Malgun Gothic", "굴림", "Gulim", Verdan, Arial, Tahoma;
}
.pagination {
text-align: center;
margin: 20px auto;
}
.pagination span.arrow{
color: #246d9c;
text-decoration: none;
margin: 0.2em;
}
.pagination a{
color: #246d9c;
text-decoration: none;
font-weight: bold;
font-size: 14px;
padding: 0.5em;
margin: 0 1px 0 0;
border-radius: 50%;
}
.pagination a.current {
color: #8a1c5e;
}
.pagination a.direction{
color: #246d9c;
}
.pagination a:hover,
.pagination a.current:hover {
background: gold;
text-decoration: none;
font-weight: bold;
}
html{
color: #000;
background: #fff;
padding: 20px 0;
font: 14px/28px "맑은 고딕", "Malgun Gothic", "굴림", "Gulim", Verdan, Arial, Tahoma;
}
.pagination {
text-align: center;
margin: 20px auto;
font-size: 0;
}
.pagination span.arrow{
color: gold;
text-decoration: none;
margin: 0.2em;
}
.pagination a{
color: #fff;
background: #888;
text-decoration: none;
font-weight: bold;
font-size: 14px;
padding: 1em;
margin: 0 1px 0 0;
}
.pagination a.current {
background-color: #246d9c;
}
.pagination a.direction{
color: gold;
}
.pagination a:hover,
.pagination a.current:hover {
background: #444;
color: gold;
text-decoration: none;
font-weight: bold;
}
html{
color:#000;
background:#fff;
padding:20px 0;
font: 14px/20px "맑은 고딕", "Malgun Gothic", "굴림", "Gulim", Verdan, Arial, Tahoma;
}
#board {
width:100%;
border-color:#888;
border-width:2px;
border-top-style:solid;
border-bottom-style:solid;
margin:0;
padding:0;
}
div.row{
border-color:#ccc;
border-width:1px;
border-top-style:solid;
border-bottom-style:solid;
overflow:auto;
}
div.col {
text-align: center;
margin: 1em;
float: left;
}
div.number{
width:50px;
}
div.title{
color: #0b6cb3;
}
div.name{
width:50px;
float:right;
}
div.date{
width:80px;
float:right;
}
#header {
background: olive;
color: white;
font-weight: bold;
}
#header div.title {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>실습 CSS 01</title>
<link rel="stylesheet" type="text/css" href="css/ex01.css" />
</head>
<body>
<h1>
<a href="http://twice.jype.com/">
트와이스
</a>
</h1>
<img src="images/Twice.jpg">
<ul>
<li>구성원</li>
<ul>
<li> 지효 </li>
<li> 나연 </li>
<li> 정연 </li>
<li> 모모 </li>
<li> 사나 </li>
<li> 미나 </li>
<li> 다현 </li>
<li> 채영 </li>
<li> 쯔위 </li>
</ul>
<li> 설명:
<blockquote>
트와이스(2015년 10월 20일 ~ 현재)는 대한민국의 9인조 걸 그룹으로, JYP 엔터테인먼트 소속이다.
2015년 5월 5일부터 두 달동안 진행된 서바이벌 프로그램 Mnet 《SIXTEEN》을 통해 9명의 최종 멤버들이 선발되었으며,
2015년 10월 19일 타이틀곡 "OOH-AHH하게" 뮤직비디오와 음원을 공개하고, 20일 첫 번째 EP 앨범 《THE STORY BEGINS》 발매와 동시에 데뷔 쇼케이스로 데뷔하였다. 2016년 4월 25일 두 번째 EP 앨범 《PAGE TWO》를 발매하였고, 데뷔 1주년인 2016년 10월 24일 세 번째 EP 앨범 《TWICEcoaster : LANE 1》을 발매하였다.
</blockquote>
</li>
<li>소속사:
<a href="http://www.jype.com/" target="blank">
JYP 엔터테인먼트
</a>
</li>
<li>
앨범
<ol>
<li><a href="https://ko.wikipedia.org/wiki/THE_STORY_BEGINS">THE STORY BEGINS</a></li>
<li><a href="https://ko.wikipedia.org/wiki/PAGE_TWO">PAGE TWO</a></li>
<li><a href="https://ko.wikipedia.org/wiki/TWICEcoaster_:_LANE_1">TWICEcoaster : LANE 1</a></li>
</ol>
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>실습 5-2</title>
<link href="./css/ex02-1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="pagination">
<a href="#" class="direction"><span class='arrow'>&lsaquo;</span>이전</a>
<a href="#">11</a>
<a href="#">12</a>
<a href="#">13</a>
<a href="#">14</a>
<a href="#" class="current">15</a>
<a href="#">16</a>
<a href="#">17</a>
<a href="#">18</a>
<a href="#">19</a>
<a href="#">20</a>
<a href="#" class="direction">다음 <span class='arrow'>&rsaquo;</span></a>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>실습 3-3</title>
<link href="./css/ex03.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="board">
<div id="header">
<div class="row">
<div class="col number">번호</div>
<div class="col title">제목</div>
<div class="col date">날짜</div>
<div class="col name">작성자</div>
</div>
</div>
<div id="content">
<div class="row">
<div class="col number">10</div>
<div class="col title">10번째게시물</div>
<div class="col date">2015-09-11</div>
<div class="col name">리지</div>
</div>
<div class="row">
<div class="col number">9</div>
<div class="col title">9번째게시물</div>
<div class="col date">2014-08-21</div>
<div class="col name">권보아</div>
</div>
<div class="row">
<div class="col number">8</div>
<div class="col title">8번째게시물</div>
<div class="col date">2014-05-27</div>
<div class="col name">산다라</div>
</div>
<div class="row">
<div class="col number">7</div>
<div class="col title">7번째게시물</div>
<div class="col date">2014-03-15</div>
<div class="col name">설현</div>
</div>
<div class="row">
<div class="col number">6</div>
<div class="col title">6번째게시물</div>
<div class="col date">2013-12-25</div>
<div class="col name">수지</div>
</div>
<div class="row">
<div class="col number">5</div>
<div class="col title">5번째게시물</div>
<div class="col date">2013-10-01</div>
<div class="col name">수영</div>
</div>
<div class="row">
<div class="col number">4</div>
<div class="col title">4번째게시물</div>
<div class="col date">2010-10-01</div>
<div class="col name">한승연</div>
</div>
<div class="row">
<div class="col number">3</div>
<div class="col title">3번째게시물</div>
<div class="col date">2012-10-01</div>
<div class="col name">정니콜</div>
</div>
<div class="row">
<div class="col number">2</div>
<div class="col title">2번째게시물</div>
<div class="col date">2011-10-01</div>
<div class="col name">김태희</div>
</div>
<div class="row">
<div class="col number">1</div>
<div class="col title">1번째게시물</div>
<div class="col date">2010-12-01</div>
<div class="col name">이민정</div>
</div>
</div>
</div>
</body>
</html>
html{
color:#000;
background:#fff;
padding: 0.5em;
font-size: 14px;
}
h1 {
font-size: 2em;
line-height: 150%;
margin-bottom: 0.5em;
border-bottom: 2px solid #ccc;
font-weight: bold;
text-align: center;
}
h3 {
font-size: 1.5em;
font-weight: bold;
margin: 1em 0 0.5em 0;
}
div {
margin: 0.5em 0;
}
p {
line-height: 160%;
margin: 1em 0;
}
img.main {
width: 100%;
}
a.more {
background-color: pink;
color: white;
text-decoration: none;
padding: 0.5em 1em;
margin: 1em 0;
border-radius: 0.5em;
}
.member ul > li {
display: inline-block;
float: left;
width: 50%;
padding: 0.5em 1em;
background-color: skyblue;
box-sizing: border-box;
color: white;
margin-bottom: 1px;
border-right: 1px solid white;
}
.member ul > li:hover {
background-color: royalblue;
}
@media only screen and (min-device-width : 768px) {
div.img {
width: 33%;
display: inline-block;
vertical-align: top;
}
div.description {
width: 66%;
display: inline-block;
vertical-align: top;
padding-left: 1em;
box-sizing: border-box;
}
div.description p {
margin-top: 0;
}
.member ul > li {
width: 25%;
}
}
@media only screen and (min-device-width : 1025px) {
div.img {
width: 30%;
}
div.description {
width: 50%;
padding-right: 1em;
}
div.member {
width: 19%;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
}
.member ul > li {
width: 100%;
}
h3 {
margin-top: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>실습 3-4</title>
<link href="./css/ex01.css" rel="stylesheet" type="text/css">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
</head>
<body>
<h1>소녀시대</h1>
<div class="img">
<img src="./images/gg.jpg" class="main">
</div>
<div class="description">
<p>
소녀시대(少女時代, 영어: Girls' Generation 걸스 제너레이션[*])는 SM 엔터테인먼트
소속의 대한민국 8인조 걸 그룹이다. 태연, 써니, 티파니, 효연, 유리, 수영, 윤아, 서현 8명으로 이루어져 있다.
소녀시대라는 이름은 소녀들이 평정할 시대가 왔다는 의미를 갖고 있다.
소녀시대는 2007년 8월 2일 데뷔 싱글 〈다시 만난 세계〉를 발매하고 8월 5일 SBS
《인기가요》를 통해 정식 데뷔했다. 같은 해 11월 1일 한국 첫 정규 앨범 《소녀시대》를 발매했으며,
〈Kissing You〉와 〈Baby Baby〉 등으로 활동하며 1위에 올랐다. 이후 2009년 1월 7일 첫 미니 앨범
《Gee》를 발매했다. 그해 6월 29일, 두 번째 미니 앨범 《소원을 말해봐》를 발매해 10만 장을 넘게 팔았다.
2009년 12월 29일부터는 Into the New World라는 첫 아시아 투어도 개최했다.
2010년 1월 28일에는 두 번째 정규 앨범 《Oh!》를 발매해 20만 장을 판매하며 4연속 앨범 판매량
10만 장을 돌파했다.
</p>
<a href="https://ko.wikipedia.org/wiki/%EC%86%8C%EB%85%80%EC%8B%9C%EB%8C%80" class="more">더보기</a>
</div>
<div class="member">
<h3>멤버구성</h3>
<ul>
<li>태연</li>
<li>써니</li>
<li>티파니</li>
<li>유리</li>
<li>효연</li>
<li>수영</li>
<li>윤아</li>
<li>서현</li>
</ul>
</div>
</body>
</html>
"use strict"
var http = require('http');
var server = http.createServer(function(req, res) {
res.writeHeader(200, {"Content-Type": "text/plain"});
res.write("Hello World");
res.end();
});
server.listen(3000, function() {
console.log("Sever listeining on http://localhost:3000");
});
"use strict"
var http = require('http'),
path = require('path'),
url = require('url'),
fs = require('fs');
var DOCUMENT_ROOT = "../../05_CSS/";
var server = http.createServer(function(req, res) {
var reqPath = url.parse(req.url).pathname;
if (reqPath == "/") {
reqPath = "ex01.html";
}
var fullPath = path.join(process.cwd(), DOCUMENT_ROOT, reqPath);
fs.readFile(fullPath, "binary", function(err, file) {
if(err) {
if (err.code == "ENOENT") {
console.log("SEND 404 for " + req.url);
res.writeHeader(404, {"Content-Type": "text/html"});
res.write("<h1>Not found</h1>");
res.end();
} else {
console.error("Error", err);
res.writeHeader(500, {"Content-Type": "text/plain"});
res.write(err + "\n");
res.end();
}
} else{
console.log("SEND 200 for " + req.url);
res.writeHeader(200);
res.write(file, "binary");
res.end();
}
});
});
server.listen(3000, function() {
console.log("Sever listeining on http://localhost:3000");
});
\ No newline at end of file
# Logs
logs
*.log
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directory
# https://docs.npmjs.com/cli/shrinkwrap#caveats
node_modules
# Debug log from npm
npm-debug.log
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var index = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(require('node-sass-middleware')({
src: path.join(__dirname, 'public'),
dest: path.join(__dirname, 'public'),
indentedSyntax: true,
sourceMap: true
}));
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', index);
app.use('/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
#!/usr/bin/env node
/**
* Module dependencies.
*/
var app = require('../app');
var debug = require('debug')('app03:server');
var http = require('http');
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
/**
* Create HTTP server.
*/
var server = http.createServer(app);
/**
* Listen on provided port, on all network interfaces.
*/
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
/**
* Normalize a port into a number, string, or false.
*/
function normalizePort(val) {
var port = parseInt(val, 10);
if (isNaN(port)) {
// named pipe
return val;
}
if (port >= 0) {
// port number
return port;
}
return false;
}
/**
* Event listener for HTTP server "error" event.
*/
function onError(error) {
if (error.syscall !== 'listen') {
throw error;
}
var bind = typeof port === 'string'
? 'Pipe ' + port
: 'Port ' + port;
// handle specific listen errors with friendly messages
switch (error.code) {
case 'EACCES':
console.error(bind + ' requires elevated privileges');
process.exit(1);
break;
case 'EADDRINUSE':
console.error(bind + ' is already in use');
process.exit(1);
break;
default:
throw error;
}
}
/**
* Event listener for HTTP server "listening" event.
*/
function onListening() {
var addr = server.address();
var bind = typeof addr === 'string'
? 'pipe ' + addr
: 'port ' + addr.port;
debug('Listening on ' + bind);
}
{
"name": "app03",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.16.0",
"cookie-parser": "~1.4.3",
"debug": "~2.6.0",
"ejs": "~2.5.5",
"express": "~4.14.1",
"morgan": "~1.7.0",
"node-sass-middleware": "0.9.8",
"serve-favicon": "~2.3.2"
}
}
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; }
a {
color: #00B7FF; }
/*# sourceMappingURL=style.css.map */
\ No newline at end of file
{
"version": 3,
"file": "style.css",
"sources": [
"style.sass"
],
"mappings": "AAAA,AAAA,IAAI,CAAC;EACH,OAAO,EAAE,IAAK;EACd,IAAI,EAAE,kDAAmD,GAAG;;AAE9D,AAAA,CAAC,CAAC;EACA,KAAK,EAAE,OAAQ,GAAG",
"names": []
}
\ No newline at end of file
body
padding: 50px
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
a
color: #00B7FF
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
module.exports = router;
<h1><%= message %></h1>
<h2><%= error.status %></h2>
<pre><%= error.stack %></pre>
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
# Node.js를 이용한 간단한 웹서버 구축
## 실행 방법
1. Hello World 웹 서버
```
node app01.js
```
2. 03 실습의 내용을 제공하는 웹서버
```
node app02.js
```
## TIP
1. 코드를 수정할 때 마다 서버를 새로 띄워야 해서 불편하다면 nodemon을 설치하고 nodemon으로 서버를 실행할 수 있습니다. 소스 코드가 수정되면 자동으로 서버가 다시 시작됩니다.
```
npm install --global nodemon
nodemon app02.js
```
# Logs
logs
*.log
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directory
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
node_modules
# Debug log from npm
npm-debug.log
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(require('node-sass-middleware')({
src: path.join(__dirname, 'public'),
dest: path.join(__dirname, 'public'),
indentedSyntax: true,
sourceMap: true
}));
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
#!/usr/bin/env node
/**
* Module dependencies.
*/
var app = require('../app');
var debug = require('debug')('app03:server');
var http = require('http');
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
/**
* Create HTTP server.
*/
var server = http.createServer(app);
/**
* Listen on provided port, on all network interfaces.
*/
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
/**
* Normalize a port into a number, string, or false.
*/
function normalizePort(val) {
var port = parseInt(val, 10);
if (isNaN(port)) {
// named pipe
return val;
}
if (port >= 0) {
// port number
return port;
}
return false;
}
/**
* Event listener for HTTP server "error" event.
*/
function onError(error) {
if (error.syscall !== 'listen') {
throw error;
}
var bind = typeof port === 'string'
? 'Pipe ' + port
: 'Port ' + port;
// handle specific listen errors with friendly messages
switch (error.code) {
case 'EACCES':
console.error(bind + ' requires elevated privileges');
process.exit(1);
break;
case 'EADDRINUSE':
console.error(bind + ' is already in use');
process.exit(1);
break;
default:
throw error;
}
}
/**
* Event listener for HTTP server "listening" event.
*/
function onListening() {
var addr = server.address();
var bind = typeof addr === 'string'
? 'pipe ' + addr
: 'port ' + addr.port;
debug('Listening on ' + bind);
}
{
"name": "app03",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"ejs": "~2.3.3",
"express": "~4.13.1",
"morgan": "~1.6.1",
"node-sass-middleware": "0.8.0",
"serve-favicon": "~2.3.0"
}
}
\ No newline at end of file
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; }
a {
color: #00B7FF; }
/*# sourceMappingURL=style.css.map */
\ No newline at end of file
{
"version": 3,
"file": "style.css",
"sources": [
"style.sass"
],
"sourcesContent": [],
"mappings": "AAAA,IAAI,CAAC;EACH,OAAO,EAAE,IAAK;EACd,IAAI,EAAE,kDAAmD,GAFrD;;AAIN,CAAC,CAAC;EACA,KAAK,EAAE,OAAQ,GADd",
"names": []
}
\ No newline at end of file
body
padding: 50px
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
a
color: #00B7FF
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
module.exports = router;
<h1><%= message %></h1>
<h2><%= error.status %></h2>
<pre><%= error.stack %></pre>
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
# 실습하는 법
1. npm을 이용하여 express-generator (express app 뼈대를 자동 생성해주는 프로그램)을 설치합니다.
```
npm install -g express-generator
```
1. express generator를 이용하여 app을 하나 만듭니다.
```sh
express -e -c sass --git app03
# -e: Jade대신 EJS template 엔진을 이용합니다. Jade도 좋지만, 일단은 HTML과 가장 유사한 EJS를 사용해봅시다.
# -c sass: sass나 scss를 사용하려고 합니다.
# --git: git을 사용할 때 편리하도록 .gitignore를 자동으로 생성합니다.
```
1. 디렉토리에 들어가서 파일들을 살펴봅시다.
```
cd app03
atom .
```
1. package들을 설치합니다.
```
npm install
```
1. 서버를 실행해봅시다.
```
nodemon ./bin/www
```
1. 웹브라우져에서 http://localhost:3000 에 접속해봅시다.
1. 디렉토리 설명
- app.js: Express 미들웨어들이 설정되어 있습니다.
- routes/: 라우팅 정보, 즉 URL로 들어온 처리를 어떻게 하는지 관리합니다.
- views/: 화면에 출력할 View Template이 들어있습니다.
- public/: static파일로 처리될 image, javascript, stylesheet 등이 있습니다. SCSS를 사용해볼 때도 여기서 해봅니다.
- node_modules: 로컬에 인스톨된 패키지가 있는 곳입니다. 건드리지 맙시다.
## 참고
### npm : Package Manager for Node.js
- 참고: https://docs.npmjs.com/getting-started/what-is-npm
1. npm init
- 패키지 관리 시작. 해당 디렉토리에 package.json을 만듭니다.
- Git Bash에서 에러가 나는 경우 윈도우 cmd 창에서 실행하세요.
- 차례로 물어보는 것에 대답하면 package.json 파일이 생깁니다.
2. npm install
- npm를 이용해 원하는 패키지를 인스톨 합시다.
- 옵션
- -g (--global)은 global로 인스톨 합니다. 그러면 이 프로그램을 cmd 창에서 유틸리티 처럼 사용할 수 있습니다.
- --save는 이 프로젝트의 로컬에 인스톨 하면서 package.json에 기록되어 추후 npm install 로 한꺼번에 인스톨 할 수 있습니다.
- --save-dev는 save와 유사하지만, 프로젝트의 실행에는 필요없고, 개발 단계에서만 필요하다는 뜻입니다.
- 예
```
npm install -g gulp
npm install --save-dev gulp
npm install --save express
npm install -g express-generator
```
{
"curly": true,
"eqeqeq": true,
"undef": true,
"globals": {
"jQuery": true,
"Promise" : true
},
"node": true
}
"use strict";
console.log("Hello, World");
"use strict";
function asyncTask1(cb) {
console.log("task1 start");
setTimeout(function() {
cb("task1");
}, 2000);
}
function asyncTask2(cb) {
console.log("task2 start");
setTimeout(function() {
cb("task2");
}, 1000);
}
asyncTask2(function(ret) {
console.log(ret + " done");
asyncTask1(function(ret2) {
console.log(ret2 + "done");
// 추가적인 callback이 더 생긴다면???
});
});
function promiseTask1() {
console.log("task1 start");
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('task1');
}, 2000);
});
}
function promiseTask2() {
console.log("task2 start");
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('task2');
}, 1000);
});
}
promiseTask2()
.then(function(ret) {
console.log(ret + " done");
}).then(function() {
return promiseTask1();
})
.then(function(ret) {
console.log(ret + " done");
});
"use strict";
function swap(arr, i, j) {
var t = arr[i];
arr[i] = arr[j];
arr[j] = t;
}
function bubbleSort(arr) {
var i, j;
for (i = 0; i < arr.length; i++) {
for (j = 0; j < arr.length - i; j++) {
if (arr[j] > arr[j+1]) {
swap(arr, j, j+1);
}
}
}
return arr;
}
var arr1 = [6, 3, 2, 7, 8, 3, 1, 0, 9, 5];
var arr2 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var arr3 = [9, 8, 7, 6, 5, 4, 3, 2, 1, 0];
console.log(bubbleSort(arr1));
console.log(bubbleSort(arr2));
console.log(bubbleSort(arr3));
\ No newline at end of file
<html>
<head>
</head>
<body>
<script type="text/javascript" src="03_sort.js">
</script>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function message(){
alert("This alert box was called with the onload event");
}
</script>
</head>
<body onload="message()">
<script type="text/javascript">
document.write("This message is written by JavaScript");
</script>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="xxx.js"></script>
<script type="text/javascript">
function message(){
alert("This alert box was called with the onload event");
}
</script>
</head>
<body onload="message()">
</script>
</body>
</html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
var str="Hello world!";
//look for "Hello"
var patt=/Hello/g;
var result=patt.exec(str);
document.write("Returned value: " + result);
//look for "W3Schools"
patt=/W3Schools/g;
result=patt.exec(str);
document.write("<br />Returned value: " + result);
</script>
</body>
</html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
// location
location.assign("http://www.google.com"); // ּ ̵
</script>
</body>
</html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="alert.js">
</script>
</body>
</html>
//window객체는 window. 생략 가능
alert("test"); // 메시지 창 띄움
window.open('','','width=200,height=100') // 새창 띄우기
if (confirm("Are you sure?")) {
// Yes/No를 묻는 다이얼로그 창 띄움. Yes일 때만 true
}
var name = prompt("Enter name"); // 사용자의 입력 받는 창 띄움
document.write("This message is written by JavaScript");
<!DOCTYPE html>
<html>
<body>
<p>An unordered list:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<button onclick="myFunction()">Hide List</button>
<p id="demo"></p>
<script>
function myFunction() {
var divs = document.getElementsByTagName("LI");
for (i=0; i<divs.length;i++) {
divs[i].style.display = 'none';
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
.section { padding:5px; margin:5px; border:1px solid #eeeeee;}
div#result { border: 1px solid red; background:#EEEEEE;
padding:10px;margin:10px; }
</style>
</head>
<body>
<div class="section">
<ul id="fruits">
<li>Apple</li>
<li>Orange</li>
<li>Melon</li>
</ul>
</div>
<div class="section">
<a href="http://www.google.com">Google</a>
<a href="http://www.apple.com">Apple</a>
<a href="http://www.microsoft.com">Microsoft</a>
<a href="http://www.oracle.com">Oracle</a>
</div>
<div class="section">
<form id="test">
<input type="text" name="id" id="id"><br>
<input type="password" name="pwd" id="pwd"><br>
<select id="channel" name="channel">
<option value="kbs">KBS</option>
<option value="mbc">MBC</option>
<option value="sbs">SBS</option>
</select>
<p>
<input type="checkbox" name="hobby" value="baseball">야구
<input type="checkbox" name="hobby" value="basketball">농구
<input type="checkbox" name="hobby" value="soccer">축구
</p>
<p>
<input type="button" id="btn1" value="버튼1">
<input type="button" id="btn2" value="버튼2">
<input type="button" id="btn3" value="버튼3">
</p>
</form>
</div>
<div id="result">
<h3>RESULT</h3>
</div>
</body>
</html>
<script type="text/javascript">
$(function() {
// text / html 읽기
$("#result").append($("#fruits").html() + "<p>");
$("#result").append($("#fruits").text() + "<p>");
// value 읽기
$("#result").append($("#channel").val() + "<p>");
// CSS 읽기
$("#result").append($("a:last").css("margin-top") + "<p>");
// Attribute 읽기
$("a").each(function(idx) {
$("#result").append("a" + idx + ":" + $(this).attr("href")+ "<br>");
});
// value 설정
$("#id").val("아이디");
$("#pwd").val("123");
// Attribute 설정
$("input[type='checkbox']").filter("[value='soccer']")
.attr('checked', 'checked');
// text 설정
$("#fruits").find("li:first").text("사과");
// click event + effect
$("#btn1").val("toggle").click(function() {
$("div.section:first").toggle();
});
$("#btn2").val("slide up").click(function() {
$("div.section:first").slideUp();
});
$("#btn3").val("slide down").click(function() {
$("div.section:first").slideDown();
});
// mouse event
$("div.section").mouseover(function() {
$(this).css("background", "#f8dff5");
});
$("div.section").mouseout(function() {
$(this).css("background", "#ffffff");
});
// change event
$("#channel").change(function() {
alert("You selected '" + $(this).val() + "'");
});
});
</script>
html{
color:#000;
padding:20px 0;
font: 12px/18px "맑은 고딕", "Malgun Gothic";
}
#tab {
border-collapse:collapse;
border-spacing:0;
}
td,th {
border:1px solid #444;
font: 12px/18px "맑은 고딕", "Malgun Gothic";
padding:5px;
}
thead tr, tfoot tr {
background:#888;
color:#fff;
}
tbody tr {
background:#eee;
}
span.price {
display: box;
text-align:right;
width:200px;
font-weight:bold;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="calculator.js"></script>
<link rel="stylesheet" href="calculator.css">
</head>
<body>
<div>
<table id="tab" border="1">
<thead>
<tr>
<th></th><th>상품명</th><th>단가</th><th>개수</th><th>가격</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<th colspan="4">합계</th>
<th><span id="sum" class="price"></span></th>
</tr>
</tfoot>
</table>
<input type="button" value="물품추가" id="add">
<input type="button" value="물품삭제" id="del">
</div>
</body>
</html>
<script id="rowTemplate" type="text/template">
<tr>
<td><input type='checkbox'></td>
<td><input type='text' size='15'></td>
<td><input type='text' size='10' class='unit-price' onchange='recalculate();'></td>
<td>
<select class='qty' onchange='recalculate();'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</td>
<td align="right"><span class='price'></span></td>
</tr>
</script>
<script type="text/javascript">
$(function() {
initCalculator();
});
</script>
function recalculate() {
var sum = 0;
$("#tab tbody tr").each(function(idx, row) {
var $el = $(row);
var unitPrice = parseInt($el.find(".unit-price").val(), 10);
var qty = parseInt($el.find(".qty").val());
if (!isNaN(unitPrice) && !isNaN(qty) ) {
var price = unitPrice * qty;
$el.find(".price").text(price);
sum = sum + price;
}
});
$("#sum").text(sum);
}
function initCalculator() {
$('#add').click(function() {
$("#tab tbody").append($('#rowTemplate').html());
});
$('#del').click(function() {
if (confirm("정말 삭제하시겠습니까?")) {
var $els = $("tr input[type='checkbox']:checked");
$els.each(function(idx, el) {
$(el).parents("tr").empty();
});
recalculate();
}
});
$('#add').click();
}
.tab {
margin: 2em 0;
}
.tab:after, .tab>ul:after, .tab>ul>li:after{
content:"";
display:block;
clear:both;
}
.tab > ul {
list-style: none;
margin: 0;
padding: 0;
}
.tab > ul > li {
float:left;
margin-right:1px;
color: #fff;
border-top-left-radius: 0.4em;
border-top-right-radius: 0.4em;
}
.tab > ul > li > a {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
color: #fff;
}
.tab > ul > li {
background: #4CB1E5;
}
.tab > ul > li:hover {
background: #75a44b;
}
.tab > ul > li.active,
.tab > ul > li.active:hover {
background: #eee;
color: #000;
border: 1px solid #4CB1E5;
border-bottom: 0;
margin-bottom: -1px;
}
.tab > ul > li.active a,
.tab > ul > li.active:hover a {
color: #000;
font-weight: bold;
}
.tab > .content {
border-bottom-left-radius: 0.4em;
border-bottom-right-radius: 0.4em;
border-top-right-radius: 0.4em;
background: #eee;
border: 1px solid #4CB1E5;
}
.tab > .content > div {
padding: 2em;
display: none;
}
.tab > .content > div.selected {
display: block;
}
img.full {
width: 100%;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Tab: jQuery Test</title>
<link rel="stylesheet" href="tab.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="tab">
<ul>
<li><a href="#">공지사항</a></li>
<li><a href="#">오늘의 뉴스</a></li>
<li><a href="#">오늘의 이미지</a></li>
</ul>
<div class="content">
<div class="section">
<ul>
<li>이런 이런 공지사항</li>
<li>이런 이런 공지사항</li>
<li>이런 이런 공지사항</li>
<li>이런 이런 공지사항</li>
</ul>
</div>
<div class="section">
<p>[연예팀] SBS 수목드라마 '대물'에서 여성 최초 대통령 서혜림 역으로 열연 중인 고현정에 캐릭터 변질에 대해 논란이 일고 있다.
<p>최근 '대물' 시청자 게시판에는 서혜림의 캐릭터가 변질됐다는 의견들이 등장하고 있어 눈길을 끌고 있다.
<p>극 초반 물불 안 가리는 다혈질 성격은 온데간데 없고 국회의원 보궐선거에 나선 후에는 "잘 몰라서요", "잘 부탁드려요"라는 대사를 연발하며 캐릭터 변질에 대한 시청자들의 질타를 받고 있다.
</div>
<div class="section">
<img src="http://musicimg.cyworld.com/ALBUM/015/063/15063659.JPG">
</div>
</div>
</div>
<div class="tab">
<ul>
<li><a href="#">APink</a></li>
<li><a href="#">소녀시대</a></li>
<li><a href="#">걸스데이</a></li>
</ul>
<div class="content">
<div class="section">
<img src="http://0.viki.io/c/28239c/db2d6d4379.jpg?x=b" class="full">
</div>
<div class="section">
<img src="https://pbs.twimg.com/media/CQIYmaYW8AALCCN.jpg" class="full">
</div>
<div class="section">
<img src="http://img.mbn.co.kr/filewww/news/other/2013/07/20/051502002751.jpg" class="full">
</div>
</div>
</div>
</body>
</html>
<script src="tab.js"></script>
$(function($){
$('.tab > ul > li > a').click(function(e) {
var $item = $(e.currentTarget).parent();
var idx = $item.index() + 1;
var $tab = $item.closest(".tab");
$tab.find(">ul>li").removeClass('active');
$tab.find(".section").removeClass('selected');
$item.addClass('active');
$tab.find(".section:nth-child(" + idx + ")").addClass("selected");
});
$(".tab").find(">ul>li>a:first").click();
});
# 2017년 1학기 웹서비스프로그래밍 과목
실습용 자료 project