NEXT에서 배우는 웹프로그래밍을 이론과 실습을 통해서 이해합니다.

1. !
웹

2. 프로그래밍

3. 트랙

4. 소개
윤 지 수 , N E X T

5. !
본

6. 자료는

7. NEXT

8. Institute의

9. ‘소프트웨어개론’

10. 시간에

12. ‘웹프로그래밍’트랙에

13. 대한

14. 소개

15. 강의

16. 자료

17. 입니다.

18.
!
웹프로그래밍이

19. 무엇인지

20. 알기

21. 위해

22.
간단한

23. 설명과

24. 뚝딱뚝딱

25. 실습이

26. 포함되어

27. 있습니다.

28. 목표
Web의

29. 기본개념을

30. 알아보고,

32.
간단한

33. Web개발경험을

34. 통해

35. 웹을

36. 이해한다.

37. 인터넷에

38. 연결된

39. 컴퓨터들을

40. 통해

41. 사람들이

42. 정보를

43. 공유

44. 할

45. 수

46. 있는

47. 전

48.
세계적인

49. 정보

50. 공간
인터넷에서

51. HTTP

52. 프로토콜,

53. 하이퍼텍스트,

54. HTML형식

55. 등을

56. 사용하여

57.
그림과

58. 문자,

60. 멀티미디어를

61. 교환하는

62. 전송방식
출처

63. http://en.wikipedia.org/wiki/World_Wide_Web
Web

64. ?

65. 다양한

66. 자원(resource)이

67. 존재하는

68. 곳

69. 인터넷에

70. 연결된

71. 컴퓨터들을

72. 통해

73. 사람들이

74. 정보를

75. 공유

76. 할

77. 수

78. 있는

79. 전

80.
세계적인

81. 정보

82. 공간
인터넷에서

83. HTTP

84. 프로토콜,

85. 하이퍼텍스트,

86. HTML형식

87. 등을

88. 사용
하여

89. 그림과

90. 문자,

92. 멀티미디어를

93. 교환하는

94. 전송방식
출처

95. http://en.wikipedia.org/wiki/World_Wide_Web
Web

96. ?

97. 다양한

98. 기술이

99. 사용되는

100. 곳

101. 우리가

102. 경험하고

103. 있는

104. Web
Desktop Mobile Tablet SmartTV
Browser
“우리는

105. 다양한

106. 기기에

107. 포함되어

108. 있는

109. Browser를

110. 통해

112. 쉽게

113. 웹을

114. 경험하고

115. 있다”

116. Web의

117. 동작
은행에서

118. 돈

119. 찾기
은행을

120. 찾아가서,

121.
나의

122. 계좌에서

123. 돈을

124. 빼

125. 달라고,

126.
출금

127. 요청서를

128. 작성한다.

129.
가야

130. 할

131. 주소가

132. 있어야하고,

133.
구체적인

134. 요청사항이

135. 있을

136. 수

137. 있고,

138.
약속된

139. 방식으로

140. 요청해야

141. 한다.
고객 은행
요청
응답

142. Web의

143. 동작
은행에서

144. 돈

145. 찾기
은행을

146. 찾아가서,

147.
나의

148. 계좌에서

149. 돈을

150. 빼

151. 달라고,

152.
출금

153. 요청서를

154. 작성한다.

155.
http://www.bank.com/getMoney/?customNum=310313

157.
http://www.bank.com/getMoney/?customNum=310313

158.
http://www.bank.com/getMoney/?customNum=310313

159.
client Server
request
response

160. URI

161. 의

162. 구성

163.
Uniform

164. Resource

165. Indentifier
http://www.bank.com/getMoney/?customNum=310313

167.
http://www.bank.com/getMoney/?customNum=310313

169.
http://www.bank.com/getMoney/?customNum=310313

170. scheme(스키마)

171.
host

172. name
path와

173. query

174. string

175. client

176.
Browser
web

177.
server
request
response
1)

178. 특정

179. URI로

180. 서버에

181. 접근하여

182. resource를

183. 요청한다.

184.
2)

185. Server에서는

186. 필요한

187. 정보가

188. 있는지

189. 서버의

190. 저장소를

191. 통해

192. 확인한다

193.
3)

194. 저장소에서

195. 추출한

196. 정보를

197. Server가

198. 받아서

199. client에게

200. 보내준다.

201.
4)

202. Client는

203. Server가

204. 보내준

205. 정보를

206. 받는다

207.
5)

208. 사용자가

209. 쉽게

210. 알아볼

211. 수

212. 있도록

213. 정해진

214. UI의

215. 형태에

216. 맞게

217. 정보를

218. 보여준다.

219. 저장소
Server

220. Side
Web의

221. 흐름과

222. 필요기술들

223.
내가

224. 보낸

225. 요청이

226. 어떻게

227. 처리되나요?

228. Web의

229. 흐름과

230. 필요기술들

231.
내가

232. 보낸

233. 요청이

234. 어떻게

235. 처리되나요?
1)

236. 특정

237. URI로

238. 서버에

239. 접근하여

240. resource를

241. 요청한다.

242.
현대의

243. 웹은

244. HTTP라는

245. protocol(통신규약)을

246. 사용해서

247. 웹의

248. 자원을

249. 요청

250.
Server는

251. 항상

252. 대기중인

253. 상태로

254. 실행

255. 중이어야

256. 함

257.
!
2)

258. Server에서는

259. 필요한

260. 정보가

261. 있는지

262. 서버의

263. 저장소를

264. 통해

265. 확인한다

266.
정보는

267. Database(DB)에

268. 보관되고

269. 있으며,

271.
Server에서는

272. DB에

273. 접근할

274. 수

275. 있는

276. 웹서버

277. 프로그래밍

278. 기술이

279. 필요

280.
!
3)

281. 저장소에서

282. 추출한

283. 정보를

284. Server가

285. 받아서

286. client에게

287. 보내준다.

288.
모든

289. 서버는

290. Web표준에

291. 맞는

292. response

293. 를

294. 보내줌.

295.
!
4)

296. Client는

297. Server가

298. 보내준

299. 정보를

300. 받는다

301.
HTTP통신을

302. 하는

303. 과정에서

304. Browser는

305. 이를

306. 받아서

307. 처리

308. 할

309. 준비를

310. 하고

311. 있다.

312.
!
5)

313. 사용자가

314. 쉽게

315. 알아볼

316. 수

317. 있도록

318. 정해진

319. UI의

320. 형태에

321. 맞게

322. 정보를

323. 보여준다.

324.
server에서

325. 보내준

326. 정보를

327. 분석하고

328. 이를

329. 화면에

330. 적절히

331. 보여주기

332. 위한

333. Client

334. 프로그래밍이

335. 필요.

336. WEB을

337. 이루는

338. 요소

339.
hardware
software

340. Desktop
web

341.
Application

342.
server

344. Database
Server

345. Side
web

346.
server
web

347.
server
web

348.
server
SmartTV
Mobile
L4
web

349.
Application

350.
server

352. Database
Client

353. Side
hardware

355. Server

356. Side
Software

357.
Client

358. Side
client요청과

359. 화면을

360. 구성하고

361. 만드는

362. 일

363.
Browser와

364. 렌더링

365. 엔진들

366.
Webkit,

367. Andorid,

368. Chrome,

369.
!
사용자에게

370. 보여줄

371. 화면을

372. 구성

373.
HTML,HTML5

374.
!
사용자에게

375. 보여줄

376. 화면에

377. 디자인

378. 요소를

379. 추가

380.
CSS,CSS3

381.
!
사용자가

382. 클릭하고,

383. 입력하는

384. 정보에

385. 반응하고,

386. 서버가

387. 보낸

388. 정
보를

389. HTML에

390. 넣어주기

391.
Javascript
Browser가

392. 요청한

393. 정보를

394. 받기.

395. Client에필요한

396. 파일을

397. 내려주기

398.
Web

399. Server

401.
Apache,

402. IIS

403.
!
DB와

404. 연동하고,

405. 요청데이터를

406. 분석하고

407. 처리하는

408. 일

409.
Web

410. Application

411. Server

412. (WAS)

415. TOMCAT,

416. Weblogic,

417. JEUS

418.
!
서버에서

419. 동작하는

420. 프로그래밍

421. 언어

422.
JSP,

423. CGI,

424. Servlet,

425. ASP,

426. .NET,

427. PHP,

428. Python,Ruby

429.
!
DB

430.
Oracle,

431. MySQL,

432. infomix

433. WEB

434. in

435. NEXT
HTML_JavaScript

436. 고급
Java

437. Web

438. 프로그래밍

439. 고급
DB

440. 고급컴퓨터

441. 그래픽스
컴퓨터

442. 네트워크
SW

443. 아키텍팅
HTML5

444. 프로그래밍
Data

445. Visualization
HCI
DB

446. 기본
HTML_JavaScript

447. 기본
Java

448. Web

449. 프로그래밍

450. 기본
프로젝트
UI
Server

451. Python을

452. 활용해서

453. 웹

454. 프로그래밍을

455. 해봅시다.

456.
Python

457. Based

458. Web

459. Programming

460. Python은

461. 웹을

462. 위한

463. 용도보다

464. 웹서버의

465. 보조적인

466. 역활을

467. 하는

468. 경우가

469. 더

470. 많음.

471.
하지만

472. Python은

473. 훌륭한

474. 웹

475. 프로그래밍을

476. 위한

477. 강력한

478. 것들을

479. 지원

480. 하고

481. 있음.

482.
!
실제로

483. Python에는

484. 웹프로그래밍을

485. 위한

486. 다양한

487. Web

488. framework들이

489. 존재

490. 함.

491.
http://wiki.python.org/moin/WebFrameworks

492.
!
!
우리는

493. 그

494. 중

495. 가볍고

496. 강력한

497. 평가를

498. 받고

499. 있는

500. Flask를

501. 선택.

502.
!
Flask는,

503.
최신의

504. 웹

505. 기술을

506. 포함하고

507. 있으며,(Restful,

508. noSQL

509. 연동

510. 등)

511.
자체적으로

512. Web

513. Server를

514. 포함하고

515. 있으며,

516.
디버깅을

517. 위한

518. 지원을

519. 하고

520. 있으며,

521.
Documentation(문서화)이

522. 잘

523. 되어

524. 있어

525. 구글링도

526. 잘

527. 됨.

528.
!
python으로

529. 웹을?

530.
http://flask.pocoo.org/docs/

531. 할

532. 것.
웹을

533. 경험해보자

534.
!

535. 웹을

536. 경험해보자

537.
내

538. 컴에

539. 웹서버를

540. 설치

541.
할

542. 것.

543. 웹을

544. 경험해보자

545.
내

546. 컴에

547. 웹서버를

548. 설치

549.
Flask
할

550. 것.

551. 1)

552. MAC

553. 에

554. 기본

555. 환경

556. 설정.

557.
2)

558. Flask

559. 설치

561.
3)

562. 구동

563. !

564.
start

565. !

566. 함

567. 해보기
[pip

568. 설치]
$ sudo easy_install pip
$ sudo pip install Flask
[Flask

569. 설치]
http://flask.pocoo.org/docs/installation/#installation
# 윈도우 환경은 아래 URL하단 부분 참조

570. from flask import Flask!
app = Flask(__name__)!
!
@app.route('/')!
def index():!
return 'Hello World!'!
!
if __name__ == '__main__':!
app.run(debug=True)
hello.py

571. $ python hello.py

573. http://127.0.0.1:5000/

574. 잠깐

575. 고찰.

576.
어떻게

577. 동작하는

578. 걸까..?

579. 방금

580. 우리가

581. 한

582. 것.
CLIENT SERVER
주거니

583. 받거니

584. 방금

585. 우리가

586. 한

587. 것.
CLIENT
Request
Response
SERVER

588. 방금

589. 우리가

590. 한

591. 것.
CLIENT
Request
Response
SERVER
Request

592. 웹은,

593.
요청을

594. 받아

595. 복잡한

596. 무언가

597. 처리를

598. 하고

599.
보기

600. 좋게

601. 보여주는

602. 것

603. 요청이라하면

604. ?

605. http://127.0.0.1:5000/method?name=jisupassword=1234
이런

606. 요청이라던가

607. main/main.nhn?mode=LSDmid=shmsid1=104http://news.naver.com/
인터넷

608. 주소를

609. 통한

610. 다양한

611. 요청

612. 함

613. 해볼까요?

614. http://127.0.0.1:5000/name/jisu

615. from flask import Flask!
app = Flask(__name__)!
!
@app.route('/')!
def index():!
return 'Hello World!'!
!
@app.route('/name/username/')!
def student(username):!
return 'Hello %s' % username!
!
if __name__ == '__main__':!
app.run(debug=True)
추가

616. 잠깐

617. 고찰.

618.
이번엔

619. 어떻게

620. 동작하는

621. 걸까..?

622. 크롬

623. 개발자도구-Network

624. 탭을

625. 통해

626. request확인

627. 비스무리한

628. 놈

630.
하나

631. 더

632. 해봅시다

633. http://127.0.0.1:5000/login
로그인하기

635. POST

636. 요청

637. 실습

638.
http://127.0.0.1:5000/login
ID/PW

639. 입력

640. 후

641.
요청?
응
login.html
‘logged

642. in’

644. 출력
아니
ID/PW

645. 입력

646. 후

647. 다시요청

648. from flask import Flask, request, render_template!
!
@app.route(‘/login’, methods=['POST','GET'])!
def login():!
return render_template('login.html')

649. from flask import Flask, request, render_template!
!
@app.route(‘/login’, methods=['POST','GET'])!
def login():!
! if request.method = 'GET':!
! return render_template('login.html')

650. from flask import Flask, request, render_template!
!
@app.route(‘/login’, methods=['POST','GET'])!
def login():!
! if request.method == ‘GET’:!
! return render_template(‘login.html')!
! else:!
! ! name = request.form[‘name’]!
! passwd = request.form[‘password’]!
return ‘%s logged=in ‘ % name!

651. form method=post action=/login!
h1Login Form Page/h1!
input type=text name=name!
input type=password name=password!
input type=submit value=login!
/form
1.

652. hello.py파일

653. 있는

654. 위치에

655. templates라는

656. 디렉토리

657. 새로

658. 생성
2.

659. 아래

660. 코드가

661. 포함된

662. login.html

663. 소스파일

664. 새로

665. 생성해서

666. templates에

667. 저장

668. http://127.0.0.1:5000/login

669. 잠깐

670. 고찰.

671.
로그인

672. 어떻게

673. 하는걸까..?

674. http://127.0.0.1:5000/
session

675.
정보?
yes
/login
‘welcome’

677.
메시지
no
/template/login.html
/login
login

678. 페이지

679. 처리

680. 로직

681.
redirect
login

682. 정보확인(DB)

683.
session

684. 생성

685. 다양한

686. 클라이언트..

687.
다양한

688. 서버..

689.
!
약속은

690. 있을까?

692. 서버와

693. 클라이언트의

694. 역할

695. DBDesign
사용자
인터랙션
비즈니스로직
Client Server

696. import java.io.*;!
import java.util.*;!
import javax.servlet.*;!
import javax.servlet.http.*;!
import java.sql.*;!
!
public class DatabaseAccess extends HttpServlet{!
!
public void doGet(HttpServletRequest request,!
HttpServletResponse response)!
throws ServletException, IOException!
{!
// JDBC driver name and database URL!
static final String JDBC_DRIVER=com.mysql.jdbc.Driver; !
static final String DB_URL=jdbc:mysql://localhost/TEST;!
!
// Database credentials!
static final String USER = root;!
static final String PASS = password;!
!
// Set response content type!
response.setContentType(text/html);!
PrintWriter out = response.getWriter();!
String title = Database Result;!
String docType =!
!doctype html public -//w3c//dtd html 4.0 +!
transitional//enn;!
out.println(docType +!
htmln +!
headtitle + title + /title/headn +!
body bgcolor=#f0f0f0n +!
h1 align=center + title + /h1n);!
try{!
// Register JDBC driver!
Class.forName(com.mysql.jdbc.Driver);!
!
// Open a connection!
conn = DriverManager.getConnection(DB_URL,USER,PASS);!
!
// Execute SQL query!
stmt = conn.createStatement();!
String sql;!
sql = SELECT id, first, last, age FROM Employees;!
ResultSet rs = stmt.executeQuery(sql);!
!
// Extract data from result set!
while(rs.next()){!
//Retrieve by column name!
int id = rs.getInt(id);!
int age = rs.getInt(age);!
String first = rs.getString(first);!
String last = rs.getString(last);!
!
//Display values!
서버는

698.
클라이언트와

699.
DB간의

700. 처리

702. !
// Open a connection!
conn = DriverManager.getConnection(DB_URL,USER,PASS);!
!
// Execute SQL query!
stmt = conn.createStatement();!
String sql;!
sql = SELECT id, first, last, age FROM Employees;!
ResultSet rs = stmt.executeQuery(sql);!
!
// Extract data from result set!
while(rs.next()){!
//Retrieve by column name!
int id = rs.getInt(id);!
int age = rs.getInt(age);!
String first = rs.getString(first);!
String last = rs.getString(last);!
!
//Display values!
out.println(ID: + id + br);!
out.println(, Age: + age + br);!
out.println(, First: + first + br);!
out.println(, Last: + last + br);!
}!
out.println(/body/html);!
!
// Clean-up environment!
rs.close();!
stmt.close();!
conn.close();!
}catch(SQLException se){!
//Handle errors for JDBC!
se.printStackTrace();!
}catch(Exception e){!
//Handle errors for Class.forName!
e.printStackTrace();!
}finally{!
//finally block used to close resources!
try{!
if(stmt!=null)!
stmt.close();!
}catch(SQLException se2){!
}// nothing we can do!
try{!
if(conn!=null)!
conn.close();!
}catch(SQLException se){!
se.printStackTrace();!
}//end finally try!
} //end try!
}!
}
서버는

704.
클라이언트와

705.
DB간의

706. 처리

708. 클라이언트는

710.
사용자,

711. 서버간의

712.
처리
$(function() {!
var visible = false;!
var menu = $('#leftcol');!
var menuWidth = menu.width();!
var menuHeight = menu.height();!
!
$('#pull').unbind('click').on('click', function(e) {!
e.preventDefault();!
e.stopPropagation();!
//menu.slideToggle( fast, function() {!
if( !(visible) ){!
visible = true;!
menu.css( display, block );!
$(#middlecol).css( width, window.innerWidth-
menuWidth + px );!
}else{!
visible = false;!
menu.css( display, none );!
$(#middlecol).css( width, window.innerWidth +
px );!
}!
//});!
});!
!
var resizeTimer;!
var window_size = $(window).width();!
$(window).resize(function(){!
clearTimeout( resizeTimer );!
resizeTimer = setTimeout(function(){!
var window_changed = $(window).width() != window_size;!
window_size = $(window).width();!
if(window_changed){!
if( window.innerWidth = 768){!
visible = false;!
menu.css( display, none );!
}else{!
visible = true;!
menu.css( display, block );!
$(#middlecol).css( width, 575px );!
}!
}!
}, 500);!
});!
function setMaxWidth() {!
if( window.innerWidth = 768 ){!
if( /iPhone|iPod|iPad/i.test(navigator.userAgent) ){!
$(#middlecol).css( fontSize, 9px );!
}!
$(#middlecol).css( font-size, 14px );!
$(#header .wrapper h1).css( maxWidth,
window.innerWidth + px );!
$(#middlecol).css( width, window.innerWidth + px );!
$(#topmenu .wrapper #mobileright).css(left,

713. 클라이언트는

715.
사용자,

716. 서버간의

717.
처리
}!
//});!
});!
!
var resizeTimer;!
var window_size = $(window).width();!
$(window).resize(function(){!
clearTimeout( resizeTimer );!
resizeTimer = setTimeout(function(){!
var window_changed = $(window).width() != window_size;!
window_size = $(window).width();!
if(window_changed){!
if( window.innerWidth = 768){!
visible = false;!
menu.css( display, none );!
}else{!
visible = true;!
menu.css( display, block );!
$(#middlecol).css( width, 575px );!
}!
}!
}, 500);!
});!
function setMaxWidth() {!
if( window.innerWidth = 768 ){!
if( /iPhone|iPod|iPad/i.test(navigator.userAgent) ){!
$(#middlecol).css( fontSize, 9px );!
}!
$(#middlecol).css( font-size, 14px );!
$(#header .wrapper h1).css( maxWidth,
window.innerWidth + px );!
$(#middlecol).css( width, window.innerWidth + px );!
$(#topmenu .wrapper #mobileright).css(left,
window.innerWidth - 40 );!
if( window.innerWidth 468 ){!
$(.topgooglead).css( display, none);!
}else{!
$(.topgooglead).css( display, block);!
}!
}!
}!
setMaxWidth();!
$( window ).bind( orientationchange, setMaxWidth );!
$( window ).bind( resize, setMaxWidth );!
});

718. 전

719. 망

720. WEB

721. UI WEB

722. UI

723. App

724. vs.

725. Web

726. App

727. vs.

728. Web
Money

729. App

730. vs.

731. Web
Money
Game

732. App

733. vs.

734. Web
Money
Game

735. App

736. vs.

737. Web

738. App

739. vs.

740. Web
파편화문제

741. 해결

742. App

743. vs.

744. Web
파편화문제

745. 해결

746. App

747. vs.

748. Web
파편화문제

749. 해결
Money
Game

750. End
;-D