Embed Size (px)
Citation preview
Single-page Application- 나에게 맞는 프레임워크 선택하기
2016 년 5 월 22 일
크로키닷컴㈜ 윤상민
경력 디지탈아리아 : 2003~2012
C, C++ 로 Adobe Flash 의 모바일 버전을 개발
크로키닷컴 : 2012~ 비스킷 - 단어장 앱 : 2012~2014 나이키 컵 관리 시스템 : 2013~2015 지그재그 : 2015~
발표자는…
iOS 앱 – Swift 전환중 안드로이드 앱 – Kotlin 고려중 서버 – Node.js Amazon Web Services – EC2, RDS, CloudSearch, S3,
ElasticBeanstalk… 웹 어플리케이션 – Bootstrap, Mithril.js, Gulp, Browserify, … 데이터 분석 – Spark on Zeppelin
지그재그 개발 스택
정적 페이지 (1991~1993) -> JavaScript & DOM Level 0(1995) -> Dynamic HTML(1997) -> XMLHTTP ActiveX(1999) -> XMLHttpRequest(2000~2005) -> Ajax(2005) -> SPA
브라우저의 페이지 이동 없이 모든 기능을 제공 = Client-side web application, Rich web application, Modern
webapp
Single-page Application 이란 ?
장점 사용자 친화적
빠른 반응 화면 전환 애니메이션
서버 요청이 적음
단점 JavaScript 활성화가 필요함
보안이슈 메모리 이슈
검색 엔진 최적화 (SEO) 가 어려움 초기 구동에 시간이 걸림
SPA 장단점
모든 어플리케이션이 로그인이 필요함 -> 검색 엔진을 고려하지 않아도 됨
모바일 어플리케이션을 위해 이미 API 서버는 있음 -> 같은 API 를 이용해서 구현할 수 있음
API 서버는 웹 서버에 비해 구조가 단순해서 차후 한계에 이르렀을 때 다른 것으로 교체가 쉬움 ( 예 Node.js -> Rails)
서버 부하가 적음
크로키의 SPA 선택 이유
SPA 의 가장 큰 문제
정답이 없다
(no de facto standard)
http://yeoman.io 어느 정도 표준화된 프로젝트
파일을 생성해줌 수천개의 생성기 (generator) 크로키는 초기 설정에만 사용하고
현재는 사용하지 않음 . 하지만 간혹 최신 툴의 변경점을 체크하고 있음
Yeoman
전통적인 빌드 툴 Makefile, Ant, Maven, Gradle, Rakefile …
Grunt http://gruntjs.com/ 설정 기반 , 조금 더 오래되어 문서와 플러그인이 많‘았’음
Gulp http://gulpjs.com/ 코드 기반으로 자유롭게 작성할 수 있음 , 속도가 빠름 크로키의 추천
기타 Webpack 을 사용하는 경우 많은 부분을 처리해주기 때문에 ( 파일 묶기 , 최소화등 ) 빌드 시스템
없이 npm scripts 만을 사용할 수도 있다
빌드 시스템
원하는 라이브러리를 홈페이지가서 받아 프로젝트에 추가하는 작업을 없애줌 Bower
http://bower.io/ Twitter 에서 내 놓은 웹 프론트엔드 패키지 관리자
NPM https://www.npmjs.com/ Node.js 에서 사용하는 백엔드 패키지 관리자이지만 , 프론트엔드에도 동일하게
쓰는 경우가 늘어남 간혹 같은 모듈의 Bower 와 NPM 의 패키지가 다른 경우가 있음
크로키는 Bower -> NPM 전환중
패키지 관리자
SPA 는 기본적으로 모든 스크립트를 하나로 만들어서 패포한다 . 하지만 모든 코드를 하나의 파일에 두고 개발할 수는 없다 . JavaScript 는 기본적으로 모듈 시스템이 없다 . (ECMAScript 2015
(ES6) 에서 추가됨 )
모듈 시스템
Browserify http://browserify.org/ Node.js 에서 사용하는 CommonJS 모듈 시스템 (require) 을 지원 ->
Node.js 용 모듈을 클라이언트에서 사용할 수 있음 크로키에서 현재 사용중
Webpack https://webpack.github.io/ 모듈을 묶어주는 역할 . JavaScript 외에 CSS, 이미지도 처리해준다 크로키는 앞으로 전환할 예정
모듈 시스템
http://todomvc.com/ 동일한 할일 관리
예제를 통해 각종 프레임워크를 비교해 볼 수 있음
현재 64 개의 어플리케이션이 있음
MV* 프레임워크
jQuery UI Dojo Toolkit YUI Ext JS Kendo UI Naver Jindo
웹 어플리케이션 초기
http://backbonejs.org/ 비교적 초기에 인기를 끌었음 크기가 작아서 배우기 쉽고 , 수정하기 쉬움 부족한 기능은 플러그인으로 보강 큰 어플리케이션에는 적합하지 않다고 보임 하지만 Backbone + React 등으로 아직 사용되기도 함 Code size (gzipped) : 7.6kb, jQuery(Zepto), Underscore 필요 추천하지 않음
Backbone.js
https://www.angularjs.org/ 구글 개발자에 의해 개발된 프레임워크 MEAN(MongoDB, Express, AngularJS, Node.js) 라는 명칭이 있을
정도로 가장 널리 쓰임 Code size (gzipped) : 56k 최적화가 쉽지 않음 Angular 2 는 거의 다른 프레임워크라고 보일 정도로 많이 바뀜 풍부한 커뮤니티의 지원이 필요한 경우 추천
AngularJS
https://facebook.github.io/react/ 페이스북에 의해 개발되었고 , 실제로 페이스북 홈페이지에 적용되어 있음 최근 가장 핫한 프레임워크 View 부분만 담당하기 때문에 다른 파트를 위해 Flux(Redux),
Immutable 등 다른 라이브러리를 같이 쓰게 됨 Code size (gzipped) : 44kb 한번 개념을 익혀두면 React Native 를 통해 iOS/ 안드로이드 개발도 할
수 있음 가장 빠르게 발전하고 있어서 장래성이 가장 높아보임
React
http://emberjs.com/ 설정 보다 관례 (Convention over Configuration) 를 따름 자체 프로젝트 툴이 있음
ember new ember-quickstartember generate route scientistsember generate component people-listember serveember build --env production
Code size (gzipped) : 116kb 데스크탑 / 모바일 네이티브 앱 개발과 비슷한 환경을 원할 경우 사용
Ember.js
https://www.meteor.com/ 서버 개발을 포함하는 프레임워크 ( 플랫폼 ?) V 부분은 Angular, React, Blaze 를 사용 서버와 클라이언트를 하나의 코드로 개발 데이터가 클라이언트에 있는 것처럼 다루면 자동으로 서버와 동기화를
시켜줌 여러 클라이언트 간에 동기화가 필요한 경우 고려해볼만함
Meteor
http://mithril.js.org/ 가벼우면서도 모든 파트를 커버함 다른 프레임워크보다 평범한 JavaScript 에 가까움 Code size (gzipped) : 7.8kb 현재 크로키의 프로젝트에 사용중
Mithril.js
Vue.js Ext js Cycle.js Polymer Riot.js
그외에도…
Minification (not obfuscation) Sass (or Less) CSS Sprites Static asset revisioning: unicorn.css unicorn-d41d8cd98f.css
알아두면 좋은 개념
감사합니다
