출처 : Outsider's Dev Story https://blog.outsider.ne.kr/
Javascript Framework중의 하나로 최근에 대세라고도 할 수 있을만큼 많은 인기를 끌고 있는 John Resig이 만든 jQuery에 대한 책입니다. 저는 Prototype Framework를 주로 쓰고 있었는데 빠르고 심플하다고 jQuery에 대해서도 많이 듣고 있었지만 prototype.js도 제대로 쓰지 못하고 있다고 생각해서 jQuery는 손대지 않고 있다가 요즘은 많은 Javascript리소스들이 jQuery로 몰리고 있고 주위에서 많이 쓰고 있어서 책을 집어들었습니다.
이 책은 1.2버전을 기반으로 쓰여졌고 번역까지의 과정도 있어서 1.2의 업그래이드 버전에 대해서도 약간의 언급은 있습니다. 지금 jQuery의 최신버전은 1.3.2입니다. 제가 이 책을 살때는 jQuery책은 국내에 2권밖에 없었고 지금은 4권이 출시되었습니다. 3권은 1.2버전대에 대한 책이고 1권은 1.3버전에 대해서 나온 책입니다.
다른 책을 보지 않아서 비교는 하기 어렵지만 중간버전이 하나 바뀌었지만 전체적인 사용방법에서는 크게 달라지지 않았기 때문에 jQuery를 익히는데는 1.2버전대로도 크게 문제는 안될듯 합니다.(1.3버전대로 올라가면서 변경되 내용은 jQuery 1.3버전 릴리즈 정보에 있습니다.)
jQuery뿐만 아니라 Javascript Framework는 고급 자바스크립트에 속한다고 할 수 있기 때문에 기본적인 자바스크립트에 대한 지식은 필요합니다. 어느적도 자바스크립트의 특성에 대해서 설명해 주고 있고 부록부분에서는 아주 적은 량이지만 자바스크립트의 특징적인 부분에 대해서 잘 설명하고 있지만 자바스크립트를 잘 못한다면 약간은 해맬 수 있는 있는 여지도 있다고 생각합니다. 그런 부분 외에는 jQuery를 처음 익히는데 상당히 괜찮은 책이라고 생각하고 있습니다.
저자들이 jQuery에 대해서 이해도가 깊은듯 DOM 핸들링, 이벤트, 애니메이션, 유틸리티, 플러그인, Ajax까지 jQuery의 특성을 이해하기 쉽게 구성되어 있습니다. DOM을 다루면서 jQuery가 chain으로 어떻게 이루어지고 객체그룹을 어떻게 얻어내서 사용하는지 설명이 잘 되어 있고 그 뒤에 이벤트와 애니메이션까지 흐름이 잘 이어집니다. DOM을 제외한 유용한 유틸리티와 jQuery의 큰 장점중의 하나인 플러그인까지 이해하기에 쉽도록 구성이 매우 잘 되어 있습니다. jQuery입문용으로는 부족함이 없을 듯 합니다.
또한 번역도 나쁘지 않아서 이해하는데 별로 어렵지 않고 예제 소스가 제공되는데 역자들이 노력을 많이 한듯 예제소스도 모두 한글로 제공되고 있고 예제의 수준이 괜찮은 편이라서 책의 설명을 이애하기에 아주 좋은 편입니다. 책을 보면 전체적으로 친절하다는 느낌이 강합니다. 하나하나의 설명까지도 모두 예제로 제공하고 있고 심지어 Ajax 예제를 돌려보기 위해서 jsp를 돌려볼 수 있도록 톰캣을 돌리는 설정까지도 설명해 주고 있다. 파이어폭스의 특징인 새로고침을 위해서는 주소창에서 주소를 다시 실행해야 한다는 점까지 지적해 주는 것은 "아~ 친절하다" 하는 생각이 듭니다. 잘 모르는 사람들에게는 이런 부분은 상당히 좋을 듯 합니다.
책만보고 다 이해하기는 어렵지만 경험해 보니 객체중심인 prototype.js과 좀 많이 달라서 사용하는 방식이 아직은 좀 익숙치 않지만 DOM과 CSS를 다루기에 상당히 최적화 되어 있고 사용하기 편하도록 구성되어 있는 느낌입니다. 명성대로 익숙해지면 꽤 편하겠네요.
2016년 3월 7일 월요일
2016년 2월 19일 금요일
[Book] 프로토타입과 스크립타큘러스..
출처 : Outsider's Dev Story https://blog.outsider.ne.kr/
자바스크립트 프레임워크의 시초라고도 할 수 있는 prototype.js와 그 기반으로 만들어진 라이브러리인 script.aculo.us에 대한 책이다. 나는 자바스크립트를 시작하면서 부터 프로토타입 프레임워크를 사용했기 때문에 개인적으로 애착도 있고 꽤 좋아하는 편이다. 요즘은 추세가 jQuery쪽으로 가고 있는 듯하지만 지금 수많은 자바스크립트 프레임워크의 포문을 연 프로토타입 프레임워크의 위상을 무시할 수 없다고 생각하고 있다. 아직 jQuery를 접하지는 못했지만 prototype.js가 내가 자바스크립트를 좋아하게 된데 큰 역할을 했기 때문에 난 아직 prototype.js의 펜으로 남아있다. ㅎ
계속 프로토타입을 쓰고 있다고 했지만 그 활용성에 대해선 미약한 편이었다. 초기에는 그냥 $만 쓰는 정도였고 조금씩 조금씩 늘려나갔지만 프로토타입이 지원하는 양은 엄청났다. 그리고 프로토타입을 익히기 위한 리소스는 상당히 부족했다. 작년까지는...............
올해부터는 상당히 달라졌다. 국내에 출간된 프로토타입관련 책으로는 "Ajax prototype.js : 프로토타입 완전분석", "Prototype & Scriptaculous 인 액션" 이렇게 총 3권뿐이고 작년에는 "Ajax prototype.js : 프로토타입 완전분석"만이 있었다. "Ajax prototype.js : 프로토타입 완전분석"은 작년에 읽고 포스팅하기는 했지만 레퍼런스처럼 처음부터끝까지 각 함수의 정의와 사용법만 나열한 책이라서 활용하기에 제한이 좀 있었다. 그리고 프로토타입.js와 스크립타큘러스사이트도 올해다 개편이 되어서 API문서가 상당히 충실하게 지원되고 있다.(아~ 행복해...)
이 책은 프로토타입과 스크립타큘러스를 어떻게 활용해야 하는지에 집중한 책이다. 프로토타입 프레임워크자체가 상당히 고급 자바스크립트이고 이걸 이해하기 위해서는 알아야 될 사항들이 너무나도 많다. 때문에 이 책에서는 이런 부분에 대한 설명은 집중하지 않고 의도인지는 모르겠지만 내가 느끼기에는 어느정도 프로토타입 프레임워크를 약간은 아는 사람을 기준으로 설명하는 것으로 느껴졌다. 어차피 모든걸 다 설명할 수는 없으니 기본적이 사항들은 패스하고 넘어간다.
이런 부분이 설명을 대충한다는 얘기가 아니다. 오직 프로토타입에만 집중했다는 이야기이다. 각 클래스들의 기능들과 어떤 함수들이 있는지를 설명하고 간단한 예제를 통해서 어떤식으로 활용해야 하는지를 잘 풀어설명하고 있다. 내가 느끼기에는 나같이 프로토타입을 알고 사용하고자 하는데 고급활용으로는 하고있지 못하고 있는 사람들한테 딱 맞는 책이라고 생각된다. 최근에 나온 책답게 프로토타입 1.6을 기준으로 설명이 되어 있으며 중간중간 성능에 대한 부분이나 1.5와는 달라진 부분까지 설명하고 있으며, 책 전체적으로 저자와 역자가 모두 프로토타입 프레임워크의 개발 사상을 이해하고 있는 느낌을 받았다. 단순히 메서드의 사용방법만 논한 것이 아니라 전체적인 개발방향에 대해서 제시해 주고 있다.
예제들은 그냥 보기에는 간단한듯 하면서 막상 소스를 보면 꽤나 어렵다. 프로토타입의 활용방식 자체가 좀 덜 일숙한 것도 있고 예제자체가 좀 고급적인 부분도 있다. 이책의 전부를 이해한것은 아니다. 오히려 이해를 못한 것이 많다. 한 3번정도나 봐야 어떤식으로 활용할지를 잡을수 있을것 같은 느낌인데 내가 아쉬워하는 부분들이 꽤나 해소되었다. 이벤트리스너의 사용방식이라든지 이뉴머레이블 사용방법등.... 한번만 읽었어도 느낌바가 많다. 심지어 $가 그냥 document.getElementById의 축약형태에 불과한게 아니라는 것 등... 또한 책이 소제목들만 봐도 약간은 유머스럽게 지어서 전체적으로 너무 딱딱하지 않게 되어 있어서 코드에 대한 어려움을 좀 적게 느껴지게 만든다.
프로토타입과 스크립타큘러스에 대해서는 오랫동안은 이책이 필수도서가 될것 같은 느낌이다. 이 둘에 대해서 알고 싶다면 일단 이책을 보라고 하고 싶다. (인액션은 구입하고 아직 읽지는 못했는데 평은 좀 그닥인 느낌이다.) 그동안 프로토타입을 사용한다고 말하기가 좀 창피했었는데(ㅡ..ㅡ) 이제는 여기 나온것들을 내 것으로 만드는 일만 남았다. 마침 관련해서 할일도 생겼고... ㅎ
사족으로... 요즘 인사이트 책 참 좋은것 같다. 내가 가려운 부분과 잘 맞아떨어져서 그런것도 있지만.. ㅎㅎㅎㅎ (결코 인사이트 관련자 아님.. ㅋ)
 | 프로토타입과 스크립타큘러스 -  크리스토피 포트누브 지음, 박영록 옮김/인사이트 |
자바스크립트 프레임워크의 시초라고도 할 수 있는 prototype.js와 그 기반으로 만들어진 라이브러리인 script.aculo.us에 대한 책이다. 나는 자바스크립트를 시작하면서 부터 프로토타입 프레임워크를 사용했기 때문에 개인적으로 애착도 있고 꽤 좋아하는 편이다. 요즘은 추세가 jQuery쪽으로 가고 있는 듯하지만 지금 수많은 자바스크립트 프레임워크의 포문을 연 프로토타입 프레임워크의 위상을 무시할 수 없다고 생각하고 있다. 아직 jQuery를 접하지는 못했지만 prototype.js가 내가 자바스크립트를 좋아하게 된데 큰 역할을 했기 때문에 난 아직 prototype.js의 펜으로 남아있다. ㅎ
계속 프로토타입을 쓰고 있다고 했지만 그 활용성에 대해선 미약한 편이었다. 초기에는 그냥 $만 쓰는 정도였고 조금씩 조금씩 늘려나갔지만 프로토타입이 지원하는 양은 엄청났다. 그리고 프로토타입을 익히기 위한 리소스는 상당히 부족했다. 작년까지는...............
올해부터는 상당히 달라졌다. 국내에 출간된 프로토타입관련 책으로는 "Ajax prototype.js : 프로토타입 완전분석", "Prototype & Scriptaculous 인 액션" 이렇게 총 3권뿐이고 작년에는 "Ajax prototype.js : 프로토타입 완전분석"만이 있었다. "Ajax prototype.js : 프로토타입 완전분석"은 작년에 읽고 포스팅하기는 했지만 레퍼런스처럼 처음부터끝까지 각 함수의 정의와 사용법만 나열한 책이라서 활용하기에 제한이 좀 있었다. 그리고 프로토타입.js와 스크립타큘러스사이트도 올해다 개편이 되어서 API문서가 상당히 충실하게 지원되고 있다.(아~ 행복해...)
이 책은 프로토타입과 스크립타큘러스를 어떻게 활용해야 하는지에 집중한 책이다. 프로토타입 프레임워크자체가 상당히 고급 자바스크립트이고 이걸 이해하기 위해서는 알아야 될 사항들이 너무나도 많다. 때문에 이 책에서는 이런 부분에 대한 설명은 집중하지 않고 의도인지는 모르겠지만 내가 느끼기에는 어느정도 프로토타입 프레임워크를 약간은 아는 사람을 기준으로 설명하는 것으로 느껴졌다. 어차피 모든걸 다 설명할 수는 없으니 기본적이 사항들은 패스하고 넘어간다.
이런 부분이 설명을 대충한다는 얘기가 아니다. 오직 프로토타입에만 집중했다는 이야기이다. 각 클래스들의 기능들과 어떤 함수들이 있는지를 설명하고 간단한 예제를 통해서 어떤식으로 활용해야 하는지를 잘 풀어설명하고 있다. 내가 느끼기에는 나같이 프로토타입을 알고 사용하고자 하는데 고급활용으로는 하고있지 못하고 있는 사람들한테 딱 맞는 책이라고 생각된다. 최근에 나온 책답게 프로토타입 1.6을 기준으로 설명이 되어 있으며 중간중간 성능에 대한 부분이나 1.5와는 달라진 부분까지 설명하고 있으며, 책 전체적으로 저자와 역자가 모두 프로토타입 프레임워크의 개발 사상을 이해하고 있는 느낌을 받았다. 단순히 메서드의 사용방법만 논한 것이 아니라 전체적인 개발방향에 대해서 제시해 주고 있다.
예제들은 그냥 보기에는 간단한듯 하면서 막상 소스를 보면 꽤나 어렵다. 프로토타입의 활용방식 자체가 좀 덜 일숙한 것도 있고 예제자체가 좀 고급적인 부분도 있다. 이책의 전부를 이해한것은 아니다. 오히려 이해를 못한 것이 많다. 한 3번정도나 봐야 어떤식으로 활용할지를 잡을수 있을것 같은 느낌인데 내가 아쉬워하는 부분들이 꽤나 해소되었다. 이벤트리스너의 사용방식이라든지 이뉴머레이블 사용방법등.... 한번만 읽었어도 느낌바가 많다. 심지어 $가 그냥 document.getElementById의 축약형태에 불과한게 아니라는 것 등... 또한 책이 소제목들만 봐도 약간은 유머스럽게 지어서 전체적으로 너무 딱딱하지 않게 되어 있어서 코드에 대한 어려움을 좀 적게 느껴지게 만든다.
프로토타입과 스크립타큘러스에 대해서는 오랫동안은 이책이 필수도서가 될것 같은 느낌이다. 이 둘에 대해서 알고 싶다면 일단 이책을 보라고 하고 싶다. (인액션은 구입하고 아직 읽지는 못했는데 평은 좀 그닥인 느낌이다.) 그동안 프로토타입을 사용한다고 말하기가 좀 창피했었는데(ㅡ..ㅡ) 이제는 여기 나온것들을 내 것으로 만드는 일만 남았다. 마침 관련해서 할일도 생겼고... ㅎ
사족으로... 요즘 인사이트 책 참 좋은것 같다. 내가 가려운 부분과 잘 맞아떨어져서 그런것도 있지만.. ㅎㅎㅎㅎ (결코 인사이트 관련자 아님.. ㅋ)
2016년 2월 17일 수요일
[AJAX]Google AJAX Libraires API를 이용해서 자바스크립트 프레임워크 사용하기..
출처 : Outsider's Dev Story https://blog.outsider.ne.kr/
이전에 파이어준님의 포스팅에서 보고는 담에는 써야지 하다가 이번에야 써봤다. 쉽게 말하면 자바스크립트 프레임워크를 구글이 제공해서 자신의 사이트에 올리지 않고 구글에서 끌어다가 쓸 수 있게 한다. 머 이건데... 회사에서는 쓸 일 있을지 모르겠고 블로그에서 예제파일 돌릴려고 몇개 올려두기는 했는데 버전도 계속 바뀌고 그래서 신경이 쓰였는데 이 서비스는 내가 써먹기는 딱인듯 하다. ㅋ 그래서 바로 전의 포스팅을 하면서 한번 써봤다. 잘된다.(당연하지. ㅡ..ㅡ)
파이어준님의 포스팅에도 나와있긴 하지만 다시 정리하자면
제공하는 라이브러리는 jQuery, prototype, script.aculo.us, mootools, dojo이다.(2008년 8월 1일 현재...) - 2개씩 적혀 있는 것은 위의것은 압축된(compressed) 버전이고 아래쪽은 압축되지 않은 버전이다.)
jQuery (1.2.3, 1.2.6 지원)
prototype (1.6.0.2 지원)
script.aculo.us (1.8.1 지원)
mootools (1.11 지원)
dojo (1.1.1 지원)
머 사용법이고 말고 할것도 없다. 그냥 script 인클루드의 링크를 구글로 건거다. ㅋㅋ 구글 API써서 하는 방법도 있지만 평소에도 이런식이 익숙하니까 이게 더 편한 것 같다. 이렇게 블로그에 올리거나 잠시 테스트할 때 프레임웍 불러내는게 은근 귀찮은데 이렇게 쓰니까 참 편하다.
그냥 구글이 갔다 쓸수만 있게 했겠는가? ㅋ Ajaxian의 포스트에 따르면 다음과 같은 장점이 있다고 한다.
위에처럼 직접 인클루드하는 방법 외에도 Google AJAX API Loader를 이용해서도 라이브러리 파일을 인클루드 할 수 있다. 구글과으 매쉬업을 위해서 구글 api를 사용한다면 google.load()방식이 더욱 유용할 것이다.
이전에 파이어준님의 포스팅에서 보고는 담에는 써야지 하다가 이번에야 써봤다. 쉽게 말하면 자바스크립트 프레임워크를 구글이 제공해서 자신의 사이트에 올리지 않고 구글에서 끌어다가 쓸 수 있게 한다. 머 이건데... 회사에서는 쓸 일 있을지 모르겠고 블로그에서 예제파일 돌릴려고 몇개 올려두기는 했는데 버전도 계속 바뀌고 그래서 신경이 쓰였는데 이 서비스는 내가 써먹기는 딱인듯 하다. ㅋ 그래서 바로 전의 포스팅을 하면서 한번 써봤다. 잘된다.(당연하지. ㅡ..ㅡ)
파이어준님의 포스팅에도 나와있긴 하지만 다시 정리하자면
제공하는 라이브러리는 jQuery, prototype, script.aculo.us, mootools, dojo이다.(2008년 8월 1일 현재...) - 2개씩 적혀 있는 것은 위의것은 압축된(compressed) 버전이고 아래쪽은 압축되지 않은 버전이다.)
jQuery (1.2.3, 1.2.6 지원)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
prototype (1.6.0.2 지원)
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
script.aculo.us (1.8.1 지원)
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js "></script>
mootools (1.11 지원)
<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools.js"></script>
dojo (1.1.1 지원)
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.1.1/dojo/dojo.xd.js "></script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.1.1/dojo/dojo.xd.js.uncompressed.js"></script>
머 사용법이고 말고 할것도 없다. 그냥 script 인클루드의 링크를 구글로 건거다. ㅋㅋ 구글 API써서 하는 방법도 있지만 평소에도 이런식이 익숙하니까 이게 더 편한 것 같다. 이렇게 블로그에 올리거나 잠시 테스트할 때 프레임웍 불러내는게 은근 귀찮은데 이렇게 쓰니까 참 편하다.
그냥 구글이 갔다 쓸수만 있게 했겠는가? ㅋ Ajaxian의 포스트에 따르면 다음과 같은 장점이 있다고 한다.
- 개발자가 아무짓도 안해도 캐싱이 잘 된다.
- Gzip으로 동작한다.
- 최소화된 버전으로 제공할 수 있다.
- 세계곳곳의 CDN을 통해서 구글이 파일을 호스팅하기 때문에 사용자가 빨리 받을 수 있다.
- 서버가 빠르다.
- 같은 URL을 사용하기 때문에 구글의 인프라가 커지면 사용자가 당신의 어플리케이션에 처음왔을 때 이미 프레임워크가 로드되어 있을수도 있다.
- 당신이 보내고 받는 헤더관련 미묘한 성능 및 보안 이슈가 해결된다. 당신이 특별한 도메인(구글말고)을 사용한 이래 쿠기가 없거나 다른 장황한 헤더가 보내질 것이므로 귀중한 바이트를 아낄수 있다.
위에처럼 직접 인클루드하는 방법 외에도 Google AJAX API Loader를 이용해서도 라이브러리 파일을 인클루드 할 수 있다. 구글과으 매쉬업을 위해서 구글 api를 사용한다면 google.load()방식이 더욱 유용할 것이다.
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// jQuery 압축, 비압축
google.load("jquery", "1.2.6");
google.load("jquery", "1.2", {uncompressed:true});
// prototype, scriptaculous
google.load("prototype", "1.6.0.2");
google.load("scriptaculous", "1.8.1");
// mootools 압축, 비압축
google.load("mootools", "1.11");
google.load("mootools", "1.11", {uncompressed:true});
// dojo 압축, 비압축
google.load("dojo", "1.1.1");
google.load("dojo", "1.1.1", {uncompressed:true});
</script>
피드 구독하기:
글 (Atom)