[Info]Tags categorized posts and contents patterns..

[AJAX] Ajax Code E xamples.. [Book] About the book.. [CSS] CSS Code E xamples.. [DB] Sql Code E xamples.. [DEV] All development stor...

2016년 3월 7일 월요일

[Book] 프로그래밍 jQuery (jQuery in Action)..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

프로그래밍 jQuery - 10점
베어 바이볼트.예후다 카츠 지음, 김성안 외 옮김/인사이트

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를 다루기에 상당히 최적화 되어 있고 사용하기 편하도록 구성되어 있는 느낌입니다. 명성대로 익숙해지면 꽤 편하겠네요.



[DEV]이 웹 사이트의 보안 인증서에 문제가 있습니다..

해당 문제는 내가 겪긴 했지만, 참고한 블로그는 이준빈님의 블로그 이며, 현재 내 작업환경이 캡쳐가 안되서 해당 블로그의 이미지를 빌린다.. 단, 기타 글 및 상황은 순수 내가 겪은 것을 토대로 올린다..


그럼 어디 떠들어 보시까나..

오늘 개발을 하다가 테스트를 해야되는데 망할.. 사이트가 안들어가진다.. 그러면서 테스트 하란다.. 왠열;;;; -0-;; IT 현업에서 개발기쪽 사이트를 등록해줬다는데 계속해서 '이 웹 사이트의 보안 인증서에 문제가 있습니다' 라는 문구만 발생한다..

결국 IT 현업에게.. "저.. 안들어가지는데요..?? 보안 인증서 문제만 나오고 있습니다.." 해떠니.. "그거.. 옵션 어디 수정하면 되는데 기억이 안나요.." 하더란.. 바쁘니 머 별 수 있나.. 급한놈이 우물 파야지..

그래서 인터넷을 찾아보니 이준빈님이 올려둔 것이 있더라.. 다른 글들도 있지만, 글이 최신이면서도 깔끔하게 이미지 정리를 해두셨다.. 그래서 확인을 했다.. 방법은 간단하다..

사이트 url 은 무시하더라도.. 기본적인 오류 메세지와 화면은 아래와 같다.. 난 처음에 검색을 '이 웹 사이트의 보안 인증서에 문제가 있습니다' 로 찾았다.. 그냥 오류 메세지 통으로 말이지.. ㅋㅋ..



위 상황이 발생하면, 본인의 IE 브라우저에서 도구 > 인터넷 옵션으로 들어간다.. 물론 이준빈님의 아래 그림처럼 환경설정 아이콘 > 인터넷 옵션으로 들어가는 사람도 있을 것이다.. 하지만, 난 전자였다능.. 참고로 메뉴를 숨겨둔 사람도 있을텐데.. 숨겨둔 사람은 알지만, 브라우저를 보니 어라 메뉴 어디가써..ㅡㅡ?? 하는 분은 Alt 키를 누르면 메뉴가 살짝 내려온당..




어찌됬건 그렇게 이동을 하면, 인터넷 옵션 팝업이 생선되는데 거기서 고급 탭 을 클릭한 후 위치상으로 중간에서 조금 더 아래쪽 쯤이라고 해야될까..?? 그 쯤에.. 서버의 인증서 해지 확인* 이라는 항목이 체크 되어있는 것을 해제한다..





적용 및 확인을 하고서 해당 페이지를 새로고침[F5]을 하고 화면을 다시 불러들이면, 원하던 페이지가 정상적으로 보인다.. [혹여 그래도 안되면, 이준빈님 블로그에 더욱 상세한 설명이 있다.. 서두에도 말했지만, 내가 겪고 해결한 부분은 여기까지기 때문에.. 그 이상의 정보가 포함 된 이미지는 갖고 오지 않았다..]

음.. 간단한 것이라 포스팅을 할까 말까 했지만, 그래도 안올리는것보다는 올리는것이 좋을듯하고 또한, 다행히 이미지까지 해서 간단하게 올려준분이 있어서 이미지를 토대로 내 경험을 적을 수 있기에 이렇게 간단히 포스팅 해본다..

무엇보다 요즘은 사이트 인증서 관련 문제가 많아서 이런 경험이 비일비재 할것이라고 생각하기에..


[JS]Javascript 속도향상을 위한 31가지 체크리스트..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

Thomas Fuchs가 자신의 블로그를 통해서 "31 ways to speed up your JavaScript"라는 제목으로 SlowJavascript?라는 사이트를 통해서 체크리스트를 공개했습니다. 토마스 퍽스는 prototype.js기반의 UI라이브러리인 script.aculo.us를 만든 사람이고 지금은 다음버전인 scripty2를 만들고 있습니다.

Slow Javascript Homepage

이 체크리스트는 PDF형태로 제공되고 있으며 SlowJavascript?사이트에서 다운로드가 가능합니다. Newsletter에 가입하면 업데이트 정보와 퍼포먼스 팁을 보내준다고 합니다.

31가지 체크리스트는 아래와 같습니다. (무료로 배포된거니 적어도 되겠죠?)

  • Correct script tag placement
  • DOM Monster complexity approval
  • Correct caching headers
  • Concatenate, inlinine & pre-cache
  • Minify and/or Gzip
  • Smush, CSS sprite & favicon
  • Check your framework
  • Manage runaway timers
  • Maximize DOM code efficiency
  • Tune your Ajax
  • Shorten your code (assignment, operators, literals)
  • Strip out excessive cleverness
  • Tune your expressions
  • Cache RegExps
  • Watch out for closures, globals, literals
  • Use the most efficient control statements
  • Cache your variables
  • Clean up after yourself to minimize memory leaks
  • Tune / unroll your loops
  • Ensure optimal usage of object properties
  • Use JSON
  • Use the most efficient loops
  • Eliminate syntactic sugar
  • Use arguments effectively
  • Optimize for iPhone
PDF 한페이지로 잘 정리가 되어 있기 때문에 한장 프린트해서 책상옆에 나누어도 좋겠고 체크리스트라 여러장 출력해서 프로젝트마다 사용해도 좋을듯 합니다.

Performance Checklist PDF 스크린샷

위에처럼 생겼고 위쪽으로 갈수록 일반적인(Everyday) 튜닝이고 밑으로 갈수록 극단적인( Extreme) 튜닝에 대한 체크입니다.

물론 체크리스트이기 때문에 실제 튜닝작업을 하려면 관련지식이 많이 필요합니다. 사실 사이트나 PDF에도 언급이 되어 있듯이 올해 토마스퍽스는 JavaScript Performance Rocks라는 이북제작에 상당히 주력하고 있었고 지금은 판매하고 있습니다. 제가 책내용을 못봐서 정확히는 모르겠지만 이 체크리스트는 이 책의 내용중에서 나온 부분이고 더 자세한 처리방법은 해당책에 자세히 나와있을듯 합니다. 어찌보면 약간의 마케팅적인 부분이 있다고 할 수 있습니다.

어쨌든 공짜는 좋은거죠. 


My Comment..
어쩌다보니 코멘트를 연속해서 쓰고 있다.. 이 글에 링크 된 것 중 햄 블로그로 되어 있는 것이 있는데.. 나의 관심사 혹은 나에게 해당 되는 글이 아니어서 안가져왔던 글이었다.. 그래서 햄의 글 링크로 그냥 두었다.. 앞으로도 이러한 패턴에서는 계속 그렇게 할 것이다.. 나에게 있다면, 나의 블로그에 링크를.. 아니라면 햄의 블로그에 링크를.. 그리고 저렇게 체크를 하면서 개발을 하거나 그러면 좋겠지만, 현실상 보면 그렇지 못한듯하다.. 기본 벨리데이션 체크 아니고서야 머;; 저런 것을 볼 여유나 있을까.. 핑계라면 핑계지만, 모든 부분을 다 확인하고 체크하면서 개발하기에는 우리 나라 실정은 좀 아니지 싶다.. 최대한 준수 하거나 쟁점이 되는 몇 가지를 지키려고 하는 쪽으로 방향을 택하는게 더 좋을듯 한 생각이 든다..

[Tool]Maven 설치하기..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

Maven은 Apache 프로젝트중의 하나로 프로젝트 관리툴입니다. Ant도 별로 안써본 저도 구경해 본 지가 얼마안되서 Maven에 대한 자세한 내용은 차차 보도록 하겠습니다. Maven 프로젝트 사이트의 설명에 짜르면 Project Object Model(POM)에 기반하고 있으면 프로젝트의 빌드, 리포팅, 문서를 관리하는 역할을 합니다.

여러가지 많은 기능을 가지고 있어 보이지만 가장 크게 관심이 가는 것은 관련 라이브러리의 관리입니다. Java프로젝트를 하려면 관련 라이브러리가 많이 필요합니다. 일반적으로는 jar로 형태로 된 라이브러리들인데 프로젝트로 커질수록 점점 많은 라이브러리들이 필요하고 소스관리할때 이 라이브러리들의 관리도 당연히 필요하고 용량도 크기 때문에 형상관리를 통한 관리도 쉽지 않기 때문에 의존성있는 라이브러리를 관리해주는 역할을 하고 있습니다. Maven을 통해서 관련 라이브러리를 자동으로 다운받도록 되어 있는데 얼마나 유용한지는 좀더 써봐야 할듯 합니다.

설치는 간단한 편입니다.

Windows

Maven 다운로드 페이지에서 최신버전의 Maven을 다운받습니다.(현재 최신 버전은 2.2.1입니다.)

Maven 설치폴더

설치는 따로 없고 받은 압축파일은 풀어서 원하는 위치에 놓으면 됩니다.

Maven을 위한 윈도우 환경변수 등록

이제 console에서 mvn명령어를 사용하기 위해서 환경변수에서 시스템변수를 추가해줍니다.

MAVEN_HOME
C:\Program Files\apache-maven-2.2.1

MAVEN_HOME이라는 변수를 등록하고 maven의 경로를 입력합니다.

%MAVEN_HOME%\bin

MAVEN_HOME변수를 이용해서 path에 bin경로를 추가합니다.

콘솔창에서

추가 후에 콘솔에서 mvn -version 를 입력해서 위처럼 Maven버전이 제대로 나오면 환경설정이 정상적으로 된것입니다.

JAVA_HOME이 없을 때 mvn 에러난 화면

Maven은 JAVA_HOME 사용자변수를 사용하기 때문에 JAVA_HOME을 환경변수에 등록해 놓지 않았다면 위와같은 에러가 나타납니다. JAVA_HOME을 반드시 등록해야 합니다.


My Comment..
원본 포스팅에는 Ubuntu[우분투]에서의 설치 방법도 나와 있다.. 하지만, 나는 그 부분을 배제하고 가져왔다.. 왜냐믄 난 우분투를 사용하지도 않을 뿐더러 관심사가 아니기도 하다.. 내가 비록 햄의 포스팅을 가져오고는 있지만, 나에게 필요한 부분에 대해서만 가져오는 것이 맞다고 생각해서 이렇게 하였다.. 설마;;; 가져오는 방식이 잘못됬다거나 그런건 아니겠지.. ㅡㅡ..

[HTML]HTML 엔티티(Entities) 정리..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

HTML 엔티티는 HTML에서 특정 캐릭터들이 예약되어 있기 때문에 표기의 혼란을 막기 위해서 사용하는 것입니다. 흔히 공백을 &nbsp; 로 쓰거나 <,>를 &lt; &gt; 처럼 쓰는 것을 말합니다. 마크업과 충돌을 막기 위해서 사용하는데 자주 쓰는 것은 외우고 있지만 자주 안쓰는 것은 기억하기가 쉽지 않아서 정리합니다.

표시 글자
엔티티 숫자
엔티티 이름
설명
 &#160;&nbsp;space
<&#60;&lt;less than
>&#62;&gt;greater than
&&#38;&amp;ampersand
'&#39;&apos; (IE에서 안됨)apostrophe
"&#34;&quot;quotation mark
&#8216;&lsquo;left single quotation mark
&#8217;&rsquo;right single quotation mark
&#8220;&ldquo;left double quotation mark
&#8221;&rdquo;right double quotation mark
°&#176;&deg;degree
·&#183;&middot;middle dot
×&#215;&times;multiplication
÷&#247;&divide;division
?&#8722;&minus;minus
&#8734;&infin;infinity
&#8764;&sim;simular to
&#8800;&ne;not equal
&#8804;&le;less or equal
&#8805;&ge;greater or equal
?&#8211;&ndash;en dash
?&#8212;&mdash;em dash
?&#8226;&bull;bullet
&#8230;&hellip;horizontal ellipsis
&#8242;&prime;minutes
&#8243;&Prime;seconds
?&#169;&copy;copyright
?&#174;&reg;registered trademark
&#8482;&trade;trademark

더 자세한 HTML 엔티티 목록은 W3C School 문서를 참고하세요.

ps. 폰트문제때문인지 블로그에서는 copyright랑 trademark 기호가 제대로 표시가 안되네요. ㅡ..ㅡ


My Comment..
이건 아마도 두고 두고 보거나 찾아볼듯한 느낌이다.. 아 먼가를 더 말하고 싶은데 지금 감기 때문에 상태가 메롱이라 길게 쓰질 못하겠구나.. 아프다고 대충 읽고 올리는 것은 아니다.. 최소한 나에게 필요한 것 그리고 이해하면서 올리고 있다.. 잊어먹을지라도..