웹애플리케이션은크게사용자가인터랙션하는프런트엔드 (Front-end) 영역과, 사용자가요청한데이터를저장, 수정, 삭제하는백엔드 (Back-end) 영역으로나눌수있다. 웹애플리케이션개발에는다양한기술이사용된다. 최근에는더급격한속도로웹기술이발전되고있으며현대의웹애플리케이션은단순

Similar documents
PowerPoint 프레젠테이션

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션

본 강의에 들어가기 전

[Brochure] KOR_TunA

Microsoft PowerPoint - aj-lecture1.ppt [호환 모드]

슬라이드 1

PowerPoint 프레젠테이션

XSS Attack - Real-World XSS Attacks, Chaining XSS and Other Attacks, Payloads for XSS Attacks

슬라이드 1

Microsoft PowerPoint - chap01-C언어개요.pptx

슬라이드 1

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일

HTML5* Web Development to the next level HTML5 ~= HTML + CSS + JS API

슬라이드 1


Microsoft PowerPoint - Smart CRM v4.0_TM 소개_ pptx

대규모 자바스크립트 웹어플리케이션개발하기 with BackboneJS and RequireJS 넷스루개발 2 팀이병주

표준프레임워크 Nexus 및 CI 환경구축가이드 Version 3.8 Page 1

PowerPoint 프레젠테이션

NCS : ERP(SAP) ERP(SAP) SW IT,. SW IT 01., 05., 06., 08., 15., , 05. SW IT,,,, SAP HR,,, 4,,, SAP ABAP HR SCHEMA, BSP,

Spring Boot

PowerPoint Presentation

PowerPoint 프레젠테이션

1. 자바프로그램기초 및개발환경 2 장 & 3 장. 자바개발도구 충남대학교 컴퓨터공학과

서현수

<4D F736F F F696E74202D20B5A5C0CCC5CDBAA3C0CCBDBA5F3130C1D6C2F75F32C2F7BDC32E >


Short Presentation Title

TTA Journal No.157_서체변경.indd

PowerPoint 프레젠테이션

웹개발을위한 ComponentOne 사용법 (2) 권대건 부산대학교컴퓨터공학과 Abstract 최근웹개발이활성화되면서전문가를위한여러가지 Tool 웹애플리케이션형태로제공하는경우가늘고있다. ComponentOne 은.NET 기반의 UI C

슬라이드 1

<BCD2C7C1C6AEBFFEBEEE5FB1E8C1F6C5C25FC0DBC7B0C3D6C1BEBAB8B0EDBCAD2E687770>

로거 자료실

Microsoft Word - src.doc

Secure Programming Lecture1 : Introduction

슬라이드 1

VS 2013 Global Launch in a Box

<4D F736F F F696E74202D20332DC1F6B9DDC1A4BAB8BDC3BDBAC5DB>

웹사이트 운영, 이보다 쉬울 수 없다! Microsoft Azure를 이용한 웹사이트 구축

PowerPoint Presentation

게시판 스팸 실시간 차단 시스템

PowerPoint 프레젠테이션

PCServerMgmt7

WAS 의동작과 WEB, Servlet, JSP 엑셈컨설팅본부 /APM 박종현 웹어플리케이션서버란? 웹어플리케이션서버방식은웹서버가직접어플리케이션프로그램을처리하는것이아니라웹어플리케이션서버에게처리를넘겨주고어플리케이션서버가어플리케이션프로그램을처리한다. 여러명의사용자가동일한페

PowerPoint Presentation

Microsoft Word - KSR2014S042

<4D F736F F F696E74202D20B5A5C0CCC5CDBAA3C0CCBDBA5F3130C1D6C2F75F31C2F7BDC32E >

untitled

구축환경 OS : Windows 7 그외 OS 의경우교재 p26-40 참조 Windows 의다른버전은조금다르게나타날수있음 Browser : Google Chrome 다른브라우저를사용해도별차이없으나추후수업의모든과정은크롬사용 한

<C0CCBCBCBFB52DC1A4B4EBBFF82DBCAEBBE7B3EDB9AE2D D382E687770>

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션

슬라이드 1

Web Scraper in 30 Minutes 강철

J2EE & Web Services iSeminar

server name>/arcgis/rest/services server name>/<web adaptor name>/rest/services ArcGIS 10.1 for Server System requirements - 지

12 성능모니터링 allmon Apache License v 성능모니터링 nmon GPL v3 분산되어있는시스템에대한자원상태체크, 사용현황, 성능등을수집

목 차 Ⅰ. 일반사항 1 Ⅱ. 특기사항 3 Ⅲ. 물품내역 및 세부규격 8 Ⅳ. 주의사항

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp");

슬라이드 1

Angry MOMO Presentation

PowerPoint 프레젠테이션

DBMS & SQL Server Installation Database Laboratory

Value Driven Proposals

.

SAMSUNG SDS Cloud Middleware JBoss EAP/WS WildFly Apache Tomcat JEUS WebLogic

*2008년1월호진짜

쉽게 풀어쓴 C 프로그래밍

슬라이드 1

슬라이드 1

160322_ADOP 상품 소개서_1.0

KNOM_Conference_2008_start.ppt

Javascript

chapter1,2.doc

Microsoft PowerPoint App Fundamentals[Part1](1.0h).pptx

HTML5가 웹 환경에 미치는 영향 고 있어 웹 플랫폼 환경과는 차이가 있다. HTML5는 기존 HTML 기반 웹 브라우저와의 호환성을 유지하면서도, 구조적인 마크업(mark-up) 및 편리한 웹 폼(web form) 기능을 제공하고, 리치웹 애플리케이 션(RIA)을

마이크로 서비스 아키텍처로 개발하기

메일서버등록제(SPF) 인증기능적용안내서 (HP-UX - qmail) OS Mail Server SPF 적용모듈 (Perl 기반) 작성기준 HP-UX 11.11i qmail 1.03 spf-filter 년 6 월

슬라이드 1

이 드리는 혜택 완벽 을 위한 발환경 : Team Foundation Server 200 & CAL 제공 최저의 비용으로 구현을 위해 Visual Studio Team Foundation Server 200 서버 라이센스와 CAL이 에 포함되어 있습니다 을 모든 팀원이

4S 1차년도 평가 발표자료

Portal_9iAS.ppt [읽기 전용]

B.3 JDBC 설치 JDBC Java DataBase Connectivity 는자바에서 DBMS의종류에상관없이일관된방법으로 SQL을수행할수있도록해주는자바 API Application Program Interface 다. 이책에서는톰캣과 SQL Server 간의연결을위

Microsoft PowerPoint - KNOM2008제출_연승호_v1.0

강창훈

Titanium 과 Parse Server 를적용한고효율의 네이티브모바일앱개발 Titanium_Parse 공개 SW 개발자 Lab 오픈소스프론티어 3 기김동우

BEA_WebLogic.hwp

메일서버등록제(SPF) 인증기능적용안내서 (HP-UX - postfix) OS Mail Server SPF 적용모듈 (Perl 기반) 작성기준 HP-UX 11.11i postfix spf-filter 년 6 월

1. 안드로이드개발환경설정 안드로이드개발을위해선툴체인을비롯한다양한소프트웨어패키지가필요합니다 툴체인 (Cross-Compiler) 설치 안드로이드 2.2 프로요부터는소스에기본툴체인이 prebuilt 라는이름으로포함되어있지만, 리눅스 나부트로더 (U-boot)

Microsoft Word - ntasFrameBuilderInstallGuide2.5.doc

Microsoft PowerPoint - Chapter_02-1_DevEnv.pptx

Slide 1

< FC8A8C6E4C0CCC1F620B0B3B9DF20BAB8BEC8B0A1C0CCB5E5C3D6C1BE28C0FAC0DBB1C7BBE8C1A6292E687770>

표준프레임워크로 구성된 컨텐츠를 솔루션에 적용하는 것에 문제가 없는지 확인

PowerPoint 프레젠테이션

< 목차 > Ⅰ. 개요 3 Ⅱ. 실시간스팸차단리스트 (RBL) ( 간편설정 ) 4 1. 메일서버 (Exchange Server 2007) 설정변경 4 2. 스팸차단테스트 10

1. 배경 업무 내용이나 개인정보가 담긴 청구서 등을 메일로 전달 시 중요한 정보가 유출되는 경우가 발생하고 있으며, 이에 따른 메일 암호화 솔루션을 도입하고 있으나 기존 ActiveX를 기반으로 한 플러그인 방식은 여러 가지 제약으로 인해 사용성이 저하되고, 고객 대

품질검증분야 Stack 통합 Test 결과보고서 [ The Bug Genie ]

Transcription:

풀스택웹애플리케이션개발프레임워크 AX5UI & AXBOOT Framework 공개 SW 개발자 Lab 오픈소스프론티어 3 기장기영

웹애플리케이션은크게사용자가인터랙션하는프런트엔드 (Front-end) 영역과, 사용자가요청한데이터를저장, 수정, 삭제하는백엔드 (Back-end) 영역으로나눌수있다. 웹애플리케이션개발에는다양한기술이사용된다. 최근에는더급격한속도로웹기술이발전되고있으며현대의웹애플리케이션은단순한인터랙션을넘어서빠르고편리한 UI/UX 프런트엔드기술과수천만, 수억의데이터를빠르고효율적으로관리할수있는백엔드기술이더욱중요해졌다. 또한각기술들은점점세분화되어고도의전문성을요구하고있다. 현대의웹애플리케이션은수가지 ~ 수십가지의기술들과도구를조합하여개발하게되며, 개발이완료된애플리케이션을배포하여운영할때는더많은기술과도구가필요하다. 이처럼어렵고복잡한웹애플리케이션을쉽고빠르게개발할수있는풀스택프레임워크 AXBOOT를이글을통해설명하겠다. 프로젝트명개요특징목표기대효과리퍼지토리 AX5UI & AXBOOT Framework AX5UI를 Front-end 프레임워크로사용하고, 자바 (Java) 와스프링프레임워크 (Spring Framework) 를 Back-end 프레임워크로사용하는풀스택웹애플리케이션프레임워크인 AXBOOT Framework - 풀스택프레임워크 - 운영 / 시스템관리기능내장 - UI 플러그인룩앤필통합관리기능 - 커스텀태그지원 - ORM API 개발을위한코드자동생성 - AX5UI와완벽호환국내개발환경에최적화된웹 UI를제공하고, 복잡한자바 & 스프링기반의개발환경을쉽고단순하게바꿈으로써타프레임워크에비해월등히빠른개발생산성과높은유지보수성을제공개발자와기업이우리가공개한오픈소스기술을기반으로성장하여오픈소스가또다른오픈소스를낳고, 기술이더나은기술을낳을수있음 https://github.com/ax5ui https://github.com/axboot 하위리퍼지토리들전부

[ 목차 ] 1 Google V8 과자바스크립트 2 자바스크립트기반 UI 프레임워크 3 AX5UI Overview 4 AXBOOT Overview 5 AX5UI 빌드및배포자동화소개 6 확장성가능한 AX5UI 테마설계기법 7 AXBOOT 소개 8 AXBOOT 개발환경 - Java - Browser - Web Server - Web Application Server - Database 9 맺음말 1 Google V8 과자바스크립트 2008년, 구글은크롬웹브라우저를발표하면서가장큰장점으로 V8이라불리는자바스크립트엔진을소개했다. 이는자바스크립트가느리다는인식을완전히바꿔놓았고, 다른브라우저제조사들의경쟁을주도하며 Node.js라는새로운생태계를만들었다. 이러한변화는자바스크립트의성능, 확장성, 역할을완전히바꾸어놓았고현재자바스크립트는웹브라우저를넘어서서버, 모바일앱, 로봇제어에까지활용되고있다. 2 자바스크립트기반 UI 프레임워크 웹에대한오랜경험과발전을함께해온오픈소스그룹 AXISJ는자바스크립트와역사를함께하며 2008년부터자바스크립트기반의 UI 컴포넌트를개발해왔다. 2013년오픈소스로처음공개했던 AXISJ UI 프레임워크는전자정부프레임워크경진대회우승을비롯해많은기업과개발자들사이에서주목받는 UI 프레임워크로성장했다. AXISJ를개발, 배포하면서겪

었던다양한경험과수많은사용자로부터받은피드백을바탕으로더빠르고, 더아름답고, 더쉬운 UI 프레임워크를설계하기시작했다. 1 년여간의설계와개발끝에 2016 년 3 월, AX5UI 라는새로운웹 UI 프레임워크를공개했다. 3 AX5UI Overview AX5UI 프레임워크는달력, 메뉴, 그리드, 콤보박스, 토스트, 피커등 10여가지의컴포넌트를제공하고있으며현재도파일업로드, 대시보드, 에디터를비롯한새로운컴포넌트를지속해서개발하고있다. 각컴포넌트는개발자가자유롭게확장, 변경할수있도록유연하게설계되어있으며전세계적으로가장많이사용되는웹프레임워크인 Bootstrap을기반으로룩앤필 (Look&Feel) 을일관되게적용할수있는테마확장기능또한제공하고있다. 4 AXBOOT Overview 한발더나아가, AX5UI를 Front-end 프레임워크로사용하고자바 (Java) 와스프링프레임워크 (Spring Framework) 를 Back-end 프레임워크로사용하는풀스택웹애플리케이션프레임워크인 "AXBOOT" 또한개발이진행되고있다. AXBOOT를사용하면 AX5UI를미리구성된자바 & 스프링환경에서쉽고빠르게사용할수있을뿐만아니라업무개발에바로사용할수있는 10여가지의템플릿코드를제공하기때문에, 다른어떤프레임워크보다높은생산성을제공한다. (https://github.com/axboot/ax-boot-framework) 5 AX5UI 빌드및배포자동화소개 GitHub: https://github.com/ax5ui Site: http://ax5.io/

[ 그림 1] AX5UI jquery, Bootstrap UI Plugins AX5UI 초기설계당시, AXISJ 를개발하면서봉착했던모듈화및배포문제를해결하기위해 Git Subsplit(https://github.com/dflydev/git-subsplit) 과 Jenkins 를도입했고, 현재 17 개의컴 포넌트를모두자동으로빌드하여 NPM Registry 와 Bower 에배포하고있다. 모든컴포넌트소스는 ax5ui-kernel 프로젝트의하위디렉토리로관리되며 Gulp를사용하여 Babel ES2015 컴파일, Script Concat, Minify를하고있다. 변경된코드가 Github에푸시 (Push) 되면 2분주기로리퍼지토리를감시하는 Jenkins가 ax5ui-kernel 소스코드를풀 (Pull) 한후, 버저닝 (Versioning) 을하게된다. 커밋메시지에 MAJOR@, MINOR@, PATCH@ 포함여부를검사하여, 메시지포함여부에따라메이저, 마이너, 패치버저닝을진행하게되고변경된각코드들을 Git Subsplit 명령을통해각각의컴포넌트리퍼지토리에푸시 (Push) 하게된다.

[ 그림 2] AX5UI 빌드및배포자동화과정 최근에는테스트코드작성과더불어테스트코드를다양한브라우저환경에서테스트할 수있도록 TravisCI 와 SauceLabs(https://saucelabs.com/) 테스트환경을구성하고있다. 6 확장성가능한 AX5UI 테마설계기법 AX5UI 는 CSS 전처리기로 SASS(http://www.sass-lang.com/) 를사용하고있다. Bootstrap SCSS 와호환되도록설계되어있어쉽고효율적으로컴포넌트의룩앤필을변경할수있다. 예1) ax5dialog.scss @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss"; @import "node_modules/bourbon/app/assets/stylesheets/_bourbon.scss"; @import "node_modules/ax5core/src/_ax5-ui-mixin.scss";

@import "scss/ax5dialog_variables"; @import "scss/ax5dialog"; [ 그림 3] AX5UI Dialog Test 예 2) app.scss @import "../../plugins/ax5core/src/ax5-ui-mixin"; @import "../../plugins/ax5ui-dialog/src/scss/ax5dialog_variables"; @import "../../plugins/ax5ui-dialog/src/scss/ax5dialog"; $ax5mask-bg-opacity: 0.4; @import "../../plugins/ax5ui-mask/src/scss/ax5mask_variables"; @import "../../plugins/ax5ui-mask/src/scss/ax5mask";

//$ax5modal-easing-time-open: 0.0S; @import "../../plugins/ax5ui-modal/src/scss/ax5modal_variables"; @import "../../plugins/ax5ui-modal/src/scss/ax5modal"; $ax5picker-easing-time-open: 0.1s; $ax5picker-easing-time-close: 0.1s; @import "../../plugins/ax5ui-picker/src/scss/ax5picker_variables"; @import "../../plugins/ax5ui-picker/src/scss/ax5picker"; app.scss파일의보다상세한내용은 https://github.com/axboot/ax-boot-framework/blob/master/ax-bootadmin/src/main/webapp/assets/scss/axboot.scss 와 https://github.com/axboot/ax-boot-framework/blob/master/ax-bootadmin/src/main/webapp/assets/scss/axboot.scss 에서구현된코드를통해확인할수있다. AX5UI 프레임워크의모든컴포넌트는 http://ax5.io 에서소개와함께간단한예제를통해만 나볼수있다. [ 그림 4] http://ax5.io

7 AXBOOT 소개 [ 그림 5] http://demo.axboot.com 동적컨텐츠를제공하는웹애플리케이션을개발할때는서버사이드기술이필요하다. PHP, JSP, ASP 등과같은대표적인서버사이드기술들은데이터베이스에데이터를저장, 조회, 수정, 삭제하고언어에특화된제어, 반복구문들을해석하여최종적인 HTML 컨텐츠를브라우저에전달한다. 웹이성장함에따라복잡하고다양한비즈니스로직을처리하는웹애플리케이션들이많아졌고, 서버사이드기술을더욱효율적으로사용할수있도록도와주는여러프레임워크들이생겨났다. 이에 AXISJ는 AX5UI와대한민국에서가장대중적이며많은개발자가사용하는자바 (Java), 스프링프레임워크 (Spring Framework) 를서버사이드기술로사용하는풀스택웹애플리케이션개발프레임워크인 AXBOOT를 2016년봄부터개발하기시작했다. AX5UI 를사용하여동적컨텐츠를제공하는웹개발을위해서는결국 PHP, ASP, JSP 등의기 술들을조합하여프로젝트를구성해야하기때문에, AX5UI 를더쉽고간편하게사용할수 있는방법으로서버사이드기술까지한데모은 AXBOOT 를개발하게되었다.

AXBOOT는 AX5UI, 자바8, 스프링프레임워크4.x, 톰캣을기반으로미리구성된프로젝트를제공하기때문에, 서버를구동하는즉시 AX5UI와자바, 스프링을기반으로개발을시작할수있다. 또한, 다년간의웹애플리케이션개발경험을바탕으로개발한사용자관리, 시스템메뉴, 권한관리, 세션관리를내장기능으로제공하기때문에구현하고자하는비즈니스로직에만집중할수있다. [ 그림 6] AXBOOT 프레임워크기본구성요소에포함된메뉴관리기능 또한, 애플리케이션을운영하면서발생하는모든에러를추적할수있는기능이내장되어 있어에러발생시사용자정보, HTTP 요청정보, 스택트레이스를수집하여자동으로로깅하 며, 이메일, Slack, SMS 등다양한방법을통해실시간으로에러를전송할수도있다. 자바기반의웹애플리케이션개발자들이익숙한 JSP 를템플릿엔진으로사용했고, AX5UI 컴포넌트를 JSP 내에서쉽고편리하게사용할수있도록 JSTL(Java Standard Tag Library) 로 확장하여가독성과유지보수성이높은코드를작성할수있다.

[ 그림 7] https://api.axboot.com gitbook.com 서비스를이용하여제작중인 AXBOOT 매뉴얼사이트 또다른 AXBOOT의강력한기능중하나는현존하는모든 DBMS의테이블을역공학 (Reverse Engineering) 으로분석하여대상테이블에 CRUD를위한코드 (Controller, Service, Entity, Repository) 를자동으로생성해주는모델추출기능이다. 모델추출기능을활용하면테이블설계후반복적이고패턴화된 200여줄의코드를단 1초만에얻을수있다.

8 AXBOOT 개발환경 [ 그림 8] AXBOOT 개발환경 Java JDK 1.8 이상 Browser Internet Explorer : 9 버전이상 Google Chrome : 32.0.1700 이상 Opera : Opera 2014 이상 Safari : Safari 7 이상 Firefox : 32.0 버전이상 Web Server 웹서버는 AXBOOT 로개발한애플리케이션을운영시에부가적으로필요한 Proxy, Load Balancer 의역할로버전에대한제한이없다.

Web Application Server Servlet 3.0 스펙을이상을지원하는 WAS. Tomcat 7.x 이상 JBoss EAP 7 이상 Wildfly 8 이상 WebLogic 12c 이상 WebSphere 8 이상 JEUS 7 이상 Database 데이터베이스에대한별도의제한은없다. 기본적으로 H2 데이터베이스를내장하고있으며, 개발및테스트용도로 H2를사용할수있다. 구현하고자하는시스템에맞는데이터베이스종류및버전을사용하면된다. 9 맺음말 AXISJ는대한민국웹기술을더욱풍요롭고발전적으로이끌기위해다양한노력과시도를해왔다. 2번의오픈소스 UI 프레임워크를공개했고, 서버사이드기술을결합한풀스택프레임워크또한공개를앞두고있다. 앞으로더많은개발자와기업이우리가공개한오픈소스기술을기반으로성장하여오픈소스가또다른오픈소스를낳고, 기술이더나은기술을낳을수있는선순환구조가되기를바라며이글을마친다.