블로그 이미지
내게 능력 주시는 자 안에서 내가 모든것을 할수 있느니라 - 빌립보서 4 : 13 - happydong

카테고리

Happydong (1363)
프로그래밍 (156)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday



 페이스북이 웹개발 언어인 자바스크립트를 사용해 애플 iOS 운영체제가 탑재된 기기용 앱을 개발할 수 있는 도구인 '리액트 네이티브 프레임워크'를 오픈소스로 풀었다. 



'리액트 네이티브 프레임워크'는 웹 개발 언어로 많이 쓰이는 자바 스크립트를 사용해 iOS 기기용 앱 사용자 인터페이스(UI) 개발을 가능케 한다.  HTML5 등 웹표준 기술을 사용해 모바일 앱 UI를 개발할 수 있는 페이스북 자바스크립트 프레임워크인 '리액트'의 일종이다.


>> 자세한 내용은 원문을 참고 바란다.

[바로가기]

출처 : http://news.naver.com/main/read.nhn?mode=LS2D&mid=shm&sid1=105&sid2=283&oid=092&aid=0002071950


오픈소스 사이트 : http://facebook.github.io/react-native/


Posted by happydong
, |



이벤트 등록과 삭제는 기존 자바스크립트와 비슷하다. 모 node가 자바스크립트 기반이니깐 당연하지!! ^^ 


 ㅁ Event등록


 이벤트 등록은 addListener 또는 on을 이용하여 등록 할 수 있다. 


 var firstEventHandler = function(){

  // 내용

 } 

 process.addListener('exit', firstEventHandler);


 var secondEventHandler = function(){

  // 내용

 }

 process.on('exit', secondEventHandler);



 on과 addListener 메서드 모두 동일한 기능이므로, 가독성이 좋은 on메서드를 주로 사용하자. node에서는 동일한 이벤트가 10개 초과 등록되면 에러가 발생한다. 이때 setMaxListeners(n) 메서드를 이용하여 필요 시에 추가적으로 설정해주면 에러가 발생하지 않는다.


 ㅁ Event삭제


 이벤트 삭제는 removeListener 메서드로 삭제할 수 있으며, 해당 이벤트 모두 삭제 하고 싶으면 removeAllListeners메서드를 이용하면 된다. 


 var errorHandler = function(e){

  // 내용

 } 

 // 등록

 process.on('uncaughtException', errorHandler);

 // 삭제

 process.removeListener('uncaughtException', errorHandler);

 // 모든 이벤트 삭제

 process.removeAllListeners('uncaughtException');



ㅁ Event 발생

 

 emit 메서드를 이용해서 강제로 이벤트를 발생 시킬 수 있다. 


  process.on('fnTest', function(){

      // 내용

  });


  process.emit('fnTest');



Posted by happydong
, |



이미지맵 에디터(ImageMap Editor) v1.0

ㅁ 탄생 배경

 

 회사에서 일하면서 레이어팝업 형태의 이벤트성 공지 팝업을 만드는 경우가 종종 있다. 그럴때 마다 이미지를 잘라 HTML문서 형태로 만들자니 귀찮고 단순히 링크만 연결하면 끝인데... 해서 이미지맵를 이용해서 링크를 걸게 되는데, 나 같은 프로그래머는 포토샵 툴을 설치 하지 않으니... 그림판으로 대충 좌표를 찾아서 링크를 걸게 된다. 정말 귀찮은 작업이라 할 수 있겠다. 그래서 만들었다. 그냥 원하는 영역을 드래그해서, 그 곳에 링크를 걸 수 있도록 하는 일명 "이미지맵 에디터(ImageMap Editor)"!! 기능은 단순하지만, 그냥저냥 쓰기 편하다. 나와 같은 고생하는 사람들을 위해 파일을 공유 한다.

 

ㅁ 매뉴얼

 

 1. 객체 생성

 

 var imgEditor = new Happydong.ImageMapEditor({

            objId: "#popPanel",

            guideLineColor: "#A7ED00",

            isOnDetailView: true,

            detailViewSize: 100,

            detailViewBorderColor: "#000"

        });

[코드 1 - 객체 생성 관련]
 
 - 위 코드 1과같이 인스턴스(Instance)를 생성합니다. 해당 생성 파라미터(Parameters)설명은 아래와 같다.
  *  objId - 이미지 편집판 ID
  *  guideLineColor - 가이드선 색상을 지정.
  *  isOnDetailView - 가이드선 상세보기창 볼지여부. (Default : false)
  *  detailViewSize - 가이드선 상세보기창의 사이즈를 지정. (Default : 50)
  *  detailViewBorderColor - 가이드선 상세보기창의 Border 컬러를 지정.

 

 2. 이미지 추가

imgEditor.setImage("imageUrl.jpg");

[코드 2 - 이미지 추가 관련]

 

 - 타켓(편집 대상) 이미지를 넣도록 한다.

 

 3. 이미지맵 태그 반환

 

var outputTag = imgEditor.getImageMap();

[코드 3 - 이미지맵 태그 반환 관련]

 - 편집된 이미지를 img map태그로 반환한다.

 

 4. 에디터 초기화

 

imgEditor.clearEditor();

[코드 4 - 이미지맵 에디터 초기화 관련]

 

 - 에디터를 초기화 한다.

 

이상 간단하게 매뉴얼을 정리해 본다.

(이 스크립트를 Jquery 라이브러리 기반을 두고 있기 때문에 Jquery는 필수로 필요하다.)

 

ㅁ 다운로드 및 데모(Demo)

  - 다운로드 파일 :


Happydong_ImageMap_v1.zip



  - 데모 : [바로가기]


** 혹시나, 파일을 다운받아 사용하시는 분들이 있다면, 버그에 대한 신고는 댓글 또는 메일(master@happydong.kr)으로 보내 주시면 감사하겠습니다.

 

 

 

 

 

Posted by happydong
, |