Why & What (is) Spidergen ?

What is Spidergen

Spidergen 은 아수소프트(주)에서 개발한 하이브리드 웹앱 크로스플랫폼 지원 프레임워크로 JS와 HTML, CSS 기반의 웹 개발 방식을 채택한다.

https://www.spidergen.org:3003/?pid=T010000

스파이더젠

위지윅 방식의 컴포넌트 Drag & Drop 방식으로 클라이언트 화면을 개발하며 Cordova 가 크로스플랫폼으로의 빌드를 담당한다.

about cordova

아파치 코도바 - 위키백과, 우리 모두의 백과사전

스파이더젠의 개발 화면은 아래 이미지와 같다.

보는 바와 같이 우측 하단에 있는 컴포넌트를 끌어와 배치를 하고 속성 및 이벤트를 할당한다. 자세한 설명은 첨부한 링크를 통해 확인하길 바라며 이번 포스팅에서는 그동안 이 프레임워크를 사용하며 느낀 점이나 장단점에 대해 소개하려고 한다.

How it works

1. D&D 지원

안드로이드 스튜디오처럼 컴포넌트를 드래그 앤 드랍으로 원하는 곳에 배치할 수 있다. 자동으로 html 소스로 변환해 준다. 버튼 하나를 위 이미지처럼 화면에 배치하면 다음과 같은 html 소스로 변환이 된다.

<div
  data-base="AView"
  data-class="MainView"
  class="AView-Style"
  style="left: 0px; top: 0px; width: 100%; height: 100%; background-color: rgb(239, 239, 239); position: absolute;"
  data-class-map='{"afc":["AView","AButton"]}'
>
  <button
    data-base="AButton"
    data-class="AButton"
    class="AButton-Style"
    style="width: 80px; height: 22px; position: absolute; left: 100px; top: 100px;"
    id="MainView--by"
  >
    Button
  </button>
</div>

엄밀히 말하면 사용자가 버튼 컴포넌트를 마우스로 화면 위에 올리는 순간 Button 컴포넌트가 렌더링 되면서 html 소스가 만들어지고 이를 사용자에게 가상 DOM을 만들어 보여준다.

2. JQuery 기반의 프로젝트

프로젝트를 빌드하면 index.html 파일이 생성되는데 이를 보면 jquery 라이브러리를 호출하는 코드가 있다.

<script defer src="Framework/afc/library/jquery-core.js"></script>
<script defer src="Framework/afc/library/jquery-ui.js"></script>
<script defer src="Framework/afc/library/jquery.ui.touch-punch.js"></script>

쌩 바닐라 스크립트만을 사용하지 않아도 된다.

3. 컴포넌트 객체

프로젝트를 빌드한 후에 개발자 도구에서 탭을 보면 컴포넌트 명을 class 로 가진 div 태그가 보인다.

AContainer, AView, AButton 등은 기본적으로 제공되는 컴포넌트이다. AButton, ARadioButton 등과 같은 가장 작은 단위의 컴포넌트는 AComponent를 상속받고 AView, APage와 같은 View 단위의 객체는 AContainer를 상속받는다.
모든 컴포넌트는 객체로 되어있으며 함수로 구현되어있다.
예를 들어 AComponent를 살펴보면 다음과 같다.

function AComponent() {
  this.element = null; //dom tree object
  this.$ele = null; //jQuery object
  this.parent = null; //parent AView
  //this.aevent = null;

  //클릭 이벤트시 상위로 터치 이벤트 전달 막음
  //상위 전달이 필요한 경우 개별적으로 설정(false)
  this.eventStop = true;

  this.isEnable = true;
  this.events = null;
  this.baseName = "";
  this.className = afc.getClassName(this);

  this.compId = "";
  this.groupName = "";

  // 드래그 & 드랍 Manager
  //this.ddManager = null;

  //자신이 사용할 네트웍 블럭의 data key
  this.dataKeyMap = null;
  this.mappingType = 0;

  this.sgapW = null;
  this.sgapH = null;
  //this.centerX = null;
  //this.centerY = null;

  this.rect = null;

  //여기에서 값을 초기화 하면 안됨. init 함수에서 setOption 함수를 이용함.
  this.option = {};
}

AComponent의 prototype에 선언되어 있는 함수나 변수들은 상속받는 하위의 컴포넌트에서도 사용이 가능하다.
각 컴포넌트는 함수가 호출되는 시점에

태그를 생성하며 DOM에 추가된다. 즉, D&D 이벤트가 발생하는 시점에 컴포넌트 함수를 호출하면서 렌더링되기 시작하는 것이다.

D&D 가 아닌 직접적으로 컴포넌트를 생성하는 것도 가능하다.

class MainView extends AView {
  constructor() {
    super();

    //TODO:edit here
  }

  init(context, evtListener) {
    super.init(context, evtListener);

    //TODO:edit here
  }

  onInitDone() {
    super.onInitDone();

    console.log(this.by);
  }

  onActiveDone(isFirst) {
    super.onActiveDone(isFirst);
    const newButton = new AButton();
    newButton.init();
    newButton.setText("hello js");
    this.addComponent(newButton);
  }
}

 

위 코드에서 MainView Class는 init, onInitDone, onActiveDone과 같은 함수를 메서드로 가지고 있다. 이는 생명주기를 나타낸다.

4. 생명주기 (Life Cycle)

생명주기는 웹, 모바일 개발환경에서 필수로 고려되어야 하는 개념이다. 생명주기는 컴포넌트가 생성부터 소멸까지의 과정을 의미하는데, 어느 시점에 고객(사용자)에게 어떤 컴포넌트를 보여주어야 하며 어떤 데이터를 제공해야 하는지 결정해야 하기 때문에 매우 중요하다.
SpiderGen에도 생명주기가 있는데 init(함수 호출), onInitDone(함수 호출 이후), onWillActive(렌더링 이전), onActiveDone(렌더링 이후) , onWillDeactive(소멸 이전), onDeactiveDone(소멸 이후)과 같은 메서드를 작성함으로써 구현이 가능하다.

Why Spidergen

---

1. 증권업에 특화된 컴포넌트를 제공한다.

증권업은 엄청난 양의 증권 데이터가 동시에 쏟아지고 고객으로부터 접수되는 주문의 양도 만만치 않다. 특히 시세나 호가 정보는 동시다발적으로 쏟아지기 때문에 최적화된 컴포넌트가 아닌 경우 정상적으로 동작하지 않을 수 있다.

2. 보안

증권업은 망분리 정책으로 인해 외부 네트워크와의 연결이 불가능하다. 따라서 오픈소스 라이브러리와 같은 외부 프로그램 및 패키지를 사용할 수 없다.

3. 쉽다

Jquery와 vanilla javascript, html, css를 할 줄 알면 바로 개발을 시작할 수 있는 진입장벽이 낮은 프레임워크라고 생각한다. Javascript도 비교적 진입장벽이 낮은 언어에 속해 빠른 기간에 언어와 프레임워크를 익혀 프로젝트를 시작할 수 있다. 또한 직접 html, css를 활용해 개발하는 것이 아닌 컴포넌트를 Drag & Drop 방식으로 개발할 수 있으니 힘들게 html, css를 코딩하지 않아도 된다.

4. 쉽다는 것은 개발자가 많은 고민을 했다는 것.

사용자가 사용하기 쉽다는 것은 개발자가 그만큼 고민을 많이 했다는 것이다. 그래서 프로젝트를 뜯어보면 그 고민의 흔적을 엿보는 것 같아 흥미를 느낄 수 있다. 그러면서 많은 것을 배울 수 있다.

항상 장점이 있으면 단점도 있기 마련이다.

1. 정보가 없다.

한 기업에서 라이선스를 가지고 개발한 프레임워크이기 때문에 구글에서 찾을 수 있는 건 도큐먼트 사이트 하나뿐이다. 그 외에는 직접 프레임워크 단의 소스를 수정해 구현하거나 해당 기업에 물어봐야 한다.

2. 오래된 기술

최근 React와 NextJS, Vue, Vite 등과 같은 새롭게 출시되는 프런트엔드 라이브러리와 비교해 Jquery, vanilla javascript 를 사용하기 때문에 오래된 기술이라는 인식이 든다. 물론 Javascript와 Jquery 렌더링에 대한 기본기를 익히기엔 매우 좋은 환경이다. 또한 대중성이 없기 때문에 개발자로서 커리어에 대한 걱정이 있다.

3. Typescript를 지원하지 않는다.

만약 Typescript 기반의 프로젝트가 되었다면 더 정교하고 체계적인 프로젝트가 되었을 텐데 하는 아쉬움이 있다.

The End

---

Spidergen 프레임워크는 Javascript, css, html 만 알아도 앱 개발을 할 수 있게 해 준다. 그리고 JS에 대해 제대로 공부할 수 있다. 하지만 대중적인 기술은 아니다 보니 최근 기술에 둔감해질 수 있다.