목록ES6 (28)
Front-end_dev
군대가기전에 썻던 앵귤러(프레임워크)도그렇고 현재 공부하고있는 물리엔진(프레임워크)에서도 그렇고 프레임워크나 라이브러리에서 이벤트는 빠지질 않는 것 같습니다. 그래서 한 번 구현해봤습니다. 우선 먼저 이게 어떻게 돌아갈까 생각을 해봤는데,첫번째로 생각해본게 기존의 동작을 오버라이딩하는 것 입니다. 근데 이건 매번 check해야하므로 이벤트방식의 프로그래밍과는 전혀 거리가 멉니다. 예를들면, LED가 1개 켜져있는데 스위치를 누르면 LED가 꺼지는 프로그램이 있습니다. 여기서 하드웨어프로그래머는 2가지방법이있겠죠. 1번쨰는 단순 무한루프안에 핀값(스위치가눌렸는지안눌렸는지)을 체크하는 구문을 넣는거고, 2번째는 인터럽트를 사용해서 값을 체크하는거죠여기서 차이점은 값을 계속해서 체크하냐안하냐의 차이입니다. 따..
프로젝트하면서 정말 너무어려웠던 부분은 동영상에서 볼 수 있다시피 사용자의 막대기가 맨위,맨아래에 부딪혔을 때, 벗꽃 비슷한 애니메이션이 나타나는데 이걸 구현하는게 제일 힘들었습니다. * 가장 어려웠던 부분.-> 일반적인 애니메이션 루프의 로직은 전체지우기->전체그리기 이다. 좀 더 구체적으로 말하자면 전체지우기->일부분그리기->일부분그리기->일부분그리기->일부분그리기->결국전체를 그리게 된다. 이러한 과정을 계속해서 반복하게 된다. 근데 여기에 문제점이 한가지 있다.예를들어, 사용자의 입력에 따라 애니메이션 루프를 계속 호출한다고 가정해보자.처음에 호출할땐 문제 없다. 하지만 2번째 호출을 하게 되면 화면에는 아무것도 나타나지 않을 것이다.왜냐하면 비동기로 호출되는 window.requestAnimat..
소스코드 : https://github.com/hyunsooda/PingPong 반디캠으로 찍어서그런지 랜더링이 느리게되는것처럼 보이는감이있어보이네요??;;
let ctx = document.querySelector('canvas').getContext('2d'); let grd = ctx.createRadialGradient(500,500,10,500,500,30); grd.addColorStop(0,'#ffffcc');grd.addColorStop(0.1,'#ffffb3');grd.addColorStop(0.2,'#ffff99');grd.addColorStop(0.3,'#ffff66'); grd.addColorStop(1,'black'); ctx.fillStyle = grd;ctx.fillRect(100,100,1000,700); /*이 예제는 동그라미를 마치 형광등으로 비추고있는듯한 효과를 보여줍니다.이러한 효과를 내려면 대표적으로 createRadia..
프로그래밍 관련 커뮤니티 같은데보면 “테트리스 정도는 4시간만에 짤수잇어야” 이런말들을 종종 볼 수 있습니다.4시간??? 허언증인지 진짜인지는 모르겠지만 아무리 경력있는 개발자라도 몇시간만에 짜라고하면 힘들수도있을것 같다라는게 저의 생각입니다.직접 구상한 첫 프로젝트에서 2000라인이넘는 대규모(저에게는)프로젝트를 진행하면서 중간중간에 참 꺠달은것들이 많습니다. 역시 백문불여일견이라고 보고이해하는것과 직접하면서이해하는것의 차이가 상당히 심하다는걸 깨닫게됬고 직접 짜면서 코드에서의 테크니컬적인부분은 물론이고, 생각지도못한 문법적인면에서도 깨달은부분이있습니다. 그리고 컴퓨터의 플레이(인공지능)을 구현해볼려고 구상은 해놨는데 시간이 많이 뺏길것같습니다… (여기서 인공지능이라함은 머신러닝(neural netwo..
말그대로 HTML5 캔버스 성능최적화 이슈에대해 쓴 글 입니다. 캔버스에서 그리기를 확정짓는 함수(stroke())를 특정 임의의 시간마다 호출하다가 Canvas자체 내부적인 최적화 시스템에 부딪히게되어 뜻대로 코드가 동작하지 않았습니다. [아에 통째로 예제를 하나 만들어서 설명] Main Issue : HTML5 Canvas 자체 내부에서 최적화시스템을 갖고있기 때문에 stroke()함수를 특정시간마다 n번 호출하면 바로바로 그려주지않고 맨마지막에 한꺼번에 그리는 문제. part 1. setTimeout 함수는 시간지연함수라고 보기엔 참 애매한포지션part 1-1. 직접 시간지연함수를 만들어보자part 2. 이 예제의 대한 기본적인 수학개념 part 3. HTML5 캔버스자체 내부적인 최적화시스템에 부..
현재 진행중인 개인 프로젝트가 하나있는데 로직을 하나하나 구현할때마다 자꾸 flag같은 변수들(부산물들)이 나와서 이것을 한번 고쳐보자 해서 고안한 패턴입니다. 예를들어, 문제를 한 번 내보겠습니다.상황1 : 나는 라이브러리 개발자이고 현재 만들고있는 라이브러리에서는 A라는 객체의 B라는 프로퍼티에 C값이 들어갔을 때 D라는 동작을 해야한다. 솔루션 : 일단, C값이 들어왔을때 B라는프로퍼티가 그걸 인지할수있어야겠죠? 그리고나서 기본동작을 오버라이딩하고 D동작을 구현합니다. 그럼 여기서 방법은 수백가지가 될 수 있어요. 저는 처음에는 그중 하나인 flag같은 변수들을 만들어서 해결했었습니다.근데 이런 부산물들이 계속나오게되는데 문제가 안될수도있긴 합니다만, 코딩실력은 더 좋아지진 않을 것 같습니다. ES..