잡다한 일상사 WebJoy.kr :: AJAX 강의 5-7장 - 자바스크립트 심화학습/객체지향(상

AJAX 강의 5-7장 - 자바스크립트 심화학습/객체지향(상

WEB/AJAX 2007/06/06 12:44 by 아쿠아바다

http://blog.naver.com/jinoxst/140021971146

Ajax is more of a technique rather than it is a specific technology.

지금까지의 Ajax 예제를 살펴보면 알겠지만 Ajax 는 전혀 새로운 기술이 아니다. 기존에 이미 존재해왔으나 잘 쓰이지 않았을 뿐이다. Ajax 를 사용한다는 것은 결국은 단순화 하자면 자바스크립트의 연장선으로 봐도 무방하다. 따라서 이번장에서는 자바스크립트의 좀더 심화된 주제를 소개해볼까 한다.

자바스크립트는 1995년 넷스케이프사의 Brendan Eich 가 고안했다. 처음에는 웹페이지를 작성하는 웹 디지이너가 편하게 일을 할 수 있도록 자바 애플릿을 구현해봤으나, 나중에는 프로그래밍 언어의 컴파일러와 전혀 상관없고 문법적으로도 매우 유연한 언어를 만들어야 겠다고 결심하게 된다.

자바스크립트는 썬에서 만든 자바와는 전혀 상관없는 스크립트 언어이지만 이름을 지을때 만큼은 시장에서 성공적인 가도를 달리고 있는 자바에 고무된 나머지 그 이름을 그냥 차용해 버렸다. 자바스크립트는 진입장벽이 높지 않고 페이지에서 페이지로 copy and past 가 워낙 쉬워서 아주 빠르게 확산되었다.

넷스케이프 자바스크립트를 능가했던 것은 아니었지만 MS 는 이와 비슷한 기능을 하는 VBScript 를 고안했다. 하지만 문법적으로는 VB 로직이 사용되었고 IE 에서만 사용할 수 있었다. 또한 MS 는 지금은 표준이 되어버린 ECMAScript, 다른 말로 JScript 라는 자바스크립트를 만들었다. 브라우저마다 자바스크립트의 구현은 당연히 달라질 수 밖에 없었다. 비록 문법적으로는 거의 동일했지만 브라우저 상호간에 같은 기능을 구현하기 위한 자바스크립트 코딩은 사실 거의 불가능했다.

넷스케이프가 MS와의 웹브라우저 경쟁에서 고배를 마셨던 이유중에, 지금은 결과론이 되어버렸지만, 1998년 넷스케이프는 자사 브라우저의 소스코드를 공개하였고 W3C 의 표준에 맞는 브라우저를 만들기 위해서 밑바닥부터 다시 만들기로 결정했다는 점과 이후 후속 모델이 너무 늦게 출시되었다는 점을 들 수 있다. 넷스케이프의 새로운 모델 출시가 늦어진 것은 다른 여러 원인이 있겠으나 큰 맥락에서 보자면 자충수가 아니었나 싶다. 이 시기는 MS IE5가 W3C 와 ECMAScript 표준을 잘 따르며 시장을 석권하고 있을 때였다. 모질라 진영에서는 2002년이 되어서야 비로소 넷스케이프의 오픈소스 첫 완성품 발표했다. 이시점이 중요하다. 이때야 비로소 새로 만들어지는 웹 브라우저들은 W3C 와 ECMAScript 의 표준을 준수하기 시작했다. IE 를 제외한 현존하는 모든 브라우저들(FireFox, Mozilla, Opera, Konquerer, Safari) 은 웹 표준을 아주 잘 따르고 있다. IE6 은 1998년의 IE5와 거의 변한것이 없을 정도로 세상의 모든 브라우저들에게 거만함을 보이고 있다.

자바스크립트는 상속을 지원한다. 하지만 다른 객체지향 언어의 클래스간 상속개념이 아닌 링크개념이라는 점이 차이가 있다. 링크개념이 무엇인가 하면 다음과 같다. 각각의 자바스크립트 객체는 prototype 이라는 내장 속성을 가지고 있다. prototype 속성은 다른 자바스크립트 객체의 레퍼런스를 기억하고 있다. 즉 자바스크립트에서의 상속은 prototype 속성을 이용해서 구현가능하다. 잠시 뒤에 살펴볼 예제를 보면 알겠지만 일반적인 객체지향 언어에서 상속이 is a 관계라면, 자바스크립트에서 상속은 prototype 을 이용한 has a 관계이다. (일반적인 객체지향 언어에서 is a 관계는 상속을 의미하고, has a 관계는 참조를 의미한다.)

<클래스 다어어그램>

위 그림을 보면 SportsCar 와 CementTruck 두 클래스는 Vehicle 클래스를 상속받고 있다. SportsCar 의 경우 curbWeigtInPounds(무게) 를 3000으로 재 설정했고 wheelCount(바퀴수) 는 부모의 성질인 4를 가지고 있을 것이다. 나머지 두 메소드인 refuel 및 mainTasks 는 재정의해서 사용하고 있다.

CementTruck 은 모든 멤버값을 재설정했으며, 모든 메소드 또한 재정의해서 사용하고 있다.

자바스크립트에서는 일반적인 객체지향 언어의 특징인 인터페이스나 추상클래스의 개념이 없다. 그러면 위 클래스 다이어그램에 맞는 소스코드를 살펴보자.

/* Constructor function for the Vehicle object */
function Vehicle() { }

/* Standard properties of a Vehicle */
Vehicle.prototype.wheelCount = 4;
Vehicle.prototype.curbWeightInPounds = 4000;

/* Function for refueling a Vehicle */
Vehicle.prototype.refuel = function() {
return "Refueling Vehicle with regular 87 octane gasoline";
}

/* Function for performing the main tasks of a Vehicle */
Vehicle.prototype.mainTasks = function() {
return "Driving to work, school, and the grocery store";
}

/* Constructor function for the SportsCar object */
function SportsCar() { }

/* SportsCar extends Vehicle */
SportsCar.prototype = new Vehicle();

/* SportsCar is lighter than Vehicle */
SportsCar.prototype.curbWeightInPounds = 3000;

/* SportsCar requires premium fuel */
SportsCar.prototype.refuel = function() {
return "Refueling SportsCar with premium 94 octane gasoline";
}

/* Function for performing the main tasks of a SportsCar */
SportsCar.prototype.mainTasks = function() {
return "Spirited driving, looking good, driving to the beach";
}

/* Constructor function for the CementTruck object */
function CementTruck() { }

/* CementTruck extends Vehicle */
CementTruck.prototype = new Vehicle();

/* CementTruck has 10 wheels and weighs 12,000 pounds*/
CementTruck.prototype.wheelCount = 10;
CementTruck.prototype.curbWeightInPounds = 12000;

/* CementTruck refuels with diesel fuel */
CementTruck.prototype.refuel = function() {
return "Refueling CementTruck with diesel fuel";
}

/* Function for performing the main tasks of a SportsCar */
CementTruck.prototype.mainTasks = function() {
return "Arrive at construction site, extend boom, deliver cement";
}

<inheritanceViaPrototype.js 의 전체 소스코드>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript Inheritance via Prototype</title>

function describe(vehicle) {
var description = "";
description = description + "Number of wheels: " + vehicle.wheelCount;
description = description + "\n\nCurb Weight: " + vehicle.curbWeightInPounds;
description = description + "\n\nRefueling Method: " + vehicle.refuel();
description = description + "\n\nMain Tasks: " + vehicle.mainTasks();
alert(description);
}

function createVehicle() {
var vehicle = new Vehicle();
describe(vehicle);
}

function createSportsCar() {
var sportsCar = new SportsCar();
describe(sportsCar);
}

function createCementTruck() {
var cementTruck = new CementTruck();
describe(cementTruck);
}
</script>
</head>

<body>
<h1>Examples of JavaScript Inheritance via the Prototype Method</h1>

<br/><br/>
<button onclick="createVehicle();">Create an instance of Vehicle</button>

<br/><br/>
<button onclick="createSportsCar();">Create an instance of SportsCar</button>

<br/><br/>
<button onclick="createCementTruck();">Create an instance of CementTruck</button>

</body>
</html>

<inheritanceViaPrototype.html 의 전체 소스 코드>

우선 inheritanceViaPrototype.js 파일에서 Vehicle 클래스를 정의하는 부분을 살펴보자.

function Vehicle() { }

=> 자바스크립트에서 클래스를 정의할 때 메소드처럼 정의한다.

Vehicle.prototype.wheelCount = 4;

=> 멤버에 값을 할당할때 prototype 속성을 이용한다.

Vehicle.prototype.refuel = function() {
return "Refueling Vehicle with regular 87 octane gasoline";
}

=> 메소드를 정의할때도 prototype 속성을 이용한다.

function SportsCar() { }

SportsCar.prototype = new Vehicle();

=> 부모 클래스를 상속받는 SportCar 의 경우 클래스 정의하는 부분은 Vehicle과 같으나 상속을 표현하는 부분은 prototype 속성을 이용하고 부모 클래스의 인스턴스를 생성해서 할당한다.

SportsCar.prototype.curbWeightInPounds = 3000;

=> 멤버의 값을 할당할때도 prototype 을 이용한다.

SportsCar.prototype.refuel = function() {
return "Refueling SportsCar with premium 94 octane gasoline";
}

=> 멤버 메소드를 재 정의할때도 prototype 을 이용한다.

위 코드를 보면 자바스크립트에서 상속이지만 prototype 속성을 이용한 참조방식으로 구현됨을 알 수있다.

위 inheritanceViaPrototype.html 를 웹서버에서 실행해보면 아래와 같은 결과를 확인 할 수 있다.

<inheritanceViaPrototype.html 을 실행한 화면>

<Create an instance of Vehicle 버튼을 눌렀을 때의 결과>

<Create an instance of SportsCar 버튼을 눌렀을 때의 결과>

<Create an instance of CementTruck 버튼을 눌렀을때의 결과>

'WEB > AJAX' 카테고리의 다른 글

AJAX 강의 5-9장 - 자바스크립트 심화학습/객체지향 (0)	2007/06/06
AJAX 강의 5-8장 - 자바스크립트 심화학습/객체지향 (0)	2007/06/06
AJAX 강의 5-7장 - 자바스크립트 심화학습/객체지향(상 (0)	2007/06/06
ASP.NET Spiced: AJAX (0)	2007/06/06
자바 개발자를 위한 Ajax: 동적 자바 애플리케이션 구현 (0)	2007/06/06
Yahoo! Ajax UI 가이드 라인 무료 공개 (0)	2007/06/06