SW 개발이 좋은 사람

자바스크립트(JS)의 객체 지향 프로그래밍은

기존의 객체 지향 언어들과는 조금 다르면서 재미 있게 제공되고 있다.

자바스크립트의 객체 지향 프로그래밍에 대한 간단한 설명은 많지만

실제적인 사용법에 대한 설명은 없는 것 같아서

개인적으로 최근에 재미있게 본 NicEdit를 대상으로

자바스크립트의 객체 지향 프로그래밍에 대한 정리를 하였다.

2015년에 ECMAScript 6에서 class란 개념을 소개하여

현재는 쉽게 사용할 수 있지만,

과거 방식도 알아두면 자바 스크립트 사용에 대한 이해에 도움이 되기에 정리한다.

NicEdit는 웹 에디터로 좋은 웹 에디터는 아니다.

상용 제품이나 다른 오픈소스(CKEditor 등)에 비해 기능도 많지 않고,

HTML 5 를 준수하지도 않는다.

JS에서 제공되는 Document 객체의 execCommand 메서드를 이용하여

단순 기능 위주로 구현되어 있다.

그러나, 지금까지 본 수 많은 JS 오픈소스 코드 중

NicEdit가 코드 양이 가장 적으면서

JS 객체 지향 프로그래밍 특성을 가장 잘 반영한 프로그램으로 생각한다.

더욱이 코드를 살펴보면,

제법 괜찮은 JS 프레임워크라는 걸 알 수 있다.

또, 코드 작성 (명명 규칙 등)도 잘 되어 있어

별도의 문서(주석) 없이도 이해할 수 있다.

그래서, 모든 코드를 정리할 수 없지만

JS 객체 지향 프로그래밍 응용 관련된 부분과

알아두면 유용하게 사용할 수 있는 몇 가지 기능 위주로 정리하였다.

이 글은 개념 위주로 작성했기 때문에 자세한 자료는 찾아봐야 한다.

이 글을 읽기 전에

JS 객체 지향 프로그래밍에 전혀 모른다면

관련 자료를 찾아서 기본 내용 정도는 이해하고 읽어야 한다.

최소한 JSon, 함수, 내부함수(inner function),

클래스, Prototype 등은 알아야 한다.

여기서는 이에 대해 설명하지 않는다.

먼저, NicEdit 웹 사이트에서 소스를 다운로드 받아야 한다.

소스는 압축 파일 형태로 제공되고,

압축을 해제하면 예제와 에디터 소스(nicEdit.js)가 제공된다.

실행 데모는 다운 받은 파일을 실행해도 되고,

웹 사이트에서 데모 페이지를 확인해도 된다.

소스는 압축(minimize, Compressor)되어 있어

상세한 내용을 알아보기 힘든 구조로 되어 있다.

그렇지만 에디터 소스(nicEdit.js)를 적절한 편집기로 열어보면

22 개의 클래스가 있는 것을 알 수 있다.

이 소스를 적당한 방법으로 압축을 해제한다.

여기서는 웹사이트(http://jsbeautifier.org/)를 이용했다.

소스의 내용을 복사해서 사이트에 넣고 실행해주면 간단하게 변환할 수 있다.

다운로드 받을 때,

다운로드 페이지의 하단에 있는 "Uncompressed NicEdit for development"

설정을 체크하고 다운 받으면 압축되지 않은 소스를 받을 수 있다.

(http://jsbeautifier.org/ 사용법을 기록으로 남기려고...)

이렇게 해서  가려진 12개의 클래스를 확인할 수 있다.

소스를 변환해서

한 줄씩 코드를 확인해도 되고,

다음 그림과 같이 Eclipse에서 Outline으로

전체 구조를 한 눈에 확인 할 수 있다.

NicEdit의 본격적인 클래스 구조에 대해

알기 전에 기본적인 라이브러리 구조에 대해 알아야 한다.

웹 에디터는 동적으로 HTML 태그를 생성하기 때문에

관련된 많은 기능들이 필요하다.

웹 에디터는 라이브러리 형태로 제공되기 때문에

사용자(개발자)가 에디터로 사용할 Div나 TextArea를 지정하면

HTML 문서 작성을 위해

편집 기능을 제공하는 버튼,

옵션을 설정하기 위한 팝업 등의 컴포넌트(HTML)을

동적으로 만들어서 제공하게 된다.

자주 사용하는 기능들을 모아서 라이브러리 형태로 구성해 두었는데

NicEdit에서는 bk로 시작하는 클래스(함수 - bkLib, bkEvent 등) 들을 의미한다.

이러한 기능은 JQuery와 비슷한 방식으로 만들어졌고

제공하는 기능이나 사용법도 비슷하다.

다시 말하면, 빠르고 쉬운 개발을 위해서는

JQuery와 같은 프레임워크가 필요한데

자체적인 제품에 외부의 JQuery를 쓰는 것이 바람직하지 않아서

유사한 기능들을 미리 제작해 놓은 것이라 할 수 있다.

NicEdit의 기본 라이브러리를 잘 익혀서

자체적으로 다른 S/W를 개발할 경우 사용하면 유용할 것이다.

34개의 클래스들이 많아 보이지만

라이브러리, 에디터, 플러그인 클래스의

3개의 그룹으로 나누어 정리할 수 있고,

먼저 라이브러리에 대하여 정리한다.

라이브러리에서 가장 먼저 확인되는 클래스는 bkExtend이다.

JS는 클래스를 함수로 이용하여 사용하기 때문에 혼동할 수 있는데

bkExtend는 클래스라기 보다는

개체의 속성(변수와 함수)을 복사하는 함수에 가깝다.

bkClass는 bkExtend와 prototype으로

클래스 상속 메서드(extend)를 구현한 것이다.

다른 언어에서 클래스 상속이란

부모의 속성을 자식이 물려 받는 것이고,로

JS는 클래스 속성을 복사(또는 클래스 둘을 합친다)하는 개념으로 사용한다.

JS는 상속의 개념이 없기 때문에

복사 개념(extend)을 이용하여 흉내 낸 것으로 볼 수 있다.

JQuery의 extend와 비슷하다.

bkClass의 두 가지 기능 중 하나가 이상에서 언급한 상속(extend)이고

나머지 하나는 생성자(construct) 이다.

JS는 클래스가 없기 때문에 생성자도 없다.

하지만 클래스가 생성될 때 여러가지 처리를 해야 할 필요가 있다 (생성자).

따라서, NicEdit는 extend 메서드를 호출할 때를

생성자가 실행되는 시점으로 보고 construct 함수를 호출한다.

다음 코드에서 보듯이 빈 construct 함수를 생성하고

extend 에서 호출한다.

이 내용을 복사해서 가진 클래스(자식, 예: nicEditor)에서는

construct에 필요한 내용(코드)를 추가하여,

생성자처럼 사용하는 것이다.

bkClass.extend가 실행되면

해당 클래스의 생성자가(construct) 실행되고,

해당 클래스(함수)내에 있는 변수와 함수가 복사 되게 된다.

클래스 상속(복사)과 같은 일이 발생한다.

따라서, bkClass가 가장 상위의 클래스 같은 역할을 하게 된다.

이 글에서는 상속 받는다는 표현(bkClass.extend)을 사용할 것이다.

BkClass에서 상속받은 (var bkElement = bkClass.extend(...) )

bkElement는 NicEdit에서

동적으로 생성하는 클래스(버튼, 판넬 등 HTML 태그)들을 감싸는 클래스이다.

예로, 버튼(button)에 CSS를 적용할 경우 addStyle이라는 함수를 만들고

그냥 addStyle를 호출할 경우 addStyle(해당버튼, 스타일값)으로 지정해야 한다.

이렇게 사용하는 것을 구조화 프로그래밍이라고 한다.

그렇지 않고

해당버튼.addStyle(스타일값)

이렇게 클래스의 메서드로 사용하면

객체지향 프로그래밍 방식으로 개발한다고 할 수 있다.

bkElement는 많이 사용하는 함수들을 메서드로 가지고 있어

해당 HTML 태그에서 자유롭게 사용할 수 있게 한다.

bkElement의 주요 메서드는

이벤트 추가(addEvent), CSS 클래스 추가(addClass) / 삭제(removeClass),

CSS 속성 지정(setStyle), HTML 속성 지정(setAttributes) 등으로

모두 HTML 태그 지정에 유용한 것들로 구성되어 있다.

구체적으로 살펴보면,

bkElement의 addEvent는 실제로는 bkLib의 addEvent를 호출한다.

bkLib의 addEvent를 클래스 내에서 편리하게 사용하기 위해

bkElement의 메서드로 구성한 것이다.

그렇지 않은 클래스나 함수에서는

bkLib.addEvent()를 호출하여 사용하면 된다.

어떤 방식이 좋다고 말하기 어렵고,

객체 지향과 구조화 프로그램의 차이라고 정리할 뿐이다.

bkElemen의 사용 예를 확인해 보면 다음과 같다.

bkElement 파라메터로 DIV가 주어지는데

bkElement는 bkClass에서 상속 받았기 때문에

생성자(construct)가 실행된다.

bkElement의 생성자에서는 주어진 파라메터를

document의 createElement를 이용하여 생성한다.

즉, 위 코드는 HTML DIV 태그를 생성하고,

bkElement로 포장해서(WRAP- $BK) 반환한다.

bkElement에서 제공되는 메서드로 스타일(setStyle)을 지정하고

B 클래스 다음 위치(appendBefore)에 배치하게 된다.

(JQuery-insertBefore와 매우 유사하게 사용한다. )

위 코드를 일반 JS 코드로 구현하면 다음과 같다.

(실제로는 조금 더 복잡하게 처리 해야 한다.)

bkLib는 많이 사용되는 함수의 묶음 클래스로 볼 수 있다.

자바의 Static 클래스처럼 bkLib.메서드()로 호출해서 사용한다.

배열화 하거나(toArray), 배열에서 값을 찾기(inArray),

이벤트 추가(addEvent) / 삭제(cancelEvent) 등의 기능을 가지고 있다.

bkEvent 클래스는

이벤트를 추가하고(addEvent), 실행하는(fireEvent) 클래스 이다.

실제 JS의 이벤트와는 차이가 있다.

앞서의 이벤트들은 모두 HTML 태그들에

이벤트를 적용해서 발생하는 것이고,

bkEvent의 addEvent는

프로그램(NicEdit)이 지정된 이벤트들을 가지고 있다가

실행하라고 하면 그때 서야 프로그램 상에서 호출되는 이벤트이다.

즉, bkElement와 bkLib에서 지정된 이벤트 함수는

사용자의 행동에 의해 시스템(웹 브라우저)에서 호출되고,

bkEvent에서 지정된 함수는

함수 리스트(eventList)에 보관하고 있다가

프로그램 상에서 호출된다.

예로,

에디터에는 굵게, 이탤릭체 등 다양한 편집 버튼이 있다.

이 버튼들을 클릭하는 것은 bkElement의 addEvent를 이용하여 함수를 지정하고,

사용자가 마우스로 선택하면 해당 함수가 실행이 된다.

하지만, 사용자가 에디터에서 작업하다 다른 곳을 클릭한 경우

에디터는 버튼을 누를 수 없게 만들어야 한다 (Disable).

에디터에는 많은 버튼들이 있는데

이 모든 버튼 클래스에 Disable 이벤트를 만들고 등록했다가 (addEvent)

사용자가 에디터에서 작업하다 다른 곳을 클릭한 경우 이 이벤트들을

호출하여(fireEvent) 버튼을 사용할 수 없게 만들어 준다.

이 방식을 쓰지 않으면

모든 컨트롤의 함수를 직접 호출해야 하는 불편함이 있다.

$BK는 함수로 보는 것이 적당한데

파라메터가 문자열이면 해당 문자열을 ID로 HTML 태그를 찾아서 반환하고 (getElementById)

아니면 HTML 태그 클래스로 보고 bkElement로 포장하여 반환한다.

bkElement로 포장한다는 말은

HTML 태그이지만 bkElement의 메서드들을 사용할 수 있다는 것이다.

마지막으로 두 개의 내부 함수(closure)를 사용한 예가 있는 데,

내부 함수에 대한 개념은 찾아보기 바라며

prototype으로 함수에 두 개의 기능을 추가 하였다.

closure, closureListener이다.

이름이 내부 함수(closure)이지 기능이 내부 함수이지는 않다.

내부 함수 기법을 사용해서 이름을 그렇게 붙인 것 같고,

실제 용도는 전혀 다르다.

둘 다 이벤트 호출시 this를 특정 클래스로 나타내기 위해 사용하는 것이다.

즉, 버튼을 클릭(click)하면 해당 이벤트 내에서 this는 버튼이다.

버튼을 bkElement로 생성한 경우

this는 버튼이 아닌 버튼을 생성한 bkElement가 되어야 한다.

closureListener는 파라메터를 필요로 하는 경우에 사용한다.

예로, JS에서는 mousedown이벤트에서 event개체가 파라메터로 넘어온다.

function mousedown(event) {

처리 ~

}

이 event개체를 파라메터로 받아서 사용할 경우 closureListener,

없이 사용할 때는 closure로 사용하면 된다.

파라메터로 지정할 필요 없이

window.event로 사용해도 되지만, 이 개체는 Firefox에서 지원되지 않는다.

사용예

Function.prototype로 함수 원형을 수정하였기 때문에

이상과 같이 사용자 함수 뒤에 추가하여 지정하는 식으로 사용한다.

정리하면,

NicEdit를 구성하는 기본 라이브러리(클래스)는

클래스의 첫 부모(시조) bkClass(Object),

NicEdit용 HTML 태그 컨트롤을 위한 부모 bkElement,

NicEdit용 HTML 태그 컨트등에 이벤트를 보내기 위한 bkEvent,

잡다하게 사용하는 라이브러리 bkLib,

마지막으로 이벤트의 발생자를 바꾸는 closure가 있다.

구현 방법이나 사용법이 JQuery와 같거나 유사하다는 것을 알 수 있는데,

NicEdit의 라이브러리들은 복사해서

자체 제품 개발시 사용한다면 큰 도움이 될 것이다

다음 내용을 읽기 전에 웹 에디터와 관련된

몇 가지 용어에 대해서 이해해야 한다.

편집 기능을 제공하는 버튼,

버튼들을 배치하는 툴바, 

실제 문서를 편집하는 에디터에 대해서 알고 있어야 한다 (그림 참조).

NicEdit의 에디터 기능과 관련된 클래스 구조만

다음 그림과 같이 정리했다.

NicEdit는 에디터 하나를 의미하는 클래스 nicEditor와

여러 개의 에디터(nicEditor)들을 관리하는 클래스인 nicEditors가 기본 클래스이다.

하나의 웹 페이지에 여러 개의 웹 에디터가 사용될 경우를 위한 클래스 이다.

nicEditors는 클래스라기 보다는 Json 구조체의 느낌이 강하고

다수의 에디터와 플러그인 관리를 주 목적으로 하고 있다.

플러그인은 확장 기능을 의미하는 것으로

nicEditors에서 Json형태로 등록(registerPlugin)해서 가지고 있다가

nicEditor의 생성자에서 실행하여 보관한다.

NicEditors 플러그인 정보 관리 외에

다수의 nicEditor 사용시 정보를 보관하고 있으면서

ID로 해당 nicEditor를 찾는 기능(findEditor) 등을 제공한다.

nicEditor는 bkClass에서 상속받아

생성자에서 옵션과 플러그인 생성 등의 기능을 시작한다.

(bkEvent에서도 상속 받았는데, 별도로 정리한다.)

nicEditor는 제공되는 데모 파일의 소스를 보면 알 수 있지만 (demo02.html)

nicEditor를 생성함(new)으로써 웹 에디터를 실행한다.

하지만

nicEditor는 인스턴스(instance) 관리와 판넬(Panel) 관리를 주로 한다.

nicEditor의 판넬(nicEditorPanel)은

편집에 사용되는 버튼들을 놓는 장소(toolbar)를 의미하고,

판넬 생성(setPanel)과 삭제(removePanel) 기능이 있다.

판넬 생성시(construct) 버튼을 놓을 장소(toolbar)를 생성하고,

사용할 버튼 리스트(buttonList : 위 코드 중 4번째 new)를 확인해서

버튼들을 생성(addButton)한다.

nicEditor의 에디터 관련(문서편집) 기능은

실제로는 nicEditorInstance와 nicEditorIFrameInstance에 구현 되어 있다.

nicEditor는 웹 브라우저가 오페라이면 nicEditorIFrameInstance를 사용하고

아니면 (IE, FireFox 등) nicEditorInstance를 사용한다.

nicEditorIFrameInstance는 nicEditorInstance에서 상속 받은 클래스로

Iframe 태그를 사용하는 차이가 있다.

nicEditor는 인스턴스를 관리한다는 측면에서 nicEditors와 유사하다.

하나의 툴바에 여러 개의 편집창을 쓸 수 있다는 것으로

여기에 정리하지 않고 넘어간다(데모 4 참조).

nicEditor의 nicCommand는

실제로는 nicEditorInstance의 nicCommand를 호출하고

nicEditorInstance의 nicCommand에서는

JS의 document.execCommand를 호출하여

편집 기능을 구현하고 있다.

정리하면, 편집 영역을 관리하는 nicEditorInstance,

편집 기능을 사용자가 사용할 수 있게 하는 버튼은 nicEditorButton,

버튼이 놓이는 툴바는 nicEditorPanel,

이들을 관리하는 nicEditor로 구성된다.

nicEditorInstance에는 편집 기능 설정과 명령어 실행 외에도

웹 브라우저에서 제공하는 Selection, Range을

메서드(getSel, getRng)로 구현하였다.

이 개체는 편집기에서 현재 선택된 영역(클래스)을 의미하는 것으로

제대로 된 웹 에디터를 구현하기 위해서는 이 개념을 잘 알고 활용해야 하는데,

NicEdit에서는 많이 활용되지 않았다.

제대로 웹 에디터를 제작하려면 찾아보길 바라고 여기서는 넘어간다.

nicEditorConfig는 bkClass에서 상속 받지만

Json 구조의 데이터로 보는 것이 적절하다.

nicEditorConfig는 NicEdit의 실행을 위한 환경 설정 클래스로,

buttons, iconsPath, buttonList, iconList의 변수를 가지고 있다.

buttons는 NicEdit에서 지원되는 모든 버튼들의 정보를 가지고 있다.

그리고, 각 버튼에 대하여 고유 이름(bold, italic, underline등)을

나타내는 문자열을 키로 하여 Json형식으로

세부 정보(name, command, tags, css, key)를 가지고 있다.

세부 정보 중 name은 이름을 의미하지만,

버튼 위에 마우스가 올라오면

해당 버튼의 기능을 설명하는 툴팁 문장(예: Click to Bold)으로 활용된다.

command는 실제 명령어를 의미하고

document.execCommand에 사용할 명령어로

이 명령어에 의해 편집이 실행된다.

예: document.execCommand('bold', false, null)

이 명령어는 NicEdit에서 nicEditor의 nicCommand에 의해 실행된다.

tags는 편집된 문장에 입력 커서가 위치하면 선택된 문장에 적용된 tag에 따라

버튼을 활성/비활성 시키기 위해 사용되는 태그다.

예로, 굵게(bold)가 적용된 문장에 입력 커서가 있는 경우

bold 버튼이 눌러지고, 다른 버튼은 그대로 있게 된다.

이 기능을 구현하기 위해 현재 선택된 문장의 태그를 확인해서

태그가 B이거나 strong이면 bold 버튼이 눌러지게 만든다.

css도 같은 역할을 하는 것으로,

예전 HTML은 태그(B, STRONG)로,

최근에는 CSS('font-weight': 'bold')로 작성된다.

NicEdit는 CSS와 같이 설정은 있지만 기능은 개발되지 않았다.

글자를 굵게 만드는 bold의 경우

NicEdit는 execCommand룰 사용하기 때문에

웹 브라우저에 따라 B또는 STRONG 태그가 생긴다.

태그 인식도 이렇게 인식한다.

하지만 최근의 웹 에디터는

생성은 CSS('font-weight': 'bold')로 하고,

인식도 CSS로 한다.

key는 단축키를 의미하는 것으로 여겨지고,

구현은 되어 있지 않은 것 같다.

buttonList는 이상에서 정의된 버튼들 리스트로 웹 에디터에서 사용 여부를 나타낸다.

즉, buttonList에 이름이 나열된 버튼만 생성이 된다.

nicEditorConfig에서는 기본값들로 거의 모든 버튼 이름을 가지고 있다.

앞서의 nicEditor생성 코드(demo02.html)의 4번째 예처럼

New nicEditor({buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript','html','image']}

         ).panelInstance('area4');

nicEditor 생성시 파라메터로 사용할 버튼만 buttonList에 넣어서 전달하면 해당 버튼만 생성된다.

이러한 기법도 알아두면 좋다.

nicEditor의 생성자에서

options 변수에 nicEditorConfig가 생성되어 할당된다.

즉, 이것은 기본값 역할을 한다.

nicEditorConfig는 4개의 메인 키(변수)를 가지는 Json 데이터이고,

options에 할당되었기 때문에 options도 동일한 값을 가지고 있게 된다.

bkExtend는 값을 복사(상속)하는 기능을 하는 것으로

파라메터 C에 4개의 메인 키가 있으면 해당 키로 값이 복사되고,

없으면 넘어가기 때문에 기존 값이 유지 된다.

앞서의 nicEditor 생성 코드를 예로 하면,

nicEditor 파라메터로 Json({}) 값이 주어진 것은 buttonList이다.

따라서, 나머지 3개의 키는 nicEditorConfig에 지정된 값이 사용되고,

버튼은 파라메터에 지정된 buttonList 의 8개 버튼만이 사용된다.

demo02.html을 실행해서 4번째 NicEdit를 보면 확인 할 수 있다.

IconsPath는 버튼에 사용되는 이미지 파일의 위치(디렉토리 경로)를 의미하는 것으로

NicEdit의 모든 버튼은 다음 그림과 같이 하나의 이미지로 저장되어 있다.

nicEditorIcons.gif

iconList는 이미지 파일에서 버튼별 이미지 위치를 의미한다.

예로, "bgcolor": 1 으로 지정된 것은

bgcolor 버튼이 첫번째(0부터 시작하므로 실제론 2번째) 이미지를 사용한다는 의미이다.

버튼은 HTML button 태그로 생성하는 것이 아닌

DIV에 음영을 주어서 생성하고,

배경 이미지(backgroundImage)로 IconsPath의 경로를 지정해 준 뒤

이미지 좌표(backgroundPosition)를 버튼 위치 * -18(버튼크기)로 계산해서 지정한다.

bgcolor 버튼은 1이니 1 * -18 로 계산해서

TOP은 고정이고 left 위치가 -18이 되고,

div 크기(width)가 18이니,

해당 이미지만 버튼 위에 표시되어 보이게 된다.

다음 그림과 같이 [DOM탐색기]로 보면 쉽게 알 수 있다.

많은 이미지를 네트워크를 통해 전달하고, 처리하는 것 보다

하나의 이미지를 전송하고, 메모리에 올려서 처리하는 이 방식이 흔하게 사용된다.

이 처리는 nicEditor클래스의 getIcon 메소드에 구현되어 있다.