웹개발자가 알아야할 기술

웹 개발자가
알아야 할 기술
nonezerok@gmail.com
1

Web
• Web
• 인터넷상의 정보를 하이퍼텍스트 방식과 멀티미디어 환경에서 검색할
수 있게 해주는 정보검색 시스템(Wikipedia: World Wide Web)
• 최초의 웹 사이트 개발자: 팀 버너스리 (1991)
• 초기 웹 브라우저: Netscape Navigator, 마크 안데르센 (1994)
2

HTML
• HyperText Markup Language
• HyperText: 글자 그 이상
• Markup: Tag
3
https://www.w3schools.com/html/default.asp

HTML 예제
4
<html>
<body>
Hello, World
</body>
</html>
c:/temp/a.html

5
<html>
<body>
Hello, World <br>
<a href="https://en.wikipedia.org/wiki/Web">Web</a>
<br>
<img src= "lena.bmp"></img>
lena
</body>
</html>
C:/www/a.html
C:/www/lena.bmp
Hypertext: 링크, 그림…
file:///C:/www/a.html

웹 브라우저, 웹 서버
• 웹 브라우저: 서버에 html문서를 요청, 수신, 표시
• 웹 서버: 요청 받은 html 문서를 클라이언트에 전송하는 프로그램
6
웹브라우저 웹서버
요청(www.ABC.com)
응답(index.html)
HTTP
https://www.apachelounge.com

7
<html>
<body>
Hello, World <br>
<a href="https://en.wikipedia.org/wiki/Web">Web</a>
<br>
<img src= "lena.bmp"></img>
lena
</body>
</html>
www.test.com/a.html
www.test.com/lena.bmp
서버 자원에 접근
http://www.test.com/a.html
클라이언트 자원에는 접근 불가!

HTML5 (2014)
• Media (Audio, Video)
• Graphics
• Gelolocation: position.cords.latitude
• Drag/Drop: ondrop, ondrageover, ondragestart
• localStorage
8
https://www.w3schools.com/html/default.asp
클라이언트 자원에 접근 허용

9
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>
Video courtesy of
<a href="https://www.bigbuckbunny.org/"
target="_blank">Big Buck Bunny</a>.
</p>
</body>
</html>

10
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>

CSS
• Cascading Style Sheet
• Tag별로 컨텐츠가 표시되는 방법 기술
11
https://www.w3schools.com/css/default.asp

윈도우 프로그래밍
• 콘솔 프로그래밍
• 윈도우 프로그래밍 = 이벤트기반 프로그래밍
12

Event 처리 예
• 이벤트: [서식]-[글꼴]에서 마우스 클릭
• 이벤트 처리: 글꼴 선택 윈도우 출력
13

객체지향 프로그래밍
• 윈도우 프로그래밍=이벤트처리=메시지처리
• 객체지향 프로그래밍과 궁합이 잘 맞음
• C++, Java, C#, Python, Android …
14

15
int d;
int f1()
{
d = d + 1;
}
int f2()
int f3()
{
int b;
d = 1;
}
struct A
{
int d;
int f1()
{
d = d + 1;
}
};
int f3()
{
A a;
a.d = 1;
}
struct A
{
private:
int d;
int f1()
{
d = d + 1;
}
};
int f3()
{
A a;
a.d = 1;
}
class A
{
int d;
int f1()
{
d = d + 1;
}
};
int f3()
{
A a;
a.d = 1;
}
class A
{
int d;
int f1()
{
d = d + 1;
}
A() { d = 1; }
};
main()
{
A a;
}
캡슐화
encapsulation
정보은닉
information hiding
데이터 추상화
data abstraction

웹 브라우저 윈도우
• 웹브라우저
• 웹 브라우저 윈도우: 이벤트 처리 지원
• Javascript
16
사파리파이어폭스

Javascript
17
https://www.w3schools.com/js/default.asp

18
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph
changed.";
}
</script>
</head>
<body>
<h2>JavaScript in Head</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

Document Object
• document.getElementById('demo').innerHTML =“Hello World”
• <p id="demo"></p>
• <div id="demo"></div>
19
https://www.w3schools.com/jsref/dom_obj_document.asp

CGI: Common Gateway Interface
• 입력에 따라 웹 페이지를 동적으로 생성
• 웹 페이지를 만들어주는 별도 프로세스(프로그램) 실행
• 문자열을 쉽게 다룰 수 있는 언어가 적합: perl, php, python
• 보안 취약, 리소스 과다 사용
20
웹브라우저 웹서버
요청(www.ABC.com/cgi.py)
응답(cgi.html)
HTTP
CGI
python cgi.py
cgi.html
refresh

21
<form method=“post” action=/bin/cgi_test.py>
id 번호: <input name=idnum><p>
이름: <input name=name><p>
좋아하는 색깔: <select name=color>
<option>red<option>green<option>blue
</select><p>
<input type=submit value=“전송”>
</form>
Client-Side (Front-End)
c:/http/bin/cgi_test.py
c:/http/index.html

22
#! /usr/local/bin/python
import cgi
print('content-type: text/htmlnn')
print('<html><head><title> python web
</title></head><body>')
print('<p><h2>CGI TEST 2</h2>')
data = cgi.FieldStorage()
id = data['idnum'].value
name = data['name'].value
color = data['color'].value
print('<p><b><font color=green>User Input
Value</font></b>')
print('<p>Your ID = <b><font color=red>' + id)
print('<p></b></font> Your Name = <b><font color=red>'
+ name)
print('<p></b></font> Your Favorite Color = <b><font
color=red>' + color)
print('</b></font><p><hr>')
print('</body></html>')
Server-Side (Back-End) cgi_test.py
cgi_test.py 프로그램이 만들어 주는
html 문서의 표시 결과
이름 없는
이 문서는 자동으로,
다시 웹 브라우저에게 전달 됨

24
request
response
b
a CGI
refreshing
web browser web server

웹에서 다음이 가능 ?
25
http://www.test.com/a.html
hello click
hello
web browser

26
<html>
<head>
<script language="javascript">
function displayText(textId)
{
document.getElementById('targetDiv').innerHTML =
document.getElementById(textId).value;
}
</script>
</head>
<body>
<form>
<input type="text" id="textFieId">
<input type="button" onclick="displayText('textFieId')" value="click">
</form>
<div id="targetDiv"></div>
</body>
</html>

Asynchronous JavaScript and XML
29
XMLHttpRequest

Ajax 예제
30
http://localhost/data.txt

31
<html>
<head>
<title>Ajax at work</title>
<script language = "javascript">
</script>
</head>
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}

32
<body>
<H1>Fetching data with Ajax</H1>
<form>
<input type = "button" value = "Display Message"
onclick = "getData('http://localhost/data.txt', 'targetDiv')">
</form>
<div id="targetDiv">
<p>The fetched data will go here.</p>
</div>
</body>
</html>

XML: eXtensible Markup Language
• 데이터를 설명하기 위한 언어 (나무 구조)
34
<?xml version="1.0" ?>
<name>gildong hong</name>
<first>gildong</first>
<last>hong</last>
https://www.w3schools.com/xml/

XML: eXtensible Markup Language
• 데이터를 설명하기 위한 언어 (나무 구조 - 루트는 하나)
35
<name>gildong hong</name>
<last>hong</last>
<name>
<last>hong</last>
</name>

XML family
• XML DOM
• XML XSLT
• XML DTD
• XML Schema
36
함수의 프로토타입 체크에 유용

JSON: JavaScript Object Notation
37
• XML 보다 용량이 적음
XML
JSON
https://www.w3schools.com/js/js_json_intro.asp

“웹페이지”에서 “웹서비스”로
• (개발자 입장에서는) 서비스 ~ 함수
38

프로그램 개발 (프로그래밍) 방법
• 구조적 개발 방법
• 객체지향 개발 방법; object oriented…
• 콤포넌트 기반 개발 방법; component-based development
• 서비스 지향 구조; service-oriented architecture
39
클래스, 동적 라이브러리, 플랫폼

동적라이브러리: Dynamic Link Lib.
40
a.exe b.dll
• dynamic link (함수) lib.

이것이 가능한가?
41
a.exe b.dll
객체
• dynamic link (객체) lib.

인터페이스: interface ~ public pure abstract class
42
a.exe b.dll
객체
• Component Object Model (windows)
• Remote Method Invocation (Java Virtual Machine)

콤포넌트
• platform dependent dynamic link object lib.
43

웹서비스
• platform independent dynamic link object lib.
• web ~ public, platform independent
• service ~ interface ~ function prototype
44

웹서비스 방식
• SOAP 방식
• REST 방식
45
http://www.example.com/addit?num1=1&num2=2

최근에는 개발 언어별, 콤포넌트 제공
46

Mashup
• OpenAPI
• 공개된 웹서비스를 융합하여 새로운 서비스를 만드는 것
47
www.programmableweb.com
http://www.housingmaps.com/
Google map + craiglist

48
<html>
<head><script>
function drawMap()
{
var default_Position = new google.maps.LatLng(36.14634739938817,128.393255457670);
var myOptions = {
zoom: 15,
center: default_Position,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
panControl: true,
zoomControl: true,
scaleControl: true,
streetViewControl: true
};
var map = new google.maps.Map(document.getElementById(“divMap"), myOptions);
google.maps.event.addListener(map, 'rightclick', function(event) { ... };
val level = map.getZoom();
map.SetZoom(level+1);
}
</script></head>
<boyd>
<div id=“divMap"></div>
</body>
</html>

OpenAPI
• OAuth
• google map
• Facebook, twitter
• Youtube, flickr
• Twilio
• EC2, S3
49

웹서비스 개발 플랫폼
• C#
• localhost.Service; [WebMethod]
• Java
• JAX-WS: SOAP Web Service
• JAX-RS: REST Web Service
• Python: Django
• djangorestframework
• Javascript
• Node.js express framework
50

Node.js
• 서버 사이드 Javascript 플랫폼
• Single Thread, 이벤트 기반
• HTTP Library (콤포넌트) 내장
• 웹서비스 제작에 활용
• 내장 HTTP Library로 별도 웹서버 구축 필요 없음
• Express Framework으로 웹서비스 제작 용이
51
https://www.w3schools.com/nodejs/nodejs_intro.asp

52
var http = require(“http”); // HTTP 모듈 로드
http.createServer(function(request, response){
/*
HTTP 헤더 전송
HTTP Status: 200 : OK
Content Type: text/plain
*/
response.writeHead(200, {'Content-Type': 'text/plain'});
/*
Response Body 를 "Hello World" 로 설정
*/
response.end("Hello Worldn");
}).listen(8081);
console.log("Server running at http://127.0.0.1:8081");
기본 예제

53
{
"first_user": {
"password": "first_pass",
"name": "abet"
},
"second_user":{
"password": "second_pass",
"name": "betty"
}
}
https://velopert.com/332
/data/user.json
Node.js Express 예제

54
module.exports = function(app, fs)
{
app.get('/',function(req, res) {
res.render(‘index.html’)
});
app.get('/list', function (req, res) {
fs.readFile( __dirname + "/../data/" + "user.json", 'utf8', function (err, data) {
console.log( data );
res.end( data );
});
})
app.get('/getUser/:username', function(req, res){
fs.readFile( __dirname + "/../data/user.json", 'utf8', function (err, data) {
var users = JSON.parse(data);
res.json(users[req.params.username]);
});
});
}
/router/main.js

기타
• MongoDB
• jQuery
• GoAhead
• 전자정부프레임워크
56

정리
• HTML, HTML5
• CSS, XSLT
• XML, JSON
• Javascript, Ajax
• Web Service, OpenAPI
• Node.js
57

웹개발자가 알아야할 기술

More Related Content

Similar to 웹개발자가 알아야할 기술

More from jaypi Ko

웹개발자가 알아야할 기술