Submit Search
Upload
[D2 오픈세미나]5.html5 api 테트리스게임_이진권
•
15 likes
•
9,534 views
NAVER D2
Follow
Report
Share
Report
Share
1 of 54
Download now
Download to read offline
Recommended
[D2 오픈세미나]4.진보된개발환경 주우영
[D2 오픈세미나]4.진보된개발환경 주우영
NAVER D2
JavaScript MEAN 스택
JavaScript MEAN 스택
Tai Hoon KIM
[D2 오픈세미나]1.html5 api 옥상훈
[D2 오픈세미나]1.html5 api 옥상훈
NAVER D2
진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)
진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)
우영 주
오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5
Taegon Kim
웹-워크플로우 베스트프랙티스
웹-워크플로우 베스트프랙티스
Tai Hoon KIM
LESS와 EMMET
LESS와 EMMET
우영 주
NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황
NAVER Engineering
Recommended
[D2 오픈세미나]4.진보된개발환경 주우영
[D2 오픈세미나]4.진보된개발환경 주우영
NAVER D2
JavaScript MEAN 스택
JavaScript MEAN 스택
Tai Hoon KIM
[D2 오픈세미나]1.html5 api 옥상훈
[D2 오픈세미나]1.html5 api 옥상훈
NAVER D2
진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)
진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)
우영 주
오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5
Taegon Kim
웹-워크플로우 베스트프랙티스
웹-워크플로우 베스트프랙티스
Tai Hoon KIM
LESS와 EMMET
LESS와 EMMET
우영 주
NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황
NAVER Engineering
Web app 개발 방법론
Web app 개발 방법론
Sang Seok Lim
하이브리드 앱_개발_개요
하이브리드 앱_개발_개요
BongSoo Jang
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
NAVER Engineering
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
Sang Seok Lim
스마트 모바일 앱 개발 방법론(1)
스마트 모바일 앱 개발 방법론(1)
mosaicnet
하이브리드앱
하이브리드앱
knight1128
하이브리드 앱 개발 개요
하이브리드 앱 개발 개요
Sohee Jeong
차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"
Changhwan Yi
소프트웨어 개발자 로드맵
소프트웨어 개발자 로드맵
중선 곽
하이브리드 앱(Hybrid App)
하이브리드 앱(Hybrid App)
Changhwan Yi
Hybrid App
Hybrid App
Jung Young Kim
[D2 오픈세미나]1.무한스크롤성능개선
[D2 오픈세미나]1.무한스크롤성능개선
NAVER D2
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Sang Seok Lim
Sencha architect 사용기
Sencha architect 사용기
Hyeonmin Kim
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
Sungwoo Choo
어플리케이션 및 웹 개발
어플리케이션 및 웹 개발
Leonardo Taehwan Kim
HTML5 & Hybrid App Trends
HTML5 & Hybrid App Trends
욱래 김
모바일앱개발 교육자료
모바일앱개발 교육자료
JinHyuck Churn
Cloud ide를 이용한_모바일_개발의_가능성과_전망
Cloud ide를 이용한_모바일_개발의_가능성과_전망
Sung-tae Ryu
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
우영 주
[D2 오픈세미나]3.자바스크립트mean스택 김태훈
[D2 오픈세미나]3.자바스크립트mean스택 김태훈
NAVER D2
[D2 오픈세미나]2.browser engine 이형욱_20140523
[D2 오픈세미나]2.browser engine 이형욱_20140523
NAVER D2
More Related Content
What's hot
Web app 개발 방법론
Web app 개발 방법론
Sang Seok Lim
하이브리드 앱_개발_개요
하이브리드 앱_개발_개요
BongSoo Jang
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
NAVER Engineering
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
Sang Seok Lim
스마트 모바일 앱 개발 방법론(1)
스마트 모바일 앱 개발 방법론(1)
mosaicnet
하이브리드앱
하이브리드앱
knight1128
하이브리드 앱 개발 개요
하이브리드 앱 개발 개요
Sohee Jeong
차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"
Changhwan Yi
소프트웨어 개발자 로드맵
소프트웨어 개발자 로드맵
중선 곽
하이브리드 앱(Hybrid App)
하이브리드 앱(Hybrid App)
Changhwan Yi
Hybrid App
Hybrid App
Jung Young Kim
[D2 오픈세미나]1.무한스크롤성능개선
[D2 오픈세미나]1.무한스크롤성능개선
NAVER D2
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Sang Seok Lim
Sencha architect 사용기
Sencha architect 사용기
Hyeonmin Kim
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
Sungwoo Choo
어플리케이션 및 웹 개발
어플리케이션 및 웹 개발
Leonardo Taehwan Kim
HTML5 & Hybrid App Trends
HTML5 & Hybrid App Trends
욱래 김
모바일앱개발 교육자료
모바일앱개발 교육자료
JinHyuck Churn
Cloud ide를 이용한_모바일_개발의_가능성과_전망
Cloud ide를 이용한_모바일_개발의_가능성과_전망
Sung-tae Ryu
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
우영 주
What's hot
(20)
Web app 개발 방법론
Web app 개발 방법론
하이브리드 앱_개발_개요
하이브리드 앱_개발_개요
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
스마트 모바일 앱 개발 방법론(1)
스마트 모바일 앱 개발 방법론(1)
하이브리드앱
하이브리드앱
하이브리드 앱 개발 개요
하이브리드 앱 개발 개요
차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"
소프트웨어 개발자 로드맵
소프트웨어 개발자 로드맵
하이브리드 앱(Hybrid App)
하이브리드 앱(Hybrid App)
Hybrid App
Hybrid App
[D2 오픈세미나]1.무한스크롤성능개선
[D2 오픈세미나]1.무한스크롤성능개선
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Sencha architect 사용기
Sencha architect 사용기
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
어플리케이션 및 웹 개발
어플리케이션 및 웹 개발
HTML5 & Hybrid App Trends
HTML5 & Hybrid App Trends
모바일앱개발 교육자료
모바일앱개발 교육자료
Cloud ide를 이용한_모바일_개발의_가능성과_전망
Cloud ide를 이용한_모바일_개발의_가능성과_전망
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
Viewers also liked
[D2 오픈세미나]3.자바스크립트mean스택 김태훈
[D2 오픈세미나]3.자바스크립트mean스택 김태훈
NAVER D2
[D2 오픈세미나]2.browser engine 이형욱_20140523
[D2 오픈세미나]2.browser engine 이형욱_20140523
NAVER D2
2.네이버 프론트엔드 김지태
2.네이버 프론트엔드 김지태
NAVER D2
Arcus
Arcus
NAVER D2
1.openseminar
1.openseminar
NAVER D2
5.yobi를 활용한 개발자 협업 및 배포 프로세스
5.yobi를 활용한 개발자 협업 및 배포 프로세스
NAVER D2
네이버 오픈세미나 백엔드_아키텍쳐
네이버 오픈세미나 백엔드_아키텍쳐
NAVER D2
[NAVER D2] html5 api를 활용한 실시간 대전 테트리스 게임 개발
[NAVER D2] html5 api를 활용한 실시간 대전 테트리스 게임 개발
JinKwon Lee
Do you Promise?
Do you Promise?
jungkees
모바일 무한 스크롤 개발
모바일 무한 스크롤 개발
NAVER D2
JavaScript로 오픈소스를 해보자. bsJS
JavaScript로 오픈소스를 해보자. bsJS
NAVER D2
개발자를 위한 웹표준 & 웹접근성이야기
개발자를 위한 웹표준 & 웹접근성이야기
NAVER D2
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
Jonathan Jeon
다함께, FluxUtils 한바퀴!
다함께, FluxUtils 한바퀴!
우영 주
역시 Redux
역시 Redux
Leonardo YongUk Kim
자바카페 프론트엔드스터디 E01 - HTML5
자바카페 프론트엔드스터디 E01 - HTML5
Young-Beom Rhee
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까?
Kim Hunmin
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나
JeongHun Byeon
Papago/N2MT 개발이야기
Papago/N2MT 개발이야기
NAVER D2
Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드
NAVER D2
Viewers also liked
(20)
[D2 오픈세미나]3.자바스크립트mean스택 김태훈
[D2 오픈세미나]3.자바스크립트mean스택 김태훈
[D2 오픈세미나]2.browser engine 이형욱_20140523
[D2 오픈세미나]2.browser engine 이형욱_20140523
2.네이버 프론트엔드 김지태
2.네이버 프론트엔드 김지태
Arcus
Arcus
1.openseminar
1.openseminar
5.yobi를 활용한 개발자 협업 및 배포 프로세스
5.yobi를 활용한 개발자 협업 및 배포 프로세스
네이버 오픈세미나 백엔드_아키텍쳐
네이버 오픈세미나 백엔드_아키텍쳐
[NAVER D2] html5 api를 활용한 실시간 대전 테트리스 게임 개발
[NAVER D2] html5 api를 활용한 실시간 대전 테트리스 게임 개발
Do you Promise?
Do you Promise?
모바일 무한 스크롤 개발
모바일 무한 스크롤 개발
JavaScript로 오픈소스를 해보자. bsJS
JavaScript로 오픈소스를 해보자. bsJS
개발자를 위한 웹표준 & 웹접근성이야기
개발자를 위한 웹표준 & 웹접근성이야기
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
다함께, FluxUtils 한바퀴!
다함께, FluxUtils 한바퀴!
역시 Redux
역시 Redux
자바카페 프론트엔드스터디 E01 - HTML5
자바카페 프론트엔드스터디 E01 - HTML5
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까?
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나
Papago/N2MT 개발이야기
Papago/N2MT 개발이야기
Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드
Similar to [D2 오픈세미나]5.html5 api 테트리스게임_이진권
이호민
이호민
Icon Busan
[KASA] Game Engine???
[KASA] Game Engine???
changehee lee
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
JinKwon Lee
20090826 Blackjack Cafe V1.0
20090826 Blackjack Cafe V1.0
Seo Jinho
모바일환경에서의 크로스 플랫폼_3D_렌더링엔진_제작과정
모바일환경에서의 크로스 플랫폼_3D_렌더링엔진_제작과정
funmeate
양승명, 다음 세대 크로스플랫폼 MMORPG 아키텍처, NDC2012
양승명, 다음 세대 크로스플랫폼 MMORPG 아키텍처, NDC2012
devCAT Studio, NEXON
오토데스트세미나 스케일폼적용사례 김효영
오토데스트세미나 스케일폼적용사례 김효영
MinGeun Park
퓨즈[Fusetools] 소개 :: blog.Wonhada.com :: 최신 자료 (2016년)
퓨즈[Fusetools] 소개 :: blog.Wonhada.com :: 최신 자료 (2016년)
강민 원
게임 서버 기술 현황 및 전망
게임 서버 기술 현황 및 전망
Vong Sik Kong
게임 서버 기술 현황 및 전망
게임 서버 기술 현황 및 전망
gueste9d250
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
Rhio Kim
웹 프로그래밍 팀프로젝트 최종발표
웹 프로그래밍 팀프로젝트 최종발표
Seong Heum Park
Unity 3d study #1
Unity 3d study #1
Hyunwoo Kim
kgc2010 - 차세대 모바일 게임 전략과 WP7
kgc2010 - 차세대 모바일 게임 전략과 WP7
Seo Jinho
Casual Game for Windows Mobile
Casual Game for Windows Mobile
Seo Jinho
아마존 게임엔진:Lumberyard :: Patel Pratik :: Gaming on AWS 2016
아마존 게임엔진:Lumberyard :: Patel Pratik :: Gaming on AWS 2016
Amazon Web Services Korea
실전코드로 살펴보는 개발 프레임워크와 AJAX웹 개발 1
실전코드로 살펴보는 개발 프레임워크와 AJAX웹 개발 1
mosaicnet
유니티 게임 그래픽스 아트 개발 사례 분석
유니티 게임 그래픽스 아트 개발 사례 분석
SangYun Yi
Gamebryo LightSpeed (Korean)
Gamebryo LightSpeed (Korean)
Gamebryo
[IGC 2016] 스퀘어에닉스 요시다 나오키 - FINAL FANTASY XIV: 대규모 개발의 워크플로우와 매니지먼트 방식
[IGC 2016] 스퀘어에닉스 요시다 나오키 - FINAL FANTASY XIV: 대규모 개발의 워크플로우와 매니지먼트 방식
강 민우
Similar to [D2 오픈세미나]5.html5 api 테트리스게임_이진권
(20)
이호민
이호민
[KASA] Game Engine???
[KASA] Game Engine???
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
20090826 Blackjack Cafe V1.0
20090826 Blackjack Cafe V1.0
모바일환경에서의 크로스 플랫폼_3D_렌더링엔진_제작과정
모바일환경에서의 크로스 플랫폼_3D_렌더링엔진_제작과정
양승명, 다음 세대 크로스플랫폼 MMORPG 아키텍처, NDC2012
양승명, 다음 세대 크로스플랫폼 MMORPG 아키텍처, NDC2012
오토데스트세미나 스케일폼적용사례 김효영
오토데스트세미나 스케일폼적용사례 김효영
퓨즈[Fusetools] 소개 :: blog.Wonhada.com :: 최신 자료 (2016년)
퓨즈[Fusetools] 소개 :: blog.Wonhada.com :: 최신 자료 (2016년)
게임 서버 기술 현황 및 전망
게임 서버 기술 현황 및 전망
게임 서버 기술 현황 및 전망
게임 서버 기술 현황 및 전망
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
웹 프로그래밍 팀프로젝트 최종발표
웹 프로그래밍 팀프로젝트 최종발표
Unity 3d study #1
Unity 3d study #1
kgc2010 - 차세대 모바일 게임 전략과 WP7
kgc2010 - 차세대 모바일 게임 전략과 WP7
Casual Game for Windows Mobile
Casual Game for Windows Mobile
아마존 게임엔진:Lumberyard :: Patel Pratik :: Gaming on AWS 2016
아마존 게임엔진:Lumberyard :: Patel Pratik :: Gaming on AWS 2016
실전코드로 살펴보는 개발 프레임워크와 AJAX웹 개발 1
실전코드로 살펴보는 개발 프레임워크와 AJAX웹 개발 1
유니티 게임 그래픽스 아트 개발 사례 분석
유니티 게임 그래픽스 아트 개발 사례 분석
Gamebryo LightSpeed (Korean)
Gamebryo LightSpeed (Korean)
[IGC 2016] 스퀘어에닉스 요시다 나오키 - FINAL FANTASY XIV: 대규모 개발의 워크플로우와 매니지먼트 방식
[IGC 2016] 스퀘어에닉스 요시다 나오키 - FINAL FANTASY XIV: 대규모 개발의 워크플로우와 매니지먼트 방식
More from NAVER D2
[211] 인공지능이 인공지능 챗봇을 만든다
[211] 인공지능이 인공지능 챗봇을 만든다
NAVER D2
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
NAVER D2
[215] Druid로 쉽고 빠르게 데이터 분석하기
[215] Druid로 쉽고 빠르게 데이터 분석하기
NAVER D2
[245]Papago Internals: 모델분석과 응용기술 개발
[245]Papago Internals: 모델분석과 응용기술 개발
NAVER D2
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
NAVER D2
[235]Wikipedia-scale Q&A
[235]Wikipedia-scale Q&A
NAVER D2
[244]로봇이 현실 세계에 대해 학습하도록 만들기
[244]로봇이 현실 세계에 대해 학습하도록 만들기
NAVER D2
[243] Deep Learning to help student’s Deep Learning
[243] Deep Learning to help student’s Deep Learning
NAVER D2
[234]Fast & Accurate Data Annotation Pipeline for AI applications
[234]Fast & Accurate Data Annotation Pipeline for AI applications
NAVER D2
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
NAVER D2
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
NAVER D2
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
NAVER D2
[224]네이버 검색과 개인화
[224]네이버 검색과 개인화
NAVER D2
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
NAVER D2
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
NAVER D2
[213] Fashion Visual Search
[213] Fashion Visual Search
NAVER D2
[232] TensorRT를 활용한 딥러닝 Inference 최적화
[232] TensorRT를 활용한 딥러닝 Inference 최적화
NAVER D2
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
NAVER D2
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
NAVER D2
[223]기계독해 QA: 검색인가, NLP인가?
[223]기계독해 QA: 검색인가, NLP인가?
NAVER D2
More from NAVER D2
(20)
[211] 인공지능이 인공지능 챗봇을 만든다
[211] 인공지능이 인공지능 챗봇을 만든다
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
[215] Druid로 쉽고 빠르게 데이터 분석하기
[215] Druid로 쉽고 빠르게 데이터 분석하기
[245]Papago Internals: 모델분석과 응용기술 개발
[245]Papago Internals: 모델분석과 응용기술 개발
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
[235]Wikipedia-scale Q&A
[235]Wikipedia-scale Q&A
[244]로봇이 현실 세계에 대해 학습하도록 만들기
[244]로봇이 현실 세계에 대해 학습하도록 만들기
[243] Deep Learning to help student’s Deep Learning
[243] Deep Learning to help student’s Deep Learning
[234]Fast & Accurate Data Annotation Pipeline for AI applications
[234]Fast & Accurate Data Annotation Pipeline for AI applications
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
[224]네이버 검색과 개인화
[224]네이버 검색과 개인화
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
[213] Fashion Visual Search
[213] Fashion Visual Search
[232] TensorRT를 활용한 딥러닝 Inference 최적화
[232] TensorRT를 활용한 딥러닝 Inference 최적화
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
[223]기계독해 QA: 검색인가, NLP인가?
[223]기계독해 QA: 검색인가, NLP인가?
[D2 오픈세미나]5.html5 api 테트리스게임_이진권
1.
HTML5
2.
API를
3.
활용한
4.
“실시간
5.
대전
6.
테트리스
7.
게임”
8.
개발 NHN
9.
Technology
10.
Services 프론트엔드개발팀
11.
이진권
12.
NHN
13.
Technology
14.
Services
15.
! Front-End
16.
17.
Development
18.
Team 이진권 PHP개발자,
19.
Javascript
20.
의
21.
매력에
22.
빠지다 Naver
23.
고객센터
24.
Javascript
25.
개발
26.
Naver
27.
자동차
28.
서비스
29.
Javascript
30.
개발 Line
31.
Messanger
32.
for
33.
Firefox
34.
OS
35.
사내
36.
웹
37.
메신저
38.
개발
39.
참여 코드
40.
농사꾼
41.
Code
42.
Farmer
43.
Agenda Tetris로
44.
개발하기까지
45.
Game
46.
UI
47.
Design
48.
Architecture Front-End Background-End
49.
Start
50.
Development
51.
Play
52.
with
53.
Full
54.
Stack
55.
JS
56.
Tetris
57.
네개의
58.
사각형으로
59.
이뤄진
60.
테트리스
61.
블록
62.
오리지널의
63.
경우, 블록
64.
종류는
65.
총
66.
7가지 테트리스
67.
with
68.
테트리미노
69.
Tetris
70.
를
71.
72.
주제로
73.
선택한
74.
이유 • 게임
75.
로직이
76.
단순
77.
심플 (개발
78.
용이)
79.
• 개인
80.
프로젝트로
81.
재밌는
82.
개발을
83.
해보자
84.
• 프론트엔드
85.
개발
86.
중심 서버
87.
개발까지
88.
• 이왕
89.
하는거
90.
1:100 (멀티
91.
게임)
92.
Game
93.
UI
94.
Design
95.
게임
96.
인트로
97.
화면이자
98.
사용자와
99.
첫
100.
접합점
101.
사용자
102.
분별을
103.
위한
104.
로그인,
105.
로그인과
106.
가입을
107.
하나의
108.
스크린으로! INTRO
109.
110.
LOGIN
111.
화면
112.
간
113.
이동을
114.
위한
115.
대시보드
116.
메뉴
117.
이동이
118.
직관적이면
119.
좋겠다 DASHBOARD
120.
게임
121.
스테이지
122.
인터페이스
123.
디자인 네트워크
124.
게임과
125.
싱글
126.
게임을
127.
공용으로! (코드
128.
분산
129.
최소화) SINGLE
130.
STAGE
131.
게임
132.
스테이지
133.
인터페이스
134.
디자인 네트워크
135.
게임과
136.
싱글
137.
게임을
138.
공용으로! (코드
139.
분산
140.
최소화) MULTI
141.
STAGE
142.
게임
143.
중간의
144.
옵션
145.
메뉴
146.
게임
147.
상태를
148.
전달하기
149.
위한
150.
인포
151.
스크린
152.
(Ex.
153.
Game
154.
Over) OPTION
155.
MENU
156.
화면 전환 효과의
예시를 위한 기본 예제 스크린 CREDIT
157.
사용자
158.
목록
159.
보기 Dashboard
160.
for
161.
ADMIN
162.
What
163.
technology
164.
needs? 스크린
165.
라우팅
166.
멀티
167.
플레이를
168.
위한
169.
소켓
170.
네트워크
171.
효과음을
172.
추가를
173.
위한
174.
사운드
175.
제어
176.
게임
177.
화면을
178.
위한
179.
캔버스
180.
스테이지
181.
UI
182.
인터페이스의
183.
이펙트
184.
What
185.
more? Git
186.
레파지토리와
187.
188.
WebStorm
189.
IDE만
190.
있으면? 개발
191.
준비
192.
끝!
193.
Architecture
194.
프론트엔드에서
195.
196.
서버를
197.
넘어
198.
199.
DB까지 with
200.
Javascript
201.
Web Socket socket.io Server MongoDB Mongoose.js Node.js Express.js socket.io Node-webkit (for
Mac, windows) Phonegap (for Android, iOS, ETC) Build with Grunt Client MVC Framework Backbone.js UI Effect Animate.css Network Socket.io-client Game Stage Canvas WebGL
202.
Front-End
203.
SPA? Single
204.
Page
205.
Application 하나의
206.
html
207.
로
208.
구성된
209.
어플리케이션
210.
페이지
211.
이동이
212.
발생하지
213.
않음
214.
페이지는
215.
오직
216.
하나! Inner
217.
Content만
218.
바꿔서
219.
화면을
220.
갱신
221.
Google
222.
Map,
223.
Facebook
224.
Main,
225.
ETC.
226.
SPA를
227.
도입한
228.
이유 게임의
229.
Status를
230.
계속
231.
가지고
232.
있어야
233.
하는데
234.
페 이지가
235.
바뀌면
236.
값이
237.
모두
238.
사라짐
239.
서버에
240.
매번
241.
요청할
242.
수도
243.
있지만,
244.
그러기에는
245.
리소스
246.
부담이
247.
커짐
248.
페이지
249.
전환시
250.
깜빡이는
251.
현상을
252.
보고
253.
싶지
254.
않음
255.
SPA의
256.
의문점 화면
257.
전환(라우팅)
258.
URL
259.
접근에
260.
따른
261.
뷰
262.
노출
263.
모든
264.
라이브러리를
265.
모두
266.
처음부터
267.
로드?
268.
검색엔진
269.
최적화
270.
화면
271.
전환은
272.
어떻게
273.
할
274.
것인가? 메인이
275.
아닌
276.
특정
277.
URL을
278.
통해
279.
들어왔을
280.
때
281.
해 당
282.
view를
283.
어떻게
284.
갱신
285.
시킬지에
286.
대한
287.
고민 URL
288.
Segment http://{domain}/{class}/{method}/{seq} http://helloworld.com/board/freeboard/29
289.
Backbone.js way Router 유저가
290.
http://game.com/#login 을
291.
접속하면
292.
moveToStart
293.
메서드를
294.
자동
295.
호출 (Hash
296.
Tag
297.
이용
298.
방식) moveToStart
299.
메서드에는, login
300.
관련
301.
View
302.
호출
303.
로직이
304.
포함되어
305.
있음
306.
307.
SPA의
308.
화면
309.
간
310.
전환
311.
방식 템플릿
312.
엔진들을
313.
사용하여
314.
컨테이너를
315.
교체해
316.
주는
317.
방식 로직이
318.
가능한
319.
엔진과
320.
로직
321.
less인
322.
엔진이
323.
있음
324.
(if,
325.
for
326.
등) (Mustache,
327.
Handlebars,
328.
Jade,
329.
ejs)
330.
Source
331.
Load
332.
문제? 대용량
333.
자바스크립트의
334.
시대가
335.
도래 -
336.
관리
337.
할
338.
파일들이
339.
너무
340.
많음 -
341.
테트리스
342.
js
343.
loc
344.
:
345.
4000
346.
Line,
347.
소스
348.
파일만
349.
30개 -
350.
라이브러리는?
351.
require.js를
352.
이용한
353.
파일
354.
의존성
355.
관리
356.
이제
357.
js도
358.
필요할
359.
때
360.
불러서
361.
쓴다.
362.
JS Load with Original
way
363.
JS Load with Require.js
364.
Spaghetti JS Code 뷰를
365.
위한
366.
로직과
367.
모델
368.
등이
369.
혼재
370.
되기
371.
쉬운
372.
javascript 어떻게
373.
역할을
374.
분담해서
375.
효과적으로
376.
프로그래밍
377.
할
378.
수
379.
있을까?
380.
구조를
381.
잡아주는
382.
Framework를
383.
쓰자 MVC
384.
프레임워크가
385.
필요
386.
Model과
387.
View와
388.
Controller의
389.
역할을
390.
분리
391.
모델이
392.
바뀌면
393.
UI도
394.
편하게
395.
갱신할
396.
수
397.
있으면
398.
좋겠다
399.
여러사람이
400.
함께
401.
개발할
402.
수
403.
있게
404.
구조를
405.
잘
406.
잡아줬으면
407.
좋겠다
408.
Backbone.js 가벼운
409.
js
410.
MVC
411.
프레임워크 (6.5kb,
412.
Packed
413.
and
414.
gzipped)
415.
js에서도
416.
클래스들에게
417.
역할을
418.
분담시키자
419.
이벤트
420.
방식의
421.
“모델
422.
변화
423.
감지”는
424.
보너스 (Pub/Sub)
425.
• Router
426.
• View
427.
• Model
428.
• Collection
429.
2
430.
Way
431.
data
432.
binding 모델
433.
변화시
434.
뷰
435.
갱신,
436.
뷰
437.
변화시
438.
모델
439.
갱신 (Angular.js는
440.
2way
441.
binding이
442.
기본)
443.
Backbone.js
444.
는
445.
기본적으로
446.
1Way
447.
Data
448.
binding만을
449.
지원
450.
외부
451.
라이브러리를
452.
이용하면? 2
453.
Way
454.
Binding도
455.
가능 (Backbone.ModelBinder)
456.
게임
457.
인터페이스는
458.
어떻게? Canvas에
459.
UI
460.
전부
461.
그리기는
462.
너무
463.
어렵다
464.
Input등의
465.
UI는
466.
어떻게
467.
할
468.
것인가?
469.
그렇다면, UI는
470.
DOM으로
471.
만들고, 게임
472.
스테이지만
473.
Canvas
474.
Draw! (혹은
475.
WebGL을
476.
이용)
477.
HTML5
478.
기반
479.
Painter
480.
어플리케이션 프로토타이핑
481.
Canvas에
482.
input을
483.
구현해본
484.
경험 결과는? input
485.
제어는
486.
진짜
487.
너무
488.
힘듬 모바일이
489.
정말
490.
힘듬
491.
메뉴
492.
인터페이스에
493.
활기를
494.
불어넣자 • animate.css
495.
http://daneden.github.io/ animate.css
496.
Easy to Use 클래스를
497.
추가
498.
하는
499.
것
500.
만으로
501.
괜찮은
502.
애니메이션
503.
효과를
504.
얻을
505.
수
506.
있음
507.
Sound
508.
재생은? html5의
509.
sound
510.
API를
511.
이용한
512.
라이브러리로
513.
효과음
514.
재생
515.
howler.js https://github.com/goldfire/howler.js
516.
Network http통신만으로
517.
실시간
518.
게임을
519.
만들기는
520.
무리
521.
Web-Socket을
522.
이용한
523.
socket
524.
통신
525.
훌륭한
526.
Web-socket
527.
라이브러리 socket.io를
528.
이용하기로
529.
결정
530.
채널링
531.
(방
532.
관리)은
533.
보너스
534.
Back-End
535.
Node.js
536.
with
537.
Express.js Node.js는
538.
구글의
539.
크롬
540.
V8
541.
자바스크립트
542.
엔진 을
543.
기반으로
544.
한,
545.
고성능
546.
네트워크
547.
서버
548.
Single
549.
Thread
550.
기반의
551.
Event
552.
Loop
553.
방식
554.
서버
555.
미들웨어
556.
Express.js Node.js
557.
기반의
558.
Http
559.
server
560.
Framework 쉬운
561.
설치와
562.
빠른
563.
개발
564.
MongoDB
565.
with
566.
mongoose.js • NoSQL
567.
Document
568.
Database
569.
• Mongoose는
570.
비동기
571.
환 경에서
572.
작동하게
573.
설계된
574.
MongoDB
575.
객체
576.
모델링
577.
도구
578.
(클라이언트
579.
도구)
580.
• MongoDB는
581.
기본적으 로
582.
Schema
583.
Less Mongoose
584.
를
585.
이용해
586.
schema를
587.
이용할
588.
수
589.
있 음
590.
Start
591.
Development
592.
서버와
593.
클라이언트를
594.
한
595.
IDE에서,
596.
한
597.
언어로
598.
개발하는
599.
기이한
600.
현상
601.
Easy
602.
JS
603.
Library
604.
Manager Bower 커맨드에서
605.
쉽게
606.
자바스크립트
607.
라이브러리를
608.
609.
관리할
610.
수
611.
있음
612.
bower
613.
install
614.
jquery bower
615.
search
616.
underscore
617.
File result
bower_components/jquery bower_components/underscore
618.
Bower DEMO
619.
JS
620.
Build
621.
with Task
622.
Runner
623.
Tool,
624.
Grunt javascript도
625.
프로젝트
626.
규모가
627.
커짐에
628.
따라
629.
build를
630.
해야
631.
되는
632.
상황이
633.
왔음
634.
635.
테트리스도
636.
파일
637.
30개,
638.
loc
639.
3000
640.
라인 빌드는
641.
자동화
642.
하기로
643.
결정 js
644.
minification, js
645.
file
646.
merge, Unit
647.
Test
648.
Runner, And
649.
packaging …⋯
650.
Save
651.
your
652.
times
653.
with
654.
Grunt.js 개발시에는
655.
console.log
656.
를
657.
추가하고
658.
빌드시에는
659.
자동으로
660.
제거 개발이
661.
완료후
662.
uglify를
663.
이용해
664.
파일
665.
난독화
666.
및
667.
압축 용량
668.
절감
669.
효과 30개의
670.
파일을
671.
하나로!
672.
673.
(리퀘스트
674.
비용
675.
최소화) node-webkit
676.
plugin을 이용하여
677.
nw
678.
자동
679.
빌드 (mac에서도
680.
window
681.
pack
682.
생성
683.
가능
684.
What
685.
is
686.
Node-Webkit? Front-Side에서도
687.
node.js가
688.
동작하게
689.
랩핑한
690.
일종의
691.
브라우저
692.
Node-Webkit으로
693.
웹
694.
리소스를
695.
랩핑하면
696.
크로스플랫폼
697.
데스크탑
698.
어플리케이션이
699.
됨 (독립
700.
실행
701.
가능한
702.
exe
703.
혹은
704.
dmg
705.
파일로
706.
산출)
707.
What’s
708.
Next? Play
709.
with
710.
Full
711.
Stack
712.
Javascript
713.
자
714.
이제
715.
무엇을
716.
만들까요? 빠른
717.
프로토타이핑이
718.
가능한“동작하는
719.
서비스”
720.
만능이라고는
721.
할
722.
수
723.
없지만, 서비스
724.
개발을
725.
위한
726.
개발
727.
퍼포먼스는
728.
쓸만함
729.
JS의
730.
탄탄한
731.
Echo
732.
System (Third
733.
party
734.
modules)
735.
최근
736.
해외에서는
737.
MEAN
738.
이
739.
각광받고
740.
있음 (여기서
741.
Backbone.js
742.
를
743.
Angular.js
744.
로
745.
바꾸면)
746.
Javascript Full Stack Front-End부터
Back-End까지 Javascript 만으로 만들어 내는 서비스 ! 단일 언어로 처음부터 끝까지 개발할 수 있다는 것은?
747.
Play
748.
Time
749.
http://goo.gl/HZaqzZ User Dashboard :
http://goo.gl/SksUrk
750.
감사합니다!!
751.
lee.jinkwon@nhn.com
Download now