2018/10/13
이번에 처음으로 네이버에서 주최하는 Deview 2018 에 참관하게 되었습니다!
Day1, Day2 로 이틀 동안 진행이 되었는데 Day1 엔 다양한 주제의 세션이 마련되었고 Day2 엔 주로 AI 관련 세션들이었는데 저는 웹 관련 세션에 관심이 많았어서 Day1 만 신청했습니다.
입장권을 받고 들어온 메인 복도 사진입니다. 저는 처음이라 몰랐는데 작년에도 복도 중앙에 저런 휴식공간이 있었다하네요! 개인적으로 굉장히 편리하게 이용했습니다.
사진은 없지만 저 휴식공간을 중심으로 양 옆에 부스들이 마련되어 있었는데요, 거의 네이버 계열의 알고 있는 기업들의 부스였어서 딱히 흥미로웠던 곳은 없었고 그냥 기념품만 열심히 챙겼습니다ㅎㅎ..
세션들이 진행되었던 공간입니다. 처음 키노트 세션만 위와 같이 오픈된 상태에서 진행이 되었고 그 이후부터는 중간중간에 벽(?)이쳐져서 트랙별로 마치 독립된 공간인 것처럼 진행되었습니다.
키노트를 제외하고 4 개의 트랙이 5 번씩 진행되어 총 20 개의 세션들이 마련되었었는데요, 세션들의 자세한 정보들은 Deview 2018 스케쥴을 확인해보시기 바랍니다.
이제부터 들었던 세션들을 순서대로 간략하게 요약해보겠습니다.
React Native?
동작 원리
Cake 앱을 출시하면서 얻은 노하우
슬라이드 자료
Canvas 란?
브라우저가 어떻게 그림을 그릴까?
<body>
<button>Hello</button>
<canvas></canvas>
</body>
Canvas 는 어떻게 그림을 그릴까?
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
context.drawRect(...);
context.drawText(...);
<canvas></canvas>
내부를 그리는 것은 개발자의 Javascript 코드에 달려 있다.Canvas 로 애니메이션을 구현할때의 문제점
브라우저 관점에서의 개선안
웹 개발자 입장에서의 개선안
새로운 API OffScreenCanvas 의 도입
OffScreenCanvas 를 사용하는 방법
const canvas = document.getElementById('canvas') // 1. Canvas 객체 얻어오기
const offscreen = canvas.transferControlToOffscreen() // 2. OffScreenCanvas 객체 얻어오기
const worker = new Worker('canvas-worker.js') // 3. Worker Thread 생성하기
worker.postMessage({ canvas: offscreen }, [offscreen]) // 4. Worker Thread로 OffScreenCanvas 전달
self.onmessage = event => {
// 1. Message Handler 설정
const offscreen = event.data.canvas // 2. OffScreenCanvas 전달 받기
const context = canvas.getContext('2d') // 3. CanvasRenderingContext 생성
function render(time) {
// 4. 일반적인 Canvas로 그리는 것과 동일하게 render 함수 작성
drawRect(context)
requestAnimationFrame(render)
}
requestAnimationFrame(render)
}
슬라이드 자료
글이 길어져서 다른 세션은 다음 포스팅으로 미루도록 하겠습니다 😛