웹개발, 2016년 트렌드와 전망
2016. 11. 15. 22:16웹 개발, 2016년 트렌드와 전망
오늘 회사의 지원으로 난생처음 WEB WORLD CONFERENCE 16에 참가하게 되었다. 13만 원이라는 적잖은 금액의 참가비로 인해 큰 기대를 하고 참가하였지만, 준비가 미비해 보였고 급조한 강의 같은 느낌을 받아 실망 하였다. 나눠준 교안과 PPT가 다른 부분도 많았고, 몇몇 강의는 상세한 설명 없이 너무 간략한 서문만 전체적으로 읽어준다는 느낌을 많이 받았다. 또한, 오늘 하루는 오전 10시부터 오후 6시까지 총 8세션으로 나눠줬지만 각 세션이 중복된 내용이 많아 지루하기 짝이 없었다. 컨퍼런스라는 게 원래 이런 건가 하기도 싶고 너무 상업적으로 변질한 거 아닌가 하는 느낌을 많이 받았다. 아마 내 돈 주고 참가하였으면 피를 토하고 오열하였을 것이 틀림없다.
비판은 이쯤에서 그만하기로 하고 그래도 오늘 강의를 위해 준비해오신 모든 강사님께 감사를 드리며 오늘 알게 된 내용과 함께 좀 더 보완을 해서 정리해 보겠다.
HTTP/2
1999년에 소개되어 지금까지 사용하고 있는 웹 프로토콜은 HTTP/1.1 이다.
HTTP protocol은 기본적으로 원하는 자원을 서버에 요청하고 서버는 이를 응답하는 2가지 절차가 있는 방식이다. HTTP/1.1에서는 필요한 자원만큼 이를 반복적으로 수행하므로(라운드 트리) 요청할 자원이 많을수록 웹페이지 로딩이 오래 걸린다. 이 단점을 보완하기 위해 2015년에 HTTP/2 프로토콜이 소개되었다. HTTP/2 프로토콜의 특징은 다음과 같다.
- 바이너리 프로토콜
- 헤더 압축
- 멀티플렉스(multiflex) 스트림
- 서버푸쉬
- 스트림 프라이어티티
이중 가장 변화한 특징인 multiflex는 하나의 connection에 다수의 stream을 생성하여 여러 개의 request/resopnse를 동시에 처리할 수 있다는 것이다. 이로 인해 웹은 좀 더 빠른 로딩속도를 가지게 될 것이다.
참고: https://cascadingmedia.com/insites/2015/03/http-2.html
요약하자면 핑퐁핑퐁핑퐁 방식에서 핑퐁핑퐁퐁퐁 방식으로 바뀌었다.
Angular.js, ReactJS
구글 트렌드에 따르면 프론트엔드 개발자가 2016년에 가장 많이 찾은 웹 프레임워크는 Angular.js와 ReactJS다. Angular.JS의 가장 큰 특징은 양방향 데이터 바인딩 개념이다. MVVM 구조와 같으며 이는 model이 바뀌면 view도 바뀌고, view가 바뀌면 model도 바뀐다는 뜻이다. 이는 로직으로부터 DOM조작을 분리 한다는 철학인데 장점이 있으면 단점도 있는법, 실시간 양방향 데이터 바인딩으로 인해 자바스크립트에서는 이벤트를 매 두 번씩 걸어야 하므로 항상 성능이슈가 있다. ReactJS는 양방향 데이터 바인딩이 아닌 단방향 데이터 바인딩의 개념이며, 추가로 Virtual DOM을 사용함으로써 성능을 끌어 올렸다.
Angular.js: https://angularjs.org/
ReactJS: https://facebook.github.io/react/
여담으로 오늘 Angular VS React에 관한 내용을 3section동안 연속으로 듣게되었다. 강사님들은 모두 Angular는 Angular개발한 구글에서조차 더이상 쓰이지 않는다는 말과 함께 React가 대세라는 결론을 내렸다. 개인적으로 Angular를 즐겨쓰고 React를 공부한적 없는 나는 React를 하루빨리 공부해야겠다는 생각이 들었다. (위 내용은 Angular 1.x기준입니다.)
ECMA2015의 주요 사항
1. Class
ECMA2015에서 새롭게 추가된 Class 키워드로 인해 JavaScript에서도 기존 언어의 방식처럼 객체지향 프로그래밍을 할수있게 되었다.
var Blog = class {
constructor(name) {
this.name = name;
}
get name() {
return this.name;
}
};
ECMA2015의 Class 내부적으로는 prototype 개념을 사용한다.
2. WeakMap
WeakMap객체는 어떤 객체의 참조가 완전히 제거되었음을 알리는데, 이런 기능을 제공하는 건 JavaScript에서 처음이다. WeekMap은 키-값을 저장하는데 여기서 키는 반드시 객채여야 하며, 약한 참조로 인해 가비지컬렉션이 일어나지 않는다.
var key = {};
var map = new WeakMap();
map.set(key, 'OppaCoding');
key = null;
// 키 참조를 제거하면 값도 제거된다.
3. ArrayBuffer
ArrayBuffer객체로 이제 JavaScript에서 바이너리 데이터를 다룰 수 있게되었다. 특히 Float32Array객체가 추가됨으로써 4bit 데이터도 저장이 가능하다. 이는 WebAssembly와도 관련이 있다.
var buffer = new ArrayBuffer(8);
var view = new Int32Array(buffer);
4. Promise
Promise객체는 JavaScript 비동기 처리에따른 콜백함수를 메서드 체이닝 기법을 이용하여 순차적으로 제어할수있다.
var promise = new Promise(function(resolve, reject) {
// ...
});
promise.then(fn).catch(fn);
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise
5. Proxy
Proxy 객체는 개별적인 행동을 정의하는데 사용된다. 즉, 프록시 객체 자체에서 동작하지 않는 인터페이스를 제공하는 객체다.
var handler = {
get: function(target, name){
return name in target?
target[name] :
37;
}
};
var p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;
console.log(p.a, p.b, p.c); // 1, undefined, 37
Desktop Application
이제는 웹기술을 사용하여 Desktop Application을 만들 수 있는 시대가 왔다.
Full-Stack 개발자
김영보 강사님은 Full-Stack 개발자는 시장의 요구라고 표현하였다. 기업 오너의 입장에서 3명을 고용하느니 3명의 일을 할수있는 1명을 고용하는게 더 이득이라는 것이다. 10년전 웹이 HTML과 CSS중심이었다면 현재는 클라이언트와 서버간의 통합이란다. 그러므로 개발자는 css, HTML, JS, 서버, DB 설계를 모두 할줄알아야 경쟁성이 있다는 것이다. 또한 이러한 시장의 요구는 5년뒤에는 당연한 것처럼 여겨질지도 모르니 이걸 Base로 깔고 뭔가 전문적인 지식을 싸으라는게 강사님의 생각이었다. 나는 개인적으로 아직 부족하지만 Full-Stack 개발자의 길을 걷고있다고 생각한다. 현재 가장 자신있는 언어는 JS이며 HTML, css등을 활용해 마크업이 가능하고 서버사이드도 꽤 이해도가 높다고 생각한다. 어지간한 소규모 웹 애플리케이션은 뚝딱만든다. 이것을 좀 더 발전시켜나가며 T자형 개발자가 되어야하는데 나는 뜬금없이 게임을 개발하고싶다. 아직 1년차 개발자로써 배워야 할 기초가 많으므로 천천히 생각해보겠다.
WebAssembly
2015년에 발표한 로우레벨의 웹 바이러니 포맷이다. 즉 C++와 같은 언어에서 컴파일되어 나온 이진코드를 실행할 수있는 환경을 웹브라우저에서 지원한다는 것이다. 이것은 JavaScript와 C++이 연동된다는것을 의미하며 기존 네이티브 어플리케이션을 웹환경에서 구동할 수 있다는 것이다. 현재까지 prototype이 완성되었고 2017년에 브라우저에 탑재할 계획이다. WebAssembly로 인하여 웹에서 지금까지 경험해보지 못했던 빠른 실행속도를 가지게되고 이것은 게임, 시뮬레이션등 많은분야가 웹어플리케이션으로 흡수될 수 있다는 것을 의미한다.
Docker
개발만 하기에도 모자란 시간, 서버환경 만드는데 시간보내지 마세요.
도커란 서버 환경 자체를 형상관리할 수 있는 Linux 기반의 오픈소스 컨테이너다. VMWare와 같은 Virtual Machine와 유사하며 어디서나 동일한 서버 환경을 보장하고 여러대의 서버를 쉽게 배포하고 모니터링 할 수있다.
SASS, LESS
2017년에도 2016년 처럼 빠른 생태계의 변화 기조가 유지될 전망이고, 그에 따라 복잡도 역시 증가할 것이다. 아직까지 완벽히 이거다! 하며 정착된 웹 프레임워크는 없고 HTML5와 ECMAScript 스펙 확장에 따른 프레임워크가 우후죽순 생겨나고있는 중이다. 웹 개발자는 이 흐름을 계속해서 쫓아, 감을 잃지 말아야 할 것이다.
이것으로 포스팅을 마치겠다.
by 소년코딩
추천은 글쓴이에게 큰 도움이 됩니다.
악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.
'웹앱 이야기' 카테고리의 다른 글
| PHP vs JSP 무엇을 공부하는게 좋을까? (5) | 2016.09.19 |
|---|
