2017년 4월 19일 Vuetiful Korea 첫번째 밋업의 세번째 발표자료입니다.
Vue.js 한국어 사용자 모임에서 발표를 하게 된 디자이너, 그녀는 과연 Vue.js를 쓸 수 있을 것인가?
발표자료에서 소개되는 게임은 smilee.github.io/vuetiful-korea-170419 을 참고해 주시기 바랍니다.
2017년 4월 19일 Vuetiful Korea 첫번째 밋업의 세번째 발표자료입니다.
Vue.js 한국어 사용자 모임에서 발표를 하게 된 디자이너, 그녀는 과연 Vue.js를 쓸 수 있을 것인가?
발표자료에서 소개되는 게임은 smilee.github.io/vuetiful-korea-170419 을 참고해 주시기 바랍니다.
『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기복연 이
MEAN 스택, 서버와 클라이언트를 넘나드는 풀스택 엔지니어의 선택
MEAN은 서버와 클라이언트 양쪽을 모두 다루는 풀스택 엔지니어를 위한 기술이며, 한번 익혀두면 여러 상황에서 돌파구를 발견할 가능성을 높여준다. 그만큼 개발자의 경쟁력을 높일 수 있음을 의미한다. 스택의 모든 구성 요소가 자바스크립트를 사용하므로 진입 장벽이 낮고 팀 내 협업, 노하우 공유, 의사소통에 큰 도움을 준다.
이 책은 오랜 개발과 번역 경험을 두루 갖춘 베테랑 역자가 원서의 예제를 완결된 형태로 재구성해서 독자의 시간을 절약해주고 아쉬운 설명을 보강해 완성도를 높였다. 책의 흐름에 발맞춰 예제를 조금씩 확장해 나가다 보면 어느 순간 자신만의 멋진 풀스택 앱을 만들 수 있을 것이다.
- 지은이 : 애덤 브레츠, 콜린 J. 이릭
- 옮긴이 : 박재호
- ISBN : 978-89-6848-218-2 93000
- 발행일 : 2015년 9월 1일
- 페이지수 : 348
- 정가 : 28,000원
- 구매(예스24) : http://goo.gl/KNlRGg
2015년 HTML5 기반 모바일 웹 어플리케이션 기술 개발 동향 정리 및 2016년 기술 변화 예측합니다. Ionic/Angularjs 기반 상용 앱 개발 사례도 상세하게 소개 합니다. 본 자료를 통해서 HTML5 기반 모바일 어플리케이션을 개발시 활용가능한 Framework 및 최적화 분야에 대해서 이해할수 있습니다.
『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기복연 이
MEAN 스택, 서버와 클라이언트를 넘나드는 풀스택 엔지니어의 선택
MEAN은 서버와 클라이언트 양쪽을 모두 다루는 풀스택 엔지니어를 위한 기술이며, 한번 익혀두면 여러 상황에서 돌파구를 발견할 가능성을 높여준다. 그만큼 개발자의 경쟁력을 높일 수 있음을 의미한다. 스택의 모든 구성 요소가 자바스크립트를 사용하므로 진입 장벽이 낮고 팀 내 협업, 노하우 공유, 의사소통에 큰 도움을 준다.
이 책은 오랜 개발과 번역 경험을 두루 갖춘 베테랑 역자가 원서의 예제를 완결된 형태로 재구성해서 독자의 시간을 절약해주고 아쉬운 설명을 보강해 완성도를 높였다. 책의 흐름에 발맞춰 예제를 조금씩 확장해 나가다 보면 어느 순간 자신만의 멋진 풀스택 앱을 만들 수 있을 것이다.
- 지은이 : 애덤 브레츠, 콜린 J. 이릭
- 옮긴이 : 박재호
- ISBN : 978-89-6848-218-2 93000
- 발행일 : 2015년 9월 1일
- 페이지수 : 348
- 정가 : 28,000원
- 구매(예스24) : http://goo.gl/KNlRGg
2015년 HTML5 기반 모바일 웹 어플리케이션 기술 개발 동향 정리 및 2016년 기술 변화 예측합니다. Ionic/Angularjs 기반 상용 앱 개발 사례도 상세하게 소개 합니다. 본 자료를 통해서 HTML5 기반 모바일 어플리케이션을 개발시 활용가능한 Framework 및 최적화 분야에 대해서 이해할수 있습니다.
패스트캠퍼스에서 8기 째 수강생을 모집 중인 '안드로이드 앱 개발 입문 캠프' 를 소개하기 위한 슬라이드입니다. 프로그래밍 입문자, 혹은 그에 준하는 실력의 분들에게 4주간 Java 프로그래밍을 알려드리고, 그 후 기초적인 수준의 안드로이드 앱을 4~5개 정도 직접 제작해보는 실습을 거칩니다.
- 자세히 보기: http://www.fastcampus.co.kr/dev_camp_adb
- 문의: 이은혜 매니저(02-517-0643)
HyWAI is an HTML5 based Hybrid Web Application platform that allows you to author native applications with web technologies and get access to APIs and app stores.
HyWAI leverages web technologies developers already know best... HTML and JavaScript.
2012년 1월13일 알펜시아 리조트에서 열렸던 HCI2012 행사의 일환이었던 "모바일 웹 UI/UX 현재와 미래" 패널 토의에서 제가 기조 발제로 발표했던 자료입니다.
W3C에서 표준화 진행중인 HTML5와 Web API를 중심으로 새로운 UI/UX의 가능성들과 모바일 UI/UX에 대한 가능성들을 살펴보았습니다.
빌드? 우선 사용부터 매뉴얼? Getting started 한 번 돌려보기 TV 리모컨 버튼 5개 전문가는 교육받아 만들어진다? 경험=시간+시행착오+성공실패 오픈소스 트러블슈팅 “메시지” 구글링 오픈소스 함부로 수정하지 마라 최신 버전을 대하는 우리의 자세 LTS로 대동단결 팀장 설득하기 오픈소스는 공짜가 아닙니다. 저도 기여하고 싶어요 2,000년 톰캣을 시작으로 Ant, Eclipse, JUnit, JMeter를 거쳐 현재 개발에 잘 사용하고 있는 Yona, Git, VSCode, Jenkins, CentOS, VirtualBox, Nginx, Node.js, Express.js, MariaDB, Uptime, Mocha, SonarQube, ZAP 이야기 등입니다.
https://www.youtube.com/watch?v=5LHOTBxG0hc
2. 커리큘럼
1. 모바일 웹앱 프로그래밍 개요!
2. 모바일 웹앱 개발 도구!
3. HTML과 모바일 브라우저!
4. 웹의 엔진 자바스크립트!
5. 자바스크립트로 HTML 다루기
6. 자바스크립트 에러와 디버깅!
7. CSS로 꾸미기!
8. jQuery로 자바스크립트를 쉽게!
9. 데이터 저장하기!
10. jQuery모바일
11. HTML5!
12. 지도 API!
13. 디바이스 API!
14. 갤러리 프로젝트
3. 모바일 웹앱 프로그래밍 개요
1. 모바일 위의 앱, 웹, 웹앱!
2. 모바일 웹앱 프로그램의 이해
http://demos.jquerymobile.com/1.4.2/
4. 스마트폰 연대기
모바일 위의 앱
내장 프로그램 - 통신사+제조사!
iPaq, 셀빅, Clie - PDA SDK!
연아의 햅틱 - 통신사+제조사+SDK!
아이폰, 안드로이드 - SDK!
!
앱스토어(2008) 빅뱅
http://commons.wikimedia.or...Japan_1997-2004.jpg
http://jquerymobile.com/
5. 가장 많이 사용되는 앱
모바일 위의 웹
한 때 네이트 브라우저!
아이폰 이후 !
모바일 웹 브라우저!
안드로이드 아이폰 !
동일한 오픈소스 엔진 webkit!
http://www.engadget.com/products/lg/lh2300/
6. 아이폰 브라우저의 비밀
모바일 웹앱
2007년 아이폰 출시 앱스토어 없음!
Ajax를 이용한 웹앱 가이드!
웹페이지 북마크를 앱아이콘으로!
2008년 3월 페이스북, BOA 웹앱 시연!
!
그리고 SDK 공개
http://gigaom.com/2010/02/12/how-to-create-an-iphone-web-app/
7. 모든 스마트폰에 다 있는 브라우저
모바일 웹앱
프로그램의 이해
앱과 동일한 성능?!
브라우저 앱에서 접근과 차이점!
앱스토어 리젝 사유!
SDK에 포함된 웹뷰의 제약사항!
!
그래도 웹앱으로 간다?!
http://sixrevisions.com/mobile/native-app-vs-mobile-web-app-comparison/
19. 크롬 브라우저 개발도구
웹 인스펙터
초보자용!
Elements, Network, Sources,!
Resources, Console!
!
고급 사용자용!
Timeline, Profiles, Audits!
20. 크롬 브라우저 기능
라이브 편집
로컬의 모든 내용 편집 가능!
서버의 파일이 수정되는 것 아님!
Elements를 통해서 편집!
Console에서 자바스크립트 실행!
Sources에서 디버깅 수행!
21.
22. HTML과 모바일 브라우저
1. HTML 핵심!
2. 모바일 브라우저 다루기!
3. viewport 메타태그
https://github.com/coolaj86/logo.js/tree/specific-uses/specific-uses
23. HTML 핵심
웹 페이지 구성
HTML (HyperText Markup Language)!
하이퍼텍스트 마크업 언어!
정보를 표현하는 <tag> 로 구성!
CSS (Cascading Style Sheet)!
캐스케이딩 스타일 시트!
웹 페이지에 스타일을 입히는 표준 기술!
JavaScript!
자바스크립트!
버튼 클릭, 마우스 이벤트 처리
http://www.99points.info/2010/03/50-css-techniques-and-tips-which-you-always-need/
24. HTML 부가기능
<embed> 플러그인
ActiveX 기술!
플래시!
!
브라우저 기본 기능이 아닌!
OS 기능 사용!
!
활성화 이슈!
HTML5로 대체 트렌드
http://msdn.microsoft.com/en-us/library/ms537508(v=vs.85).aspx
26. 모바일 전용 페이지
meta viewport
<meta name="viewport"
content="user-scalable=no,
initial-scale=1.0,
maximum-scale=1.0,
minimum-scale=1.0,
width=device-width">