![[111015/아꿈사] HTML5를 여행하는 비(非) 웹 개발자를 위한 안내서 - 1부 웹소켓.](https://cdn.slidesharecdn.com/ss_thumbnails/111015-111017005159-phpapp02-thumbnail.jpg?width=560&fit=bounds)
![[토크아이티] 프런트엔드 개발 시작하기 저자 특강](https://cdn.slidesharecdn.com/ss_thumbnails/random-141024103422-conversion-gate01-thumbnail.jpg?width=560&fit=bounds)
![[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...](https://cdn.slidesharecdn.com/ss_thumbnails/implementingwebbasedonlinemultiplayertetris-141111200036-conversion-gate02-thumbnail.jpg?width=560&fit=bounds)
![[111217 아꿈사연말모임] 웹소켓과온라인게임](https://cdn.slidesharecdn.com/ss_thumbnails/111217-111219001615-phpapp01-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Similar to Weblockly 소개자료 (20)
![[D2 COMMUNITY] Open Container Seoul Meetup - 마이크로 서비스 아키텍쳐와 Docker kubernetes](https://cdn.slidesharecdn.com/ss_thumbnails/dockerkubernetes-161207045638-thumbnail.jpg?width=560&fit=bounds)
Weblockly 소개자료
- 1. Weblockly Naver D2 Campus Fest 2016 by 계성혁 (@lawrence-kaybob), 주현수 (@DogFooter), 최홍범 (@credtiger96)
- 2. Weblockly?
- 3. Block Coding 환경에서 간단한 Web Page 제작을 도와주는 툴
- 4. Goals of Weblockly ● Scratch 에서 추구하고자 했던 것을 Web Page 구성에 적용 ● 누구나 언어에 종속되지 않고 웹에 대한 이해를 제공
- 6. Blockly? ● Google 에서 개발한 Block Coding 을 위한 Open Source Project ● Block 을 이용하여 Javascript, Python, Lua, PHP, Dart Code 생성이 가능함 ● Scratch, App Inventor, code.org 등 많은 코딩 교육 프로젝트에서 사용 ● Web(Javascript), Android, iOS Library 를 제공하여 코딩 교육을 위한 Blockly App 을 제작할 수 있음 ● http://developer.google.com/blockly
- 7. How? ● Blockly 에서 기본적으로 Javascript Code 생성이 가능하므로 Vanilla JS Code 생성 가능 ● Blockly 에서는 Block 을 정의하면 이를 사용할 수 있도록 API 제공 ● jQuery, Node.js Code 는 이를 이용해 직접 정의 ● https://blockly-demo.appspot.com/static/demos/blockfactory/index.html
- 8. 실행화면 DOM Object 에 특정 Script 를 블럭을 이용해 할당할 수 있습니다 .
- 9. 실행화면 이러한 Script 는 ID 별로 구분되어 작성 가능합니다 .
- 10. 실행화면 이렇게 구성된 Block 들은 실제 Javascript 코드로 변 환되어 사용 가능합니다 .
- 11. 실행화면 생성되는 Javascript Code 의 다양한 Scope 를 사용할 수 있습니다 .
- 12. 실행화면 Frontend 뿐만 아니라 Backend(Node.js) Server 의 간단한 코드도 생성 가능합니다 .
- 13. 실행화면 간단한 Routing Rule 을 정해주어 Frontend 에서 제 작한 페이지를 제공하게 할 수 있습니다 .
- 14. Dependencies ● Blockly (Apache License v2.0) º Block Coding 환경 제작을 위한 Library ● Node.js (MIT License) along with Express.js & npm (Artistic License 2.0) º Dependency 관리 및 Page 제공을 위한 서버 ● JSZip (GNU General Public License v3.0) º 생성한 Code 를 Package 단위의 압축 파일로 내보내기 (Export) 기능을 위한 Library ● CodeMirror (MIT License) º 완벽한 Block Coding 환경만으로 HTML, CSS 파일 구성이 힘들어 현재 단 계에서는 HTML, CSS Code 를 작성할 수 있는 환경을 임시로 제공
- 15. Coming Soon... ● Block Coding 만으로 HTML Code 와 DOM Object 들에 대한 Javascript Code Binding 구현 ● 현재 작업 중인 사이트에 대해서 Package 단위로 다운로드 기능 º 다운받은 Package 는 몇 번의 추가 설정 이후 간편하게 사용 가능한 수준으로 구성 º PasS 에 배포까지 해주는 기능도 구상 중
- 16. 감사합니다 :)