블로그 이미지
올해목표 // 10월 어학연수 떠나자~ 자수씨

카테고리

전체글 (1457)
Brand New! (28)
주절주절 (213)
MOT (11)
해외쇼핑 (49)
쇼핑노트 (150)
취미생활 (94)
iPhone (4)
Eclipse (121)
Google (83)
Spring (31)
JAVA (176)
JavaScript (59)
WEB (49)
Database (20)
OS (26)
Tools (8)
Tips (26)
IT정보 (1)
Book (21)
Programming (37)
외부행사 (43)
주변인들 (17)
여행노트 (60)
학교생활 (30)
회사생활 (52)
사회생활 (5)
외국어공부 (12)
잡동사니 (30)
Total
Today
Yesterday
 
04-29 00:57
 

달력

« » 2024.4
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
 

최근에 올라온 글

최근에 달린 댓글

자바스크립트 라이브러리를 만들고 배포할 경우에는 용량을 줄이기 위해

암호화와 압축이 필요하다.

암호화
  - obfuscator 라고도 하는 것을 이용해서 변수명을 변경한다
  - 압축의 효과도 가지고 수 있다.

압축
  - 공백과 탭, 뉴라인을 제거하여 용량을 줄인다.

압축은 Aptana studio 를 이용하면 되는데... 암호화는 멀로 하지;;;


암호화는 Javascript-packer 를 통해서도 할 수 있다.

하지만 ExtJs 처럼 암호화를 해 주는 곳을 찾아야 하는데...

Posted by 자수씨
, |
그리드의 row 를 2단으로 만들고 싶은 마음에 분석을 시작...

javascript 들의 기본 함수들은 먹고 들어가야 한다.

Array String::split(param1)
  - param1 로 문자열을 분리하여 배열로 반환

String Array:join(param1)
  - param1 을 구분자로 배열을 하나의 문자열로 합침

Function.apply( obj, arguments )
Function.call( obj, arg1, arg2, ..., argN )
  - Funtion 객체의 생성자를 호출
  - apply 는 인자를 배열로 넘긴다는 점이 다름

훌훌 ~

Posted by 자수씨
, |
Java Script 관련 사내 강의를 준비하면서 들러본 Yahoo! UI Blog ...

가장 최신 글이 AIR 관련 글이네요...

요즘은 AIR 가 대세인가....

Posted by 자수씨
, |
출처: http://www.west-wind.com/WebLog/posts/107136.aspx

막되먹은 번역 시작됩니다.

JSONP is an unofficial protocol that allows making cross domain calls by generating script tags in the current document and expecting a result back to calls a specified callback handler.

JSONP는 비공식적인 프로토콜로 크로스 도메인 호출을 허용합니다. 다른 도큐먼트에서 생성된 스크립트 태그와 콜백 핸들러를 호출하여 결과를 받을 수 있는 것을 포함한 것들을 통해서...

(첫 문장 부터 저질....)


The client JavaScript code to make a JSONP call looks like this:

JSONP 클라이언트 코드는 다음과 같습니다.


Listing 1. JSONP client JavaScript code

#1: jsonp 호출을 하는 함수의 시그니쳐를 정의합니다. 호출할 url과 callback 함수 이름
   질의값과 같은 파라미터들... 근데 왜 callback은 사용하지도 않으면서 정의했을까요;;;;

#3~7: url에 '?' 가 있으면, 즉, 파라미터가 포함된 url의 경우에는 '&'를 붙여서 파라미터를 처리하고,
   없을 경우 '?'로 파라미터의 시작을 표시합니다. url에 jsonp 파라미터로 보낼 name 값을 append...

#8~9: query 파라미터가 존재할 경우 인코딩 encodeURIComponent 메소드를 이용하여 인코딩
   처리를 한 후에 url에 append...

#10: 브라우저 캐싱을 막기위해 현재 시간을 뒤에 붙여줍니다.

#12~15: script 객체를 생성하고 url을 설정한 후 document에 append 시켜주면 해당 url의 스크립트가
   실행됩니다.


The idea is that this code adds a <script> tag dynamically to the page and when this code loads it causes the JavaScript that the server loads to be executed. Because it uses the DOM and a <script> tag this gets around the cross site scripting limitations of the XHR object.

자바스크립트가 실행 된 후에 동적으로 추가된 <script> 태그는 추가된 후에 로드가 되는 것을 이용한 것이다.
DOM과 XHR 객체의 크로스 사이트 스크립팅 제한으로 <script> 태그를 사용한다.

(-_-0;;;;)


The server is expected to return JSON data, but with a slight twist: It has to prepend the callback function name, which is passed as part of the url. The syntax for a JSONP Url is simply the URL with a jsonp= query string parameter that defines the the callback function:

http://someserver.com/mypage.aspx?jsonp=callbackFunction

If the server wants to return a result like:

{ "x": 10, "y": 15}

the result will be turned into (assuming the callback specified is callbackFunction):

callbackFunction( { "x": 10, "y": 15} )

서버는 예상된 JSON 데이터를 리턴합니다. 그러나 콜백함수 명이 url의 일부일 경우에는 약간 꼬일 수 있습니다. JSONP Url의 문법은 간단한 콜백 함수로 정의된 'jsonp=' 문자열 쿼리 파라미터의 URL사용합니다. 위의 사이트로 호출을 할 경우 결과는 다음과 같습니다.

{ "x": 10, "y": 15 }

결과는 callbackFunction으로 정의된 콜백을 통해서 반환될 것입니다.

callbackFunction( { "x": 10, "y": 15 } }


If you're implementing this in an ASPX.NET page it might look like this:

ASPX.NET 페이지는 다음과 같이 구현될 것입니다만....
저는 Java를 하기 때문에 서블릿으로 구현하겠습니다.


Listing 2. Server source



The client will now have script tag that gets added to the document and the script executes on load and in effect calls the callbackFunction with the parameter:

클라이언트에 스크립트 태그가 도큐먼트에 추가되어지고 로드가 되어 실행이 되고
callbackFunction에 파라미터를 포함하여 호출되어집니다.


Listing 3. client callback function


And there's a cross domain callback.

크로스 도메인 콜백입니다.


Note that this callback requires that the server KNOWS it's receiving a JSONP request because the server has to prepend the callback handler name supplied so the code can fire in the client.

서버는 클라이언트 핸들러 이름이 클라이언트 코드에서 실행할 수 있어야 하기 때문에
서버가 JSONP 요청을 받는 것을 알고 있어야 합니다.



Yeah it seems like an Exploit
...

I'm not sold on the idea, because it is basically exploiting what seems to be a security hole in the browser and one that apparently won't be plugged as many services like Adsense rely on it. But all this talk about preventing cross site scripting are pretty much moot by allowing this sort of hack to work. But then again this implementation doesn't do anything that couldn't be done before or changes any of the security issues - it just takes advantage of this functionality.

Still - it feel... wrong <g>...

It is what it is and it seems this approach is getting more popular in being able to retrieve JSON content from various public sites. It certainly is something that should be useful for ASP.NET developers who internally need to make client callbacks to their own internal sites which seems a frequent request.
 

저질 해석에 힘들었습니다... 마지막들은 영어 실력 좀 쌓고~ ㅋㅋㅋ

Posted by 자수씨
, |
제일 필요한 기능인데... 인터넷 익스플로러용으로다가....
Aptana 좀 사주세요 ㅠ_ㅠ... 10만원

Debugger: Console View and logging
머라카는지 하나도 몬알아듣겠네... ㅠ_ㅠ
Console View를 통해 logging을 할 수 있다는 이야기 같음...
View Video


Debugger: Examining variables
와우 ㅠ_ㅠ.... 그토록 원하던 기능인데...
회사에다가 Aptana 사달라고 할까...
View Video


Debugger: Stepping through functions
이건 뭐.. eclipse 디버거 처럼 사용할 수 있으니
자바개발자들은 손쉽게 적응할 수 있을 듯...
View Video


Debugger: Adding breakpoints
Eclipse 사용자들은 더블클릭이면 그냥 팍팍!!
Breakpoints properties 는 처음 보는 듯~ Eclipse에서도 써먹어 봐야지~
View Video


Debugger: Introduction to the debugger
View Video


왠지 슬슬 순서가 꺼꾸로 된 것 같은... ㅎㅎㅎ;;;


참고자료: http://www.aptana.tv/

Posted by 자수씨
, |
Aptana는 FTP도 지원해준다.
이건 쉽게 이해할 수 있으므로 패스~


Edit Remote File
View Video


Add FTP Connection
View Video


Add FTP Site
View Video


분명 동기화가 있었던거 같은데.... 흠흠


참고자료: http://www.aptana.tv/

Posted by 자수씨
, |
순서대로 하다보니... 라이브러리들 다음에 다시 Aptana Sdutio의 기능소개가 되어버린듯...


Browser Support
code assist를 통해서 지원되는 브라우저를 확인할 수 있다.
View Video


Outline View
TAG Tree... 다른 말이 필요 없을 듯
View Video



Overview
mochikit 라이브러리를 이용한 샘플을 통해 Aptana 쭉 훑어보기...
View Video


Dynamic Help
F1키로 도움말 볼 수 있는 것을 보여준다.
View Video


Creating a Snippet
템플릿만 잘 맹글어 놓으면 편리한 기능.
동적으로 입력되는 부분은 prompt() 를 이용하여 좀 더 편하게 사용할 수 있다.
마우스 깐작거리는거보다 키보드로 다 하고 싶으신 분들한테는 필요없는 기능
View Video


Creating an Action
js 파일의 일부분을 한꺼번에 주석처리하는 것 과 같은 액션에 대한 정의를 보여주는...
Action을 js로 만들다니... 허허허;;; 툴과 JavaScript를 연동하는 기술은 대단한 것 같다.
onExcute 에서 내용을 수정~ perl 스크립트를 사용하는 건가??
아래 영상은 Reverse라는 Action 생성을 보여준다.
단축키 지원은 안되나엽~
View Video


Actions Overview
Actions 를 통째로 살펴보기~
View Video


Aptana 기능들이 너무 많아 ㅠ_ㅠ....


참고자료: http://www.aptana.tv/

Posted by 자수씨
, |
기능 분석... 2번째 시간~ 자바스크립트 라이브러리들에 대한 활용법

기본적으로 prototype.js는 깔고 들어가는건가??

고고싱~ (맘 놓고 자바스크립트로만 개발 할 수 있는 곳이 있었으면 좋겠다.... 흙...)

Yahoo YUI
내가 제일 좋아하는 라이브러리 중 하나이지만.. 주변에서 아는 사람은 별로 없다..
왜 다들 스크립트의 세계를 이해해주지 않는 것인가!!!!!!!
근데 다른 라이브러리들에 비해서 스타일이 좀 독특한 면이 있어서 이해하기가 쩜 힘들다.
적응만 한다면 최강의 자바스크립트 라이브러리~
예제 코드와 JsDoc을 제공해주므로 YUI를 익히기에는 Apatana가 최고일 듯!!
아래 동영상은 YUI의 Animation 에 대해서 보여주고 있다.
누가 YUI JsDoc 한글화에 도움을 줄 사람은 없을까... 영어 울렁증 ㅠ_ㅠ
View Video


MochiKit Docs
이건 무슨 라이브러인지... 이름만 들어보고 관심이 없던 녀석인데...
View Video


MochiKit
마찬가지.. 흠흠
View Video


Dojo
주로 사용하는 라이브러리가 아니여서 관심은 크게 가지 않지만
프로젝트 생성시에 라이브러리들도 추가를 시켜주고.... Aptana 개발자들의 세심한 배려에 감동 -ㅁ-;;;
View Video


AFLAX
뉘신지;;;; Flash라이브러리인가??? 그냥 flash 파일을 불러서 뭘 하는 것 같은데...
난 또 자바스크립트로 flash를 생성해주는지 알았는데.. 쩝;; 혼자 낚였네;;;
View Video


Adobe AIR: Intro (NEW)
관심은 있었으나 접할 기회가 없으셨던 분...
설명또한 단순하다;;;;
View Video


지금까지 Aptana에서 지원해주는 자바스크립트 라이브러리에 대해서 살펴보았다.
그 외에도 JQuery, Prototype, Rico, Scriptaculous 라이브러리에 대한 지원도 해준다.


참고자료: http://www.aptana.tv/

Posted by 자수씨
, |

자바스크립트 IDE 툴을 찾아 헤매이다 발견한 Aptana studio...

이클립스 플러그인 만으로 사용했었는데 많이 발전된 것 같다.

이제는 정확하게 무슨 기능이 있는지 확인할 시점일 듯!!!

---------------------------------------------------------------
Browser Preview
이클립스 PDE 기반의 UI에 대한 설명. 그냥 스킵해도 될 듯
View Video



Code Assist
자바스크립트 개발하면서 제일 필요로 했던 부분.. 각종 라이브러리 함수들의 코드를 어시스트 해준다.
라이브러리는 따로 등록해줄 수 있다고 들었는데... 개인이 만든 라이브러리도 등록해서 사용이 가능하다.
Code Assist Profiles에 자신의 js 파일을 떨구어 주면 되는 듯??? F3 키도 사용이 가능!!!!
View Video


ScriptDoc
자바개발자들에게 익숙한 주석처리~
소스코드가 주석에 밀려드는 문제를 해결하기 위해 *.sdoc 파일에 주석을 설정하고
js에는 링크만 주석에 달아준다. 상당히 획기적이긴 하지만 Aptana에서만 가능하다는거???
View Video


HTML/CSS Support
HTML과 CSS도 code assist를 지원하며 code highlighter를 지원해준다.
View Video


Macros
File - injectTemplate - templates - injectTemplate.js 에 자신이 사용할 template를 선언하면
Actions 에 추가되어 쉽게 템플릿을 추가할 수 있다는 것에 대한 설명
썸네일은 도대체 뭐꼬;;;;
View Video

참고자료: http://www.aptana.tv/

Posted by 자수씨
, |

글 보관함

최근에 받은 트랙백