Deview 2015


2015.09.14~ 2015.09.15

이틀동안 Deview에 참석하였다. 스프링캠프2015 이후 국내 컨퍼런스 참관은 오랜만이여서 정말정말 재밌게 들었다. 항상 컨퍼런스 참가할 때 마다 느끼는 것. 세상은 넓고 초고수는 많다.

많은 것들을 배웠던 이틀을 나름의 스케치를 남기며 일단 마무리를 할까 한다.(메모에 가깝다. 오타가 많다) 워낙 한정된 시간(50분)에 발표다 보니 대부분 속도도 빠르고 잘 모르는 부분은 잘못된 정보도 있을 수 있다. (혹 틀린 내용이 있거나 좋은 의견이 있으실 경우 댓글로 남겨주시면 감사하겠습니다!)

물론 후에 오픈될 발표 영상이 더 도움이 많이 되겠지만, 많은 발표중 어떤 것들을 들어야 할까. 혹은 다른 사람은 어떤 점을 주목했는가. 에 대해 조금이나마 도움이 되고자 포스팅을 해본다.

Deview 공식 페이지 : http://deview.kr/2015
발표 slide : http://deview.kr/2015/schedule

내 스케쥴

[1] 네이버 효과툰은 어떻게 만들어졌나?
[2] 네이버 효과툰 구현 이야기
[3] Packetbeat 과 Elasticsearch 를 이용한 실시간 모니터링
[4] React Everywhere
[5] 웹 브라우저 감옥에서 살아남기
[6] JPA와 모던 자바 데이터 저장 기술
[7] JPA BOF
[8] Large scale backend service development using Node.js, Docker and AWS
[9] Docker Orchestration
[10] Them simplicity of cluster apps with the Circuit: Implementing a job scheduler
[11] Pesto 내부 구조 파헤치기
[12] S2Graph: A Large scale graph database with HBase

‘Day 1’

[1] 네이버 효과툰은 어떻게 만들어졌나?


slide : http://www.slideshare.net/deview/111-52720751

저작툴

서비스

TODO

parallax

하이브리드 개발자의 장점

동작 원리

render line

스크롤 이벤트 구현

서비스 런칭까지

[2] 네이버 효과툰 구현 이야기


slide : http://www.slideshare.net/deview/121-52734801

저작툴

  1. $watch > dirty checking 해결 $emit(‘{event’}) » Controller.$on() $Broadcast

  2. ng-route 메모리 부족
    자식 창이 끄고 키고» 3기가까지 올라갓다.
    • html 파일로 직접 접근
    • ui-route 를 더 추천
  3. ng-repeat
    • directive in directive $scope가 계속 물고가서 안그러면 나중에 노드/리스너 등이 계속 늘어남
    • 명시적으로 $destroy 해주어야 함
  4. SVG 렌더링 이슈
    ng-show를 같이 사용

외부 모듈 사용하여 개발할때의 이슈

  1. $scope 변수가 반영되는 조건
    • dom 이벤트 —> $safeApply in Directive > scope.$root.$safeApply
  2. undo/redo opensource memento 네이버 : memento-promise

  3. psd.js
    • 문제 한글이름이 깨짐
    • 이름이 너무 길면 파싱이 깨짐

      python psd-tools — 한글 레이어 이름 해결 — 긴 height psd 메모리 문제 없음. — psd 자동 나누기도 가능

unit test

test

문제 발생 » 노드js 파싱 못함. 화면을 보면서 테스트 코드를 넣고 싶다 » 자스민jasmine 활용

뷰어 이슈

  1. 스크롤

적당한 크기로 나눌 필요가 있다 가로 * 세로 = 1024 * 1024 * 3

  1. 사운드

iOS 명시적인 사용자 액션에 의해서만 사운드 재생 가능. (한번만 하면 나중에는 프로그래밍 적으로 가능 » 첨 시작할떄 아무 소리 없는 오디오를 틀어서 나중에 쓸수 잇게 꼼수)

[3] Packetbeat 과 Elasticsearch 를 이용한 실시간 모니터링


slide : http://www.slideshare.net/deview/131-packetbeat-elasticsearch

layer 에서 모든 프로토콜을 받아서 실제 pysical protocol 몸을 받아서 request와 reponse를 해서

no- pipiline의 경우 꼬리에 꼬리를 물고 잇어서 쉽지만 pipelining이 되어있으면 request랑 response 페어를 맞춰줘야함.

따라서 모든 request-response pair json obj를 만들어주고 그 안에 관련 info들을 넣음. ( ex. response code, get method 등등)

SQL / DNS » json 으로 info packaging

  1. derivative aggregation
    • constantly gworing /
    • caculating moving average.

오래된 데이터는 important를 낮춰서 계산. 최신이 더 중요한 data 수집된 데이터와, 무빙 에버리지, threshold, mean

파도 모양 트랜드의 경우

Q&A

  1. why go?
    • cpu/memory 를 많이 쓰고 싶지 않았다.
    • 자바는 너무 무거워
    • 파이썬/루비는 너무 느려
    • 씨 » 너무 어려웡. 오래걸릴것 같아.
    • 고 » 굿 랭기지
    • 여러 플랫폼에 쓰여야함. » 따로 deployment를 해야하지만. supportable
    • logstash를 사용 하는게 편하지만 만약 json parser를 뭐 만들면 뭐 쓸 수 잇긴 허지
  2. aggregation
    • 모든 aggregation을 직접 custom해서 쓸 수 있다.
    • 예로 보여준것은 standard 뿐이고 직접 맞춰 할수 잇다.
  3. Flume 이용중 flume vs .filebeat
    • elastic search 를 붙히기 쉽다.
    • simple
    • flume의 검색?(이게 뭔지 안들렷..ㅠ) 은 엘라스틱보다 느리다.
  4. 다운타임동안 어케 처리할꺼임.
    • ping을 계속 날림. > 만약 missing data가 잇는지 확인
    • 도커 지원 함
  5. performance, benchmark?
    • pretty row resouces
    • 지금은 샘플을 auto로 가지고 잇으면서 하지만 앞으로는 좀더 주요한 데이터를 가지고 있고 아닌건 drop data 를 할 수 있도록

[4] React Everywhere


slide : http://www.slideshare.net/deview/141-react-everywhere

React

<script type=“text/babel”> » babel-core/browser 로 translate — jsx가 아니네  » 0.14 부터 폐기 –> 나도 바꿔야 겟다.

웹팩/핫모듈대체/유니버셜 랜더링

$ npm install webpack
$ babel-core 바벨 번역기 (dev에 사용하기 위해서)
$ babel-loader 바벨 로더 ( 웹팩에서 바벨을 수행하기 위해서)
$ react

webpack.config.js

 module.exports = {
     emtry : {진입하는 파일 ex) .hello.jsx} ,
     output : {
          path : {_dirname+ /build}
          filenaem : {hello.js}
     },
     module : {
          loaders : [
                .jsx? 끝나는 파일을  node_module 파일들을 압ㅇㅇ압축
          ]
     }
};

별도의 jsx 파일에서는 CommonJS 방식으로 react 참조해야함.

실행

$ webpack
$ webpack -w (watch)

ES6 style

import React form react;                                         // ES6 import
class HelloClass extends React.Component {                // 상속
     render( ){
          return <h1>hello</h1>
     }
}

Hot module replacement 핫 모듈 대체

Universal Rendering

 virtual DOM > renderToString  > HTML String
                    > render                > DOM

[5] 웹 브라우저 감옥에서 살아남기


slide : http://www.slideshare.net/deview/152-52736153

대안

Observer 패턴

게임 디자인 패턴을 이용한 웹개발

단점

  1. 초기 개발 공수
  2. 최적화된 형태구현은 아니다. ex) 유저 entity의 경우 초기 init만 해주면 되는데 위에서와 같이 초당 몇번씩 같이 update됨

웹소켓으로 구현한 웹과 하드웨어

What’s next

[6] JPA와 모던 자바 데이터 저장 기술


slide : http://www.slideshare.net/deview/162-jpa

성능 최적화

지연 로딩 / 즉시 로딩

Member member = memberDao.find(memberId);
Team team = member.getTeam; > select * from member
Member member = memberDao.find(memberId);
Team team = member.getTeam; > select * from member join other table

JPA 기반 프로젝트

  1. spring data api
    • 인터페이스만 작성.
    • 스프링 데이터 jpa가 구현 객체를 동적(런타임에) 으로 생성 주입. 짱짱!
    • paging /Sorting 도 해줌
    • 메소드 이름으로 추론하여 찾아줌. — parameter로 Sort sort 넘기면 알아서 — parameter로 Pageable pageable 알아서 페이지 » 두번이 날라감. find all 해오고, page 전체를 select해옴
    • @Query(), jpql 도 가능 .
    • Web domain class convertor도 바로 가능하다. 오오 스고이
  2. queryDSL
    • 동적 쿼리
    • sql, JPQL을 코드로 작성할 수 있도록 도와주는 빌더 API
    • 오픈소스
    • JPQL의 문제점 type-check 불가능

장점

성능 이슈

[7] JPA BOF


‘Day 2’

[8] Large scale backend service development using Node.js, Docker and AWS slide


slide : http://www.slideshare.net/deview/212-large-scale-backend-service-develpment

[9] Docker Orchestration


slide : http://www.slideshare.net/deview/221-docker-orchestration

Docker

배포 서비스의 고민

도커 주목

도커 설명은 생략

Orchestration 오케스트레이션 여러개의 컨테이너로 하나의 서비스로

Why?

요소

Docker ecosystem 에 여러가지들이 일군 ..

docker swarm

kubernetes

step 1. build pool

배운점

step 2. ShipDock : shipping docker

overview

개발자가 > dogsight(UI) > 빌다가 만들면 도커레지스트리에 올리고 doh에서 도커가 mamange 하다가 kube api에 침. 실제 서버 디스커버리는 nginx로

DOH : 도커오케스트레이션헤드쿼터

도로시 : 도커 베이스 빌더

Docksight

step3. Service Cluster

[10] Them simplicity of cluster apps with the Circuit: Implementing a job scheduler


slide : http://www.slideshare.net/deview/231-the-simplicity-of-cluster-apps-with-circuit

command-line

$ circuit mkproc
$ circuit stdout
$ circuit wait
$ circuit stderr

System Overview

$ circuit start

go API overview

Anchor

implementing a job scheduler

architect

host A에는 스케쥴러  »» http api 제공 B,C에는 잡 1,2 그리고 3을 돌린다. 각 ABC에는 서킷 클라이언트가 잇음

State and logic

유저가 job을 더한다던가 status를 보겟다는 요청이 들어오면 일단 pend 에 쌓이고 써킷이 job을 뺀다던가 호스트를 넣거나 빼거나 스케쥴러는 컨트롤러랑 connect되서 job execute

컨트롤러레 실제 잡들을 넣고

Controller state는 서킷에 의해 컨트롤 되며 job 쌓인 것들 pending 같은거 이런것도 다 관리 해주나방

scheduler에 잡이 들어오면 클라이언트 serverId를 가지고 어디에 커넥트 해야하는지를 보고 (HOST) 스케쥴 서비스 네임을 넘겨서 (SERVICE)

스케쥴러는 그걸 받고 일단 controller를 안락하고 jobs를 업뎃/add하고 다시 schedule()시킴.

만약 user로 부너 status 요청이 들어오면 controller lock을 하고 ……값 리턴? (놓쳣넹)

Run a job jobAnchor에 work({host}, “job”, {job.name})

github에 올라와 잇으니 한번 돌려봐야 알것다..

master
ㄴ sched1
ㄴㄴ job1
ㄴㄴ job2
ㄴ sched2
ㄴㄴ job3

docker image를 이용해서 하나의 master/sched/job 을 다시 circuit sever로 쌓아서 여러 host끼리 묶을 수도 잇음.

[11] Pesto 내부 구조 파헤치기


slide : http://www.slideshare.net/deview/245-presto

presto

$ presto  
$ describe
$ select

장점

SELECT *
FROM hive.world.orders
JOIN mongo.deview.lineitem i

이런식으로 가능

Cluster memory manager

Security

내부 기능

Library

Method Variable Biding
@SqlType (RegExp) >>> @SqlType(VARCHAR) Slice pattern
@SqlType (BOOLEAN) >> @SqlType(VARCHAR) Slice source

Plugin

Future

표준 질의 사용 spark 와 대비 햇을때 계속해서 안정화 되어가고 잇음.

억단위 데이터가 잇을때 정확한 값을 안주고 근사치를 준다?

데이터 샘플링 방법

  1. 실제 질의
    • 정확한 값 select * from hive.world where condition
  2. 샘플링 기능 제공 ( 근사치를 뽑아주는)

하이브보다 정확성은 똑같고 스피드는 평균적으로 10배정도

[12] S2Graph: A Large scale graph database with HBase


slide : http://www.slideshare.net/deview/263-s2graph-largescalegraphdatabasewithhbase2

하고 싶엇던것

BEFORE

AFTER

서비스앱 » 다 쏴줘 » S2GraphDB (stateless app servers) » HBase

그래서 S2Graph를 왜 만들엇는가

왜 마이에스큐엘 안하고 그래프DB왜 써?

추천

Item-based CF

Spreading Activation

나랑 같은 프로덕트를 반응한 사람들을 찾아서 그 사람들이 반응한 다른 product들을 뽑을 수 있다 (no batch) 마이에스큐엘의 경우 self join 때문에 성능 문제가 나오지만 hbase의 경우 성능이 좋아짐) 컨텐츠의 생명 주기가 짧을 경우 효과가 크다 ex) 뉴스

####API

####Vertex

Edge

Query

Indices

결론 : S2Grpah는 스토리지 서비스/ 그래프 모델

아파치 지라프랑 다른게 몬데? 시작점 vertex를 찍고 거기에 연관된 것들을 뽑아오는것에 집중 친구가 젤 많은 사람은? 이런고 노노

####PUSH 내가 라이크 하나할 경우 모든 친구 feed queue에 write 해야함.

PULL

내가 라이크 해도 딱 하나만 write (post에 대해) 저장 event에 대해 update 1 번

pull / push모두 지원하긴 하지만 pull이 response를 초당 2만 tps를 견딜 수 잇엇음 reponse 100ms under

오픈소스

AB 테스트

Edge 그래프가 지원되어서 사내에서 사용중

S2Graph internal

성능

linear 스케일러블

####벤치마크 툴

그래프DB

쿼리 리밋

개인 느낀점

아쉬웠던 점부터 공유하자면.. 4개의 트랙이 동시진행 되다보니 듣고 싶어도 못들을 세션들이 좀 있다 ㅠ.ㅠ 아파치 스팍 관련이라던가 swift 프로그래밍, 로봇, pinpoint, 추천 등등. 참관하신 다른 분들의 이야기만 들어도 흥미진진한 발표들이 참 많았다. 그리고 머신러닝, 빅데이터, 추천은 역시 큰 화두였는데.. 그에 비해 내가 아는 빅데이터는 너무 초보적이여서..편식하며 듣지 않았나 싶다. 또, 부스들이 다양하지 못했다. 그동안 다른 컨퍼런스에서 보았던 다양한 기술 커뮤니티들이 없어서 조금 아쉬웠다.

당장 써먹어봐야겠다! 했던 것은.. 우선 최근 가장 많이 사용하고 있는 React 관련. React 세션에서는 “리액트”에 대한 기술 뿐만 아니라 함께 사용되는 Babel, Hot module replacement 와 같은 같이 쓸만한 기술들을 소개해 준 부분이 정말 좋았다. 생산성을 크게 올릴 수 있을 것 같다! 또한 JPA 세션을 통해 알게 된 성능최적화/지연로딩 즉시로딩 등. 앞으로 jpa를 쓸 때 좀 더 꼼꼼히 생각해볼 수 있을 것 같다.

기억에 남는 세션은 Circuit이였다. 서킷 클라이언트들의 P2P 네트워크와 마스터-스케쥴러-잡의 역할 등이 기존 내가 생각하던 시스템 아키텍쳐와는 달라 정말 신선했다! 고랭이 항상 관심은 있지만 차일피일 미뤄오고 있었는데, 서킷 써보기 위해 고랭을 공부해볼까 한다. 아직 공개된 demo 에 대한 문서화가 완료되지 않았다고 하는데, 얼른 보고싶다!

발표 중 인상깊었던 경험 공유는 네이버 효과툰 구현 발표에서 임대현님 이였다. 2011년 데뷰 참석 때 감명받으시고 저 자리에 서보고 싶다 라고 꿈꾸셨는데 2015년 드디어 그 자리에 섰다는 이야기였다. 개인적으로는 2012년 DevOn을 보며 아 저 회사 참 좋다. 나도 저 멋진 개발자들과 함께 일해보고 싶다! 라고 생각했는데 정말 입사하여 2013년 DevOn때 자원봉사활동으로 참가했었다 ㅎㅎ 완전히 같지는 않지만 비슷한(?) 감회를 느껴봐서 그런지 더 와닿았다. 언젠간 나도 저런 자리에 서 볼 수 있지 않을까?ㅎㅎ 과연ㅋㅋ

짧았던 이틀동안 많은 경험을 공유받았고 자극도 많이 받았다! 좋은 컨퍼런스 참관할 수 있게 도움 준 주변 많은 분들께 감사드리며 글을 마치겠다.