JQuery 쉽게하기 - 시작하기에 앞서

JQuery는 자바스크립트 라이브러리입니다. 라이브러리란 소프트웨어를 제작할 때 빈번히 쓰이는 기능들을 모아서 사용할 수 있도록 먼저 작업을 해 놓은 겁니다. 쉽게 말하면 자주 쓰는 함수들을 모아놓은 거죠. 조금 더 들여다보면 라이브러리를 사용함으로써 얻을 수 있는 이점들이 상당히 많습니다. 그런 내용들은 이미 많이 언급되어 있기 때문에 지면을 할애 하면서 기재하지 않겠습니다.

저는 JQuery를 잘 사용하지 않습니다. 이 라이브러리는 이전의 자바스크립트 라이브러리인 yui, prototype, dojo 들 보다 인기가 있는것 같습니다. 이 라이브러리들을 모두 사용해 보지 않았기 때문에 그들에 대한 장단점을 말할 수는 없습니다. 개발자 개인의 평가 또는 이전에 개발된 소스에 포함된 프레임워크를 접하면서 시작하게 되는 경우가 많은 것 같습니다.

소위 WEB2.0(저는 마케팅용어라고 생각합니다. ^^)이 이슈가 되어 웹 표준을 준수하자는 얘기가 힘을 얻으면서 웹브라우져에 콘텐츠를 표시하던 전통적인 방법이 많이 바뀌어 가고 있습니다. 과거 테이블 태그를 엮어서 만들었던 레이아웃은 스타일시트를 이용한 레이아웃 형태로 바뀌고 화면의 각 요소를 객체화하여 접근성(소프트웨어 관점에서)을 높이는 작업들이 지속적으로 이루어지고 있습니다.

사실 과거의 웹페이지(지금도 많이 있는)의 소스를 보면 테이블 레이아웃으로 되어 있어서 너무나 복잡합니다. 저도 그런 방식으로 작업을 했었지만 지금 보면 어떻게 했었나 할 정도더군요. 실제로 웹브라져의 소스보기 기준으로 4,000줄이 넘어가던 것이 요즘의 방식으로 작업하면 반정도로 줄어 드는 것도 보았습니다.

우리나라의 특수한 웹 이용방법 때문에 아직도 익스플로러의 점유율이 90%를 상회하고 있습니다. 물론 이게 나쁘다고 말씀드리는것은 아니지만 지금까지의 MS 의 익스플로러는 표준 브라우저가 아닙니다. MS 만의 브라우저 해석방법이 있고, 익스플로러만 지원하는 함수들이 존재합니다. IE9 버젼은 HTML5 까지 고려한다니 그나마 다행입니다. 기회가 된다면 HTML5에 대해서도 포스팅을 할 수 있기를 바랍니다. 유럽에서는 익스플로러의 점유율이 50%가 채 되지 않는다고 하니 우리나라의 웹은 갈라파고스화 되어가는 건지도 모르겠습니다. Active-X 와 같은 기술이 대세인 한국에서는 IE를 제외시키고는 웹을 말할 수 없을 정도이니까요.

실제로 일반인들은 브라우저의 보안 취약성, Active-X의 불합리함과 같은 것에는 신경을 쓰지 않습니다. 관련 업계 종사자들이나 웹에 대해 연구하고 더 나은 플랫폼을 만들기 위해 고민하는 사람들의 것이죠. 과거부터 해오던 습관들이 고착화 되어 있고 너무도 당연시 여기고 있는 상황을 바꾸기란 생각보다 쉽지 않습니다. 그래도 이런 사람들 덕분에 우리나라 웹이 차츰 바뀌어 나가고 있습니다. 일반인들은 그 속도가 느껴지지 않을만큼 미미하거나 관심이 없기 때문에 잘 모르겠지만 업계 종사자로 보면 기존의 웹과는 전혀 다른 모습으로 바뀌어 가고 있다고 느껴집니다.

그런 흐름에 속도를 높여주고 있는 원인 중 하나가 자바스크립트의 재발견이라고 할 수 있겠습니다. 사실 재발견이라는 단어가 어울리지 않습니다. 원래부터 그렇게 사용할 수 있었던 것을 한구석에 쳐박아 놓고 쳐다보지 않았을 뿐이죠. 자바스크립트는 단순한 사용을 위해 존재했었고, 그 스크립트를 공부한다는것은 바보스럽게 느껴지던 시절도 있었습니다. 자바스크립트의 비중이 올라가게된 큰 이유중에 하나가 바로 prototype이나 JQuery와 같은 잘 짜여진 라이브러리 때문입니다.

사용법을 쉽게하고 안정성을 앞세워서 많은 개발자들이 선택할 수 있게 되었습니다. 그 다양한 쓰임새는 많은 개발자들에게 단순 노가다 코딩을 줄여주는 역할도 했죠. 이 기회를 빌어 라이브러리를 개발하는 그들에게 감사하다는 말을 하고 싶습니다. 꾸벅~

이런저런 이유들 때문에 자바스크립트의 쓰임새가 확장되기 시작합니다. 기존에 단순하게 폼값 체크를 벗어나서 화면전체를 동적으로 보이게 하는 코드들이 등장하기 시작합니다. 초창기 쇼핑몰을 예로 들자면 좌우측에 위치해서 스크롤을 따라 다니는 메뉴들이 초보적인 코드였습니다. 초보적이라고 하기에는 상당히 복잡했었죠. ^^;; 이런 코드들이 체계를 갖추고 예외 상황을 관리할수 있게 하여 어떤 브라우져에서도 동일한 모습으로 보일 수 있게 표준에 입각하여 작업을 해놓은 사람들이 있었습니다. 그 사람들이 만들어 놓은 질 좋은 코드들은 다른 여러 개발자들에게 선택되어 더 확장됩니다. 자바스크립트 라이브러리의 등장으로 인해 많은 것이 바뀌었습니다.

JQuery는 선택이 아닌 필수처럼 되어가고 있습니다. 많은 웹 프로젝트들에 사용되고 있습니다. 그래서 이제 저도 시작해보려 합니다. 그럼 JQuery를 시작해 보실까요. ^^

ps. 그럼에도 불구하고 아주 간단한 체크를 위해 무거울수 있는 라이브러리를 도입하는 것에는 여전히 반대합니다. 단순한 체크를 위해 불필요한 자원을 끌어들이는 것도 웹 사용성 저하에 한몫을 하고 있기 때문입니다. 잘 알고 써야만 그 가치를 올릴 수 있다고 생각합니다. 이 이유가 제가 이런 자바스크립트 라이브러리 사용을 망설이게 만든 원인이기도 합니다. ^^

Comment List

  1. cosmos 2011.01.19 11:04
    강좌 내용이 깔끔하고 쉽고 좋아요. 자바스크립트나 jQuery는 초보이지만 많은 도움이 될듯 해서
    강좌를 처음 부터 보고 있습니다. 앞으로도 좋은 강좌 부탁드립니다. 건강하세요.
    • Favicon of https://findfun.tistory.com jyhyun 2011.01.19 13:53 신고
      ^^ 감사합니다.

      부디 앞으로도 쭈욱 도움이 되셨으면 좋겠네요.

      cosmos 님도 건강하십시요~
  2. goonizuka 2011.01.24 13:03
    좋은 글을 보게 되어 기분 좋네요.
    저도 라이브러리는 잘 안썼는데 이번에 접할 기회가 있어서 본격적으로 파고들 생각입니다.
    많이 배워가도록 하겠습니다 :]
  3. Favicon of http://bangga.net 방가 2011.02.08 23:47
    잘 보고 갑니다 ^^*
    즐겨찾기에 추가 해야 겠네요 ㅎ
  4. isTae 2011.02.17 14:30
    안녕하세요..
    혹시 jQuery 관련 글 제 블로그에 퍼가도 되나요?^^;;
  5. estblack 2011.03.11 12:18
    안녕하세요. 이제 막 웹개발에 발문을 들인 초보개발자입니다. 웹쪽 개발은 완전 꽝이어서 앞이 막막했는데 너무나 잘 정리되어 있는 튜토리얼 덕분에 한시름 놓았습니다. 오히려 재미있게 설레는 맘으로 시작할 수 있을 듯 하네요 ^^ 좋은 글 감사드립니다!
  6. 이스트럭 2011.03.18 09:28
    좋은 내용 감사하게 잘 보고 있습니다 ^^... 깔끔한 정리 진심으로 감사드립니다 (^^)(_ _)(^^)
  7. Favicon of http://www.dolmengi.com 돌멩이 2011.03.29 14:34
    잘보고가요..^^*
    이내용들 출처 밝히고...제 홈피에 올려놔도 될런지요..^^*
  8. 핀패드 2011.04.20 17:48
    이렇게 옮겨 놓으시고 수고 많으셨습니다.
    잘 보고 갑니다.
  9. larry 2011.04.27 13:48
    어쩌다 들린 이곳에서 정말 쉽고 명쾌한 내용들이 정리되어 있는 것을 보고 감탄하고 있습니다.
    좋은 정보를 접할 수 있게 해주신 것에 감사드립니다.
  10. godisgood 2012.02.06 10:31
    좋은 자료를 이렇게 올려주셔서 감사 합니다. 열심히 한번 해보고 싶습니다.
  11. ssung 2012.02.29 16:32
    제이쿼리, 자바스크립트 공부하려고 인터넷 뒤진 사이트 중 젤 좋네요~
    좋은 자료 올려주셔서 감사합니다.
    자주올게요~^^
  12. lovelyfillow 2012.03.13 17:37
    정말 잘 정리하신거 같네요..감사합니다.
  13. diehard 2012.09.10 23:58
    제가 본 곳 중에 최곱니다.좋은 자료 감사합니다.
  14. 감사합니다 2012.09.13 11:08
    좋은 강좌 인 것 같습니다
  15. AC/DC 2012.12.10 17:53
    좋은 강좌 잘 보고있습니다.
    추운 겨울. 감기 조심하십시오.
  16. Favicon of http://k.vaslor.net/tech/jquery V_L 2013.09.29 21:35
    이렇게 좋은 곳이 있었군요.

    많은 도움이 될 것으로 생각합니다. 자주 보러오게 될 것 같습니다.
  17. Favicon of http://hyeonstorage.tistory.com 하이언 2013.11.04 12:39
    좋은 글 잘 읽었습니다.
  18. 갱쿤 2016.08.02 14:12
    생각하고 보지도 못했던 내용이 눈에 많이 보이네요
    정말 좋은 정보 잘보고 갑니다 ^^

Write Comment