하면 된다!!!

JavaScript 단위 테스트를 위한 QUnit

프로그래밍/Javascript

JavaScript  단위 테스팅 프레임워크 QUnit


개발시 많이 사용하시는 jQuery, jQuery UI 개발을 한 팀에서 개발한 테스트 프레임워크 입니다.

자세한 설명은 아래의 페이지를 보시면 됩니다. 사용이 복잡치는 않네요.


http://www.sitepoint.com/getting-started-qunit/




SheetJS - Javascript로 XLSX 파일을 읽고 쓰고 변환하고~

프로그래밍/Javascript

jsPDF에 이어서 XLSX 파일을 읽고 쓸 수 있는 자바스크립트 라이브러리에 대한 소개입니다.

Office Open XML 스펙을 이용해서 순수 자바스크립트를 이용해서 구현한 라이브러리라고 하네요.


아래 Github에서 확인할 수 있습니다.


https://github.com/SheetJS/js-xlsx


엑셀 파일을 json 형태로도 바로 변환해줄 수도 있고 개발자들에게는 재밌는 라이브러리 인듯합니다.


Javascript를 이용해서 PDF 생성하기

프로그래밍/Javascript

Javascript를 이용해서 PDF를 만들어내는 라이브러리가 있네요.

MIT 라이센스이며 지원하는 브라우저는 IE6+*, Firefox 3+, Chrome, Safari 3+, Opera 입니다.


https://github.com/MrRio/jsPDF




트래커라는 단어 효과 - 웹 개발자분들 의견 좀 주세요.

프로그래밍/Javascript

프로젝트 중에 jQuery를 이용하고 있습니다.


머 평범하게 아래와 같은 형태로 ajax를 이용해서 서버와 통신을 하지요.


$.ajax({
	type: 'POST',
	url: "abc.jsp",
	data: $("#regFrm").serialize(), 
	success : function(data) {
		var res = data;
		//do_something_success();
	},
	error : function(res, status, err) {
		//do_something_error();
	}
});


그런데 오늘 생소한 현상을 발견했습니다.


아래의 형태로 불려지는 form에 특정 단어가 들어가게 되면 저 함수가 서버와 통신하지 못하고 error를 발생시킵니다.

IE, FF, Chrome 모두 마찬가지입니다.


serialize 에서 문제가 발생하거나 아니면 다른 문제일까 고민을 하면서 글을 작성하는데 이 티스토리에서 글을 작성할때도 해당 문자열이 포함되면 맛이 가더군요.


해당 단어는 영어로 트래커 (track er <- 글이 등록이 안되기 때문에 띄어쓰기를 해봤습니다) 라는 단어입니다.


저만 이러는 것인지요? 사무실에서 다른 분의 PC에서도 같은 현상이 발견되었는데... 도저히 이해가 안가네요.


무림의 고수님들의 조언 부탁드립니다. ㅠㅠ



웹 개발 공부와 포르노 사이트의 알 수 없는 상관관계... (ㅠㅠ)

마이 스토리

제목이 좀 우습다. 이게 무슨 관계가 있다고... 요즘 2000년대에 공부를 시작한 친구들은 이해 못할 수 있다... 세상에 이미 개발에 대해 공부할 수 있는 컨텐츠가 넘쳐나니까... ㅠㅠ


==================


요즘 신문을 보다보면 성폭력에 대한 기사들로 넘쳐 흐른다. 한국의 언론은 한번 물을 만나면 한없이 쏟아부어 불안과 공포를 조장하는데는 정말 대단한 능력들을 발휘한다.


특히 요즘의 포르노물이 아동 성폭력을 불렀다. 게임이 아이들을 폭력적으로 조장했다. 등등...

우리 어렸을때는 만화에서 사람을 돼지로 그리고 죽여야한다고 가르쳤었는데... (똘이 장군 만쉐이) 머 어쨋든... 이건 만화의 폭력성?


위와 같은 기사들을 읽다 보니 잠깐 과거에 대한 회상에 젖어들었다.


95년도 이던가... 필자가 군제대후 복학전 무렵에는 웹 브라우저를 이용한 인터넷 보다는 뉴스 그룹 등을 이용한 서비가 많았고, 그곳을 이용해 야사, 야애니 등등이 유통되고 있었다. 이걸 모아주는 봇들도 있었고... 이름은 기억나지 않는다. ㅠㅠ 아 이 저주 받을 기억력...


90년대 중후반 인터넷이 국내에 보급되기 시작할 무렵 모질라, 넷스케이프 등을 이용해서 볼 수 있는 웹 사이트들 중에 이미 포르노 사이트들은 넘쳐났다.  어떻게 아냐고? 다 안다. 그 때 인터넷 했던 사람들은... (아니라면 어쩔 수 없다. 적어도 내 주변 사람들은 알았다. ㅠㅠ)  필자가 주로 사용한 것을 기준으로 검색엔진은 야후, 웹크라울러, 라이코드, 알타비스타, 최초의 한글 검색엔진인 코시크 서비스가 있었던 것으로 기억된다. 나중엔 한글 검색은 심마니가 한때 평정하게 되었지만... (※참고 :  재미있는 검색엔진의 역사)


당시 해당 검색엔진을 이용해서 많은 것들을 찾아내곤 했다. 흑... 그때만해도 컨텐츠를 필터링 하진 않았기에... 다만 컨텐츠가 많지도 않았다. 필자가 95년도에 웹 개발에 대해서 공부를 시작할 무렵에는 웹 관련 개발 도서들이 국내에 전무했던 시기이기 때문에 필자도 해외의 유수의 사이트들을 뒤져가면서 공부할 수 밖에 없었다. 공부는 공부고 실제 사용한 소스를 분석하기 위해서 다양한 사이트들의 소스를 볼 수 밖에 없었다. 그중에 포르노 사이트들이 기술적으로 아주 화려하게 HTML과 javascript를 사용하고 있었다. 당시에 웹 사이트 UI중에는 기술적으로 그곳들이 최첨단이었다. 따라서 이런 사이트의 소스는 공부하기에도 많은 도움이 되는 것이 사실이었다. 당시에는 필자가 학생이었기 때문에 가입을 해가며 돈을 그런데 쓸수 없었고 어떻게 하면 저걸 뚫고 들어가서 공짜로 볼 수 있을까 하면서 소스를 분석해보고자 노력했던 기억들이 있다.


챙피한 고백이 될 수도 있지만 그렇게 해서 나는 웹 UI 개발을 배웠고 당시에 학교에서 학생들 대상으로 간단한 강좌도 몇차례 열 수 있었다. 즉, 나한테 배운 사람들은 다 포르노 사이트 분석을 통해 축적된 기술력을 전가 받은 것이다. 포르노의 전도사... ㅠㅠ


이 부분에 대해서 딴지 거실 분이 많이 계실듯... 하지만 제가 전달하고자 하는 것은 포르노 사이트의 긍정적인 효과를 이야기 하는 것도 아니고 정당화 하려는 것도 아니다. 인터넷의 역사에 대해서 거론하자는 것도 아니다. 그냥 기사를 읽다가 생각난 나의 에피소드일 뿐이다.


이런 기사들에서 말하는 것처럼 '포르노 사이트가 넘쳐나기 때문에 사회적인 문제가 야기 되었다.' 또는 '게임 컨텐츠 때문에 학생들이 폭력적으로 변했다' 등등... 사회적인 현상을 어떠한 일부 컨텐츠로만 전가하면서 마녀 사냥을 하는 것 자체가 문제 아니냐는 것이다. 사실 TV에서 나오는 것만 봐도 몇년전에 비해 이미 준 포르노 수준이다.


2~4 공화국의 황제로 군림하셨으며 영구집권을 꿈꾸셨고, 나라의 경제를 부흥시켜 아직도 민족의 태양으로 남아계신 박 가카님께서도 팩트만 보면 궁정동에서 어린 여자 앉혀놓고 한잔 하시다가 경호실장의 총탄에 비운에 가셨다.

5공화국을 이끄신 전 가카님은  3S 정책을 펼치셔서 온세상의 성문화를 개방하셨고, 그로 인해 사회적으로 그런 업소들은 용인되고 넘쳐나게 되었다. 강남의 길바닥을 보라. 일본 야동에 등장하는 모델들의 사진으로 도배되어있는 명함들... 지천으로 깔려있다. 이것이 진정한 강남스타일의 진면목이다. 물론 거기만 그렇지는 않다. 전국적으로 유흥가는 모두 그러하다. 그런 업소들이 벌어들인 돈은 뿌리깊은 지하경제를 형성하고 권력자들에게 연결되고 다시 그들은 보호 받는 것이 아닌가. 세상이 다 아는 사실이다.


대선을 앞두고 이런 분위기를 언론을 통해서 자꾸 조장하고 공안정국으로 끌고가기 위한 것은 아닌지... 경찰력을 시위에 대량 투입하여 민중을 탄압하다 보니 치안의 공백이 발생할 수 밖에 없는데 이것은 누구에게 책임을 물을 것인가 말이다.


세상의 현상을 단순하게만 바라보지 않았으면 좋겠다. 많은 것들이 연관되어져 현상이되고 문화가 되는것이 아니겠는가~


다만 범죄는 당연히 단죄되어야 한다.

이는 필자의 의견도 단호하다. 나쁜 쉐이덜...


결국 글은 산으로... 

포르노 - 웹개발 - 역사 비판 - 현 정부 비판 - 범죄 비판 - 자아 비판


Nodejs 소개 동영상

프로그래밍/Javascript

NodeJS 홈페이지 : http://nodejs.org/

소개 동영상...


node.js 갠찮다...

프로그래밍/Javascript
몇년전에 다루었던 리얼타임 메시징 관련 솔루션들이 있었는데...
유사하지만 다른 형태의 솔루션들이 나오고 있다. 역시... 시장에서는 너무 빨리 나오면 대박이 나거나 쪽박을 찬다.



JavaScript Operator의 ===, !== 연산자

프로그래밍/Javascript
===, !== 라는 연산자를 자주 봤었는데... 사용을 않하다 보니 모르고 살았다.
검색을 해보니... 아래와 같은 결과가...

일반적으로 javascript에서 == 을 하게 되면 값을 비교한다. 데이터 타입이 String, Int, Long 관계없이... 값만 같으면 true를 리턴했지만... === 3개짜리는 데이터 타입과 값이 같은 경우에 true를 리턴한다.
!== 는 당연히 반대겠죠~

=== This is the strict equal operator and only returns a Boolean true if both the operands are equal and of the same type. These next examples return true:
a === 2
b === 4


!== This is the strict not equal operator and only returns a value of true if both the operands are not equal and/or not of the same type. The following examples return a Boolean true:
a !== b
a !== "2"
4 !== '4'


Cross Domain Ajax Call 방법... (no Proxy)

프로그래밍/Javascript
Cross Domain Ajax Call 때문에 골머리를 썩은 적이 있었다.

Proxy를 거치면 프로세스상 네트워크를 한번 더 타기 때문에... 좋은 방안은 아니다. 그렇지만 방법을 몰라서 계속 난 이렇게 사용해왔다. (바보... ㅠㅠ)

좋은 방안들이 잇는데 그 중에 한개가 아래와 같은 방법이다.

http://www.xml.com/pub/a/2005/12/21/json-dynamic-script-tag.html

다른 방법들도 소개를 하고 있는 글이 있는데 참고하시길...

http://snook.ca/archives/javascript/cross_domain_aj/


Javascript Touch & Gesture Event for Mobile Browser

트랜드/Mobile
모바일 브라우저의 Touch, Gesture Event 처리 방법에 대해서 정리해봅니다.
다른 여러 사이트에서 아이폰에대해서는 정리가 많이 되었던데요... 
저는 http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html 이 블로그를 참조하여 아이폰과 안드로이드 폰에 대해서 함께 정리하여 봅니다.


Android and iPhone touch events

Android, iPhone은 공통적으로 터치와 관련해서 다음과 같은 이벤트를 제공합니다. 
  • touchstart - mouseDown 이벤트와 비슷한 이벤트로 손이 화면에 닿으면 발생
  • touchmove - mouseMove 이벤트와 비슷한 이벤트로 손 터치한 상태로 이동하면 발생
  • touchend - mouseUp 이벤트와 비슷한 이벤트로 손을 화면에서 뗄때 발생. 아이폰의 경우 touchcancel 이벤트가발생
  • touchcancel - bit of a mystery 라고 표현하네요. 쬐금 이상하다는...

예제)
document.addEventListener('touchstart', function(event) {
    alert
(event.touches.length);
}, false);

Event object
위의 예제에서 보듯이 Touch Event Object는 touches array를 포함하고 있다.
안드로이드의 경우 이벤트에는 한개의 터치 오브젝트를 포함한다. 즉 touches.length는 1이다.
터치 아이폰의 경우에는 멀티터치가 가능하기 때문에 touches array를 통해서 핸들링 할 수 있다. 
터치 이벤트 객체는 마우스 이벤트 객체와 같이 pageX, pageY 등의 값들을 포함하고 있다.

예제 )
document.addEventListener('touchmove', function(event) {
   
event.preventDefault();
   
var touch = event.touches[0];
    console
.log("Touch x:" + touch.pageX + ", y:" + touch.pageY);
}, false);

  • clientX: X coordinate of touch relative to the viewport (excludes scroll offset)
  • clientY: Y coordinate of touch relative to the viewport (excludes scroll offset)
  • screenX: Relative to the screen
  • screenY: Relative to the screen
  • pageX: Relative to the full page (includes scrolling)
  • pageY: Relative to the full page (includes scrolling)
  • target: Node the touch event originated from
  • identifier: An identifying number, unique to each touch event

iPhone Touch and Gesture Events

애플의 WebKit은 안드로이드와 달리 몇가지 것들을 추가적으로 지원한다. touchEnd 이벤트는 event.touches array에서 현재 touch 를 제거해준다. 대신 event.changeTouches array를 이용해서 볼 수 있다.

애플 iPhone의 터치 이벤트 객체
  • touches - touchStart, touchMove, touchEnd 의 터치 정보를 포함하고 있는 array
  • targetTouches - 같은 target Element로부터 비롯된 touches 정보를 포함
  • changedTouches - 모든 touch 정보를 가지고 있는 객체


Gesture events

애플에서는 pinching, rotating과 같은 멀티 터치 이벤트를 처리할 수 있도록 지원한다.
  • gesturestart - 멀티 터치 시작
  • gesturechange - 멀티 터치를 해서 움직일 때 발생
  • gestureend - 멀티 터치 이벤트가 끝날때 발생
멀티 터치를 위한 이벤트 객체는scale, rotation 값을 갖고 touch 객체가 없다.

예제 )
document.addEventListener('gesturechange', function(event) {
   
event.preventDefault();
    console
.log("Scale: " + event.scale + ", Rotation: " + event.rotation);
}, false);

Event table

touchstart
touchmove
touchend
gesturestart
gesturemove
gestureend
Android
y
y
y
n
n
n
iPhone
y
y
y
y
y
y
has event.touches
y
y
y
n
n
n
(iPhone) has event.scale and event.rotation
n
n
n
y
y
y
(iPhone) touch in event.touches
y
y
n
-
-
-
(iPhone) touch in event.changedTouches
y
y
y
-
-
-




※ 참고 Link :