머리가 나뻐서 삽질 SAP(Study And Programming)

작성중 웹브라우저 클라이언트에서 연결하는 WebSocket 프로토콜은 실시간으로 이루어지는 온라인 게임, 트레이딩 시스템과 같이 데이터 교환이 지속적으로 이루어지는 서비스에 적합하다 만약 트레이딩 시스템에서 연결된 WebSocket에서 100ms 미만의 응답속도를 가진 데이터가 끊임없이 내려오고, 그 데이터를 클라이언트 화면에 표현해야 한다면 임의의 시간과 개수로 묶어서 표현한다면 더 효율적이지 않을까? 실무에서 클라이언트에서 사용했던 버퍼처리를 소개한다 DataBuffer.ts 객체로 데이터를 처리할 버퍼를 만든다 index.ts 에서 버퍼객체 생성하여 사용한다

데이터에 대한 내용 설명이 많이 부족해서, 복습 할 겸 내용설명을 충분하게 곁들이고 다시 정리하고 넘어가기로 한다. 데이터와 속도표현에 대한 설명 말미에는 실무에서 쓸 수 있도록 자바스크립트와 php의 함수 표현과 사용법에 대해 알아보도록 한다! 너무 상세한 깊이있는 전문 지식 대신 기초자료에 근거하여 핵심만 알기쉽게 서술형으로 설명하도록 노력하겠다.^^ 데이터에 대해 알아야 할 이유 우리가 쓰는 데이터 단위에는 흔히 컴퓨터에서 사용하는 bit, Byte, KB, MB, GB... 등이 있고 인터넷 속도 단위로는 bps, kbps, Mbps, pps 등 이 있다. 네트워크 관련 작업하는 데에 있어서 용량 표현과 전환에 대한 함수는 반드시 필요하고 그 기반에는 이러한 데이터 수치와 관계에 대한 이해가 밑바..

박스모델의 생성박스모델의 생성과 아이콘 위치 조절박스모델의 동적 생성박스모델의 동적 생성과 아이콘의 위치 조절 jQuery를 사용한 mouseover,mouseout,mousemove,mousedown,mouseupjQuery-ui를 사용한 dragjQuery-ui를 사용한 drag와 옵션jQuery-ui를 사용한 drag와 옵션 - GridjQuery-ui를 사용한 drag와 옵션 - Grid 의 아이콘 수평 가로 정렬, 수직 세로 정렬 맞추기 jQuery - ContextMenu Library를 사용한 ContextMenu의 생성jQuery - ContextMenu Library를 사용한 ContextMenu의 동적생성jQuery - ContextMenu Library를 사용한 ContextMenu의..

포물선 운동과 공 step11 : 클래스로 만들기 step09, 10까지 걸쳐서 이미 충분히 완성도 있게 완료는 되었지만 혹시 클래스로 이를 사용할 경우 우리는 단순히 new Ball()로 만들어서 쓰면 되므로 여러가지 잇점이 있다. Ball( $stage:Stage, $mc:MovieClip, $bottom:int, $top:int) 으로 생성자 함수에서 기본적으로 스테이지, 무비클립객체, 바닥한계, 높이한계를 인자로 받으며 두번째 인자인 $mc에 꼭 공이 아니더라도 무비클립객체 이기만 하면 그림자를 생성하고 공처럼 튕겨줄 것이다. 소스) package { import caurina.transitions.Tweener; import flash.display.Stage; import flash.displ..

포물선 운동과 공 step10 : 공의 움직임 함수로 만들기 버튼을 넣고 클릭 할 때마다 우리가 만들었던 내용을 계속해서 반영하려면 반영 될 때마다 ball의 오리지널 width, height, rotation을 지정해주고 거기에서 부터 다시 시작해야 한다. 즉 전역변수에 var ball_original_w:Number = 79; var ball_original_h:Number = 77.25; 으로 지정해 주고 function 공함수():void { ball.rotation = 0; ball.width = ball_original_w; ball.height = ball_original_h; } 이렇게 기존의 width, height, rotation값을 모두 초기화해 준 뒤시작해야 한다. 소스) impo..

포물선 운동과 공 step09 : 움직임과 위치를 랜덤하게 설정하기 step09에서는 랜덤하게 vx와 vy를 지정하고 공의 바운드 되는 바닥(bottom)또한 랜덤하게 설정한다. 랜덤에 관한 계산은 함수로 만들어서 사용하도록 하며, 여기에서 중요한 것은 공의 바운드 되는 바닥이 마이너스(모니터상 y축이 위로)될 수록 공의 원근감을 표현하기 위해 공의 사이즈가 작아진다는 것이다. 이것 또한 앞의 내용과 마찬가지로 비례식을 사용하도록 하겠다. 먼저 랜덤함수는 http://serpiko.tistory.com/314 에 자세하게 설명 되어져 있고 자바스크립트나 as3.0이나 제공하는 스펙은 비슷하다. 함수로 표현하면 function randomize($min:Number, $max:Number):Number {..

포물선 운동과 공 step08:그림자의 투명도와 크기 변화 공이 높이 튀어 오를수록 그림자는 흐릿해지고 작아진다. 이를 비례식에 대입해 넣고 적용시키면 된다. 참고로 비례식과 일차함수의 내용은 http://serpiko.tistory.com/40 http://serpiko.tistory.com/41 에서 자세하게 살펴볼 수 있다. A : a = B : b 를 생각해 보면 공이 바닥에 닿았을 때 : 공이 수직 운동 했을때 = 그림자 100% : 그림자 x 우리가 구하려는건 그림자 x 이며 프로그램으로 돌아와서 표현해보면 다음과 같다. bottom : ball.y = (_eclipse.alpha1=1) : (_eclipse.alpha = x) _eclipse.alpha = ball.y * (_eclipse...

포물선 운동과 공 step07 : 그림자 사이즈 조절 그림자가 공의 너비를 그대로 가지므로 아직 어색하다. 그림자는 공의 너비 70%를 가지게 조절하도록 해보자. 공식은 아래와 같다. 그림자 너비 = 공의 너비 * 70 / 100 이것을 함수로 바꾸면 function percent($target:Number, $per:Number):Number { return $target * $per / 100; } 이렇게 만들어 놓으면 percent(공.width, 70) 만 넣어주면 70%에 해당하는 수치를 반환해 줄 것이다. 소스) import flash.events.Event; import flash.display.Sprite; import flash.filters.BlurFilter; import flash...

포물선 운동과 공 step06 : 그림자 따라다니기 그림자가 공을 계속 따라다니려면 "그림자.x = 공.x" 로 간단하게 처리하면 된다. 소스) import flash.events.Event; import flash.display.Sprite; import flash.filters.BlurFilter; import flash.filters.BitmapFilterQuality; var g:Number = 1; var vy:Number = 8; var vx:Number = 10; var rot:Number = vx; var bottom:Number = stage.stageHeight - (ball.height/2) - 20; var _eclipse:Sprite = new Sprite(); _eclipse.g..

포물선 운동과 공 step05 : 그림자 만들기 바운드 되는 위치에 그림자를 만들어 보겠다. _eclipse 라는 Sprite 데이터형의 객체를 한개 만들고 graphics 속성을 이용하여 타원을 그릴텐데 그림자 특유의 blur 처리를 위해 필터도 적용해 보도록 한다. import flash.display.Sprite; import flash.filters.BlurFilter; import flash.filters.BitmapFilterQuality; var _eclipse:Sprite = new Sprite(); _eclipse.graphics.beginFill(0x000000, 0.7); _eclipse.graphics.drawEllipse(0, 0, 80, 20); _eclipse.graphics...