[NAVER D2]html5 canvas overview
HTML5 Canvas 소개 및 특징
- 소개 및 지원브라우저
- CanvasRenderingContext2D
- 즉시모드 / 보류모드
- Mouse Event 처리
Canvas 로 할 수 있는 것
- Drawing Shape
- Pixel Manipulation
- Animation
Canvas와 WebGL
Canvas와 Flash
Cavnas 적용사례
[Open Infrastructure & Cloud Native Days Korea 2019]
커뮤니티 버전의 OpenStack 과 Ceph를 활용하여 대고객서비스를 구축한 사례를 공유합니다. 유연성을 확보한 기업용 클라우드 서비스 구축 사례와 높은 수준의 보안을 요구하는 거래소 서비스를 구축, 운영한 사례를 소개합니다. 또한 이 프로젝트에 사용된 기술 스택 및 장애 해결사례와 최적화 방안을 소개합니다. 오픈스택은 역시 오픈소스컨설팅입니다.
#openstack #ceph #openinfraday #cloudnative #opensourceconsulting
[NAVER D2]html5 canvas overview
HTML5 Canvas 소개 및 특징
- 소개 및 지원브라우저
- CanvasRenderingContext2D
- 즉시모드 / 보류모드
- Mouse Event 처리
Canvas 로 할 수 있는 것
- Drawing Shape
- Pixel Manipulation
- Animation
Canvas와 WebGL
Canvas와 Flash
Cavnas 적용사례
[Open Infrastructure & Cloud Native Days Korea 2019]
커뮤니티 버전의 OpenStack 과 Ceph를 활용하여 대고객서비스를 구축한 사례를 공유합니다. 유연성을 확보한 기업용 클라우드 서비스 구축 사례와 높은 수준의 보안을 요구하는 거래소 서비스를 구축, 운영한 사례를 소개합니다. 또한 이 프로젝트에 사용된 기술 스택 및 장애 해결사례와 최적화 방안을 소개합니다. 오픈스택은 역시 오픈소스컨설팅입니다.
#openstack #ceph #openinfraday #cloudnative #opensourceconsulting
2022년 11월 18일 코엑스에서 개최한 공공솔루션마켓에서 발표한 강연 자료입니다.
디지털 전환이 가속화됨에 따라 더욱 중요해진 디지털 경험 모니터링과 장애 및 병목 등 성능을 개선한 실 사례를 공유드립니다.
생생한 강연 영상으로 확인해 보세요!
https://youtu.be/_Cdms2TxO3M
NDC21_게임테스트자동화5년의기록_NCSOFT_김종원.pdfJongwon Kim
NDC 2021에서 발표하였던 '게임 테스트 자동화 5년의 기록'이라는 주제로 NCSOFT에서 5년 동안 진행했던 게임 테스트 자동화에 대한 내용을 정리한 회고 내용입니다.
영상은 https://youtu.be/ckqUzRyIPoA 에 올라와 있습니다.
* 문서에 적용된 폰트나 아이콘 등의 문서 형식에 대한 권리는 Nexon에 있으니 배포 시 유의하시기 바랍니다
CoreDot TechSeminar 2018 - Session2 Ji DonghyunCore.Today
코어닷 기술 세미나 2018
Session #2 : 지동현 (NXTechnology 개발팀장)
Node.JS를 활용하여 IoT 플랫폼 만들기
15:00 ~ 15:50
프론트엔드와 백엔드가 함께 소통하기 위해 필요한 API. 그 API를 Node.JS로 만들고, 이를 IoT에서 활용하는 우리 회사의 사례를 소개해 드립니다.
- API란?
- 왜 Node.JS가 좋은가
- IoT에 적용해 보는 Node.JS
https://coredottoday.github.io/2018/10/15/Coredot-기술-세미나/
https://www.youtube.com/watch?v=Uf8Ef_UZFYQ
[2007 CodeEngn Conference 01] amesianx - Art of HookingGangSeok Lee
2007 CodeEngn Conference 01
ActiveX Binary 조작 및 후킹 ActiveX Binary 조작을 하지않는 범용적 COM 후킹 키보드 후킹은 크래커가 가장 직관적으로 접근하는 해킹수단 등에 대해서 설명하고 ActiveX의 COM에 대해 알아본다. (키보드 후킹의 한계는 사용자 입력을 예상하기 힘들고 정확히 어떤 행동 중인지 포착하는 인공지능적 해킹이 어려운 점이 있다.)
http://codeengn.com/conference/01
12. 2.1 jQuery
극한 상황 – Dom Element 수 증가
document.getElementsByTagName('*').length
1000~1300
Element
1300 ~ 7000
Element
13. 2.1 jQuery
초당 몇 개의 Dom Element 를 찾아야 할까?
(Dom Element 1300 ~ 7000) * (60fps) * (5~20 object) * (1~10 block)
= 390,000 ~ 84,000,000 Dom / sec
∴ Dom 이 복잡하고 업데이트가 잦은 상황에서는 jQuery Selector 를 거의 사용할 수 없다.
15. 2.2 Angular JS
$watch
$watch $apply $digest
Angular 에서는 2-way binding 으로 매우 편리하게 Dom 과 Data 를 연동할 수 있다.
$digest loop 에서는 $watch list 에 있는 모델 변경을 dirty-check 한다.
16. 2.2 Angular JS
극한 상황 – 비대한 모델의 잦은 변화
(60fps) * (5~20 object) * (10 ~ 20 property per object) * (1~10 block)
= 3,000 ~ 240,000 check / sec
모델 변화가 잦고 많은 상황에서 Angular 페이지는 극도로 느려짐.
Angular 의 가장 큰 문제는 이 모든 모델 변화를 Dirty-checking 한다는 점.
또한 Dom 업데이트를 제어할 수 없어 일정 이상의 최적화가 불가능.
17. 2.3 대안
편리함에는 대가가 따른다.
View Class 가 Dom Element 를 항상 property로 가지고 있도록 구현.
Model Object 를 구현하고, getter setter를 만들어 observer 구현.
최대 5~10배까지의 속도 개선을 얻을 수 있었다.
독자 개발
23. 3.1 개발 난항
Entry 응용 미션
개발 기간 3주
30단계의 미션형 교육 콘텐츠
상호작용이 필요한 요소들
24. 3.1 개발 난항
Issue
1. 새로운 기능을 추가할 때 마다 기존 코드 변경 필요.
2. 점점 더 복잡해져 가는 구조.
3. 출시 전까지 날이면 날마다 변하는 기획.
4. 다가오는 개발 기한.
어떻게 하면 효율적으로 대처할 수 있을까?
25. 3.1 개발 난항
Silver bullet
가장 복잡한 서비스 중 하나인 MMORPG.
수많은 요소들이 존재하는 게임에서는 어떻게 구현하고 있을까?
복잡한 웹 앱에도 게임 디자인 패턴을 사용하면 도움이 되지 않을까?
26. 3.2 Entity Component System
Design Pattern
각각의 Entity(객체) 는 Component(기능) 를 갖는다.
새로운 기능이 생기면 새로운 Component 를 개발하면 된다.
Entity 에 기능을 추가하고 싶다면 Component 를 추가하면 된다.
예 ) 마린은 그래픽, 체력, 공격, 소리, 이동 컴포넌트를 가지고 있다.
메딕은 그래픽, 체력, 치료, 소리, 이동 컴포넌트를 가지고 있다.
바위는 그래픽 컴포넌트를 가지고 있다.
27. 3.2 Entity Component System
Model Controller View
Canvas Object Dom ElementInterpreter Physics Animator
Collision
Detector
Collision
Detector
Space
Ship
Sound
Space
Ship
Crash
Failure
Meteo
Unit
Obstacle
Popup
User
Entity
28. 3.2 Entity Component System
Component
Update
Entity
Update
실행시 Entity 와
Entity 의 Component 를
Update 한다.
Entity 간의 데이터 교환은
메시지 통신을 통해 이루어진다.
29. 3.2 Entity Component System
장점
1. 추가적인 기능 추가가 매우 쉬웠다.
기존 코드를 고려해야 할 필요가 적고 꼭 필요한 부분만 작성하면 된다.
2. 기능들이 명확하게 분리되어 코드가 명확해진다.
프로그램이 비대해져도 일정 이상 복잡해지지 않는다.
코드간의 연관성이 적어져 에러 발생 시 문제의 출처가 명확하다.
30. 3.2 Entity Component System
단점
1. 초기에 들여야 하는 개발 공수가 존재한다.
Entity Component System 구현을 위한 공수가 필요하다.
2. 가장 최적화된 형태의 구현은 아니다.
Update loop 동작 시 모든 Entity 의 Update 를 실행함으로써 비효율이 존재한다.
32. 4.1 하드웨어 연결?
Issue
1. 하드웨어 교구를 통한 교육을 위해 하드웨어 장치와 Entry를 연동해야 했다.
2. 하드웨어 교구는 보통 Arduino 같은 마이크로 컴퓨터로, USB를 통한 Serial 통신으로
컴퓨터와 연결된다.
3. 웹 브라우저는 자바스크립트가 USB 같은 시스템 자원에 접근하는 것을 허용하지 않는다.
4. ????????
33. 4.1 하드웨어 연결?
Aleternative
1. 각 OS별 Entry 네이티브 프로그램을 만들어서 하드웨어 장치를 지원?
개발 시간도 오래 걸리고 웹 서비스의 장점을 잃는다.
2. 웹 페이지에서 하드웨어 펌웨어를 코딩한 뒤 사용자가 업로드?
엔트리가 아니게 된다.
3. 브라우저 별 별도 플러그인?
ActiveX? NPAPI? Chrome Extension?
웹 표준이 아닌데다가 구현도 모두 별도로 해야 한다.
34. 4.1 하드웨어 연결?
Hint
1. Javascript 코드가 컴퓨터의 localhost 에 접근할 수 있다.
2. 누군가 하드웨어 장치의 신호를 localhost 어딘가에 접속했을 때 보내준다면?
3. 하드웨어 장치의 신호를 미러링 하는 프로그램을 만들자!
35. 4.2 Entry Hardware Solution
Outline
WebSocket USB Serial
Entry Web App Entry Local Server
(node-webkit)
HW Device
Http polling
(Byte Array)(JSON)
36. 4.1 하드웨어 연결?
Entry Web App
1. localhost:23518 으로 Web Socket Connection 을 연다.
2. 연결 성공시 JSON 형식의 데이터를 주고 받는다.
Input: {
Analog1: 255,
Analog2: 124,
Digital1: true,
…
}
Output: {
portA: 255,
portB: 0,
…
}
37. 4.1 하드웨어 연결?
HW Connect Server
1. 컴퓨터에 연결된 하드웨어 장치를 탐색하고, 연결을 체결한다.
2. 웹소켓 서버를 열고, 엔트리 웹앱의 요청을 받는다.
3. 웹소켓 커넥션이 열리면 하드웨어와 엔트리간의
데이터를 미러링한다.
38. 4.1 하드웨어 연결?
HW Firmware
1. 컴퓨터와의 Serial 통신을 연다.
2. Serial 통신이 열리면 1초에 60번씩 센서값을 읽어 보낸다.
3. Serial 통신을 통해 출력값이 도착하면 하드웨어의 Actuator에
값을 준다.
40. 4.4 local network 를 통한 플러그인
Result
1. 웹소켓을 통해 성공적으로 하드웨어 디바이스를 연결할 수 있었다.
2. 20ms 내외의 반응 속도로 하드웨어 장치와 통신할 수 있었고, Websocket 이나 Serial
에서 주목할만한 병목은 없었다.
3. 무설치형 연결 프로그램으로 교육 환경에서도 적용가능했다.
4. 로컬 네트워크를 통한 플러그인을 다른 사례에도 적용할 수 있을 것이다.
42. 5.1 코드 분석
Code Analysis
1. 학생들이 작성한 코드를 분석하여 평가해주는 시스템 제작.
2. 학생들이 만드는 프로젝트의 유형을 분석하여 관심있는 교육 컨텐츠 추천.
3. 전체 서비스의 프로젝트들을 분석하여 교육적으로 의미있는 연구 결과 도출.
Analyze
43. 5.2 실시간 LMS
Real-Time Lecture Management System
1. Google Docs 처럼 실시간으로 프로젝트를 동시 편집 가능하게 개발.
2. 수업 도중에 선생님이 자리를 뜨지 않고 학생들의 학습을 관찰, 도움 가능.
3. 코드 분석 시스템과 결합하여 학생들에게 좀 더 능동적인 교육 제공