코드 스터디
『김밥코드』Board.js 생성
Recstasy
2021. 4. 4. 06:46
board폴더는 김밥코드의 꽃이다.
김밥코드의 전체적인 구조는 다음과 같다.
cgbadaBoard.js파일은 인터페이스다.
컴퓨터 h/w관점에서는 메인보드이며,
라이브러리를 사용하는 코드들은 모두 cgbadaBoard의 기능을 상속받는다.
인터페이스
CGBADA.createNameSpace('CGBADA.board.CGBADA_board');
CGBADA.board.CGBADA_board = (()=>{
class CGBADA_Board{
constructor(){
this.lib = [];
}
init(){
throw new Error('Must write something');
}
add(){
throw new Error('Must write something');
}
update(){
throw new Error('Must write something');
}
reset(){
throw new Error('Must write something');
}
} //CGBADA_Board End
return CGBADA_Board;
})();
[cgbadaBoard.js]
board의 하위 클래스들은
다른 라이브러리를 추가하거나 업데이트할 수 있다.
라이브러리 구현
가령, zim.js 라이브러리를 메인으로 사용한다면,
아래와 같이 작성할 수 있다.
CGBADA.createNameSpace('CGBADA.board.CGBADA_boardGUI');
CGBADA.board.CGBADA_boardGUI = (()=>{
let I_CGBADA_BOARD = CGBADA.board.CGBADA_board; //상속객체
class CGBADA_GUI extends I_CGBADA_BOARD{
constructor(){
super();
this.scaling = 'fit';
this.width = 1024;
this.height = 768;
this.color = light;
this.outerColor = dark;
this.frame = null;
this.stage = null;
}
init(){
this.frame = new Frame(this.scaling,this.width,this.height,this.color,this.ourterColor);
this.frame.on("ready",()=>{
zog("ready from Zim Frame");
this.stage = this.frame.stage;
this.stageW = this.frame.width;
this.stageH = this.frame.height;
this.makeShape('circle');
console.log(this.lib[0].name);
})
}
makeShape(shape){
if(shape == 'circle'){
let result = new Circle(100,pink)
.center()
.drag();
return result;
}
}
add(name, lib){
this.lib = [...this.lib,{name:name, content:lib}]
}
update(){
throw new Error('Must write something');
}
reset(){
throw new Error('Must write something');
}
} //CGBADA_Board End
return CGBADA_GUI;
})();
위의 코드를 실행한 결과,
zim라이브러리의 circle이 정상적으로 작동된다.
zim뿐만 아니라 간단한 웹앱 개발에 필요한
여러가지 라이브러리들을 최대한 효율적으로(추가,제거) 제어할 수 있다.
웹브라우저 기반에서 동작하는 웹 s/w는 그 자체로 이미 코어가 될 수 없다.
데이터베이스 포함 모든 기능은 주변부에 있다.
간단한 웹앱을 테스트하거나 제작할 목적이라면
위와 같이 컴포넌트 패턴을 개량한 김밥코드 방식을 추천한다.