최근 몇년간 나온 프론트엔드 프레임웍 정리

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의 흐름을 기억해두면 더 좋기에 정리해보았습니다.
현재 ES6을 실행해도 실행되지 않기 때문에 Babel과 Traceur를 사용하여 컴파일해야 하지만, 앞으로 조만간 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를 보면 정말 좋습니다.

정리

좀 생각보다 이것저것 정리하다보니 상당히 길어졌지만 이 모든 것을 하는 것은 무리지만 어느정도 알고 있으면 재미있습니다. 1년후에는 또다른 이슈가 있을지도 모르겠지만…
무엇인가 잘못된 것이 있으면 알려주세요.

댓글

댓글 쓰기

이 블로그의 인기 게시물

iOS 아이폰용 앱 개발을 위한 디자인시, 디자이너가 참고 해볼만한 사항들

이미지
스크랩 - http://blog.naver.com/PostView.nhn?blogId=vowed&logNo=220525263909&redirect=Dlog&widgetTypeCall=true 저는 안드로이드와 아이폰 둘다 개발을 합니다. 안드로이드앱의 개발은 UI요소 개발이 비교적 자유료운 반면,  아이폰 개발은 디자인과 관련되서, 제한이라던지, 커스텀의 어려움이라던지 하는, 고려해야할 사항들이 좀 있습니다. 지인의 부탁으로 인해, 아이폰 개발과 관련되서, 앱 디자인시 유념해둬야 할 부분을 적어둡니다. 서두 -----  (대충보고 모두 이해하지 못하셔도 무방합니다) 안드로이드는, 처음부터 수많은 기기, 수많은 해상도에 알맞게 표현하기 위해 LinearLayout, RelativeLayout, TableLayout 등등, 레이아웃을 자동으로 잡기에 알맞게 되어있습니다. 게다가 "WrapContent"라는 옵션이 있어서, 컨텐츠의 크기에 알맞게 자동으로 자신의 뷰 크기를 결정해주는것이 아주 편리합니다. 반면, 아이폰은 단일기기, 단일 해상도만 개발해주면 되었던, 태생적 특징 때문에 "X, Y" 절대좌표를 가지고 개발을 했었습니다. 후에 "AutoLayout"이라는 개념(안드로이드의 RelativeLayout과 비슷) 이 도입되긴 합니다만, 여러 디자인 요소들사이의 상관관계를 계산하고 결국 X,Y 절대좌표를 가져버리는 특징이 있습니다. 그래서 안드로이드는 여러가지 상황에 따라 자동으로 레이아웃의 좌표, 크기등을 가변적으로 자연스럽게 표현해주기 매우 편리하지만,  아이폰은 그렇지 않습니다. 가변적인 상황이 불가능하지는 않습니다만, 귀찮은 코딩을 해줘야만 하지요. 그래서 가급적이면 아이폰 개발에 관련된 디자인을 할 때에는,   뷰 (혹은 레이아웃)의 크기를 컨텐츠의 크기에 의존적으로 가변적이...
자세한 내용 보기

스냅드래곤 기반 크롬북, ‘트로그도어’ 개발 중

이미지
인텔 프로세서로 작동하는 크롬북 픽셀. 지금까지 크롬북은 인텔 프로세서 기반으로 개발되었는데요. 하지만 차기 크롬북에서 구글은 아이스레이크 기반의 인텔 프로세서를 채택할 계획이 없다고 말한 바 있고, 기존 프로세서 기반의 크롬북을 진행하는 것으로 알려졌습니다. 하지만 구글은 전혀 다른 방향으로 차기 크롬북을 준비하는 모양입니다. 크롬OS 개발을 위한 크로미움의 최근 커밋 에서 구글은 퀄컴 스냅드래곤 기반의 크롬북 개발을 의미하는 코드명이 추가됐기 때문입니다. 코드명은 트로그도어(Trogdor)입니다. 구글이 스냅드래곤 기반 크롬북을 시도한 것은 이번이 처음은 아닌데요. 스냅드래곤 845 기반의 체자(Cheza) 크롬북을 2018년에 개발했지만 출시하지 않았습니다. 흥미로운 점은 구글이 체자 크롬북을 개발했던 코드를 빌려와 트로그도어 크롬북을 개발할 것이라는 점인데요. 다만 스냅드래곤 845가 아닌 스냅드래곤 855나 스냅드래곤 8cx, 또는 2020년에 출시될 스냅드래곤 프로세서를 쓰게 될 것으로 예상되고 있습니다. 아무튼 향후 크롬북에서는 인텔의 독점 시대를 끝내게 될지 지켜봐야 할 것 같네요. The post 스냅드래곤 기반 크롬북, ‘트로그도어’ 개발 중 appeared first on techG . from techG http://techg.kr/24806 via IFTTT
자세한 내용 보기

[펌] 구글 마켓에 있는 apk를 PC로 바로 다운받자

[펌] 구글 마켓에 있는 apk를 PC로 바로 다운받자 정식 구글 플레이 스토어에 있는 무료 App을 pc로 바로 다운받는 방법입니다. 1. 구글플레이 스토어에 접속하여 다운받고자하는 앱의 URL을 복사한다. 2.  http://apkleecher.com/  로 접속하여 해당 URL을 입력 후 Generate Download Link 버튼을 누른다. 3. 자동으로 다운로드가 완료된다 위 방법을 통해 구글플레이스토어에 업로드된 최신 apk를 다운받을 수 있습니다.
자세한 내용 보기