최근 몇년간 나온 프론트엔드 프레임웍 정리
HTML5가 나온이래, JavaScript프레임웍에서 프론트엔드가 다양하게 나오고 있는 추세이고 약간만 지나치면 어느순간 사용하던 프론트엔드 기술이 구식이 되어가는 경우도 종종 경험했습니다. 그래서 나음대로 몇년간 유행한 프론트엔드에서 유행한 기술과 앞으로의 동향을 추측해 보았습니다.
목차
- JavaScript 프레임웍
- React.js
- Angular.js
- Angular.js 2.0
- Backbone.js
- Vue.js
- Mithril.js
- Aurelia.js
- Knockout.js
- Ember.js
- Riot.js
- Ractive.js
- 정리
- ES6
- 테스크러너
- Grunt/Gulp
- Yeoman
- 모듈관리
- 패키지 관리
- 하이브리드앱
- SPA
- 개요
- SEO
- HTML6
- 서버측 JavaScript
- Node.js
- Express.js
- io.js
- CSS
- CSS3
- 디자인 패턴
- 아트 스크립팅
- 정리
JavaScript 프레임웍
이미 모두가 알고 있고 좋아하는 JavaScript 프레임웍을 간단하게 정리해봅니다.
React.js
- 최근 주목받고 있는 Facebook에서 만들어진 라이브러리에서 MVC아키텍쳐에서 View에 해당하는 기능이 제공됨
- JSX, Virtual DOM이라는 새로운 접근방법
- MVC와는 다른 Flux라는 디자인패턴
- Isomorphic 아키텍쳐 가능
- Angular.js나 Backbone.js가 규모가 커지면 관리하기 힘든 단점을 보완
Angular.js
- Google에서 만든 MVC프레임웍
- 전체 스택에서 할 수 없는 일이 거의 없음
- Yeoman등을 사용하면 SPA를 30분이내 만들수 있음(SEO는 안습 ㅠ_ㅠ)
- Angular Wat라고 하지만, 모듈화가 잘되어 있고, 지저분한 코드가 거의 없음
- AngularJS Tutorial
- Yeoman – generator-angular
Angular.js 2.0
- ECMAScript6등의 최신 JavaScript 규격 도입, TypeScript기반 기술
- Angular.js와 사용법이 다르다.
- WebComponents를 이용하기보다 엄격하고 독립적인 컴포넌트화 추진
- 공식사이트
Backbone.js
- 단일 데이터를 관리할 Model, 여러 개의 모델을 관리할 Collection, 화면을 관리하는 View를 조합
- Backbone.js 자체는 구조화방식이 아닌 프레임웍으로 Marionette.js와 같이 사용하는 경우가 많음
- 사례가 의외로 많음 (Buffer, Soundcloud, Trello등)
Vue.js
- MVVM
- 만든 UI구성요소를 조합하여 페이지를 구성하는 것을 전제로 함
- 비슷하다고 말하지만 Angular.js와는 설계사상이 완전 다름
- 이해하기 쉬운 프레임웍으로 유명함
Mithril.js
- Mercury와 같이 속도가 빠른 프레임웍
Aurelia.js
ECMAScript6, ECMAScript7 구문
Google Angular.js개발에 참여했던 Rob Eisenberg가 개발함
Knockout.js
- MVVM
- Binding에 특화된 프레임웍
- 기능은 적지만 도입이 용이하고 학습비용이 낮음
Ember.js
Riot.js
- 공식 사이트
- React를 의식하고 만들어진 초경량 UI라이브러리로 View에 특화
- JSX 도입
Ractive.js
- 공식 사이트
- 데이터바인딩에 특화된 JavaScript 라이브러리
- Virtual DOM개념 이용
정리
간단하게 정리만 했지만, 상당히 많습니다. 이 중에서 5가지 정도는 기억해두면 일반적인 앱을 만드는데 지장이 없다고 생각되기 때문에 참고용으로 알고 계시기 바랍니다.
ECMAScript 6
차세대 프레임웍에 채용되고 있는 ECMAScript 6(ES6)를 소개합니다.
ECMAScript는 JavaScript 표준언어의 차기 표준사양을 말합니다. class 기능이 도입되어 지금까지의 JavaScript와는 크게 달라졌습니다. JavaScript 프레임웍을 몇가지 기억해두면 좋기에 ES6의 흐름을 기억해두면 더 좋기에 정리해보았습니다.
테스크러너
Grunt/Gulp
테스크러너는 프론트엔드의 다양하게 발생하는 귀차니즘을 해결해주는 자동화 도구를 말합니다. 이것이 없이는 프론트엔드를 개발한다는 것은 쉽게 생각할 수 없습니다.
Gulp와 Grunt가 양대산맥이지만, 할 수 있는 것은 크게 차이가 없습니다. 차이점을 살펴보는 것보다는 직접 해보고 결정하시면 좋습니다. 어느쪽을 사용할지에 대해서는 개인적인 취향이라고 봅니다.
Grunt는 설명하면 길어지기 때문에 간단하게 설명하자면, 동기화 프로세스(작업 1개가 1개의 순서로 실행)으로 속도가 느리(비동기적으로 처리하는 플러그인도 있음)고, 그와 반대로 Gulp는 1개 작업이 1개의 순서를 컴팩트하게 사용가능하며 작업을 동시에 할 수 있는 특징이 있어 개인적으로 Gulp를 추천합니다.
Yeoman
테스크러너는 없지만 같이 거론되는 경우가 많은 Yeoman을 소개합니다. 이를 간단히 말하자면, 프론트엔드 “scaffold”를 해주는 도구입니다.
인기있는 것들은 Angular.js의 generator-angular-fullstack과 웹앱을 만드는 generator-gulp-webapp, React.js의generator-react-webpack이 있습니다.
Gulp, Grunt 작업 서버부터 생산용 빌드등 기본적인 것부터 생성기까지 다양한 도움이 됩니다.
모듈 관리
Browserify와 Webpack내용은 테스크러나와 마찬가지로 큰 차이점은 없지만, Webpack이 후발주자로 최근 새 프로젝트에서 적용사례가 많아지고 있습니다.
그리고 Browserify는 하나의 JS파일을 출력하는 반면, Webpack은 여러개의 JS를 출력하는 것이 쉽고 Browserify는 Gulp등과 같이 사용하는 것이 일반적이지만, Webpack은 그것이 없어도 풀스택에서 빌드할 수 있습니다.
그래서 개인적으로 무리하게 Webpack을 사용하라고 추천하지는 못하지만 새 프로젝트를 진행한다면 시도해보면 좋을 것 같습니다.
패키지 관리
패키지 관리는 npm, Bower로 합니다. 간단하게 설명하자면, npm은 주로 node.js기반인데 반해, Bower는 브라우저기반에서 실행되는 라이브러리를 관리합니다.
최근에는 “CommonJS 스타일로 모듈관리 -> 빌드”하는 플로우에서 JavaScript개발을 하는 것이 npm & Webpack(Browserify)에서 소스관리하고 require(‘패키지명’) 및 로드라는 패턴으로 가고 있는듯 합니다.
그리고 Angular.js 2.0 및 React.js등에서 ECMAScript 6기반 스크립트기반으로 Node.js환경으로 가고 있어 앞으로는 Bower 사용은 크게 줄 것으로 예상됩니다.
하이브리드 앱
하이브리드 앱에 대해서는 너무 많은 것들이 있는데 그 중 React Native, Meteor, Ionic을 추천해봅니다.
그리고 최근에 React Native기반으로 앱 개발을 해보면서, React.js를 통해 웹에서 모바일까지 같은 언어로 실행시키게 하려고하는 것을 너무 느꼈습니다. 실제로 React.js개발과 병행하더라도 공부해야할 양이 많지 않아 개발언어를 익히는 것에 대한 스트레스가 덜 받습니다.
- React Native
- JavaScript로 작성된 코드가 iOS네이티브 앱으로 실행됨
- React.js와 같은 문법구조를 가지고 있어 접근하기 쉽다
- Meteor
- 프론트엔드와 백엔드까지 풀스택
- 풀더 구성이 심플하다
- Ionic
- Angular.js기반
- React Native를 사용하지 않았다면 이것을 사용할듯
- Native Script
- 최근 이슈가 됨
- PhoneGap
SPA
Single Page Application의 약어로 JavaScript 프레임웍으로 인해 개발비용이 크게 절감된 응용프로그램 아키텍쳐중 하나입니다.
SEO
Angular.js에서 SEO가 문제가 되기도 했지만 React.js의 Server Side Rendering이 그것을 해결할듯 보여집니다.
HTML6
이 문서에 따르면 HTML6에서는 JavaScript없는 SPA에 대해 언급되었고 이에 대해 논의가 진행중이라고 합니다.
서버측 JavaScript
Node.js
가장 많이 이용하는 것으로 서버측 JavaScript로 Node.js를 말할 수 있습니다. JavaScript이기 때문에 비동기 처리로 빠르게 구현할수 있기 때문에 실시간 웹을 만들거나 JSON을 처리하는 API서버로 사용하기 알맞습니다.
Express.js
MEAN Stack으로 이슈가 된 Node.js 프레임웍 Express.js입니다. 이것은 RESTful API를 간단하게 만들수 있습니다.
io.js
Node.js를 이야기한다면 빠질 수 없는 것이 io.js입니다. 이것도 제가 관심을 가지고 있는 기술중 하나입니다. 현재는 Node.js와 통합되었습니다.
CSS
CSS3
지금까지 JavaScript로 처리하던 것들이 CSS로도 할 수 있습니다. 예로 애니메이션에서는 주로 JavaScript 프레임웍에서도 이미 CSS가 기본으로 되어 있고 GPU처리도 되어 처리성능이 낮은 기기(스마트폰)등에서도 깔끔하게 실행되도록 하고 있습니다.
앞으로 더 다양한 기술이 CSS로 할 수 있을 것입니다.
디자인 패턴
CSS의 용이성에 대해서는 크게 말하기 어렵지만, 다양한 개념과 프레임웍이 많아지고 있어 개발자 입장에서 편해지고 있습니다.
설계
설계 방식은 공통되는 부분을 CSS구조를 가지게 하고 디자인하는 것을 말합니다. 그 중에서도 쉽게 도입할 수 있는 것이 BEM에 포함된 설계 방식으로 아래와 다양한 설계 방법이 있습니다.
- BEM
- OOCSS
- SMACCS
메타언어
CSS를 효율적으로 코딩할 수 있도록 확장된 메타언어가 SCSS와 LESS가 됩니다. 특히 특별한 조건이 없다면 SCSS를 추천합니다.
Compass
SCSS를 더 쉽게 사용할 수 있도록 한 프레임웍으로 유명한 것이 바로 Compass입니다.
프레임웍
너무 많기 때문에 이전에 작성한 글을 참고해주세요. 기본적으로 Bootstrap이면 충분할 것으로 생각됩니다.
다만, 최근 2014~2015년에는 Angular.js나 React.js에서도 도입하는 것도 있고 Material Design형태가 늘어나고 있는 느낌을 받았습니다.
아트스크립팅
HTML5로 인해 플래시로만 할 수 있었던 아트스크립팅을 할 수 있게 되었습니다.
이런 것은 앞으로 VR(Virtual Reality)이나 IoT로 인해 무시할 수 없는 존재가 되었다고 봅니다. 첫번째는 다양한 API로 아름다운 그래픽 결과물이 HTML5가 우수하다는 것과 두번째는 서버측은 HTML5궁합적인 부분에서 Node.js가 우수합니다.
그리고 앞으로 발전될 웹UI를 보면 정말 좋습니다.
- WebGL
- Canvas
- VR
- IoT
- SVG
정리
좀 생각보다 이것저것 정리하다보니 상당히 길어졌지만 이 모든 것을 하는 것은 무리지만 어느정도 알고 있으면 재미있습니다. 1년후에는 또다른 이슈가 있을지도 모르겠지만…
무엇인가 잘못된 것이 있으면 알려주세요.
댓글
댓글 쓰기