160525: 50회차

Programming 2016. 5. 25. 11:20

종료하기 전 티스토리 네이버 로그아웃 할 것

1. 툴

동일

추가시:

2. 폴더

동일

추가시:

3. 사용할 사이트

동일

추가시:

4. 공부하는 것

50일 기념

나의 행복인것

1+1 입니다

[04] HTML5 Graphics

1. Canvas
- 태그를 이용하여 그릴수 있는 그래픽 기능 지원.

- 기준 좌표: 화면 좌표계를 사용함, 좌측 상단이 0,0

- <canvas>는 웹 페이지에 실시간으로 그래픽을 그리는 데 사용됨

1024 X 768의 경우

0,0

+----------------------+

| |

+----------------------+ 1023, 767

>>>>>> canvas.html

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

Your browser does not support the HTML5 canvas tag.

</canvas>

</body>

</html>

- javascript와 같이 사용한 <canvas>

- fillRect() :채워진 사각형

>>>>> canvas1.html

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

Your browser does not support the HTML5 canvas tag.

</canvas>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

</script>

</body>

</html>

- moveTo(x,y) 시작되는 지점

- lineTo(x,y) 끝나는 지점

- stroke() 선그리기

>>>>>>>> canvas2.html

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

Your browser does not support the HTML5 canvas tag.</canvas>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

</script>

</body>

</html>

- arc(x,y,r,start,stop)

- 선을 이용해서 원을 그리기 위해서 stroke(), fill() 메소드를 호출함

>>>>>>> canvas3.html

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

Your browser does not support the HTML5 canvas tag.</canvas>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

</script>

</body>

</html>

- canvas에 글자 그리기

- fillText(text,x,y) - 채워진 글자그리기

- strokeText(text,x,y) - 채워지지 않은 글자 그리기

>>>>>>>> canvas4.html

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

Your browser does not support the HTML5 canvas tag.</canvas>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);

//ctx.strokeText("Hello World",10,50);

</script>

</body>

</html>

- 그라디언트의 두 가지 종류가 있습니다 :

- createLinearGradient (X, Y, X1, Y1)는 - 선형 그라데이션

- createRadialGradient (X, Y, R, X1, Y1, R1은) - 방사형 / 원형의 그라데이션

>>>>>> canvas5.html

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

Your browser does not support the HTML5 canvas tag.</canvas>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

// Create gradient

//var grd=ctx.createLinearGradient(0,0,200,0);

var grd = ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Fill with gradient

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

</script>

</body>

</html>

- canvas에 이미지 그리기

- drawImage(image,x,y)

>>>>>> canvas6.html

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<p>Image to use:</p>

<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>

Your browser does not support the HTML5 canvas tag.</canvas>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var img=document.getElementById("scream");

ctx.drawImage(img,10,10);

</script>

</body>

</html>

2. SVG

1) Circle, Ractangle

>>>>> circle.html

<!DOCTYPE html>

<html>

<body>

<circle cx="50" cy="50" r="40"

stroke="green" stroke-width="4" fill="yellow" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

>>>>> rectangle.html

<!DOCTYPE html>

<html>

<body>

<rect width="400" height="100"

style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

2) Rounded Rectangle, Star

>>>>> rounded.html

<!DOCTYPE html>

<html>

<body>

<rect x="50" y="20" rx="20" ry="20" width="150" height="150"

style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

>>>>> star.html

<!DOCTYPE html>

<html>

<body>

<polygon points="100,10 40,198 190,78 10,78 160,198"

style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

3) SVG Logo

>>>>> svglog.html

<!DOCTYPE html>

<html>

<body>

<defs>

<stop offset="0%"

style="stop-color:rgb(255,255,0);stop-opacity:1" />

<stop offset="100%"

style="stop-color:rgb(255,0,0);stop-opacity:1" />

</linearGradient>

</defs>

<text fill="#ffffff" font-size="45" font-family="Verdana"

x="50" y="86">SVG</text>

Sorry, your browser does not support inline SVG.

</svg>

</body>

</html>

[HTML5] HTMLCanvasElement.getContext()

유영창

http://forum.falinux.com/zbxe/index.php?document_srl=552532

2011.06.16 16:13:13 (*.138.143.120)

28808

HTMLCanvasElement.getContext()

설명

CANVAS 에 그리기 대상이 되는 컨텍스트를 얻는다.

형태

HTMLCanvasElement.getContext(in DOMString contextId);

인수

DOMString contextId

얻어올 컨텍스트 객체를 구별하는 ID 문자열

현재는 "2d" 만을 지원한다.

반환

저장된 컨텍스트 ID에 해당하는 컨텍스트 객체를 반환한다.

컨텍스트 ID 에 "2d" 를 지정하면 Canvas RenderingContext2D를 반환한다.

예제

<html>

<head>

function draw() {

var canvas = document.getElementById("canvas");

if (canvas.getContext) {

var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(200,0,0)";

ctx.fillRect (10, 10, 55, 50);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";

ctx.fillRect (30, 30, 55, 50);

}

</script>

</head>

</body>

</html>

결과

출처: http://forum.falinux.com/zbxe/index.php?document_srl=552532&mid=lecture_tip

[05] HTML5 APIs - Geolocation

1. Geolocation

- HTML5 지오 로케이션 API는 사용자의 지리적 위치를 얻기 위해 사용

- 사용자가 승인하지 않는 한 위치는 사용할 수 없음

- 사용자의 위치를 얻을 수있는 getCurrentPosition () 메서드를 사용

- 사용자의 위치의 위도와 경도를 반환하는 예제

>>>>>>>>>> geolocation.html

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<p id="demo">Click the button to get your coordinates:</p>

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>

- getCurrentPosition () 메서드의 두 번째 매개 변수는 오류를 처리하는 데 사용

- 이 사용자의 위치를 확인하는 데 실패하면 실행하는 기능을 지정

>>>>>>>>>> geolocation2.html

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<p id="demo">Click the button to get your coordinates:</p>

var x=document.getElementById("demo");

function getLocation()

{

if (navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(showPosition,showError);

}

else{x.innerHTML="Geolocation is not supported by this browser.";}

}

function showPosition(position)

{

x.innerHTML="Latitude: " + position.coords.latitude +

"<br>Longitude: " + position.coords.longitude;

}

function showError(error)

{

switch(error.code)

{

case error.PERMISSION_DENIED:

x.innerHTML="사용자가 지리적 위치에게 허용하지 않았다."

break;

case error.POSITION_UNAVAILABLE:

x.innerHTML="위치 정보를 사용할 수 없습니다."

break;

case error.TIMEOUT:

x.innerHTML="작업 시간이 초과되었습니다."

break;

case error.UNKNOWN_ERROR:

x.innerHTML="An unknown error occurred."

break;

}

</script>

</body>

</html>

- 구글 맵의 위치를 표시하는 리턴 위도 및 경도 데이터를 사용

>>>>>>> geolocation3.html

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<p id="demo">Click the button to get your position:</p>

var x=document.getElementById("demo");

function getLocation()

{

if (navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(showPosition,showError);

}

else{x.innerHTML="Geolocation is not supported by this browser.";}

}

function showPosition(position)

{

var latlon=position.coords.latitude+","+position.coords.longitude;

var img_url="http://maps.googleapis.com/maps/api/staticmap?center="

+latlon+"&zoom=14&size=400x300&sensor=false";

document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";

}

function showError(error)

{

switch(error.code)

{

case error.PERMISSION_DENIED:

x.innerHTML="사용자가 지리적 위치에게 허용하지 않았다"

break;

case error.POSITION_UNAVAILABLE:

x.innerHTML="위치 정보를 사용할 수 없습니다."

break;

case error.TIMEOUT:

x.innerHTML="작업 시간이 초과되었습니다 "

break;

case error.UNKNOWN_ERROR:

x.innerHTML="An unknown error occurred."

break;

}

</script>

</body>

</html>

>>>>> geolocation4.html

<!DOCTYPE html>

<html>

<body>

<p id="demo">Click the button to get your position.</p>

var x = document.getElementById("demo");

function getLocation() {

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showPosition, showError);

} else {

x.innerHTML = "Geolocation is not supported by this browser.";

}

function showPosition(position) {

lat = position.coords.latitude;

lon = position.coords.longitude;

latlon = new google.maps.LatLng(lat, lon)

mapholder = document.getElementById('mapholder')

mapholder.style.height = '250px';

mapholder.style.width = '500px';

var myOptions = {

center:latlon,zoom:14,

mapTypeId:google.maps.MapTypeId.ROADMAP,

mapTypeControl:false,

navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}

}

var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);

var marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"});

}

function showError(error) {

switch(error.code) {

case error.PERMISSION_DENIED:

x.innerHTML="사용자가 지리적 위치에게 허용하지 않았다"

break;

case error.POSITION_UNAVAILABLE:

x.innerHTML="위치 정보를 사용할 수 없습니다."

break;

case error.TIMEOUT:

x.innerHTML="작업 시간이 초과되었습니다 "

break;

case error.UNKNOWN_ERROR:

x.innerHTML="An unknown error occurred."

break;

}

</script>

</body>

</html>

[06] HTML5 APIs - Drag and Drop

1. Drag and Drop

- HTML5에서 드래그 앤 드롭은 표준의 일부이며, 모든 요소를 드래그 함

- <img draggable="true"> : 드래그할 요소 설정

- ondragstart() 드래그 시작되는 시점에서 이벤트 함수를 호출.

- dataTransfer.setData () 드래그 된 데이터의 값을 저장

- 'ondragover' 이벤트는 끌기가 된 데이터를 놓을 장소 지정.

- 기본적으로 데이터/요소는 다른 요소에 놓여질 수 없다. 놓기를 가능하게 하기 위해서는

반드시 요소의 기본 핸들링을 막아야 한다.

- 이는 'ondragover' 이벤트를 위해 'event.preventDefault()' 메소드를 호출함으로써 가능하게 된다.

- 끌어진 데이터가 놓여질 때, 'drop' 이벤트가 발생.

>>>>>>>>>> dragdrop1.html

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}

</style>

function allowDrop(ev)

{

ev.preventDefault();

}

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

function drop(ev)

{

ev.preventDefault();//끌어서 놓기를 위해서 호출하는 메소드

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

</script>

</head>

<body>

<p>Drag the W3Schools image into the rectangle:</p>

<br>

</body>

</html>

>>>>>>>>>>> dragdrop2.html

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<style>

#div1, #div2

{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}

</style>

function allowDrop(ev)

{

ev.preventDefault();

}

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

function drop(ev)

{

ev.preventDefault(); //끌어서 놓기 위해서 호출하는 메소드

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

</script>

</head>

<body>

</body>

</html>

drag&drop은 event 설정 되어져 있는 부분을 활용해 볼 것

[07] HTML5 APIs - Web Storage

1. Web Storage

1) 쿠키의 단점

- Client 영역에 데이터를 저장할 수 있으나 그 크기는 4KB로 한정됨.

- 같은 사이트에서 2개 이상의 탭을 열었을 때 트랜잭션을 추적하기 어려움.

- 보안 문제를 일으키기 쉬움.

2). 쿠키와의 차이점

- 저장 용량이 도메인당 5MB가 됨.

- 로컬 스토리지와 세션 스토리지로 나누어짐.

3) 스토리지 종류: 세션 스토리지

- 세션이 연결되어 있는 동안만 데이터를 기억하고 있다가 탭이나 창을 닫으면

모두 지워버림.

- 데이터 저장

sessionStorage.setItem(key, value);

예) sessionStorage.setItem(1, '문자열 테스트입니다.');

- 데이터 추출

var item = sessionStorage.getItem(key);

예) var item = sessionStorage.getItem(1);

alert(item);

- 데이터 삭제

var item = sessionStorage.removeItem(key);

- 모든 데이터의 삭제

sessionStorage.clear();

4) 스토리지 종류: 로컬 스토리지

- 브러우저를 닫아도 데이터가 저장되어있음.

- 데이터 저장

localStorage.setItem(key, value);

예) localStorage.setItem(1, '문자열 테스트입니다.');

- 데이터 추출

var item = localStorage.getItem(key);

예) var item = localStorage.getItem(1);

alert(item);

- 데이터 삭제

var item = localStorage.removeItem(key);

- 모든 데이터의 삭제

localStorage.clear();

5) Storage Event

- 스토리지 영역이 바뀔때마다 발생하는 이벤트.

- clear() 메소드가 호출되면 key, oldValue, newValue 속성이 null로 설정됨.

- storageArea: 어떤 스토리지인지 알려줌(세션인지, 로컬인지)

- key: 변경된 키.

- oldValue: 키의 이전 값.

- newValue: 키의 새로운 값.

- url: 키가 변경된 페이지의 URL.

>>>>>>>>>>> storage.html

<!DOCTYPE html>

<html>

<head>

<style>

body{

background-color:#2B2B2B;

color: white;

font-family: Lucida Grande;

}

h2, h3 {

color: #F5F5F5;

}

#displaysession, #displaylocal {

padding:5px;

border:1px solid #FFC;

margin:10px;

width:350px;

height:auto;

}

a, a:hover, a:visited{

text-decoration: none;

color: white;

font-weight: bold;

}

#session_storage_info{

padding-top: 5px;

padding-bottom: 5px;

margin-bottom:10px;

border-bottom: 2px dotted white;

}

</style>

window.onload = function(){

loadvalues();

};

function loadvalues(){

getthestuffSession(); //세션 스토리지 데이터 가져오기

getthestuffLocal(); //로컬 스토리지 데이터 가져오기

}

function savethestuffSession(){

var lala = document.getElementById("first"); //해당 id 요소 가져오기

var thevalue = lala.value; //값 가져오기

sessionStorage.setItem(1, thevalue); //키 1에 해당하는 값 저장하기

getthestuffSession(); //값 가져와서 화면에 보여주는 함수

}

function getthestuffSession(){

var data;

var thediv = document.getElementById("displaysession"); //해당 id 요소 가져오기

data = sessionStorage.getItem(1); //키가 1인 값 가져오기

if (data){ //값이 있으면

thediv.innerHTML = "저장된 값:" + data; // innerHTML 수정해서 문장 안에 그 값을 보여주기

}

function savethestuffLocal(){

var lala = document.getElementById("second");

var thevalue = lala.value;

localStorage.setItem(1, thevalue);

getthestuffLocal();

}

function getthestuffLocal(){

var data;

var thediv = document.getElementById("displaylocal");

data = localStorage.getItem(1);

if (data){

thediv.innerHTML = "저장된 값:"+data;

}

addEventListener('storage', function(e){

var lala = document.getElementById('sample');

if (e.oldValue){

alert('changed from \''+e.oldValue+'\' to \''+e.newValue+'\'');

}

}, false);

</script>

</head>

<body>

<h2>세션 스토리지(Session Storage)</h2>

<h2>로컬 스토리지(Local Storage)</h2>

</body>

</html>

[08] HTML5 APIs - Web Worker

1. Web Worker

- 웹 워커는 자바스크립트 코드를 UI 쓰레드와는 별도인 백그라운드에서 수행될 수 있도록 하는 표준적인 방법을 제공

- 매우 복잡한 수학적 계산 작업

- 원격지에 있는 리소스에 대한 액세스 작업(또는 로컬 스토로지를 액세스 하는 경우)

- 백그라운드에서 조용히(?) 오랜시간 작업해야 하는 경우

- UI 쓰레드에 방해 없이 지속적으로 수행해야 하는 작업.

- 브라우저의 웹 워커 지원 유/무 체크

if(!!window.Worker){

alert("이 브라우저는 웹 워커를 지원합니다")

}

else{

alert("이 브라우저는 웹 워커를 지원하지 않습니다")

}

- Web Workers 개념도

<단일 스레드 작업예>

- HTML 파일을 웹 브라우저(데스크 탑 사파리)에서 실행하면 약 10초 이 후 완료 메시지가 나타남.

- 대기 시간 10초 동안 브라우저에서 다른 작업을 할 수 없음

- 브라우저를 움직일 수도 없고 텍스트 상자에 글을 입력할 수도 없음.

- 10초 후 메시지가 나타난 이후부터 다른 작업을 할 수 있음

>>>>>>>>> notworker.html

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<head>

function sleep(milliSeconds){

var startTime = new Date().getTime();

while (new Date().getTime() < startTime + milliSeconds);

}

function callNotWorker(){

sleep(10000); //10초 동안 대기 시킨다

alert("10초 후");

}

</script>

</head>

<body>

<br>

</body>

</html>

<Worker 객체 사용예)

- worker.js 파일을 기반으로 Worker 객체를 생성하고 postMessage 메서드를 통해 워커로 메시지를 전달.

- onmessage 이벤트를 정의하여 워커로 부터 전달되는 메시지를 받음.

- 워커의 작업을 중지시키려면 terminate 메서드를 호출.

- 10초라는 대기 시간 동안에도 브라우저를 움직이거나 텍스트 상자에 글을 입력할 수 있음.

- 두 작업이 동시에 처리되는 병렬작업이 가능

>>>>>>>>>>> worker.html

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

var worker;

function callWorker(){

if(!!window.Worker){ //브라우저가 웹 워커를 지원하는지 검사한다

if(worker) worker.terminate(); //워커가 이미 존재하면 종료시킨다

worker = new Worker("worker.js"); //새로운 워커(객체)를 생성한다

worker.onmessage = function(event){ //워커로부터 전달되는 메시지를 받는다

alert(event.data);

};

worker.postMessage("워커야! 깨어나라!"); //워커에게 메시지를 전달한다

}

else{

alert("현재 브라우저는 웹 워커를 지원하지 않습니다")

}

function stopWorker(){

if(worker){

worker.terminate();

alert("워커 작업이 중지되었습니다");

}

</script>

</head>

<body>

<br>

</body>

</html>

>>>>>>>>>>>> worker.js

onmessage = function(event){

var receiveData = event.data;

sleep(10000);

//워커를 호출한 곳으로 결과 메시지를 전송한다

var sendData = receiveData + "OK~ I'm Worker"

postMessage(sendData)

}

function sleep(milliSeconds){

var startTime = new Date().getTime(); // get the current time

while (new Date().getTime() < startTime + milliSeconds); // hog cpu

}

[21][Spring] STS 다운로드 및 설치, Spring Framework 특징, Spring Framework 주요 모듈

[01] STS(Spring Tool Suite)
   - http://spring.io/tools/sts
   - 스프링 개발 지원, 메이븐등의 플러그인 내장으로 Controller 개발 지원 편리.
   - 개발 라이브러리 자동 지원.

1. 다운로드 및 설치
   http://spring.io/tools/sts

   spring-tool-suite-3.7.3.RELEASE-e4.5.2-win32-x86_64.zip spring/ sts 폴더에 다운 받아서 여기서 압축풀기로 품

  설치 폴더 :  javadb/spring/sts/
  작업 폴더 : javadb/spring/workspace/
  Maven  폴더 : C:/Users/blue/.m2/repository(자동생성)

2. 스프링 프레임워크 특징

- 경량 컨테이너로서 자바 객체를 직접 관리한다. 각각의 객체 생성, 소멸과

같은 라이프 사이클을 관리하며 스프링으로부터 필요한 객체를 얻어올 수 있다.

- 스프링은 POJO(Plain Old Java Object) 방식의 프레임워크이다.

일반적인 J2EE 프레임워크에 비해 구현을 위해 특정한 인터페이스를 구현하거나

상속을 받을 필요가 없어 기존에 존재하는 라이브러리 등을 지원하기에 용이하고

객체가 가볍다.

- 스프링은 제어 반전(IoC : Inversion of Control)을 지원한다.

컨트롤의 제어권이 사용자가 아니라 프레임워크에 있어서 필요에 따라 스프링에서

사용자의 코드를 호출한다.

- 스프링은 의존성 주입(DI : Dependency Injection)을 지원한다.

각각의 계층이나 서비스들 간에 의존성이 존재할 경우 프레임워크가 서로 연결시켜준다.

- 스프링은 관점 지향 프로그래밍(AOP : Aspect-Oriented Programming)을 지원한다.

따라서 트랜잭션이나 로깅, 보안과 같이 여러 모듈에서 공통적으로 사용하는 기능의 경우

해당 기능을 분리하여 관리할 수 있다.

- 스프링은 영속성과 관련된 다양한 서비스를 지원한다.

iBatis나 Hibernate 등 이미 완성도가 높은 데이터베이스 처리 라이브러리와

연결할 수 있는 인터페이스를 제공한다.

- 스프링은 확장성이 높다. 스프링 프레임워크에 통합하기 위해 간단하게 기존 라이브러리를

감싸는 정도로 스프링에서 사용이 가능하기 때문에 수많은 라이브러리가 이미 스프링에서

지원되고 있고 스프링에서 사용되는 라이브러리를 별도로 분리하기도 용이하다.

3. 스프링 주요 모듈

제어 반전 컨테이너

제어 반전(IoC: Inversion of Control) 컨테이너는 스프링의 가장 중요하고 핵심적인 기능으로서

자바의 반영(reflection)을 이용해서 객체의 생명주기를 관리하고 의존성 주입(Dependency Injection)을

통해 각 계층이나 서비스들간의 의존성을 맞춰준다.

이러한 기능들은 주로 환경설정을 담당하는 XML 파일에 의해 설정되고 수행된다.

관점 지향 프로그래밍 프레임워크

스프링은 로깅이나 보안, 트랜잭션 등 핵심적인 비즈니스 로직과 관련이 없으나 여러 곳에서 공통적으로

쓰이는 기능들을 분리하여 개발하고 실행 시에 서로 조합할 수 있는 관점 지향 프로그래밍(AOP)을 지원한다.

기존에 널리 사용되고 있는 강력한 관점 지향 프로그래밍 프레임워크인 AspectJ도 내부적으로 사용할 수 있으며,

스프링 자체적으로 지원하는 실행시(Runtime)에 조합하는 방식도 지원한다.

데이터 액세스 프레임워크

스프링은 데이터베이스에 접속하고 자료를 저장 및 읽어오기 위한 여러 가지 유명한 라이브러리,

즉 JDBC, iBatis(MyBatis), Hibernate 등에 대한 지원 기능을 제공하여 데이터베이스 프로그램밍을

쉽게 사용할 수 있다.

트랜잭션 관리 프레임워크

스프링은 추상화된 트랜잭션 관리를 지원하며 XML 설정파일 등을 이용한 선언적인 방식 및 프로그래밍을

통한 방식을 모두 지원한다.

모델-뷰-컨트롤러 패턴

스프링은 웹 프로그램밍 개발 시 거의 표준적인 방식인 Spring MVC라 불리는 모델-뷰-컨트롤러(MVC)

패턴을 사용한다. DispatcherServlet이 Contoller 역할을 담당하여 각종 요청을 적절한 서비스에

분산시켜주며 이를 각 서비스들이 처리를 하여 결과를 생성하고 그 결과는 다양한 형식의 View 서비스들로

화면에 표시될 수 있다.

성 명 : 관리자 | 조회수 : 289 | 등록일 : 2015-10-13 19:47:49.0

파 일 :

URL1 :

URL2 :

요거

5. 수업

진도:

hw:

6. 할것

canvas & svg

http://devsw.tistory.com/109

지오로케이션

https://developer.mozilla.org/ko/docs/WebAPI/Using_geolocation

'Programming' 카테고리의 다른 글

160527: 52회차 (0)	2016.05.27
160526: 51회차 (0)	2016.05.26
160524: 49회차 (0)	2016.05.24
160523: 48회차 (0)	2016.05.23
160520: 47회차 (0)	2016.05.20

Posted by ＤＡＶＩＤ

PC

160525: 50회차

[HTML5] HTMLCanvasElement.getContext()

'Programming' 카테고리의 다른 글

티스토리툴바