Mobile Convergence

대학교 다닐때 학교의 홈페이지를 방학동안 200만원 받고 프로젝트를 하던 생각이 난다. 그땐 웹에디터도 없던 터라 Notepad에서 HTML을 직접 코딩하여 화면을 구성하였다. 그러기 위해 후배들 5명가량을 알바시키면서 100만원을 벌어 5개월짜리 종일반 학원을 다니던 생각이 난다. 그 당시에는 장기 컴퓨터교육 기관이 거의 없고, 정부 지원도 없던 때였다. 

이제 세월이 흘러 HTML은 HTML5 라는 훨씬 간편하며 컨텐트에 집중할 수 있는 마크업 랭귀지로 발전하고 있다. 결국 모자람과 혼합된 기능들이 주변 기술의 발전에 따라 분리되고 자신의 일에 집중할 수 있는 SOLID의 SRP(Single Response Principle) 처럼 HTML5 도 발전한것 같다. 

OLD HTML = HTML5 + CSS3 + JavaScript

  - HTML5 = Content에 집중

  - CSS3 = Presentation에 집중

  - JavaScript = Action에 집중

  - Flash를 대체하자 : HTML5의 기능 간단 목록

  - HTML5 역사를 보자 : 그림과 함께 기능이 되는 브라우져 테스트 내역이 잘 설명되어 있다

  - HTML5 배우기 : 블로그 중에서 가장 잘 정리된 듯하다. 

  - HTML5 + CSS3 : HTML5로 slide를 만듦

  - Essentail : HTML5 기능에 대해서 코드와 결과를 보자 (html5demo)

  - HTML5 API : API들에 대하여 기능별 상세 코드 설명 (좀 더 심플)

  - 게임만들기 : 자바스크립트와 적절히 사용해야 한다

  - Real-time message : websocket에 대한 이야기 

HTML5 = Content

CSS3 = Presentation

공식으로 화면을 디자인 하자 

▶ CSS3를 공부하기 위하여 먼저 뒤진 곳은 SlideShare의 소개자료들이다. 

  - Getting start with CSS3 : 코드와 함께 결과 화면을 같이 배치하여서 쉽게 이해 가능

  - Practical Introduction : 좀 재미나게 디자인된 소개자료 

  - Quality Development : CSS3로 좋은 품질의 화면만들기 예제와 결과 화면 설명

  - CSS3 Secrets : 간과하기 쉬운 비밀들을 풀어서 결과 화면과 같이 보여줌 

  - CSS3 Gradients : CSS3 그라디언트 효과에 대한 모든것 

  - 웹폰트 (Web Typography) : WordPress 스킨을 입히다 알게된 font-face

  - 색깔 표현 : 색 표현의 모든 것을 설명

  - 3D 표현 : CSS3가 못하는게 없구만 (예제와 함께 코드를 설명하고 있음)

  - CSS3 for WebKit : 강화된 기능에 대한 설명

  - CSS3와 Selectors : selector에 대한 설명 

  - Border Radius : 코드와 예제 설명

  - iPhone에 CSS3 적용 : 발표용 자료

  - 웹앱할때 성능을 고려한 개발 하자 

  - HTML5 와 CSS3 이용해서 웹사이트 구축하기

  - Responsive Design (반응형 디자인) 만들기 : 기기에 따른 형태 변화를 위한 viewport에 대한 설명

  - 반응형 디자인에 대한 자세한 설명 : 그래픽적인 설명이 돋보임

MQTT Broker인 OSS Mosquitto를 설치하고 Client 프로그램에서 push 내역을 받아서 display 하는 Prototyping을 해보자

▶ MQTT 준비하기

1. MQTT Broker 설치 :  http://mosquitto.org/download/  개발버전은 윈도우 binary  설치, 운영버전은 Linux binary 설치 
• 윈도우 버전으로 설치하면 service로 등록된다 (Mosquitto Broker)
• Linux는 mosquitto 계정을 만들고 root에서 설치를 한다 (자동으로 mosquitto 계정을 찾아 설치해 준다)
2. mosquitto 운영 : 모스퀴토 브로커(서버)를 기동하는 방법을 알아보자
• http://mosquitto.org/man/mosquitto-8.html  모스퀴토 서버의 기동 방법과 시스템 환경변수의 종류 설명
• mosquitto 의 환경변수는 $SYS topic등록으로 client가 받아 볼 수 있다
• + # 기호를 통해 topic등록 가능
• Bridge 설정을 통해서 multi broker 설정이 가능 (mosquitto.conf)
• 메세지에 대한 file writing을 할 수 있음 
• 특정 host, ip 접근 제어가 가능 
• https://launchpad.net/mosquitto  버그 레포팅 사이트
3. MQTT client 라이브로리 선택
• Android : Java  -  http://git.eclipse.org/c/paho/org.eclipse.paho.mqtt.java.git/
• iPhone :  Object C -  https://github.com/njh/marquette

지난달 KOSTA 교육기관에서 "자바스크립트 디자인 패턴" 이라는 강의를 들었다. 하이브리드 웹앱을 배우면서 자바스크립트를 다시 들여다 보아야 겠다 생각하고 듣게 되었는데 자바스크립트가 이렇게 신선한 놈인줄 첨 깨달았다. 

예전엔 그냥 화면에 애니메이션 효과주는 그저그런 스크립트어로만 생각했는데 파면 팔수록 새로운 개념과 접근법으로 OOP를 실현하고 있음에 감탄을 유발시킨다.

1) 자바스크립트 기본을 알고 가자

  - 지돌스타님의 블로그 :  http://blog.jidolstar.com/790  연재글이 꽤 많다. 초보 OOP 개발자가 보기에 만만찮다. 

  - 드미트리소스니코브의 블로그 :  http://dmitrysoshnikov.com/ecmascript/javascript-the-core/#an-object 현재 페이스북 엔지니어 같다. 이 아저씨 고수다. 그래픽적으로 개념을 잘 설명해 주고 있다. 이 아저씨껀 다 읽어 보자. 쥑인다.

2) 자바스크립트 디자인 패턴을 본격적으로 보자

  - HTML 문서 :  http://addyosmani.com/resources/essentialjsdesignpatterns/book/

  - Design Patterns for Scalable JavaScript Application (PDF)

  - Pro JavaScript Design Patterns (PDF)

▶ Git 강좌

• Git 분사 버전 관리 시스템 강좌  : 번역본 책의 내용을 상세 예제와 함께 정리 (Good!)
• Git Pro : HTML 버전  : Git Pro 번역본 (GitHub에도 있음)
• Git 사용하기 (KTH SlideShare) : 기본 사용 전략 소개 

• 개발자를 위한 고급 Git 활용전략 (KTH SlideShare) : JavaScript 코드를 통하여 HEAD에 대한 이해하기

• Eclipse 에서 Git 사용하기

• Git 의 Branch 전략 (A successful Git Branching model) : Release, Develop, Tag, HotFix 전략 소개

• Git Cheat Sheet : Flash 기반으로 각 영역을 클릭하면 명령어 종류와 설명이 나옴

• Git Tool Wiki