6. 웹에디터로 배우는 자바스크립트 객체지향 프로그래밍 - 응용: 버그 수정

마지막으로

NicEdit를 수정하면서 몇 가지 개념을 정리한다.

nicEditorSelect의 자식들이

실제로 웹에서 사용되는 다음 그림을 보면 문제가 있다.

첫 번째는 설정 판넬의 크기가 작아서 항목들이 잘려서 보인다.

두 번째는 하나의 nicEditorSelect를 클릭하고,

다른 nicEditorSelect을 선택하면

앞서 선택한 nicEditorSelect의 설정 판넬이 그대로 있는 것이다.

버그를 수정하기 위해

NicEdit에서 데모 파일을 다운로드 받는다.

다운로드 페이지 하단의 압축되지 않은 파일 설정을 체크하고

(Uncompressed NicEdit for development) 다운로드 받는다.

demos 폴더에 있는 예제 중 적당한 파일을 선택하여 실행한다.

nicEdit.js만 수정하고

수정한 실행 결과를 보는 것이기 때문에

NicEdit가 실행되는 어떤 파일이든 관계가 없다.

준비가 되었으면

간단하게 이 두 가지 버그를 수정해 본다.

먼저 설정 판넬의 크기(width) 문제를 해결해 본다.

이 설정 판넬을 사용하는 것은 nicEditorSelect의 자식인

폰트명(nicEditorFontFamilySelect),

폰트 크기(nicEditorFontSizeSelect),

폰트 형식(nicEditorFontFormatSelect) 인데

모두 nicEditorSelect에서 설정 판넬(nicEditorPane)을

보이거나(open) 숨기고(close) 있다.

nicEditorSelect의 open함수를 보면

nicEditorPane의 크기(width)가 88px로 고정되어 생성되는 것을 알 수 있다.

open: function() {         this.pane = new nicEditorPane(this.items, this.ne, {             width: "88px",             padding: "0px",             borderTop: 0,             borderLeft: "1px solid #ccc",             borderRight: "1px solid #ccc",             borderBottom: "0px",             backgroundColor: "#fff"         });         for (var C = 0; C < this.selOptions.length; C++) {             var B = this.selOptions[C];             var A = new bkElement("div").setStyle({                 overflow: "hidden",                 borderBottom: "1px solid #ccc",                 width: "88px",                 textAlign: "left",                 overflow: "hidden",                 cursor: "pointer"             });             var D = new bkElement("div").setStyle({                 padding: "0px 4px"             }).setContent(B[1]).appendTo(A).noSelect();             D.addEvent("click", this.update.closure(this, B[0])).addEvent("mouseover", this.over.closure(this, D)).addEvent("mouseout", this.out.closure(this, D)).setAttributes("id", B[0]);             this.pane.append(A);             if (!window.opera) {                 D.onmousedown = bkLib.cancelEvent             }         }     },     close: function() {         if (this.pane) {             this.pane = this.pane.remove()         }     },

this.selOptions은 설정 판넬에 출력할 항목들 (폰트명, 크기등)인데

마찬가지로 크기(width)가 88px로 고정되어 생성되는 것을 알 수 있다.

이 값을 대충 150px로 수정하고 실행한다.

그림과 같이 넓이 문제가 해결 되었다.

하지만, 크기가 너무 커서 여백이 남는 클래스도 있다.

따라서, 그림처럼 각각 자기의 크기를 갖는 것이 좋을 것이다.

해결 방법은 this.selOptions이 힌트가 되어 준다.

this.selOptions는 부모인 nicEditorSelect에서는

변수 선언이나 할당된 데이터를 볼 수 없다.

위 코드에서 사용된 것이 전부 이다.

즉, 이 변수는 자식에서 선언되고 부모에서 사용된다.

(실제로는 자식에서 sel로 선언되고 add 되면서 할당된다.)

자식 클래스인 폰트 크기(nicEditorFontSizeSelect)에서

다음 코드와 같이 panelWidth 변수에 "150px" 넣어서 생성한다.

이와 같은 방식으로 폰트명과 폰트 형식도 작성한다.

var nicEditorFontSizeSelect = nicEditorSelect.extend({     panelWidth: "150px",     sel: {         1: "1&nbsp;(8pt)",         2: "2&nbsp;(10pt)",         3: "3&nbsp;(12pt)",         4: "4&nbsp;(14pt)",         5: "5&nbsp;(18pt)",         6: "6&nbsp;(24pt)"     },     init: function() {         this.setDisplay("Font&nbsp;Size...");         for (itm in this.sel) {             this.add(itm, '<font size="' + itm + '">' + this.sel[itm] + "</font>")         }     } });

그리고, nicEditorSelect의 open함수에서

다음과 같이 panelWidth의 크기로 생성하도록 한다.

open: function() {     this.pane = new nicEditorPane(this.items, this.ne, {         width: this.panelWidth,         padding: "0px",         borderTop: 0,         생략     });     for (var C = 0; C < this.selOptions.length; C++) {         var B = this.selOptions[C];         var A = new bkElement("div").setStyle({             overflow: "hidden",             borderBottom: "1px solid #ccc",             width: this.panelWidth,             생략         }     } },

아주 간단하게

각각의 자식에 필요한 크기로 설정 판넬이 생성된다.

여기서 하나 더 생각해 보면

폰트 크기는 너비가(width) 넓지만

나머지 폰트명과 형식은 너비가 비슷해 보인다.

이 두 자식(실제로는 아주 많을 수 있다.)에서 코드를 입력하는 것이 귀찮다.

이 경우, 기본 값(default)을 주어서 해결할 수 있다.

즉, 부모에서 panelWidth 변수를 선언하고 값을 주는 것이다.

자식에서 재할당(선언) 하면 자식 값으로 사용되고(override),

그렇지 않으면 부모의 값이 사용되도록 하면 된다.

아주 간단하다.

다음 코드처럼 nicEditorSelect에 자식에게 넣었던 것을 그대로 작성하면 된다.

var nicEditorSelect = bkClass.extend({     panelWidth: "100px",     construct: function(D, A, C, B) {         this.options = C.buttons[A];

즉, 부모(nicEditorSelect)에게서

panelWidth를 선언하고 100px을 할당한다.

자식 중에서 좀 큰 너비가 필요한

폰트 크기(nicEditorFontSizeSelect)는 150px을 할당하고,

비슷한 너비를 가진 나머지 자식은 아무 것도 하지 않는다.

즉, 부모에서 상속 받은 값을 그대로 사용하는 것이다.

두 번째 버그는 하나의 nicEditorSelect를 클릭하고,

다른 nicEditorSelect을 선택하면

앞서 선택한 nicEditorSelect의 설정 판넬이 그대로 있는 것이다.

이 것은 하나의 nicEditorSelect의 설정 판넬을 열 때(open),

이전의 nicEditorSelect의 설정 판넬을 닫아 주면 해결 된다.

var openedSelectBox = null; var nicEditorSelect = bkClass.extend({     panelWidth: "100px",     construct: function(D, A, C, B) {        ~~ 생략 ~~     open: function() {         if (openedSelectBox) openedSelectBox.close()         openedSelectBox = this;         this.pane = new nicEditorPane(this.items, this.ne, {

코드와 같이 전역 변수로 openedSelectBox를 선언하고,

nicEditorSelect의 open 함수가 실행될 때 (설정 판넬이 열릴 때)

현재 nicEditorSelect(this)를 openedSelectBox에 보관한다.

보관하기 전에 다음 코드와 같이 이전에 지정된 nicEditorSelect를

닫아주면(close)면 문제가 해결 된다.

nicEdit.js

간단하게 마지막 버그를 수정했지만

좋은 프로그램 방식은 아니다.

JS에서 전역 변수(openedSelectBox) 사용은 추천되지 않으며

객체 지향 프로그래밍으로 보기 어렵다.

JS에는 static변수가 없어서 전역 변수로 처리했지만

좋은 방법은 아니다.

조금 더 나은 방식은 openedSelectBox를 다른 클래스에 두는 것이다.

적절한 클래스는 버튼과 편집 창을 관리하는 niceditor일 것이다.

더욱이 niceditor는 nicEditorSelect가 생성될 때 파라미터로 넘어오고

nicEditorSelect내부에서 ne로 관리되기 때문이다.

따라서 niceditor에 openedSelectBox를 선언하고

addSelectList 메소드를 만들어서 추가하는 방식으로 구현하는 것이 좋다.

이 것은 연습 문제로  남겨둔다.