OKKY 자바스크립트 컨퍼런스에 다녀와서

우연한 기회에 제 2회 OKKY 자바스크립트 컨퍼런스를 알게 되어 스텝으로 참여하게 되었습니다. 각 분야에서 유명한 5분의 개발자분들이 react, Polymer 등의 주제를 가지고 발표를 하였습니다. 시간이 적어 깊에 배우진 못하였지만 요즘 핫한 분야를 개념적으로 이해 할 수 있었고 부제가 FullStack javascript 인만큼 서버 환경에 관한 설명까지 들었습니다. 세션에서 들은 내용을 간단히 정리해 보았습니다.

react.js

요즘 핫한 React.js에 관하여 김태곤씨께서 발표해 주셨습니다. Emberjs . angularjs. reactjs에서 실시간 데이터 바인딩 하는 모습을 보여주는 비디오를 보여주었습니다. 돔을 그리는데 월등이 빠른 속도에 배우고자 하는 욕구가 생겼습니다. https://www.youtube.com/watch?v=z5e7kWSHWTg

React.js는 jsx라는 문법을 사용합니다. 조금 생소할수도 있지만 render 함수 안에 있는 문법들을 자바스크립트로 컴파일하여 사용하는 구조입니다.

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.render(<HelloMessage name="John" />, mountNode);

또 React.js는 버츄얼돔을 사용합니다. 버츄얼돔은 변경된 부분만 업데이트 하는 것입니다.

• 일관성이 있다 브라우저에 의존적이지 않다.
• 테스트하기 쉽다. 순수 js이다.
• 빠르다 메모리상에 돔구성, 돔비교를 통해 업데이트 된 부분만 갱신한다.
• 돔비교 알고리즘이 효율적 - 최소 바뀌는 하위 돔을 찾아서하는 방식이라 좋다. 자세한건 검색해서 찾는다.

그 외 설명해주신 특징들로는 단방향 데이터 흐름이어서 이해하기 쉽다. 하위컴포넌트의 변화는 이벤트롤 통해 반영됩니다. 클라이언트와 서버가 같은 코드를 공유한다 등이 있습니다.

react.js뿐만 아니라 html5의 canvus처럼 쓸 수 있는 react canvus, 앱을 자바스크립트로 만들 수 있는 react navtive가 있습니다. 제가 지금 이 글을 쓰고 있는 시점의 얼마전에 react native가 오픈소스로 공개되었습니다. 주목할 기술임이 분명합니다. react는 github awesome-react에 가면 더 자세한 정보를 볼 수 있습니다.

Polymer

폴리머는 구글에서 만든 컴퍼넌트 단위의 프레임 워크입니다. 모든 기능들은 컴퍼넌트단위로 쪼개서 해당 컴퍼넌트가 재사용 될 수 있도록 만들었습니다. 웹 컴퍼넌트를 만든다는 개념으로 하나하나의 커스텀 엘리먼트를 만들어서 사용하는 식입니다.

웹컴퍼넌트.js를 이용하면 모든 스펙에 대한 폴리필 제공해줍니다.(익스 10이상) lite버전은 shadow Dom을 제외한 버전입니다. 폴리머 자체로는 폴리머테크를 만드는것 밖에 못하고 웹컴퍼넌트.js를 같이 써야 폴리머의 기능들을 이용할 수 있다고 하셨습니다.

Light Dom과 Shadow Dom의 차이와 폴리머가 Shadow Dom을 지원하는 부분에 대하여 설명을 해주셨지만 잘 이해는 하지 못하였습니다. Shadow Dom은 템플릿 같은 기능이고 Light Dom은 눈에 보이는 정도의 차이가 있다로만 기억하고 명확하게 이해는 못하였습니다. 폴리머는 Angular처럼 투웨이 데이터 바인딩 기능을 제공하는데 Angular2.0에서는 폴리머와 같은 방식으로 데이터바인딩을 지원한다고 합니다. 예전에 썼던 jsRender랑 같은 데이터 표기 문법이어서 편하게 사용 할 수 있을 것 같았습니다.

컴퍼넌트 단위에 자바스크립트, css파일이 같이 들어가 있어서 어떻게 보면 지저분하게 느낄 수 있지만 재사용성이 늘어나고 딱 그 부분만 이해하면 되니 유지보수에도 좋겠다는 생각이 들었습니다.

ruby & rails

루비의 프레임워크인 rails는 웹서버를 간단히 만들 수 있고 여러가지 강력한 기능들을 제공합니다. 이 세션에서는 레진코믹스의 개발자인 문추근님께서 레이즈를 설치하는 방법과 레진에서는 어떤식으로 사용하고 있는지 설명해주셨습니다. 레진에서는 레일즈를 그런트나 걸프처럼 프론트 개발용(압축, 빌드)으로 사용하고 있습니다. 실서버에서는 레일즈를 이용하여 서비스를 하지는 않고있다고 합니다.

service worker

web worker는 들어봤지만 service worker는 처음 들어봤습니다. 프레임워크나 라이브러리인줄 알았는데 알고보니 서비스 워커는 웹어플리케이션 사이에서 일종의 프록시 역할을 하는 브라우저 스팩입니다. 다른 세션에서는 대충 무엇인지 알고 있었는데 완전 처음 보는것이라서 다음에 이 service worker에 관하여 포스팅해보려 합니다.

web worker와 마찬가지로 다른 쓰레드에서 동작하고 window 스코프에는 접근할 수 없습니다(돔 객체에 접근 불가). 하지만 돔객체를 조작하는 이벤트를 이용해 조작이 가능합니다. 브라우저 앞단에서 스케쥴러, 서비스훅등 여러 기능을 수행할 수 있는데 현재는 케싱만 지원하고 있다고 합니다. 브라우저 자체가 케싱을 할 수 있다는것이 굉장히 매력적으로 느껴졌습니다.

현재 크롬 및 오페라 최신버전 정도에만 지원하지만 유망한 기술중에 하나이고 충분히 배워볼 가치가 있어보였습니다.

Node.js 기반의 분산 서버 환경 구축

제가 가장 재미있게 본 세션이었습니다. javascript의 분산 서버 환경은 들어본 적이 없어서 궁금했었는데 내용도 너무나 알찼습니다. 이 분산서버 환경 구축은 웹소켓등을 이용한 Chat서버 환경을 중심으로 설명해 주셨습니다.

전의 포스팅에서 웹소켓에 관하여 설명했었는데 웹소켓은 HTTP 통신이 아니라 TCP 통신입니다. 일반적인 서버환경의 로드벨런싱을 하게 되면 엔진엑스나 ha프록시 단에서 순차적으로 요청에 관하여 차례대로 로드밸런싱이 됩니다. 그런데 채팅서버의 경우 이미 연결을 맺은 소켓이 다른 서버로 요청하는게 아니라 이전에 요청했던 서버에 계속 로드밸런싱을 해줘야합니다.

이것을 해결하는것은 여러가지 방법이 있는데 먼저 엔진엑스 같은 경우는 클라이언트 ip를 해싱하여 분배해주는 알고리즘을 제공한다합니다. ha프록시도 마찬가지로 가능하고 좀 더 많은 로드벨런싱 알고리즘을 제공해줘서 뜨고있다고 합니다. 아마존의 ELB는 ha프록시등을 두어서 씁니다. 다만 뒷단에 프록시등을 여러개 놀때에는 모든 chat서버에 관해서 요청을 분배해야 합니다.(ELB가 랜덤으로 프록시등에 분배해주므로) 이렇게 요청에 관하여 분배하는 방법 말고 역할별로 분배하는 방법이 있습니다. 메시지를 송신하는 서버와 수신하는 서버로 나눕니다.송신의 경우에는 실시간으로 동작할 필요가 없어서 HTTP여도 상관 없어 EXPRESS같은 것으로 구현하고 메시지 수신은 웹소켓으로 구현합니다. 다만 메시시지 송신서버가 수신서버에게 메시지를 전달해주어야하는데 이 때 레디스나 레빗엠큐같은 노에스큐엘을 이용합니다. 여기에 더해 인증서버를 나눌 수 있습니다. 인증로직을 따로 분리해 요청이 어디서버에 접속할지를 알려주고 Oauth2.0인증 처리를 구현합니다. 이는 패스포트, 스프링 시큐리티등을 사용한다고 합니다. 또 대용량 분산처리시스템인 주키퍼를 이용해 채팅방을 분산처리하는데 쓸 수 도 있습니다.

이것 말고도 여러가지 운영과 관련된 툴에 대하여 알려주셨습니다.

• node.js 포레버라고 서버가 죽으면 자동으로 감지하여 다시 살려주는 기능이라고 합니다. 참고:https://www.npmjs.com/package/forever
• pm2 비슷한 기능을 하는데 좀 더 기능이 많고 cpu수대로 노드 프로세스를 실행시켜 주는 기능도 제공합니다. 참고:https://github.com/Unitech/pm2
• Grafana 로그를 분석하여 모니터링을 하도록 그래프를 그려주는 툴입니다. 자체 웹서버는 없어서 엔진엑스를 연동해야 합니다. 사내에 비슷한 툴들이 있지만 그래프가 정말 잘나옵니다. 설정도 간편하다고 하니 꼭 한번 적용해봐야 겠습니다. 참고:http://grafana.org/

마치며

컨퍼런스 참가 후 적어놓은게 많이 없는 상태에서 글을 쓰려니 잘 생각도 안나고 힘들었습니다. 다음 컨퍼런스때에는 듣고 이해만 하지말고 잘 정리를 하여 매끈한 글을 쓰도록 하겠습니다.

• React.js : http://taegon.kim/archives/5097
• Polymer : http://www.slideshare.net/haibane84/polymer-lego
• OKKY 컨퍼런스 : http://jscon.ebrain.kr/