AX5UI Intro

그렇다.. 난 ax5ui를 개발하는 개발자이다. 좀 더 솔직히 말하자면 머리가 그다지 좋지 못한 관계로 오랜기간(공식적으론 2013년 부터..) 돈도 안되고 큰 쓸모도 없는 여러가지 오픈소스를 개발 운영하고 있는 무식하고 용감한 웹 개발자 입니다. (멘트가 겸손하네요)

그렇게 만들고 있는 오픈소스 중에서, 최근 1년간은 AX5UI라는 JS UI 프레임워크를 만들고 있습니다.(AXBoot도 만들었습니다. Forever AXBoot) 그렇다고 인생극장에 나올듯한 처연한 멜로디를 깔아줄 필요는 없겠습니다.

AX5UI는 자바스크립트 UI 프레임워크입니다. 웹 애플리케이션을 만드는데 필요한 다양한 컴포넌트, 예를 들면 그리드, 컨텍스트메뉴, 다이얼로그, 모달 등등등을 플러그인 형태로 제공합니다.

게다가 각 콤포넌트의 디테일한 디자인요소까지 사용자의 입맛에 완벽하게 손볼 수 있도록 각 플러그인들의 CSS를 SASS언어를 이용하여 변수와 구현체로 나누어 설계되었습니다.

플러그인들 중에 예를 들어 소개하면 그리드를 말할 수 있습니다.

국내의 웹애플리케이션 개발환경(SI현장이 더 맞는 말이지만.) 에서는 유독 그리드에 대한 요구가 많기 때문에 항상 자랑스럽게 ax5ui-grid 에 대해 먼저 이야기 하게 됩니다.

ax5ui-grid는 대용량 데이터를 엑셀의 그리드 형태로 보여줄 수 있고, 컬럼데이터의 표현을 formatter 함수를 이용하여 자유롭게 변경할 수 있습니다. 또한 데이터의 정렬, 컬럼리사이즈, 소계, 합계, 인라인에디트 기능 등 실제 업무 환경에서 사용하는데 부족함이 없도록 제작 되었습니다.

말로 아무리 설명해도 직접 보여 드리는 게 가장 설명이 쉬울 것 같기 때문에 링크 하나 던지고 그리드에대한 설명은 줄이겠습니다.

http://ax5.io/ax5ui-grid/demo/index.html (링크를 눌러보세요)

AX5UI의 설치

AX5UI는 자바스크립트 프로젝트이기 때문에 사실, 설치에 큰 기술이 필요하지는 않습니다. 단순히 웹페이지 상단에 CSS와 JS파일을 잘 걸어주면 설치가 완료 됩니다.

하지만 웹 개발자보고 웹개발 참 쉽다고 하면 무지 서운합니다.

단순히 JS파일과 CSS파일을 웹페이지에 연결하려고 해도 몇가지 이 상황에 맞는 방법이 존재합니다.

다운로드 후 사용하기

https://github.com/ax5ui/ax5core/releases 에서 파일을 다운로드 한 후 파일을 찾아 웹페이지에

<script type="text/javascript" src="/assets/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="/assets/ax5ui/ax5core.min.js"></script>

위와 같이 HTML head 에 넣어주면 됩니다. ax5를 사용하기 위해서는 jQuery가 꼭 필요하니 주의가 필요합니다. (하지만 요즘 웹 개발하면서 jQuery를 쓰지 않는 경우는 매우 극히 드문 일 이므로 특별한 주의가 필요한 내용은 아니겠습니다. )

AX5UI는 jQuery 버전은 국내 개발환경에 맞추어 1.x.x+ 에서 작동할 수 있게 개발되었습니다. 그 상위 버전에서는 모두 정상작동합니다. (하지만 문제가 영원히 없다고 보장 할 수는 없겠지만, 내부에서 사용하는 jQuery API들이 .append, .html, .css, .offset, .position, find, .on, .off, .bind, unbind 등 기초적인 API들만으로 작성되었기 때문에 호환성 이슈는 크게 없을 것으로 믿고 있습니다.)

CDN사용하기

CDN(Content Delivery Network) 을 이용하여 리소스를 연결하는 방법도 있습니다.

개발환경에 리소스를 두게되면 마음대로 관리할 수 있는 이점이 있는 반면 버전 업데이트관리에 별도의 신경을 써줘야 하고 트래픽 비용도 커지는 단점이 있습니다. 이런 경우 선택할 수 있는 방법이 CDN입니다.

<script 
type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5core/master/dist/ax5core.min.js"></script>

CDN을 이용제작한 좋은 예로는 다음을 들 수 있습니다. 다음의 페이지는 gitHub활동내역을 간단하게 정리하여 보여주는 페이지입니다. (소스는 깃헙에서 보실 수 있습니다.)

https://thomasjang.github.io/oss-report/index.html

다음은 페이지의 소스코드 부분인데요. 모든 JS파일과 CSS파일들이 모두 CDN주소를 이용하고 있습니다.

요즘 개발자들은 직접 만드는 코드보다 이미 만들어진 코드를 이용하는 양이 더욱 많습니다. 이런 CDN에 대해 좀 더 자세히 알고 싶다는 생각이 들고 있는데요, 다음에 기회가 되면 CDN생태계에대해 한번 다루었으면 좋겠습니다.

NPM 또는 Bower 이용하기

NPM(node package manager) : 지금 구글에 ‘NPM이란’ 으로 검색하면 node package module 이라고 설명하는 링크가 상단에 있는데. 동의 하기 어렵습니다. 
노드 패키지를 관리하는게 더 적절한 표현이 아닌가 생각합니다. 게다가 npmjs.org > What is npm 페이지에 manager라는 표현이 있는 것을 봐도 그렇다. 아무튼 NPM은 노드 패키지를 관리해줍니다.

https://nodejs.org 를 설치하면 터미널에서 npm 커멘드 라인명령을 사용할 수 있다.
$ npm init 
$ npm install ax5core --save-dev

빈폴더에서 위 커멘드를 터미널에 입력하면 package.json파일을 만들고 ax5core 패키지를 설치할 수 있습니다. ( — save-dev 는 옵션인데요. 설치하는 패키지를 package.json devDependencies에 추가할 때 씁니다. 이 옵션 안쓰면 머라고 하는 개발자 들도 있습니다.)

Bower(A package manager for the web) : npm으로 노드 패키지를 관리하는 방식으로 프론트앤드용 패키지를 관리하다보면 몇가지 문제가 발생합니다. 더 많은 차이점이 있겠지만 그중에 당장 생각나는 두가지에 대해 이야기 하면,

  • npm 패키지는 node_modules 라는 폴더에 패키지들이 다운로드 되는데. 이것을 웹서비스로 내보내려면 별도의 관리가 필요하게 됩니다. (웹 서비스에 필요없는 패키지들도 함께 내보내야 하기 때문이다.)
  • 배포의 불편함. npm 패키지들의 리소스는 npm publish 커맨드로 npm 서버에 업로드 됩니다. 즉 npm 서버에 등록된 리소스가 패키지 사용자 들에게 배포 되는 것이다. 하지만, 대부분의 오픈소스 프로젝트들이 github를 이용해 운영되고 있는 상황에서 개발자들은 github에도 릴리즈를 관리하고 npm에도 릴리즈 해야 해서 2번의 일을 해야한다. 
    (bower는 별도의 서버를 두지 않고 github 버전으로 패키지 사용자들에게 배포하여 이런 불편함을 겪지 않아도 됩니다.)

AX5UI는 npm, bower를 가리지 않고 패키지 관리를 할 수 있습니다. 하지만 bower로 패키지 관리 하는 것을 권장 합니다.

bower로 ax5core를 설치
$ mkdir bower-test
$ cd bower-test
$ bower install ax5core

위 커멘드를 터미널에 입력하면 현재 폴더 아래 bower_components 안에 패키지가 의존성을 체크하여 패키지들을 다운로드 하게 됩니다.

bower를 이용하여 패키지를 관리 할때에도 npm package.json처럼 설정을 기록해 두는 파일이 있습니다. bower.json 이구요 샘플은 아래 링크를 참고 하시면 좋겠습니다.

bower 패키지들의 다운로드 위치를 프로젝트 환경에 맞게 변경 할 수도 있는데요. 아래 링크를 참고 하시면 됩니다.

https://github.com/axboot/ax-boot-framework/blob/master/.bowerrc

쓰다보니 너무 길어져서.. 다음편에 계속 해야 할 것 같습니다. 그럼~