실무자를 위한 ExtJS 엔터프라이즈 개발 노하우

2015. 05. 19 박무형 선임 컨설턴트 | 미래웹기술연구소

발표자 소개

§  미래웹기술 연구소선임컨설턴트

§  Ext JS 프로젝트 경력 §  한솔 NexG ESM

§  삼정 KPMG ING 생명 연말정산시스템

§  연세대학교 연구개발시스템

Page 2

목차

§  자바스크립트 메타프로그래밍 기법

§  효율적인 ExtJS패키지설계와 네이밍룰

§  이벤트링크드 패턴

§  Demo

§  결론

Page 3

자바스크립트 메타프로그래밍 기법

자바스크립트 메타프로그래밍 기법이란?

§  자바스크립트의 문법의 형태

§  자바스크립트에서 객체지향적인 프로그래밍 가능

§  예제 1) 프로토타입 프로그래밍

§  예제 2) 콜백함수 프로그래밍

Page 5

프로토타입 프로그래밍 (1/2)

§  속성값, 즉 Key,Value를 기반으로 하는 프로그래밍

§  사용시기 : 중첩 If 문 또는 조건분기가 많아질경우

Page 6

프로토타입 프로그래밍 샘플 (1/2)

§  샘플코드

Page 7

계속

프로토타입 프로그래밍 장점(1/2)

§  코드를 읽기 편하다

§  조건문이 변경될때 메인로직을 건드리지 않아도 된다.

- 데이터와 프로그램 로직의 분리

- 프로퍼티만 추가/수정/삭제만 하면 된다.

Page 8

콜백함수 프로그래밍 사용법(2/2)

Page 9

§  함수를 호출하였을때 내부처리 함수를 프로그래머가 지정하는 방식

§  메인로직이 같은데 전처리, 후처리 로직이 다를때 주로 이용

§  주로 공통모듈(사용자검색팝업,우편번호찾기팝업등)에서 많이 사용된다.

§  ExtJS 코어에서도 많이 사용되고 있다.

ex) Ext.Ajax.request, Ext.require 등..

콜백함수 프로그래밍 샘플

Page 10

그밖의 자바스크립트 메타프로그래밍 기법

Page 11

§  스코프(this)를 이용한 메타프로그래밍

§  || (OR 연산자)를 이용한 메타프로그래밍

§  기타 등

효율적인 Ext JS 패키지 설계와 클래스 네이밍 룰

Page 12

효율적인 패키지란?

Page 13

§  패키지 구조만 보더라도 단번에 이해가 가능해야 한다.

§  패키지 재사용성이 보장되어야 한다.

§  에러가 났을때 원인을 손쉽게 찾을수 있어야 한다.

효율적인 패키지설계 방안(1/4)

Page 14

§  원칙 1 : 상위 패키지는 하위패키지를 전부 포함해야 한다.

효율적인 패키지설계 방안(2/4)

Page 15

§  원칙 2 : 하위패키지는 상위패키지 내용을 직접 호출해서는 안된다. -  상위패키지를 이용해서 로직처리가 필요한 경우에는 별도의 controller에서 제어해야한다.

효과적인 클래스 네이밍 룰(3/4)

Page 16

§  원칙 3 : 네이밍 룰 - 컴포넌트를 포함시키는 클래스는 Main이라는 접미어를 붙여서 활용

- 컴포넌트 클래스는 Main 클래스에 모두 포함 시킴

- 패키지 경로를 접두어로 계속 붙여나간다.

효과적인 클래스 네이밍 룰(4/4)

Page 17

§  원칙 4 : Current한 패키지 안에는 2개의 Main.js가 존재하면 안된다.

효율적인 패키지 설계와 네이밍 룰 - 결론

Page 18

§  수백본의 화면 개발 프로젝트시 개발 편의성이 증대된다

§  복잡한 화면이 담긴 화면 개발시 Main.js 파일만 참조하면 되는 편리성이 있다.

§  객체명이 유니크 하므로 손쉽게 트래킹이 가능하다.

이벤트 링크드 패턴 프로그래밍

Page 19

이벤트 링크드 패턴이란?

Page 20

§  이벤트기반 프로그래밍에서 한 단계 진화된 패턴

§  상호간의 종속성이 없는 코드를 작성을 위한 패턴

§  비즈니스 이벤트라는 개념을 도입

§  추상 이벤트의 도입

-  비즈니스 이벤트에 대한 조건분기 처리를 위한 개념

예제

Page 21

일반적인 컴포넌트 이벤트 내의 함수 구현 방식

Page 22

대분류 Select 중분류 Select 소분류 Select

이벤트 링크드 패턴을 위한 비즈니스 이벤트 개념 도입

§  이벤트 링크드 패턴에서 컴포넌트 이벤트들의 집합체

§  컴포넌트에서 발생한 이벤트들이 상호종속적으로 연결되는 단위

Page 23

대분류 사용자 클릭

중분류 사용자 클릭

소분류 사용자 클릭

이벤트 바인딩

이벤트 바인딩

이벤트 바인딩

비즈니스 이벤트 도입으로 인한 객체간 의존성 제거

Page 24

§  컴포넌트간의 기능상의 상호 의존성이 없는 코드작성이 가능

대분류 Select 중분류 Select 소분류 Select

이벤트 링크드 패턴의 장점

Page 25

§  업무파악이 매우 쉬어진다. - 비즈니스이벤트가 화면상에 이루어지는 모든 기능이다.

§  코드유지보수가 매우 간결해진다.

- 중간에 컴포넌트가 추가되거나 분기로직이이루어질경우 이벤트만 끼워넣고 연결만 다시해주면된다

§  코드안정성이높아진다. - 구조적으로사용자가 할수 있는 모든 액션에대해 코드가 간접적으로 구현(이벤트연결)이  되어있으

므로 버그가 줄어든다.

§  중복코드가줄어든다. 

- 중복이발생했다는 뜻은 대부분 이벤트 연결이나 이벤트구현이 잘못된 경우이다. 이로인해 좀더 구조적으로 코드를 작성하므로 코드안정성이 높아진다.

Demo

Page 26

이벤트 링크드 패턴 전체

Page 27

이벤트 링크드 패턴 결론

Page 28

§  어떤화면 어떤 요구사항이든 버그를 극한으로 줄일수 있는 프로그래밍 기법이다.

§  코드가 코드 코멘트가 되어버린다. 코드 코멘트 쓸일이 거의 없어진다.

§  개발시간과 테스트 시간감소 - 화이트보드에 단순하게 스케치 몇번으로 비즈니스 로직의 시뮬레이팅이 가능하다.

- 화이트보드에 스케치한 비즈니스로직을 그대로 옮기면 된다..

§  화면설계와 보는시각자체가 아예 달라진다.

- 단순하게 컴포넌트설계가 아니라 전체적인 이벤트 디자인에 염두하여 프로그래밍을 한다.

- 패턴 특성상 체계적인 코딩이 아니면 구현이 불가능하다.

정리

§  자바스크립트 메타프로그래밍

§  패키지설계 및 네이밍룰

§  이벤트링크드 프로그래밍

Page 29