자바스크립트(JS)의 객체 지향 프로그래밍은
기존의 객체 지향 언어들과는 조금 다르면서 재미 있게 제공되고 있다.
자바스크립트의 객체 지향 프로그래밍에 대한 간단한 설명은 많지만
실제적인 사용법에 대한 설명은 없는 것 같아서
개인적으로 최근에 재미있게 본 NicEdit를 대상으로
자바스크립트의 객체 지향 프로그래밍에 대한 정리를 하였다.
2015년에 ECMAScript 6에서 class란 개념을 소개하여
현재는 쉽게 사용할 수 있지만,
과거 방식도 알아두면 자바 스크립트 사용에 대한 이해에 도움이 되기에 정리한다.
NicEdit는 웹 에디터로 좋은 웹 에디터는 아니다.
상용 제품이나 다른 오픈소스(CKEditor 등)에 비해 기능도 많지 않고,
HTML 5 를 준수하지도 않는다.
JS에서 제공되는 Document 객체의 execCommand 메서드를 이용하여
단순 기능 위주로 구현되어 있다.
구글에서 간단한 웹 에디터 제작으로 검색해보면
관련 자료를 찾을 수 있다.
https://developer.mozilla.org/ko/docs/Web/API/Document/execCommand
에디터를 제작하는 자세한 방법은 찾아보길 바란다.
그러나, 지금까지 본 수 많은 JS 오픈소스 코드 중
NicEdit가 코드 양이 가장 적으면서
JS 객체 지향 프로그래밍 특성을 가장 잘 반영한 프로그램으로 생각한다.
더욱이 코드를 살펴보면,
제법 괜찮은 JS 프레임워크라는 걸 알 수 있다.
또, 코드 작성 (명명 규칙 등)도 잘 되어 있어
별도의 문서(주석) 없이도 이해할 수 있다.
그래서, 모든 코드를 정리할 수 없지만
JS 객체 지향 프로그래밍 응용 관련된 부분과
알아두면 유용하게 사용할 수 있는 몇 가지 기능 위주로 정리하였다.
이 글은 개념 위주로 작성했기 때문에 자세한 자료는 찾아봐야 한다.
이 글을 읽기 전에
JS 객체 지향 프로그래밍에 전혀 모른다면
관련 자료를 찾아서 기본 내용 정도는 이해하고 읽어야 한다.
최소한 JSon, 함수, 내부함수(inner function),
클래스, Prototype 등은 알아야 한다.
여기서는 이에 대해 설명하지 않는다.
https://www.google.co.kr/search?q=js+클래스&ie=utf-8&oe=utf-8&gws_rd=cr&ei=XqT3V6GbJInnvgSHgZvwAQ
https://www.google.co.kr/search?q=js+Prototype&ie=utf-8&oe=utf-8&gws_rd=cr&ei=XqT3V6GbJInnvgSHgZvwAQ
https://www.google.co.kr/search?q=js+내부함수&ie=utf-8&oe=utf-8&gws_rd=cr&ei=XqT3V6GbJInnvgSHgZvwAQ
먼저, 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를 개발할 경우 사용하면 유용할 것이다.
'JavaScript > NicEdit' 카테고리의 다른 글
| 2. 웹에디터로 배우는 자바스크립트 객체지향 프로그래밍 - 라이브러리 (0) | 2016.10.16 |
|---|---|
| 3. 웹에디터로 배우는 자바스크립트 객체지향 프로그래밍 - 에디터 (0) | 2016.10.16 |
| 4. 웹에디터로 배우는 자바스크립트 객체지향 프로그래밍 - 에디터 II (0) | 2016.10.16 |
| 5. 웹에디터로 배우는 자바스크립트 객체지향 프로그래밍 - 플러그인 (0) | 2016.10.16 |
| 6. 웹에디터로 배우는 자바스크립트 객체지향 프로그래밍 - 응용: 버그 수정 (0) | 2016.10.16 |