Welcome to Denny's Blog: 2012

2012년 7월 17일 화요일

[NHN Technology Services] 2012년 2분기 Tech Award 2.

NTS Tech Award는 회사에 헌신하고, 가시적인 성과를 창출한 직원 및 조직에게 그에 상응하는 포상을 하는 것으로 다양한 기여활동을 발굴하여 회사와 직원의 가치를 높이고, 일에 만족감과 열정을 상승시키고자 하는 제도입니다.

2012년 2분기. NTS를 위해 본인의 자리에서 맡은바 최선을 다해주신 Tech Award수상자를 소개합니다.^^

2. 컨버전스UI개발팀

· 수상소감 한마디.

컨버전스UI개발팀은 대외사업 UI개발 및 AU 역량 향상을 위해 작년 말에 신설된 팀입니다. 올 상반기에는 대외사업 UI개발 업무와 더불어 웹메신저 프로젝트나 윙버스 구글맵 개발 같이 자바스크립트 신기술을 도입한 프로젝트를 진행했습니다. 또한, AU개발 지원 및 가이드, 각종 직무 교육 강의 등을 통해 조직 내 AU 기술 역량 향상을 위해 노력했습니다.

모든 팀들이 각각 맡은 역할에 충실 하듯히 우리 팀 역시 기본 역할에 최선을 다한것이 좋은 결과를 가져왔다고 생각합니다. 무엇보다도 팀원들이 팀의 비전을 잘 이해하며, 팀웍을 잃지 않고 난관을 잘 겪어 나갔기 때문에 Tech Award 수상이 가능했다고 봅니다. 우리 팀이 특별히 우수해서 받은 것이라기 보다는 앞으로 더 우수해 지라고 받은 상이라 생각하고, 더 도전적이고 효율적으로 목표 수행을 위해 노력하겠습니다.

· 에피소드 및 힌들었던 점이 있나요?

작년 말 처음 팀이 세팅되고 AU업무를 수행 할 때 시행 착오로 인한 어려움이 많았습니다. 초기 AU개발자들이 밤도 많이 새고 마음 고생도 심해서 미안했는데요, 다행이 잘 버텨준 덕에 팀이 이 만큼 성장할 수 있었다고 생각합니다. 또, 대외사업 업무가 워낙 급박하게 돌아가는 것들이 많아서 효율적으로 리소스를 운영하는 데 난관이 있었습니다. 다행이 이제는 대외사업에 대한 업무 이해도가 높아지고, 업무 진행 노하우가 하나 둘 생기고 있어 많이 안정화가 됐습니다.

· 팀내 하반기 목표가 있다면 무엇인가요?

상반기에는 팀이 앞만 보고 달려온 느낌이 있어서, 하반기에는 내실을 다지기 위한 노력을 하려고 합니다. 지금과 같은 팀웍을 끈끈히 이어가기 위해서는 잠시 뒤를 돌아보는 시간도 필요하다고 생각합니다.또한, 신기술 습득과 개발 역량 강화 못지 않게 조직 내 필요한 현안들을 폭넓게 인지하고 팀이 기여 할 수 있는 부분에 적극 기여할 수 있게 노력하고 있습니다.

· 앞으로 바램이 있다면?

어플리케이션 실행 플랫폼이 웹으로 넘어오고 있는 시기라고 판단됩니다. 컨버전스UI개발팀에서는 이 같은 흐름에 뒤쳐지지 않게 많은 노력을 하고 있는데요, 팀원들의 자발적인 희생이 요구될 때도 많습니다. 많이 힘들고 어렵겠지만, 기술을 선도한다는 자부심을 갖고 지금처럼만 맡은바 역할에 충실해 준다면 더 크게 조직에 기여할 수 있는 팀이 되리라 생각합니다. 아.. 그리고... 여성팀원이 절실히 필요합니다^^. UI개발 및 AU 개발에 관심있는 여성 개발자분들을 적극 환영하니 많은 입사지원 부탁해요~

· 컨버전스UI개발팀 워크샵 영상

발췌 : http://nts_story.blog.me/50145648945

2012년 7월 10일 화요일

모바일 이벤트 프로토타입

모바일에서 터치로 할 수 있는 이벤트 3가지를 제작해 보았습니다. http://dev.iamdenny.com/Mobile-Events/index.html

1. 복권 긁기 이벤트

Canvas, jQuery Mobile을 사용하였습니다. 이미지가 하단에 배치되어 있고, 그 위에 Canvas가 겹쳐져 있도록 하였습니다. 그리고 터치가 시작될 때(vmousedown), Canvas에서 Line을 그리기를 시작하고, 터치가 이동할 때(vmousemove)마다 Line을 그리도록 하였습니다. 다만 Line의 색은 투명하도록 Canvas 설정하였습니다(oCtx.globalCompositeOperation = 'destination-out', 참고 : https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html). 터치가 끝났을 때(vmouseup)에는 지워진 픽셀 수를 계산하여, 70% 이상이 지워졌을 때, 당첨 또는 꽝을 알리도록 하였습니다.

2. 화분 물주기 이벤트

CSS3 Animation과 Jindo Mobile Component를 이용하여 개발하였습니다. 구름과 화분 사이를 손으로 수차례 긁으면 비가오고, 화분이 자라는 이벤트 입니다. JMC의 Touch 모듈을 사용하였고, 터치가 위/아래로 70px 이상일때만 'touchmove' 발생하도록 하였습니다. 'touchmove'가 발생하는 횟수에 따라 -webkit-animation을 이용하여 비의 속도를 점점 빠르게 하였습니다.

3. 프리킥 이벤트

CSS3 Animation + Jindo Mobile Component를 이용하여 개발하였습니다. CSS3를 이용하여 왼쪽, 가운데, 오른쪽으로 공이 움직일 수 있는 것과 선수가 공을 찬 후의 상태를 적절히 class로 만들어 놓았고, JMC의 DragArea & DropArea 모듈을 이용하여, 축구공은 Draggable, 골대 이미지 위의 떠 있는 왼쪽, 가운데, 오른쪽의 투명 레이어를 Droppable로 하였습니다. 그래서 Drop이 발생할 때, 축구 선수와 공의 class 이름을 변경 하였습니다.

Gracias.

2012년 6월 30일 토요일

첫번째 앱, 나의도서관리

개발자로 이것 저것 시도하고 만들고, 또 신기술 습득하느라 A to Z 만들어서 배포해 본 것이 없었다. 당연히 누가 뭐 만들면 나도 만들 줄 알고, 더 잘 만들 수 있다고 생각한다. 과연 그럴까, 수많은 유혹이 날 힘들게 했지만, 난 그래도 끝까지 완주했다. 나의 첫번째 앱을 소개 합니다. (두구 두구 두구 두구~) 그렇게 거창하진 않지만, Html5+CSS+Javascript 그리고 Phonegap을 이용하여 개발한 '나의도서관리'앱 입니다. 책을 아주 많이는 아니더라도 꾸준히(한달에 하나?ㅋ) 읽다보니, 이것도 점점 많아지고, '어느 순간 내가 이 책을 읽은거 같은데, 좋은 글귀가 있었는데, 뭐였더라,,,' 하는 생각이 점점 많이 들게 되었습니다. 그래서 내가 개발자이니 내가 직접 만들어보면 어떨까 하고 시작되었습니다.

오른쪽 이미지는 '나의도서관리'앱의 메인 화면입니다. 총 4개의 카테고리('현재 읽고 있는 도서', '즐겨찾는 도서', '앞으로 읽을 도서', '다 읽은 도서')로 나누어져 있습니다. jQuery Mobile 의 기능으로 UI 적으로 많은 부분 쉽게 구현 할 수 있었으며, Jindo Framework도 사용하여 dom을 보다 편하게 제어 하였습니다. 아무래도 두개의 framework를 사용하다보니, 앱 용량이 무거워지는 단점이 있습니다. 다음번엔 하나만 사용해야 할것 같습니다.

왼쪽 이미지는 도서가 선택 된 화면입니다. '읽는중', '읽어야지', '다읽었다.'등ㅇ로 상태 변경이 가능하며, 즐겨찾기를 켜고 끌 수 있습니다. 또한 '글귀 추가' 기능을 제공하여, 좋은 글귀나 기억하고 싶은 문장을 입력 할 수 있으며, 도표나 이미지 같은 자료는 '사진 삽입' 기능을 통해 이미지를 저장 할 수 있습니다. '도서 삭제'기능을 이용하시면 기록이 전부 다 삭제 되오니 조심하셔야 합니다.

도서 추가는 네이버 도서 API를 이용하였습니다. 그래서 네이버 도서에 없는 책은 추가 할 수 없으며, 추후 구글 도서를 통해 등록이 가능하도록 개발 할 예정입니다.

환경설정을 하는 페이지입니다. 메인 화면의 4가지 카테고리에 표시되는 도서 수를 최근 변경일을 기준으로 해당 개수 만큼 표시하도록 설정합니다. 또한 도서 검색시에도 표시하는 게시물 수를 변경 할 수 있습니다. 향후 로그인 기능을 통해 서버에 저장되도록 하여, 어느 환경에서든 접속해서 나의 도서를 관리 할 수 있도록 할 예정입니다.

전체도서를 볼 수 있는 페이지를 제공하며, 메인 페이지에서 각 카테고리명을 터치하면 해당 카테고리의 책들만 볼 수 있습니다. 또한 검색어를 입력하면 도서를 쉽게 찾을 수 있습니다.

아직까지 많은 버그들과 개발 해야할 것들(특히 스플래쉬 화면ㅋ)이 많이 있습니다. 앞으로 계속 추가 개발해 나갈 것이며, 많은 사랑(?) 기다리고 있겠습니다.

현재까지 안드로이드 마켓에만 배포되어 있습니다. 이유는 돈! 구글플레이는 딱 한번만 $25을 내면 되지만, 앱스토어 배포는 매년 $99을 내야 하기에 못하고 있습니다.
후원 해주시면 앱스토어에도 배포 하겠습니다.^^
비공식 다운로드는 여기를,,, https://build.phonegap.com/apps/109153/share
Google Play : https://play.google.com/store/search?q=+%EB%82%98%EC%9D%98%EB%8F%84%EC%84%9C%EA%B4%80%EB%A6%AC&c=apps

Gracias.

2012년 5월 31일 목요일

Redis Cluster

Redis Cluster를 공부 하는 중 좋은 영문 자료가 있어서 번역을 하였습니다. 제 첫번째 발 번역이오니, 참고하세요^^;
출처 : http://redis.io/presentation/Redis_Cluster.pdf

모든 노드는 서비스 채널과 함께 직접 연결되어 있다.
기본 TCP Port는 4000번 이상, 예를들어 6379 -> 10379.
노드간 프로토콜은 바이너리 형태이고, bandwidth와 speed에 최적화되어 있다.
클라이언트는 보통 노드들과 통신하고, ascii 프로토콜은 사용하며, 마이너 추가를 한다.
노드들은 질의들을 위임 또는 대리인 역할을 하지 않는다.

노드끼리는 어떤 대화를 할까?

PING : 친구 괜찮니? 나는 XYZ hash slots을 위한 Master야. 설정정보는 FF89X1JK야.	PONG : 물론 괜찮아. 나는 XYZ hash slots을 위한 Master야. 설정정보는 FF89X1JK야.
수다 : 여기 내가 연락하고 지내는 다른 노드 정보가 있어.A는 나의 Ping에 답변하였고, 내 생각에 걔 상태는 좋아. B는 가동되지 않고 있어, 내 추축으로는 문제가 있는거 같아. 그래서 나는 확인이 필요해.	수다: 나는 너와 몇몇 불특정 노드들에 대해 공유하고 싶어.C와 D는 괜찮고, 제 시간에 응답해. 그런데 B는 나 또한 가동되고 있지 않아. 내 생각엔 다운된거 같아.

Hash slots

Keyspace는 4096 Hash slots 으로 나눠져 있다. 그러니 아래 예제에서는 10개(0~9)라고 가정한다. 다른 노드들은 Has slots들의 부분집합을 가지고 있다."foo"라는 key를 받은 A를 slot에 위치하자: slot = crc16("foo") nod NUMBER_SLOTS

마스터 그리고 슬레이브 노드들

노드들은 모두 연결되어 있고 기능적으로 동등하다, 그러나 실제로는 두가지 타입의 노드들이 있다(마스터와 슬레이브 노드들로,,,)

장애복구

이번 예제에서는 모든 마스터 노드마다 두개씩의 복제품이 있다, 그래서 두개의 불특정 노드까지는 아무런 이슈 없이 다운 될 수 있다. 가동 중에 두개까지의 노드 다운은 보장한다, 하지만 최선의 방법은 클러스터가 모든 Hash slot에 대해 최소한 하나의 노드로 계속 작동하는 것이다.

여기까지의 뜻은 뭐냐면?

모든 키는 오직 하나의 인스턴스에 존재한다. 또한 N개의 복제품은 절대 쓰는 기능을 받지 않는다. 그래서 병합이 없고, 어플리케이션상 불일치 문제 또한 없다.
그 대가가 네트워크 분리에 저항하지 않는 것은 Hash slot당 복제품 노드들이 다운 되는것보다 크다.(음.... 무슨뜻일까,, ㅋㅋ The price to pay is not resisting to net splits that are bigger than replicas-per-hashslot nodes down.)
마스터와 슬레이브 노드들은 당신이 이미 알고 있듯이 Redis Replication을 사용한다.
모든 물리적 서버는 보통 여러개의 노드(마스터와 슬레이브들)들을 유지하고, 클러스 관리 프로그램인 redis-trib은 마스터와 슬레이브를 할당하고 복제품들은 각각 다른 서버에 위치한다.

클라이언트 요청 - 안똑똑한 클라이언트

Client => A : GET foo
A => Client : -MOVED 8 192.168.5.21:6391
Client => B : GET foo
B => Client : "bar"

-MOVED 8 192.168.5.21:6391, 이 에러의 의미는 Hash slot 8이 다른 특정 IP/port에 위치하고 있고, 그래서 클라이언트는 해당 질의를 안내 받은 특정 IP/port에 다시 문의 해야 한다.

클라이언트 요청 - 똑똑한 클라이언트

Client => A : CLUSTER HINTS
A => Client : ... a map of hash slots -> nodes
CLient => B : GET foo
B => Client : "bar"

클라이언트 요청들

안똑똑한 단일 연결 클라이언트들은 기존 클라이언트 코드 베이스에 대해 최소한의 수정으로 작동한다.
똑똑한 클라이언트들은 여러 노드에 영구적으로 연결하고, hashslot -> node 정보를 캐쉬한다, 그리고 -MOVED 에러를 받았을때 테이블(캐쉬)에 반영한다.
이 스키마는 항상 수평적인 확장성이 있고 낮은 Latency를 바탕으로 한다. 단 클라이언트가 독똑하다면 말이다.
특히 클라이언트가 많은 노드들에 수많은 영구적인 연결을 하는 대규모 클러스터에서 Redis 클라이언트 객체는 꼭 공유되어야 한다.

Re-sharding(재 분할?분배?)

우리는 너무 많은 로드를 경험할 것이다. 신규 서버를 추가 하자.
노드 C는 slot 7에 "MOVING to D"라고 기록한다.
매 시간 C는 slot 7에 대해 요청을 받는다, 만약 그 key가 아직 C에 있다면 답변을 하고, 또한 -ASK D 라는 답변도 한다.
-ASK는 -MOVED와 유사하지만 다르다, 이 뜻은 클라이언트가 D에게 이 질의를 다시 물어봐야 한다, 다른 질의는 상관없다. 이 뜻은 똑똑한 클라이언트가 내부 상태를 변경하면 안된다는 뜻이다.

Re-sharding(재 분할?분배?) - 데이터 이동

Slot 7에 대한 모든 새로운 Keys는 D에서 생성되고 수정되어 질 것이다.
C에 있는 모든 Old Keys는 redis-trib의 MIGRATE 명령어에 의해 D로 옮겨질 것이다.
MIGRATE는 하나의 원자(shell) 명령어이다, 이것은 C에 있는 key를 D로 옮기고, D에서 잘 받았는 응답을을 받은 후, C에 있는 그 key를 삭제할 것이다. 그래서 경쟁은 불가능하다.(동시에 진행되어 먼저 삭제할리 없다는 뜻인거 같음.)
p.s MIGRATE은 만들어진 명령어다. 즐겨라...
Open problem : 효율적으로 hash slot N 에 있는 그 다음 keyf를 C에 물어봐라.(맞나? ^^; ask C the next key in hash slot N, efficiently.)

Re-sharding with 결함있는 노드들

노드들은 재분배(resharding)하는 동안에 실패 할 수 있다. 일반적으로 슬레이브 승격(?)이다.
redis-trib 유틸리티는 시스템 관리자에 의해 실행된다. 이 유틸리티는 재분배(resharding)하는 동안 클러스터 설정을 지속적으로 검사하고, 잘못 되었다면 종료하거나 경고를 한다.

결함 허용

모든 노드들은 지속적으로 다른 노들에게 ping을 한다.
하나의 노드는 N 초 이상 접속불가능 할때, 아마도 결함이 있다고 다른 노드들에게 표시한다.
모든 PING과 PONG 패킷은 수다섹션(gossip section : 다른 노드들의 접속불가능 시간들과 어떤 노드에서 보내왔는지에 대한 정보)을 포함한다.

결함 허용 - 결함 노드들

A는 마지막 PING 요청이 시간초과 됐을때, B에 결함이 있다고 추측을 한다. A는 다른 힌트 없이 어떤 조치도 취하지 않는다.
C가 수다섹션(gosship section)을 통해 C 또한 B가 결험이 있다고, A에게 PONG을 보낸다.
여기서 A는 B가 접속이 되지 않는다고 표시하고 이 정보를 클러스터이 있는 다른 모든 노드들에게 알린다. 다른 모든 노드들은 B가 접속불능이라고 표시한다.
만약 B가 다시 정상화 되었을때, 처음으로 클러스터에 있는 아무런 노드에 PING을 날리고, 일시 멈춘 클라이언트들에게 좋은일이 아니라고, 즉시 종료를 통보합니다.
거대한 문제점이 발생한 후 클러스터에 복귀할 수 있는 유일한 방법은 직접 redis-trib을 이용하여 해결하는 것입니다.

Redis-trib - the Redis Cluster Manager

이것은 일단 당신이 N개의 빈 노드들을 시작하기 위해 새로운 클러스터를 설정하는데 사용 된다.
이것은 클러스터가 잘 작동할때 검사를 하기 위해 사용 됩니다. 그리고 클러스터가 계속 작동을 못할때, 단일 노드없이 Hash slots이 있는 것처럼 사용 된다.
이것은 클러스터에 신규 노드가 추가 될때나, 이미 존재하는 마스터 노드에 슬레이브를 추가 할때 또는 우리가 일부 hash slots을 다른 노드들로 재분배(re-sharding) 하기 위한 빈 노드들을 만들때 사용 된다.

이것보다 더 복잡하다.

20분짜리 발표에 맞지 않을 수 있는 상세한 정보들이 있다.
Ping/Pong 패킷은 클러스터가 적절한 중지 후 재시작을 위한 충분한 정보를 포함한다. 그러나 시스템관리자는 CLUSTER MEET 명령어를 IP가 바꿨거나 기타 등등의 경우 노드에 확인할 때 사용한다.
모든 노드는 유일한 ID와 클러스터 설정 파일을 갖는다. 매시간 설정이 바뀌면 클러스터 설정 파일은 저장한다.
클러스터 설정 파일은 사용자에 의해 변경 될 수 없다.
주어진 노드 ID는 절대 바뀌지 않는다.
질문?

2012년 5월 20일 일요일

Background of iamdenny.com

I bought a domain name as iamdenny.com because My name is Denny. :) and I bought a VPS(virtual Private Server) for my websites' web-hosting on phps.kr(it's cheaper in Korea, that why) Well, so I decided to make my homepage, blog and web-app. I made blog.iamdenny.com with Wordpress and dev.iamdenny.com with some web-app that I made with Javascript. It was fine. but I wanted to make iamdenny.com awesome. so I have started to make fantastic backgrounds first with javascript. What I considered to make background as package is namespace, design pattern, naming, concept and etc. So I defined few stuffs. see below.

Namespace : com.iamdenny.background
Pattern : Factory pattern
Framework : Jindo made by NHN
Naming : Following NHN Conding Convention for Javascript v1.1
Concept : Using slamdunk theme and show background ramdomly and develop one by one

And I utilized the web server as Node.js and express and also Nginx. These are really cool combination. I like it. Here is class diagram of UML.

and I've upload all the sources to github. I have made 3 templates. Template 0001 is using Jindo Effects, it goes left to right and come back.

Template 0002 is intended to show up as 3D animation. but not really. I need to study more ;D

Template 0003 is changing images for each 3 seconds and totally full and flexible sized by window resizing.

Well, I made it so far as you see iamdenny.com. I will make the background more and more. Gracias.