lecture Home > .NET > JavaScript OOP

JavaScript OOP Programming

   강좌 최초 작성일 : 2007년 07월 31일
   강좌 최종 수정일 : 2007년 08월 03일

   강좌 읽음 수 : 회

   작성자 : 히딩크(정 석모)
   편집자 : Taeyo(김 태영)

   강좌 제목 : JavaScript OOP 스트레칭

강좌 전 필자의 잡담>

이번 강좌는 태오닷넷에서 활동 중인 Micosoft MVP 인 정석모님의 강좌입니다.
정석모님은 최근 Ajax Design Patterns란 책을 번역하여 출간하기도 하셨구요.
태오 사이트의 Talk 게시판 시삽이기도 하십니다.
특유의 개그적인 문체가 특허출원 중인 이 친구의 재미난 강좌에 한번 빠져보세요~

이 강좌의 순서

객체지향 자바스크립트 프로그래밍
    (1) 스트레칭
    (2) 코어 자바스크립트 객체와 prototype를 사용한 객체 확장
    (3) 사용자 정의 객체. 그리고 상속과 재사용
    (4) 나만의 프레임워크 만들기
스트레칭

안녕하세요. 식사들 하셨습니까!

자바스크립트 객체지향 프로그래밍의 강좌를 진행 할 MVP 정석모(히딩크) 인사 드립니다.
앞으로 잘 부탁 드리며, 보듬어 주시고 땅겨 주시고 아껴주시기 바랍니다.

일단 큰 박수 주세요!!

여러분은 자바스크립트를 어떻게 생각하고 계십니까? 명동 거리에서 웹 개발자 3분께 물어봤습니다.

윤종대 : 몰라.. 그거 뭐야.. 무서워. 디자이너가 하는 거 아냐?
사성민 : 필요한 소스 찾아서 긁어다 붙이면 되죠.
김대리 : 흥미는 있지만 따로 공부할 시간이 없습니다.

혹시 같은 생각을 가지고 계신 분이 계신가요? 그렇다면 매우 잘 오셨습니다. 웰~컴~

요즘은 흔히 말하는 웹2.0 시대입니다(하지만 사람들은 벌써부터 웹3.0을 말하고 있죠). 과거에는 응용 프로그램으로만 가능할거라고 당연하게 여겨져 왔던 '텍스트 편집기', '슬라이더', '데이터 그리드' 같은 위젯(widget)들이 브라우저에서 구동되고 있습니다. 또한, 각종 포털에서는 웹에서 사용할 수 있는 'Open API'를 제공하고 있으며, 개발자들은 그 API를 사용하여 여러 가지 기발한 매쉬업을 만들어 내고 있습니다. 물론 그 근간에는 'Ajax'라는 멋진 친구가 힘을 실어주고 있습니다.

(이쯤에서 멋진 매쉬업 하나 추천 합니다 : http://www.xwire.co.kr/)

자바스크립트를 사용하지 않고서는 HTML 객체들을 원하는 대로 제어할 수 없으며, 위에서 소개한 Ajax 웹 어플리케이션을 만들어낼 수도 없습니다. 팻(Fat) 클라이언트 환경에서는 긁어다 붙이는 자바스크립트의 한계가 분명하게 드러나게 될 겁니다. 이제 자바스크립트는 더이상 귀찮고 짜증나는 애물단지가 아닙니다. 자바스크립트 공부에 시간을 투자하는 것을 절대 아깝고 창피하다고 생각하지 마세요. 자바스크립트는 그만한 가치가 있으며 여러분에게 무언가를 제대로 되돌려 줄 것이니까요. 되돌려 받을 그 무엇인가는 여러분이 스스로 깨닫게 될 것입니다.

객체지향 자바스크립트 프로그래밍을 공부함으로써, 자바스크립트에 대한 이해도가 향상되고 제대로 알고 사용할 수 있게 될 것입니다. 더불어 브라우저상의 모든 요소(Element)들을 객체로 인식하며 자유자재로 제어하고 있는 자신의 모습을 발견하게 될 것입니다. 물론 더 이상 코드를 긁어다 붙이지 않겠죠.

이번 시간에는 본격적인 강좌를 시작하기 전에 자바스크립트에 대한 몇 가지를 같이 살펴보겠습니다. 준비운동쯤으로 생각하시면 될겁니다. 그래서 이번 강좌의 제목도 "스트레칭" 입니다.

자 그럼 신나는 동네로 떠나 볼까요? 기사양반 출발!

도대체 객체지향은 뭔데??
  • OOP(Object Oriented Programming) :
    객체(Object)를 바라보는(Oriented) 프로그래밍(Programming)
  • 모든 것을 객체라는 단위로 표현하여, 객체들의 상호작용을 구현하는 프로그래밍하는 기법
  • 복잡성을 줄여주고 유지보수가 용이하며 재사용성이 뛰어나다.
  • 객체지향에 대한 자세한 내용은 http://ko.wikipedia.org/wiki/OOP를 참조 하세요.


JAVASCRIPT DIGEST

1. 자바 = 자바스크립트?

"자바스크립트는 JAVA에서 파생된 자식뻘의 스크립트다?"

"자바"는 썬 마이크로 시스템즈에서 만든 완벽한 객체지향 프로그래밍 언어이며, "자바스크립트"는 넷스케이프(Netscape)에서 만든 인터프리터형 프로그래밍 스크립트 입니다. 자바스크립트의 원래 이름은 "라이브 스크립트(Live Script)"로 지어졌지만 마케팅 측면을 고려해서 당시 유행하던 자바의 이름을 본 따서 "자바스크립트"로 개명되었습니다. 물론 자바라는 이름을 쓰기 위해서 썬 마이크로 시스템즈와의 제휴를 맺었습니다. 마케팅 측면에서 "자바"라는 이름이 들어간 것이지, 자바 프로그래머를 위해 파생된 스크립트가 아닙니다.

그렇다면 왜 자바와 자바스크립트의 구문이 매우 유사한 것일까?

두 가지 모두 C언어에서 기반했기 때문에 구문상 유사한 점이 매우 많습니다. 대표적인 것 중 하나가 접근자 "." 입니다. 구분은 유사하지만 두 가지는 완전히 다른 언어입니다.

2. 자바스크립트와 J스크립트, 그리고 ECMA 스크립트

마이크로소프트는 넷스케이프의 자바스크립트에 맞불을 놓고자 J스크립트라는 제품을 발표하였습니다. 과거의 J스크립트는 마이크로소프트가 독자적으로 내놓은 기술이기 때문에 자바스크립트와 "완벽하게" 호환되지는 않았었습니다. 이 후 ECMA(http://www.ecma-international.org/)에서는 혼란을 막고자 ECMA 스크립트라는 표준을 제정했습니다. 자바스크립트와 J스크립트는 ECMA 스크립트와의 호환을 목표로 계속해서 발전하고 있는 중 입니다.

우리가 Ajax를 공부하면서 가장 많이 상담을 하는 녀석이 "XMLHttpRequest" 객체 입니다. 여러분은 이 녀석의 인스턴스를 생성하기 위해서 사용되는 팩토리 함수들을 많이 보셨을 겁니다. IE6 이하 버젼에서는 "XMLHttpRequest"의 인스턴스를 생성하기 위해 넷스케이프 브라우저와 호환되지 않는 다른 형태의 코드를 사용했었기 때문입니다. 하지만, IE7 부터는 넷스케이프 브라우저(Firefox, Safari)와 호환이 되는 "new XMLHttpRequest()"를 제공하기 시작 했으며(http://msdn2.microsoft.com/en-us/library/ms535874.aspx), ECMA 표준을 따르게 되었습니다. 이렇듯 두 진영은 표준을 준수하는 호환을 위해 노력하고 있으며 나중에는 완벽에 가까운 호환을 지원할 것입니다.

3. 브라우저 호환성

과거에는 우리나라의 시장을 IE가 장악하고 있었기 때문에 오로지 IE만을 위한 자바스크립트 코드를 개발해 왔었습니다. 하지만, Firefox가 인기몰이를 하면서 Firefox 사용자들의 불만이 커졌습니다. 기존의 자바스크립트 코드가 Firefox에서 완벽하게 구동될 리가 만무하기 때문입니다. 대부분의 포털들마저도 IE만을 위한 자바스크립트 코드를 사용하고 있었으니까요(물론 지금은 많이 좋아졌습니다).

"브라우저 호환성"에 대해 논하는 것은 안타까운 일입니다. 가장 큰 책임은 벤더들에 있기는 하지만, 다른 브라우저를 고려하지 않은 우리 개발자들에게도 책임이 있습니다. 벤더들만을 탓하고 앉아있을 여유가 없습니다. 우리의 손으로 호환 가능한 자바스크립트를 작성해야 합니다. 그것이 번거롭다고 해도 말이죠.

IE와 Firefox에서 잘 작동하는 팩토리 함수 예제
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11		 
function getXMLHttpRequest() {

  try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}     //IE6  
  try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}  //IE5.5
  try { return new XMLHttpRequest(  ); } catch(e) {}                          //IE7, Firefox  

  alert("XMLHttpRequest를 지원하지 않는 브라우저입니다.");

  return null;

}


4. XHTML에서의 자바스크립트

1) 자바스크립트 코드를 CDATA 섹션에 포함시키기

인라인 자바스크립트 코드는 항상 <script> 태그 안에 기술하게 되며, XHTML 해석기가 <script> 태그를 해석할 때 자바스크립트 코드로 인한 오류를 발생시킬 확률이 매우 큽니다. 이러한 오류를 방지하는 방법은 자바스크립트 코드를 CDATA 섹션과 주석으로 묶어버리는 겁니다. 다음과 같이 말이죠.

 1
 2
 3
 4
 5
 6
 7
 8
 9		 
<script type="text/javascript">					                  
//<![[CDATA[

  var s = "안녕하세요!";
  alert(s);

//]]>
</script>


2) 요구 응답형 자바스크립트 사용하기

CDATA 섹션으로 자바스크립트를 묶는 것도 좋은 방법이지만, <script>의 src 속성을 사용해서 외부 자바스크립트 파일을 요구 응답형 자바스크립트로 사용하는 것이 더 좋은 방법입니다. XHTML 규칙을 지킴과 동시에 유지보수와 관리에 대한 이점도 살릴 수 있는 방법입니다. 강추 합니다.

 1
<script type="text/javascript" src="myJS.js"></script>


5. 0, -0, null, "", false, NaN, undefined는 false이며, 나머지는 몽땅 true다!

저게 무엇을 말하는 것일까요? 자바스크립트의 타입검사가 엄격하지 않으며 유연성 있게 값이 전환된다는 것을 반증하는 말입니다. 따라서, if 문으로 변수의 값을 평가하는 것은 변수 이름만 명시를 하면 간단하게 끝나게 됩니다. 하지만! 절대 간과해서는 안되는 것이 테스트 입니다. 철저한 테스트를 거쳐야 하며, null이나 undefined 값을 만났을 때의 상황을 철저하게 미리 예측을 해야 합니다. 힘들게 작성한 프로그램이 전혀 예상치 못한 오류를 발생시키면 무척이나 울적할 테니까요.

6. 자바스크립트는 관대하다

개발자에게 자바스크립트는 타입의 선언이 필요 없으며 타입간의 전환이 유연한 자유로움입니다. 변수를 선언할 때 타입을 선언 할 필요가 전혀 없으며, 실행 시점에 타입이 결정됩니다. 하지만 서로 다른 타입의 변수끼리의 할당은 유의해야 합니다. 적절한 변환(Casting)을 적용함으로써 오류를 줄이는 것이 개발자의 몫입니다. 자유로움에는 항상 책임이 따르니까요.




요약

오늘은 자바스크립트에 대해서 간략하게 알아보았습니다. 다음시간부터는 객체지향 자바스크립트에 대해서 본격적으로 공부해 보도록 하겠습니다.

그럼! 채널 고정!

강좌 목록으로..