스파이더젠 소개: https://wikidocs.net/22777
스파이더젠 동영상 강좌: https://wikidocs.net/36895
스파이더젠 소개
- One Source Multi Use 쉽고 빠른 통합 플랫폼 개발 솔루션
- WEB Application, Mobile Application, PC Application 등 다양한 OS와 디바이스의 개발 지원
- 각각의 OS 및 해상도마다 별도의 개발공수 없이 한 번에 개발 가능
- 구현이 쉬운 반응형 레이아웃 및 반응형 테마
- 쉽고 강력한 통합 플랫폼 편집기
- 다양한 해상도와 기기에 적용
- XCode 수준의 쉽고 강력한 UI 편집기능 제공
- WYSIWYG 에디터
- Drag&Drop을 통한 속성 편집 및 이벤트 처리
- 스타일 파일을 통한 테마 적용 가능
- 랜드 스케이프 및 사이즈 변경 레이아웃 확인 가능
- 강력한 그리드 컴포넌트와 차트 컴포넌트 제공으로 코딩 없이도 시세 및 차트 작성 가능 컴포넌트의 AutoSize 및 AutoLayout 기능을 이용해 손쉽게 반응형 레이아웃 구현
- 객체지향 및 MVC 패턴을 완벽히 구현한 자바스크립트 개발 프레임웍 편집기를 통한 컴포넌트의 표준전문 셋팅과 런타임 자동 데이터 매핑 제공 배포 산출물의 보안, 압축 및 패치 작업의 자동화 하나의 API로 다중 디바이스 (GPS, Camera 등) 제어
- 고객에 대한 최상의 모바일 환경 제공
- 쉽고 빠른 고객 맞춤형 UI와 다양한 콘텐츠 제공으로 폭넓은 고객 확보 가능
- 담당자가 직접 개발하여 고객중심의 향상된 기능의 UI/UX 구현 가능
- 빠르게 변화하는 스마트 기기에 완벽히 대응
- 쉬운 신규 기기로의 확장
- 개발 및 유지보수의 획기적 비용절감으로 경쟁력 확보
- 스파이더젠 연동 개발 제품
- 클라우드, 음성인식, 빅데이터, IoT, AI, VR 등 SW시장의 4차 산업혁명에 대응한 연동제품
스파이더젠 설치
위 페이지의 다운로드 링크로 다운로드 후 압축 해제한 폴더의 Runner 폴더의 SpiderGen.exe 실행
동영상 강좌
A. Intro & Basic
- 툴의 기본 사용 교육 - 툴의 소개 및 기본적인 사용법 설명, 디버깅
- 컴포넌트 기본 교육 - 이벤트 및 속성 변경 등에 대한 기본적인 사용 교육
- 실습
- 교육내용 - https://wikidocs.net/22777
툴의 기본 사용 교육 & 실습
- 프로젝트 생성하기
파일 -> 새 프로젝트
프로젝트 이름 작성 및 경로 설정하기
컴포넌트 기본 교육 & 실습
- 컴포넌트 추가하기
오른쪽 아래 Component의 요소를 끌어와서 MainView.lay에 추가
- 버튼에 이벤트 추가하기
라벨, 버튼 추가 → 오른쪽 바 Class의 Event로 설정
click Event를 사용하여 alert로 HelloWorld! 출력할 수 있음
TODO아래에 alert(’Hello World!’); 작성
- 버튼 이벤트를 통해 라벨 문장 바꾸기
버튼 추가 → Event → click
라벨에도 변수를 주어야 하기 때문에 Class 들어간 후 ID에 변수명 입력해주기
버튼 클릭 실행 메서드에 this.라벨변수명.setText('텍스트');입력
실행(F5)하면 버튼 클릭 시 라벨 텍스트가 변경됨!
-
디버깅 방법
레이아웃 실행(F5) 후 F12 or View → ShowDevTools 클릭 → 빌드(F7)콘솔 디버깅: 이벤트 메서드 안에
console.log('텍스트');입력 → F12 콘솔창에서 확인라인 디버깅: 원하는 곳에
debugger;작성 시 최초 브레이크 포인트가 잡히게 됨
총정리
- 스파이더젠의 뜻과 설치를 통해 스파이더젠 이해
- 쉽고 빠른 통합 플랫폼 개발 솔루션
- 스파이더젠의 툴의 구조와 기능 학습
- 프로젝트 생성 방법 등
- 간단한 컴포넌트 생성 및 관리 방법 학습
- 버튼 추가, 라벨 추가
- 버튼 이벤트 생성
- 버튼 이벤트를 사용하여 라벨명 변경
- 디버깅 방법
