블로그 이미지
윤영식
Frontend Application Architecter, Full Stacker, KnowHow Dispenser and Bike Rider

Publication

Statistics Graph

Recent Comment

2012.09.11 21:42 HTML5, CSS3


HTML5 = Content

CSS3 = Presentation

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



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


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

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

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

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

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



▶ CSS3 고급 기능 다루기


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

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

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

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

  - CSS3와 Selectors : selector에 대한 설명 

  - Border Radius : 코드와 예제 설명



▶ 웹 애플리케이션 적용하기 


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

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

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

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

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


CSS3 신통방통한 넘이다. 역사가 2005년부터 꽤 많이 성숙했다. Progressive Enhancement (점진적 향상) 에 대한 의미와 함께 HTML5 + CSS3 + JavaScript에 대한 깊이 있는 이해와 방향 감각이 필요하겠다. 


저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
2012.09.11 19:01 Protocols



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 라이브로리 선택

▶ MQTT 설치하기 

  1. 아키텍쳐 설명 
    1. 네이버 자료 : http://helloworld.naver.com/helloworld/1846
    2. 성능 : ftp://public.dhe.ibm.com/software/kr/ik2012/mqtt.pdf
  2. 설치 : mosquitto broker 설치 
    1. 설치하기 : http://ceit.uq.edu.au/content/installing-mosquitto-under-centos
    2. /etc/sudoers 설정 : sudo su 명령 실행이 안될 경우 셋팅한다 
    3. [root@www etc]# cat sudoers | grep mosquitto
      mosquitto ALL=(ALL) ALL

    4. bin :  /usr/sbin/mosquitto
  3. 기동 : mosquitto 계정 접속 

           > sudo su

           > ./startMqtt.sh

  4. 결과 확인 

[root@www mosquitto]# netstat -na | grep 1883
tcp 0 0 0.0.0.0:1883 0.0.0.0:* LISTEN
tcp 0 0 :::1883 :::* LISTEN
[root@www mosquitto]# ps -ef | grep mosquitto
root 2641 2467 0 14:43 pts/0 00:00:00 su - mosquitto
504 2676 1 0 14:44 pts/0 00:00:00 /usr/sbin/mosquitto -d -c /etc/mosquitto/mosquitto.conf
root 2680 2664 0 14:44 pts/0 00:00:00 grep mosquitto


   5. 환경설정 

  • /etc/mosquitto/mosquitto.conf 
  • wildcard : +  #

   6. Client

 

저작자 표시 비영리 변경 금지
신고

'Protocols' 카테고리의 다른 글

Advanced Message Queueing Protocol (AMQP) 란 무엇인가  (0) 2012.11.28
MQTT 사용하기 - 1  (1) 2012.09.11
MQTT Push  (0) 2012.09.10
posted by peter yun 윤영식
2012.09.10 22:56 Languages/JavaScript



지난달 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)


짬짬이 자바스크립트 디자인 패턴 블로그를 써야 겠다. 


저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
2012.09.10 17:22 Git, GitHub


▶ Git 강좌

     

     


▶ Git Branch를 통하여 프로젝트를 관리하는 방법 


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


▶ Git Tools


저작자 표시 비영리 변경 금지
신고

'Git, GitHub' 카테고리의 다른 글

[Git] commit 사용하기  (0) 2012.11.26
[Git] diff 사용하기  (0) 2012.11.22
[Git] Ubuntu 에 설치하기  (0) 2012.11.14
[Git] Branch 전략  (1) 2012.11.14
SVN에 대하여 이해하기  (0) 2012.09.20
[Git] 레퍼런스 모음  (0) 2012.09.10
posted by peter yun 윤영식
2012.09.10 13:37 Protocols



모바일 폰에서 Push 통신을 하기 위한 방법에는 C2DM, MQTT, Node.js등이 존재한다. 여기서 MQTT를 예전 프로젝트에서 진행해 보았는데, 참조하자. 시간이 허락된다면 C버전으로 되어 있는 MQTT Broker 서버를 Java 버전으로 개발해서 OSS(Open Source Software)로 공개하고 싶다. 자 그럼 MQTT의 세상속으로 빠져보아요~~~


MQ Telemetry Transport

MQTT is a machine-to-machine (M2M)/"Internet of Things" connectivity protocol. It was designed as an extremely lightweight publish/subscribe messaging transport. It is useful for connections with remote locations where a small code footprint is required and/or network bandwidth is at a premium.



MQTT에 대해 이해하기 



MQTT 소프트웨어 참조 방법


MQTT Broker Java 버전을 만들기 위해한 스터디


MQTT Prototyping 해보기 

저작자 표시 비영리 변경 금지
신고

'Protocols' 카테고리의 다른 글

Advanced Message Queueing Protocol (AMQP) 란 무엇인가  (0) 2012.11.28
MQTT 사용하기 - 1  (1) 2012.09.11
MQTT Push  (0) 2012.09.10
posted by peter yun 윤영식
TAG MQTT