알토스 벤쳐스 주체 Engineer100 컨퍼런스 발표자료

1. Single-page Application
- 나에게 맞는 프레임워크 선택하기
2016년 5월 22일
크로키닷컴㈜ 윤상민

2.  경력
 디지탈아리아 : 2003~2012
 C, C++로 Adobe Flash의 모바일 버전을 개발
 크로키닷컴: 2012~
 비스킷 - 단어장 앱: 2012~2014
 나이키 컵 관리 시스템: 2013~2015
 지그재그: 2015~
발표자는…

3.  iOS 앱 – Swift 전환중
 안드로이드 앱 – Kotlin 고려중
 서버 – Node.js
 Amazon Web Services – EC2, RDS, CloudSearch, S3,
ElasticBeanstalk…
 웹 어플리케이션 – Bootstrap, Mithril.js, Gulp, Browserify, …
 데이터 분석 – Spark on Zeppelin
지그재그 개발 스택

5.  정적 페이지(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 이란?

6.  장점
 사용자 친화적
 빠른 반응
 화면 전환 애니메이션
 서버 요청이 적음
 단점
 JavaScript 활성화가 필요함
 보안이슈
 메모리 이슈
 검색 엔진 최적화(SEO)가 어려움
 초기 구동에 시간이 걸림
SPA 장단점

7.  모든 어플리케이션이 로그인이 필요함 -> 검색 엔진을 고려하지 않아도
됨
 모바일 어플리케이션을 위해 이미 API 서버는 있음 -> 같은 API를
이용해서 구현할 수 있음
 API 서버는 웹 서버에 비해 구조가 단순해서 차후 한계에 이르렀을 때
다른 것으로 교체가 쉬움 (예 Node.js -> Rails)
 서버 부하가 적음
크로키의 SPA 선택 이유

8. SPA의 가장 큰 문제
정답이 없다
(no de facto standard)

9.  http://yeoman.io
 어느 정도 표준화된 프로젝트
파일을 생성해줌
 수천개의 생성기(generator)
 크로키는 초기 설정에만
사용하고 현재는 사용하지 않음.
하지만 간혹 최신 툴의 변경점을
체크하고 있음
Yeoman

10.  전통적인 빌드 툴
 Makefile, Ant, Maven, Gradle, Rakefile …
 Grunt
 http://gruntjs.com/
 설정 기반, 조금 더 오래되어 문서와 플러그인이 많‘았’음
 Gulp
 http://gulpjs.com/
 코드 기반으로 자유롭게 작성할 수 있음, 속도가 빠름
 크로키의 추천
 기타
 Webpack을 사용하는 경우 많은 부분을 처리해주기 때문에(파일 묶기, 최소화등) 빌드
시스템 없이 npm scripts만을 사용할 수도 있다
빌드 시스템

11.  원하는 라이브러리를 홈페이지가서 받아 프로젝트에 추가하는 작업을
없애줌
 Bower
 http://bower.io/
 Twitter에서 내 놓은 웹 프론트엔드 패키지 관리자
 NPM
 https://www.npmjs.com/
 Node.js에서 사용하는 백엔드 패키지 관리자이지만, 프론트엔드에도
동일하게 쓰는 경우가 늘어남
 간혹 같은 모듈의 Bower와 NPM의 패키지가 다른 경우가 있음
 크로키는 Bower -> NPM 전환중
패키지 관리자

12.  SPA는 기본적으로 모든 스크립트를 하나로 만들어서 패포한다.
 하지만 모든 코드를 하나의 파일에 두고 개발할 수는 없다.
 JavaScript는 기본적으로 모듈 시스템이 없다. (ECMAScript 2015
(ES6)에서 추가됨)
모듈 시스템

13.  Browserify
 http://browserify.org/
 Node.js에서 사용하는 CommonJS 모듈 시스템(require)을 지원 ->
Node.js용 모듈을 클라이언트에서 사용할 수 있음
 크로키에서 현재 사용중
 Webpack
 https://webpack.github.io/
 모듈을 묶어주는 역할. JavaScript 외에 CSS, 이미지도 처리해준다
 크로키는 앞으로 전환할 예정
모듈 시스템

14.  http://todomvc.com/
 동일한 할일 관리
예제를 통해 각종
프레임워크를 비교해
볼 수 있음
 현재 64개의
어플리케이션이 있음
MV* 프레임워크

15.  jQuery UI
 Dojo Toolkit
 YUI
 Ext JS
 Kendo UI
 Naver Jindo
웹 어플리케이션 초기

16.  http://backbonejs.org/
 비교적 초기에 인기를 끌었음
 크기가 작아서 배우기 쉽고, 수정하기 쉬움
 부족한 기능은 플러그인으로 보강
 큰 어플리케이션에는 적합하지 않다고 보임
 하지만 Backbone + React등으로 아직 사용되기도 함
 Code size (gzipped) : 7.6kb, jQuery(Zepto), Underscore 필요
 추천하지 않음
Backbone.js

17.  https://www.angularjs.org/
 구글 개발자에 의해 개발된 프레임워크
 MEAN(MongoDB, Express, AngularJS, Node.js)라는 명칭이 있을 정도로
가장 널리 쓰임
 Code size (gzipped) : 56k
 최적화가 쉽지 않음
 Angular 2는 거의 다른 프레임워크라고 보일 정도로 많이 바뀜
 풍부한 커뮤니티의 지원이 필요한 경우 추천
AngularJS

18.  https://facebook.github.io/react/
 페이스북에 의해 개발되었고, 실제로 페이스북 홈페이지에 적용되어 있음
 최근 가장 핫한 프레임워크
 View 부분만 담당하기 때문에 다른 파트를 위해 Flux(Redux),
Immutable등 다른 라이브러리를 같이 쓰게 됨
 Code size (gzipped) : 44kb
 한번 개념을 익혀두면 React Native를 통해 iOS/안드로이드 개발도 할 수
있음
 가장 빠르게 발전하고 있어서 장래성이 가장 높아보임
React

19.  http://emberjs.com/
 설정 보다 관례(Convention over Configuration)를 따름
 자체 프로젝트 툴이 있음
 ember new ember-quickstart
ember generate route scientists
ember generate component people-list
ember serve
ember build --env production
 Code size (gzipped) : 116kb
 데스크탑/모바일 네이티브 앱 개발과 비슷한 환경을 원할 경우 사용
Ember.js

20.  https://www.meteor.com/
 서버 개발을 포함하는 프레임워크(플랫폼?)
 V 부분은 Angular, React, Blaze를 사용
 서버와 클라이언트를 하나의 코드로 개발
 데이터가 클라이언트에 있는 것처럼 다루면 자동으로 서버와 동기화를
시켜줌
 여러 클라이언트 간에 동기화가 필요한 경우 고려해볼만함
Meteor

21.  http://mithril.js.org/
 가벼우면서도 모든 파트를 커버함
 다른 프레임워크보다 평범한 JavaScript에 가까움
 Code size (gzipped) : 7.8kb
 현재 크로키의 프로젝트에 사용중
Mithril.js

22.  Vue.js
 Ext js
 Cycle.js
 Polymer
 Riot.js
그외에도…

23.  Minification (not obfuscation)
 Sass (or Less)
 CSS Sprites
 Static asset revisioning: unicorn.css  unicorn-d41d8cd98f.css
알아두면 좋은 개념

24. 감사합니다