 |
|
|
난이도 : 초급
Bruce Tate, President, RapidRed
2007 년 2 월 27 일
JavaScript는 프로그래밍 언어의 골칫거리로 취급을 받곤 합니다. 지극히 많은 개발 툴, HTML 페이지에 대한 복잡하고 일관성 없는 문서 객체 모델, 그리고 일관성 없는 브라우저 구현 등 때문입니다.하지만 JavaScript는 우리가 생각하는 그저 그런 장난감이 아닙니다. 이 글의 저자인 Bruce Tate가 JavaScript의 기능들을 설명합니다.
웹 개발자라면 한번쯤은 JavaScript를 욕한 적이 있을 것이다. 문서 객체 모델(DOM:Document Object Model)이라고 하는 복잡한 프로그래밍 모델, 구현 및 디버깅에 사용되는 형편없는 툴, 일관성 없는 브라우저 구현 때문에 JavaScript는 더욱 욕을 먹고 있다. 최근까지도 많은 개발자들은 기껏해야 필요악으로써, 최악의 경우에는 장난감으로 취급하고 있을 정도이다.
하지만 JavaScript는 중요성이 더해가고 있고, 웹 개발에 광범위하게 사용할 수 있는 스크립팅 언어이다. 일부 업계 리더들은 JavaScript를 새로운 시각으로 바라보고 있다. Asynchronous JavaScript and XML(Ajax) 같은 프로그래밍 기술로 인해 인터랙티브(interactive) 웹 페이지 구현이 가능해졌다. Apache Cocoon 같은 완전한 웹 개발 프레임웍은 JavaScript를 사용하고 있다. ActionScript라고 하는 JavaScript 파생물은 Macromedia의 Flash의 클라이언트 측 프레임웍이다. 그리고 JVM에서 실행되는 Rhino는 JavaScript를 주 스크립팅 언어로 사용한다. (참고자료).
Ajax 전문가인 나의 동료 Stuart Halloway는 "2011년이 되면, 현대적 애플리케이션을 개발하는데 필요한 기능을 갖춘 언어로 JavaScript를 선택하게 될 것이다."라고 말하고 있다. JavaScript 프로그램들은 비슷한 자바 프로그램들 보다 10배 정도 밀도가 있고, 또 그럴 만한 언어 기능들을 증명했다.
|
시리즈 소개
In the Crossing borders 시리즈에서는 Bruce Tate가 자바 프로그래머들이 다른 방식과 언어를 배울 수 있는 기회를 제공한다. 모든 개발 프로젝트에 자바만이 최고의 선택이었던 시절 이후 프로그래밍 세계는 변했다. 다른 프레임웍들도 자바 프레임웍이 걸어왔던 길을 걷고 있고, 다른 언어에서 배운 개념들도 자바 프로그래밍에 접목시킬 수 있다. Python (또는 Ruby 또는 Smalltalk) 코드는 자바 코딩 방식을 변화시킬 수 있다.
이 시리즈에서는 자바 개발과는 매우 다르지만, 적용할 수 있는 프로그래밍 개념과 기술을 소개한다. 어떤 경우, 이를 활용하기 위해서는 기술을 통합해야 한다. 또는, 이 개념들을 직접 적용할 수도 있을 것이다. 툴과 같은 경우, 다른 언어들과 프레임웍들이 자바 커뮤니티의 개발자, 프레임웍, 기본 방식들에 영향을 미칠 수 있는 개념만큼은 중요하지는 않다. | |
이 글에서는 매우 매력적인 JavaScript의 기능을 살펴보도록 하겠다.
- Higher-order functions. Higher-order function은 인자로서 함수들을 취하거나 함수를 리턴하는 함수이다. JavaScript 프로그래머들은 자바 언어가 할 수 없는 방식으로 함수들을 조작할 수 있다.
- Dynamic typing. 바인딩을 지연시켜서 보다 정확하고 유연한 JavaScript로 만든다.
- A flexible object model. JavaScript의 객체 모델은 일반적인 자바 클래스 기반의 객체 모델 대신, 프로토타입(prototypes)이라고 하는 상속에 대해 비교적 특이한 접근 방식을 사용한다.
여러분은 아마도 다른 Crossing borders 기술자료에서 설명한 동적 타이핑 모델(dynamic typing model), Higher-order function 형태의 함수 프로그래밍, 오픈 객체 모델(open object model)에 대해 알고 있을 것이다. 만일 여러분이 중요한 JavaScript 개발을 해본 적이 없다면, 이러한 기능들이 JavaScript 같은 "장난감" 언어가 아닌, Python, Lisp, Smalltalk, Haskell 같은 중요한 언어에 속한 기능이라고 생각할 것이다. 이제부터 이러한 개념들을 실제 코드 예제를 통해서 설명하도록 하겠다.
시작
JavaScript를 설치하기 위해 특별히 해야 할 일은 없다. 여러분의 브라우저에서 이 글을 읽는 것으로 충분하다. 이 글의 모든 프로그래밍 예제들은 대부분의 브라우저에서 실행된다. 나는 Firefox를 사용할 것이다.
나는 <script type='text/javascript'>와 </script>로 래핑된 임베디드 JavaScript가 있는 간단한 웹 페이지를 로딩하겠다. Listing 1은 "Hello, World" 텍스트를 디스플레이 한다.
Listing 1. Hello, world
<script type='text/javascript'>
alert('Hello, World.')
</script>
|
코드를 실행하려면, example1.html이라는 파일을 생성하고, Listing 1을 이 파일에 복사하고, 브라우저에 파일을 로딩하면 된다. (HTML 파일 예제는 다운로드 섹션을 참조하라.) 이 코드는 페이지를 재 로딩 할 때마다 즉시 실행된다.
alert은 매개변수로서 하나의 스트링을 갖고 있는 함수 호출이다. 그림 1은 Listing 1의 코드가 "Hello, World"라는 박스를 띄우는 모습이다. 이 코드가 HTML 바디로 되어 있다면(여러분은 어떤 바디도 설정하지 않았지만, 브라우저는 엉성한 HTML라도 감수하고, 기본적으로 이 모든 페이지들을 바디로서 취급한다.) 페이지가 로딩되면 JavaScript가 실행된다.
그림 1. Hello, world
실행을 지연해야 한다면, Listing 2와 같이 HTML <head> 엘리먼트에 JavaScript 함수를 선언할 수 있다.
Listing 2. 실행 지연
<head>
<script type='text/javascript'>
function hello() {
alert('Hello, World.')
}
</script>
</head>
<body>
<button onclick="hello();">Say Hello</button>
</body>
|
Listing 2의 코드를 HTML 파일에 입력하고, 브라우저에 파일을 로딩하고, Say Hello 버튼을 클릭하면, 그림 2와 같은 결과가 나온다.
그림 2. 실행 지연
Higher-order functions
Listing 2에서, 함수들을 조작하는 JavaScript이 기능을 보았다. 그 함수의 이름을 HTML button 태그로 전달하고, HTML의 빌트인 이벤트 모델을 활용한다. 나는 가끔씩 JavaScript를 사용하여, 변수 또는 어레이에 함수들을 저장한다. (아래 객체 모델(Object models) 섹션에서, JavaScript 객체 모델 전략이 이 기술을 사용하고 있는 것을 확인할 수 있다.) Listing 3을 보자.
Listing 3. 변수를 가진 함수 다루기
<head>
<script type='text/javascript'>
hot = function hot() {
alert('Sweat.')
}
cold = function cold() {
alert('Shiver.')
}
function swap() {
temp = hot
hot = cold
cold = temp
alert('Swapped.')
}
</script>
</head>
<body>
<button onclick="hot();">Hot</button>
<button onclick="cold();">Cold</button>
<button onclick="swap();">Swap</button>
</body>
|
함수들은 JavaScript의 퍼스트 클래스(first-class) 객체들이고, 이들을 자유롭게 조작할 수 있다. 우선, 나는 두 개의 함수를 선언한다. hot과 cold이다. 각각을 하나의 변수에 저장한다. Hot과 Cold 버튼을 클릭하면 해당 기능이 호출되며 경고를 발생한다. 그런 다음, 나는 Hot과 Cold 버튼의 값을 바꾸는 함수를 선언하면서, 이 함수를 제 3의 버튼에 붙이면 그림 3과 같은 경고가 디스플레이 된다.
그림 3. 함수 다루기
이 예제는, 다른 변수들을 다루듯이 함수를 취급할 수 있다는 것을 보여준다. C 개발자들은 이 개념을 함수 포인터(function pointer)로 생각하겠지만, JavaScript의 higher-order function의 개념은 훨씬 더 강력한 것이다. 이 기능을 사용하면 JavaScript 프로그래머는 액션 또는 함수들을 다른 변수 유형을 다루는 것만큼 쉽게 다룰 수 있다.
함수를 함수 인자로서 사용하거나, 함수를 값으로서 리턴하면, 추상화를 Higher-order function의 경지로 끌어올릴 수 있다. Listing 4는 Listing 3을 약간 수정한 것으로, 함수를 리턴하는 higher-order function을 보여준다.
Listing 4. Higher-order functions
<head>
<script type='text/javascript'>
function temperature() {
return current
}
hot = function hot() {
alert('Hot.')
}
cold = function cold() {
alert('Cold.')
}
current = hot
function swap() {
if(current == hot) {
current = cold
} else {
current = hot
}
}
</script>
</head>
<body>
<button onclick="funct = temperature()();">Temperature</button>
<button onclick="swap();">Swap</button>
</body>
|
이 예제는 일반적인 문제를 해결한다. 변하는 작동을 사용자 인터페이스 이벤트에 어떻게 붙일 것인가? Higher-order function을 사용하면 쉽게 해결할 수 있다. temperature higher-order function은 current 값을 리턴하는데, 여기에는 hot 또는 cold 함수가 있다. 이상하게 보이는 함수 호출을 살펴보도록 하자. 바로 temperature()()이다. 첫 번째 괄호는 temperature 함수를 호출한다. 두 번째 괄호는 temperature에 의해 리턴 되는 함수를 호출한다. 그림 4는 결과이다.
그림 4. Higher-order function
Higher-order function은 함수 프로그래밍의 기초가 되고, 거의 모든 사람들은 순수한 객체 지향 프로그래밍보다 고급 추상화를 나타낸다고 믿고 있다. 하지만, JavaScript의 장점은 Higher-order function이 전부가 아니다. JavaScript의 동적 타이핑(Dynamic Typing)도 UI 개발에 알맞다.
동적 타이핑(Dynamic typing)
정적 타이핑(static typing)의 경우, 컴파일러는 인자, 변수 또는 주어진 연산에 사용된 값에 대한 리턴 값들을 검사할 수 있다. 장점은 컴파일러가 추가 에러 체크도 할 수 있다는 것이다. 또한 정적 타이핑은 IDE 같은 툴에 대한 추가 정보도 제공하고, 더욱 나은 코드 완성 같은 특징을 갖고 있다. 하지만 정적 타이핑은 여러 가지 단점들도 있다.
- 의도(intention)를 일찍 선언해야 하기 때문에, 유연성이 떨어진다. 예를 들어, 자바 클래스를 변경하면 클래스의 유형을 변경해야 하고, 재 컴파일이 필요하다. 반대로, Ruby는 오픈 클래스를 허용하지만, 클래스를 변경하면 그 클래스의 유형도 변경해야 한다.
- 같은 생각을 표현하는 데에도 더 많은 코드를 입력해야 할 경우가 종종 있다. 예를 들어, 인자들을 가진 유형 정보를 포함시키고, 함수를 가진 값들을 리턴해야 하고, 모든 변수들을 타이핑 해야 한다. 또한, 모든 변수들을 선언해야 하고, 유형들 간 변환도 필요하다.
- 컴파일-전개 사이클은 비슷한 동적 언어의 개발 사이클 보다 길다. 가끔은 툴을 사용하여 이러한 문제들을 완화시킬 수 있지만 말이다.
정정적 타이핑은 미들웨어나 OS를 구현하는 언어에 알맞다. UI 개발은 더 나은 생산성과 유연성을 요하기 때문에 동적 타이핑이 선호된다. 물론, 위험 부담도 있다. JavaScript로 작업하는 웹 개발자들은 잘못된(mistyped) 변수 이름 때문에 골머리를 앓을 때가 있다. 하지만 장점도 만만치 않다. 두 가지 예제를 설명하겠다.
먼저, 하나의 객체를 생각해 보자. Listing 5에서, 나는 새로운 객체를 만들고, color라고 하는 존재하지 않는 애트리뷰트에 액세스 한다.
Listing 5. 애트리뷰트 가져오기
<script type='text/javascript'>
blank_object = new Object();
blank_object.color = 'blue'
alert('The color is ' + blank_object.color)
</script>
|
애플리케이션을 로딩하고 실행하면 그림 5와 같은 결과가 생긴다.
그림 5. 애트리뷰트 가져오기
JavaScript는 blue 애트리뷰트가 존재하지 않는다고 해서 불평하지 않는다. 정적 언어 옹호론자들이라면 무수한 에러 잠재력을 가진 이 예제를 보고 놀랄 것이다. 위험해 보일지라도, 그 매력을 거부할 수 없다. 우리는 애트리뷰트를 가져올 수 있다. 이 예제를 이 글의 이전 예제들과 결합하여 작동을 가져올 수도 있다. 변수에는 함수가 포함될 수 있다는 것을 기억하라. Dynamic Typing과 Higher-order function에 기반하여 임의의 작동을 언제라도 클래스로 가져올 수 있다.
Listing 5를 Listing 6과 같이 쉽게 다시 작성할 수 있다.
Listing 6. 작동 가져오기
<script type='text/javascript'>
blank_object = new Object();
blank_object.color = function() { return 'blue'}
alert('The color is ' + blank_object.color())
</script>
|
얼마나 빨리 JavaScript로 개념들을 변경할 수 있는지를 보고 있다. 데이터에 대한 작동을 가져오는 것과 마찬가지로, 의미를 변경하고 신택스를 아주 조금 변경하면 된다. 이것은 강점도 되고 가장 큰 약점도 된다. 사실, 이 언어 자체의 객체 모델은 JavaScript의 강점을 보여주는 하나의 예에 불과하다.
객체 모델(Object model)
지금쯤이면, 여러분은 JavaScript가 장난감 그 이상이라는 것을 깨달아가고 있어야 한다. 사실 많은 사람들이 이 객체 모델을 사용하여 복잡하고, 잘 디자인 된, 객체 지향 소프트웨어를 만들고 있다. 하지만, 이러한 객체 모델은(특히 상속의 경우) 익숙한 것이 아니다.
자바 언어는 클래스 기반이다. 애플리케이션들을 구현할 때, 모든 객체들을 위한 템플릿으로서 새로운 클래스를 구현한다. 그런 다음, new를 호출하여 새로운 템플릿을 인스턴스로 만들면서 새로운 객체를 만든다. JavaScript에서, 여러분은 프로토타입을 만드는데, 이것은 모든 미래의 객체들을 만드는 인스턴스이다.
추상적인 설명은 집어치우고, 실제 코드를 보여주도록 하겠다. Listing 7은 name이라는 애트리뷰트와 speak 액션을 가진 Animal을 만든다. 그리고 나서 다른 동물들은 이 베이스(base)에서 상속을 받을 것이다.
Listing 7. 컨스트럭터 만들기
<script type='text/javascript'>
function Animal() {
this.name = "nobody"
this.speak = function () {
return "Who am I?"
}
}
myAnimal = new Animal();
alert('The animal named ' + myAnimal.name +
' says ' + myAnimal.speak());
</script>
|
Listing 7은 그림 6과 같은 모습으로 나타난다.
그림 6. 컨스트럭터 구현하기
자바 개발자에게 Listing 7의 코드는 예측이 불가능하고 이상해 보인다. 고유의 객체들을 구현하지 않는 대부분의 JavaScript 개발자들에게도 이 코드는 예측 불가능하고 이상해 보인다. 나는 이 그림에 어느 정도의 정상성을 부여해야 할 것이다.
세 조각의 정보가 필요하다. 첫 번째로, JavaScript는 객체들을 중첩된 함수들로서 나타낸다. Listing 7의 Animal의 정의가 유효한 신택스라는 것을 의미한다. 두 번째, JavaScript는 객체 구조를 프로토타입 또는 기존의 객체 인스턴스에 의존한다. 클래스 템플릿이 아닌. funct()는 호출이지만, new Animal()은 Animal의 프로토타입에 기반하여 객체를 구현한다. 마지막으로, JavaScript에서 객체들은 단순히 함수와 변수들의 컬렉션이다. 어떤 유형도 객체와 제휴되지 않으므로 이 구조를 자유롭게 수정할 수 있다.
Listing 7로 다시 돌아가보자. JavaScript가 Animal에서 지정한 프로토타입에 기반하여 새로운 객체인 myAnimal을 정의하는 것을 볼 수 있다. 여러분의 프로토타입에서 애트리뷰트와 함수들을 사용하거나, 함수나 애트리뷰트를 재정의 할 수 있다. 이러한 작동에 익숙하지 않은 자바 개발자들에게 이러한 유연성은 해가 될 수 있지만, 매우 강력한 모델이다.
prototype이라는 인스턴스 변수를 사용하여 당신이 사용한 객체의 껍데기(basis)를 선언 할 수 있다. prototype 인스턴스 변수를 설정하여 상속 체인에서 부모를 가리키도록 할 것이다. prototype을 설정하면, 여러분이 생성한 객체들은 애트리뷰트와 함수들을 상속할 것이다. 이러한 방식으로, 상속의 객체 지향 개념을 시뮬레이트 할 수 있다. Listing 8을 보자.
Listing 8. 상속
<script type='text/javascript'>
Animal = function() {
this.name = "nobody"
this.speak = function () {
return "Who am I?"
}
}
Dog = function() {
this.speak = function() {
return "Woof!"
}
}
Dog.prototype = new Animal();
myAnimal = new Dog();
alert('The animal named ' + myAnimal.name +
' says ' + myAnimal.speak());
</script>
|
Listing 8에서, Dog 프로토타입을 만든다. 그 프로토타입은 Animal에 기반하고 있다. Dog는 speak() 메소드를 재 정의하지만, name() 메소드에 대해서는 어떤 것도 수행하지 않는다. 그런 다음, Dog의 프로토타입을 Animal로 설정한다. 그림 7은 결과 모습이다.
그림 7. 프로토타입과 상속
다음은 JavaScript가 애트리뷰트나 메소드에 대한 레퍼런스를 해결하는 방법이다.
- JavaScript는 생성자(Constructor)에 정의된, 원래 프로토타입에 기반하여 인스턴스를 만든다. 여러분이 참조하는 메소드나 애트리뷰트는 여러분이 생성한 원래 카피를 사용할 것이다.
- 객체에서 변수들을 다른 변수들처럼 재정의 할 수 있다. 이렇게 해서, 객체를 변경할 수 있다. 따라서, 여러분이 분명하게 정의한 애트리뷰트나 함수들은 원래 프로토타입에서 정의된 것들 보다 우위를 차지한다.
prototype이라고 하는 인스턴스 변수를 설정하면, JavaScript는 정의되지 않은 인스턴스 변수나 애트리뷰트에 대한 인스턴스를 보게 될 것이다. 검색은 반복적이다.prototype에서 정의된 인스턴스가 애트리뷰트나 함수를 찾을 수 없다면 이것의 프로토타입을 볼 것이다.
그렇다면 JavaScript의 상속 모델은 무엇인가? 이 모든 것은 여러분이 정의하는 방식에 의존한다. 여러분은 상속 작동을 정의하여 이를 오버라이드 할 수 있다. JavaScript는 객체 지향 언어보다는 함수적이고, 똑똑한 신택스와 의미를 사용하여 매우 복잡한 작동들을 시뮬레이트 한다. 객체 모델은 매우 유연하고 개방적이며 매우 강력하다. 누군가는 이것이 너무 유연하다고 말한다. 각자의 작업에 알맞은 올바른 툴을 사용해야 한다.
Wrap up
JavaScript 객체 모델은 Dojo 같은 거대한 라이브러리를 지원하는 언어 기능들을 기반으로 구현된다. (참고자료) 이러한 유연성 덕택에 각 프레임웍이 섬세한 방식으로 객체 모델을 변경할 수 있다. 어떤 면에서는 이러한 유형의 유연성이 큰 약점이다. 상호운용성 문제를 떠올리면 쉽게 이해된다. (언어의 유연성으로 이러한 문제가 완화되기도 하지만 말이다.)
또 다른 관점에서 볼 때, 유연성은 대단한 축복이 될 수도 있다. 자바 언어는 복잡함이 문제였다. 기본 객체 모델은 확장될 수 있을 정도로 유연하지 않다. Aspect 지향 프로그래밍, Spring 프로그래밍 프레임웍, 바이트코드 강화 라이브러리 같은 대단한 오픈 소스 프로젝트는 엔터프라이즈 개발자들이 자바 언어를 성공적으로 다루기 위해서 배워야 할 것들이다.
JavaScript의 유연성 덕택에 higher-order 언어의 힘을 맛볼 수 있었다. 모든 프로젝트에서 이를 선택할 수 없다. 정확한 정보에 기반하여 언어의 강점과 단점을 파악하면 더욱 잘 핸들할 수 있다. JavaScript 웹 위젯을 다룰 수 있을 정도라면 언어의 힘을 충분히 활용하는 것이다. 다음 시간을 기대해주기 바란다.
기사의 원문보기
다운로드 하십시오
| 설명 |
이름 |
크기 |
다운로드 방식 |
| Sample HTML files for this article |
j-cb12196.zip |
3KB |
HTTP |
참고자료 교육
토론
필자소개
|
|
|
|
Bruce Tate는 베스트 셀러인 Jolt winner Better, Faster, Lighter Java의 저자이다. 최근에는 From Java to Ruby와 Rails: Up and Running를 출간했다. IBM에서 13년 동안 근무했으며, 자바와 Ruby on Rails에 기반한 경량 개발 전략과 아키텍트를 전문적으로 다루는 RapidRed를 창립했다. 현재 그는 WellGood LLC의 CTO이다. |
출처 : IBM developerWorks |
