* 개인적으로 이해하고 사용하는 부분을 정리하며 개인적인 견해를 담은 내용이므로. 학술 적으로 정확하지 않을 수 있습니다. 혹여 이 곳의 내용을 보고 사용 하실 때는 그저 참고 용도 정도로만 사용 하시는 것을 추천 드립니다
-야매 플머-
JavaScript 클래스 생성하여 사용하기. JavaScript를 이용해서 작업하면서, 코드의 재사용성이 필요한 부분들에 대한, 코드 클래스화가 필요하다고 느낀적이 매우 많습니다. 이미 진행되어서 서비스 되고 있는 경우, 업계에서 일하시는 분들은 아시겠지만.. 시간을 내서 그 코드들을 수정한다는 것은 매우 어려운 (틀별한 사유가 아닌이상... 거의 불가능) 일이라 생각됩니다.
JavaScript는 대부분 동적인 웹 서비스를 위해서 많이 사용되고 있는데, 웹의 코드나 요즘 유행하고 있는 웹 기반 SNG 들의 스크립트를 까보면, 당혹 스러운 경우를 자주 만나게 됩니다. 말그대로.. 막코딩.. 하드코딩.. 인 경우가 많습니다. ( 물론 엄청나게 잘 정리 되어 있는 코드들도 아주 아주 많습니다.) 이유는 모르겠습니다만.. 웹 쪽 개발 인력의 프로그램을 만들 때 신경을 깊이 안쓰고 대략 만드는 경유가 많은 것 같습니다 ( 실력이 없어서 그리 만들리는 없을꺼라 생각합니다.. 아마도 이쪽 특성상 짧은 기간에 완성을 해야하는 경우가 대부분이다 보니 프로그래머 로서 가장 싫은 방식으로 작업을 하는경우가 많은 것 같습니다.) 여튼..요즘 웹이든 SNG든 하루이틀 서비스하거나 1회용으로 쓰고 버리는 것이 아니라면, 조금은 신경을 쓰고 만들어야 할 것 같습니다.
위와 같은 의미에서 JavaScript를 이용하여 class를 구성하고 기능별로 구분하여 조금은 더 관리하기 용의하게 만든다면, 웹 어플리케이션의 수명은 상당히 늘어 날 것이라고 생각합니다. 그렇다면 JavaScript에서 class는 어떤 방식으로 이용하는지 한번 보겠습니다.
우선은 혼돈을 줄이기 위해 먼저 인지 해야 할 부분이 있는데 JS에는 Class라는 것은 없습니다. 이 부분을 왜 기록을 하느냐 하면은, 일반적으로 C++, 또는 Java 프로그래밍 등의 경험이 있으신 분들은 Class라는 녀석을 명시적으로 정의하고, 인스턴스화(객체화) 하여 사용하셨을 겁니다.
그 과정에서 Calss와 Instances 의 구분이 명확하게 되어, 흔히 설명을 할때 Class는 설계도, Instances는 실제 사용하는 부품 정도로 이야기를 하기도 합니다.
그런데 JS는 이런 명시적인 구분이 없습니다.(적어도 제가 생각하기에는.. 명시적인 구분은 없습니다.) 다만 논리적인 개념은 있습니다.(제 생각일 뿐입니다 @_@) 이게 무슨 소리인고.. 하니.. JS의 특성 때문입니다. 흔히 JS를 공부할때 도서 초입부에 또는 JS의 정의에 대해서 설명 된 인터넷 포스팅 글을 볼때 항상 나오는 항목입니다만 Prototype 기반의 언어다 라는 이야기.. 일반적으로 이것이 의미하는 것을 그저 그렇구나 하고 스쳐지나 갑니다. 하지만 이런 내용이야 말로 이 언어가 어떤 특성을 가진 언어며.. 어떻게 사용해야 하는지에 대해 그 특성을 가장 잘 말해주는 녀석이 아닌가 생각됩니다.
여튼 Prototpye 기반의 언어라는게 왜 그러느냐... 이 녀석은 애초에 객체라는 녀석을 기반으로 작동 된다는 것입니다. 그러니까 우리가 일반적으로 프로그래밍을 배울때 배웠던 클래스를 기반으로해 객체를 생성하는 것과 달리, 객체 자체를 복제하여 사용하는 방식으로 객체를 추가 한다는 이야기죠.. 이 녀석은... function던.. value던.. 일단 코드상에 선언을 한 순간 이것이 하나의 객체요. 곧 클래스가 될 수 있는 녀석이라는 겁니다.
그렇습니다. 결국 JS라는 녀석은 모든 것을 하나의 객체로 인식하고, 객체는 자기 자신을 복제하여 마치 클래스에서 인스턴스화 시켜 객체들을 뽑아내는 것처럼 사용 할 수 있다는 이야기죠. 이 이야기는 무슨 소리인고.. 하니, 기존의 고정관념이나 양식에 따라 Class라는 것을 구성할 필요 없이 function 이던 value의 구성요소를 우리가 기존에 사용하던 클래스를 이용하든 그 것들 안에 구성요소를 넣어주면 끝이라는 이야기 입니다.
(사실 JS라는 녀석이 전통적은 프로그램 언어들의 방식과는 근본적인 철학 자체가 차이가 있고, 일반적으로 전통적인 언어를 접했던 개발자들은 Prototype 방식의 언어에 익숙하지 않거나, 싫어하는 경우가 많아서 생각보다는 사용하는데 연구나 노력이 적은 것은 아닐까 소심하게 생각해봅니다...)
그럼 이전에 우리가 다른 언어에서 클래스를 구성할때 클래스의 구성요소들이 뭐뭐가 들어가 있었는지 한번 생각해봅니다.. 일단 가장 기본적인 형태로 본다면, 맴버 변수들과 맴머 메소드가 있습니다.
뭐 OOP를 구현하는데, OOP라 할 수 있는 여러 까다로운 조건.. 등을 프로그래밍 공부를 할때 우리는 배웠습니다만.. 일단 저는 야매 프로그래머고 말 그대로 객체 지향적으로 프로그램 제작이 가능하다면 그 OOP라고 생각하는 고로, 맴버 변수, 맴버 메소드를 이용 할 수 있다면 OOP 조건은 일단 되지 않나 생각합니다. 그럼 JS에서는 어떤 어떻게 사용 할 수 있을 것인가. 보도록 하겠습니다.
1. JS의 특이한..1회용 객체.(말표현을 어떻게 해야 할지 모르겠습니다.. 엄밀히 말하면 1회용은 아니구요...참.. 이걸 뭐라고 설명해야 할지.. )
요거이 좀 특이한 케이스를 먼저 보려고 합니다. 사실 이 케이스는 제가 생각해도 클래스는 개념은 아닌 듯 합니다. 왜냐 하면.. 이 케이스의 경우 객체를 복사할경우 서로다른 객체로 정상적으로 사용 할 수 는 없습니다. ( 정확히 말하자면 이녀석도 어떻게 구성하냐에 따라 복제해서 서로 다른 객체로 인식하게 하여 사용 할 수는 있습니다만.. 그닥 효율적이진 않은 것 같습니다.)
이 형태의 종류는 흠.. 제 나름대로의 생각으로는 마치 즉석 떡뽂기 같은 녀석이라고 생각합니다. 즉석에서 사용해야하는 다양한 메소드를 가지고 있고, 프로그램에서 공통적으로 사용해야 하는 것.. 예를들어..에러 로그를 찍어본다던지.. 통계용 로그 기록을 해야하는 뭐 그런 것들을 다 포함하면서도.. 뭐 그럴까요.. 이녀석은 선언해 놓고 나면 별도의 new 명령등으로 초기화가 없이도 바로 쓸 수 있는 점등 보면.. 그렇습니다. 대략 형태는 이렇습니다.
ex) var vender = function() {}; //네.. 하나의 객체를 즉석에서 사용 할 수 있도록 었습니다.
//이 상태는 말그대로 하나의 텅텅빈.. 객체가 하나 생성 된 것이죠. 이 녀석에다가 사용할 다양할
//메소드를 넣습니다.
vender.buy = function(item){ 내용내용 }
// 이렇게 만들고 나면 vender.buy라는 메소드가 생기고, 바로 호출하여 사용 할 수 있습니다.
// 이런 부분 때문에 즉석 떡뽁기 같은 녀석이라 이야기 한 것입니다.
그럼 이렇게 생성된 vender 라는 녀석 결국에는 객체이니 저거 new vender() 로 객체를 복사하면 클래스랑 똑같이 쓸 수 있는 것 아니냐! 라고 하실 수 있는데.. 사실 그거 맞습니다. 어떻게 보면 처음 선언에서 var vender = function(){}; 이라고 하는 녀석은 하나의 생성자 같은 녀석이라 볼 수도 있습니다. 하지만.., vender.buy 라고 하는 녀석은 생성된 객체 vender 라고 하는 녀석이 가지는 buy는 객체이므로.. new vender() 했을 경우 복제되는 객체는 텅텅 비어 있는 vender 뿐입니다.
뭔가 좀 복잡한데요.. 쉽게 보자면 var vender 라고 하는 객체와 .vender.buy라는 객체는 다른 것 이다라고 생각하면 좀 편할 것 같습니다. 그리고 이런 형태로 생성된 객체는 new vender() 과정 없이 프로그램내에서 바로 사용할 수 있으며, 프로그램 중간 중간에 필요한 메소드를 추가해 넣어 사용 할 수 있습니다. 사용하기에 따라 편할 수 도 복잡해 질 수도 있는 녀석입니다.
'야매 개발실 > Web' 카테고리의 다른 글
약간 기묘한 언어 JavaScript... (0) | 2012.02.28 |
---|---|
JavaScript 찔끔 찔금 정리..(1) (0) | 2012.02.28 |
CSS 다양한 브라우저에 대응하기(2) (0) | 2012.02.21 |
CSS 다양한 브라우저에 대응하기(1) (0) | 2012.02.20 |
CSS사용 방식의 특징들.. (0) | 2012.02.20 |