JavaScript & jQuery 교안, apache-tomcat-8.5.24-windows-x64 다운로드

JavaScript & jQuery 교안, apache-tomcat-8.5.24-windows-x64 다운로드
JavaScript & jQuery 교안, apache-tomcat-8.5.24-windows-x64 다운로드

 

 

jQuery는 HTML 속 클라이언트 사이드 스크립트 언어를 단순화하도록 설계된 브라우저 호환성이 있는 JavaScript 라이브러리이다. 존 레식에 의해 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개되었다. 현재 가장 인기 있는 JavaScript 라이브러리이며 표준에 가까운 점유율을 자랑한다. 참고

 

기능적으로야 더 좋은 라이브러리들도 많지만, jQuery가 순식간에 업계를 장악한 특장점은 바로 무지하게 쉽고 간편하다는 점이다. 'write less, do more.'가 모토로서 비프로그래머인 웹디자이너들도 어렵지 않게 이해할 수 있을 만큼 쉬운 편이다. DOM 구조와 CSS에 대한 지식만 있다면 애니메이션 같은 건 바로 이해가 가능할 정도다. 실제로 저자인 존 레식은 프로그래머들의 칭찬보다 순수 웹디자이너들의 감사 인사가 더 특별한 기쁨이라고 한다.

jQuery는 Behavioral model(행동 모델)에 기초한 아키텍처를 따른다. 특히 jQuery는 메서드 체이닝을 통해 DOM 엘리먼트를 조작한다. 예를 들어 기존에 이렇게 했다면,
document.getElementById("textNode").style.color = "red"; document.getElementById("someDiv").appendChild(document.getElementById("textNode"));
jQuery에선 이렇게 한다. 대신에 속도가 좀 더 느리다.
$("#textNode").css("color","red").appendTo("#someDiv");

• $("#textNode")
  $라는 함수에 인자로 "#textNode"[1]를 넘겨주겠다는 JavaScript 구문이다. jQuery는 기본적으로 $를 함수 이름으로 사용한다.[2] $() 함수에 인자로 DOM selector를 넣어주면 해당하는 DOM 요소를 찾아 리턴해준다. (정확히는 DOM요소를 0번째로 가진 특정한 배열을 반환하는데, id는 특정한 상황이 아니라면 무리 없이 쓸 수 있지만 여러 개의 class를 한 번에 셀렉팅 할 경우 javascript의 document.getElementsByClassName()를 생각 없이 쓸 때와 같은 상황이 발생한다.)

• $("...").css("color","red") / $("...").css({"color":"red"})
  jQuery의 메소드들은 기본적으로 리턴하는 데이터의 자료형이 jQuery이고, 메소드를 사용할 때는 자료형이 jQuery인 값에 붙여서 호출하도록 설계되어 있다. 즉, $("...")를 호출하여 찾고자 하는 DOM 요소를(여기서는 id가 textNode인 요소) jQuery형으로 리턴받고 .css() 메소드를 호출하여 작업을 수행하는 것. 메소드 이름을 보면 알겠지만 .css("color","red") 메소드는 대상의 css를 변경한다[3]. 그리고 변경한 DOM 요소를 jQuery형으로 리턴한다. 후자의 경우는 JSON 문법으로 여러 속성을 한꺼번에 지정할 때 사용한다.

• $("...").css("...","...").appendTo("#someDiv") / $("...").css({"...":"..."...}).appendTo("#someDiv")
  앞서 .css() 메소드로 색을 바꾸고 리턴한 요소에 .appendTo() 메소드를 적용하는 구문이다.

플루언트(Fluent) 인터페이스라고도 한다. 메서드의 반환값이 자기 자신의 참조가 되어 무한히 메서드를 이어붙일 수 있는 게 특징.

jQuery는 MIT 허가서와 GPL v2의 듀얼 라이선스를 가진 자유 소프트웨어이다. jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, AJAX 개발이 쉽도록 디자인 되었다. 또한, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다. 덕분에 수많은 jQuery 플러그인들이 개발되어 있다!

여기저기서 많이 쓰다보니 JavaScript로 웹 개발을 하는 개발자라면 당연히 jQuery를 쓴다고 생각하는 모양. 실제로도 경험이 부족한 개발자들이 jQuery가 없으면 간단한 DOM 조작도 어려워한다.[4] jQuery는 JavaScript를 편하게 사용할 수 있게 지원하는 라이브러리이지 정식 언어가 아니다! 언제까지나 기초는 JavaScript임을 명심하고 기초를 튼튼히 하자. jQuery만 쓰게되면 이렇게 된다. 부연설명을 하자면, JavaScript에서 덧셈을 하는 방법을 묻고 있는데 댓글들은 뜬금없이 jQuery 사용하라고, jQuery가 최고라고 찬양하는 상황이고 그런 댓글들에 추천이 달려 있다. “jQuery요법을 썼더니 10kg가 빠졌어요!”라는 말도 하고 맨 밑의 올바른 설명을 한 댓글은 jQuery 사용을 안했다고 비추천이 달려 있다(...). 물론 사람들이 놀려먹는 것이고, Stack Overflow 규정 상 이럴 일은 없다.

여전히 웹 프론트엔드에서 막강한 영향력을 차지하고 있는 jQuery이지만 최근 웹 개발의 트렌드는 슬슬 AngularJS나 Vue.js 같은 SPA용 프레임워크나 라이브러리[5]로 옮겨가고 있다. 프레임워크를 통해 컴포넌트, MVC, 양방향 데이터 바인딩 등의 고수준적인 개념을 활용하는 것에 반해 jQuery는 여전히 밑바닥 DOM을 건드리는 데 지나지 않는지라...[6] 하지만 프레임워크를 쓰면서도 jQuery의 기능을 사용할 수 있고, 프레임워크가 모든 경우에 정답은 아니기 때문에 jQuery에 대한 수요는 앞으로도 꾸준히 있을 것이다.[7](참고) SPA 개발을 위해 나온 것으로 React도 있는데, 이건 프레임워크가 아니라 jQuery와 같은 라이브러리이다. 페이스북에서 개발하였으며 jQuery보다 우수한 Virtual DOM의 활용 등으로 순식간에 점유율을 크게 확대하였다. 다만 jQuery에 비해 난이도가 좀 더 높고, JSX라는 별도의 문법을 사용해서 해서[8] 전체적으로는 아직 jQuery가 React보다 많이 쓰인다.

다만 이것은 반쯤 걸러 들어야 할 것이, 2000년대 중반 거의 JS가 나온지 5~6년 남짓 된 웹 초창기 시절부터 2010년대 중반까지의 무려 10년간 확고한 위치를 고수했던 관계로 Legacy가 많아서 그런 것이지, 현재로써는 신규 프로젝트, 신규 인력만 놓고 본다면 Angular도 한 물 가고 있고, React 판이다.(+소수파 Vue.js) 십중팔구 React. 레거시가 많고 아예 자체 프레임워크/라이브러리를 가진 대기업이 아닌 대부분의 중소기업, 스타트업, 중견기업의 신규 웹 프로젝트도 React. 여기에 가끔 Vue.js가 꼽사리 끼는 정도이다. 원티드 또는 로켓펀치의 채용공고나, 오키 등의 개발자 커뮤니티 등을 찾아보면 신규 프로젝트, 신규 인력 기준으로는 React : Vue.js : Angular : 기타 == 7 : 1.5 : 1 : 0.5 정도의 비율을 보인다. 구글 검색 통계만 봐도 React가 압도적이다. 리액트 관련 기술문서, 자료의 조회수의 1/3~절반 정도가 Vue.js의 통계와 유사하고, Angular는 1/5정도, jQuery는 10% 정도이다. 물론, 기술문서나 자료를 검색하고 찾아보는 사람들이 전부 해당 스택으로 개발 중이라는 보장은 없고, jQuery는 나온지 15년이나 되었으니 개발자들도 충분히 숙련되고 정석 수준으로 사내 매뉴얼, 각종 도서 등이 정리가 돼서 구글링의 빈도가 줄어드는 효과도 있으나, 이것을 뒤집어서 다시 말하면 jQuery 판에는 15년간 잘 숙성된 고인물 시니어 개발자들이 절대 대다수이며, 오랫동안 경험이 쌓여 충분히 숙달된 고급 개발자가 넘쳐나며, 신생 주니어 개발자가 끼어들 자리가 없다는 이야기다. 대부분 커뮤니티 등에서 조언을 구해도 "대충 jQuery코드 읽을줄만 알면 된다." 라는 반응이 대부분이다.

아무래도 진부화 및 노후화로 jQuery는 결국 저물 수밖에 없다. Legacy가 아무리 많다고 해도 퇴직 직전의 40~50대 시니어 개발자가 아닌 이상 신생 개발자에겐 jQuery는 미래가 없다. 뭐 10년 정도만 일자리가 보장이 되면 대강 일하다가 10년 뒤에 시한부 밥그릇이 통째로 아작나도 상관없는 시니어라면 모르겠으나, 주니어라면, 유지보수하는 곳보다는 신규 프로젝트를 하는 곳이 좋다고 한다. 어디 임베디드 기기나 POS기, 전광판 같은데 짱박혀서 돌아가는 코드도 아니고, 5년이면 강산이 바뀌는 웹이기에 2020년대 중후반만 되어도 Legacy 마저 점차 프레임워크/React/ES6 이후의 최신 표준 Native JS로 부분부분 대체되거나 아예 서비스 종료 또는 밑바닥부터 재개발 등의 이유로 사멸할 것이라는 의견도 종종 보인다. 당장 그 대표적인 네이버 포탈마저 NativeJS였다가 jQuery로 바뀌었다가 지금은 자체 프레임워크(Jindo) 기반이라고 한다(...)

마이크로소프트와 노키아는 자사 플랫폼에 jQuery를 포함하는 계획을 발표한 바 있다. 마이크로소프트는 비주얼 스튜디오의 ASP.NET AJAX 프레임워크와 ASP.NET MVC 프레임워크에 적용했고, 노키아는 자사의 런타임 웹 위젯 개발 플랫폼에 통합하였다.

주요 웹 CMS나 위키위키에도 내장하는 경우가 많다. 미디어위키에도 1.16 버전부터 사용되고 있고, 그누보드나 XpressEngine, 워드프레스도 이게 기본으로 들어가 있다.

프레임워크도 이걸 기반으로 하는 경우가 많은데, HTML5 Boilerplate나 트위터 Bootstrap도 jQuery 기반으로 작동하는 것들이다.

jQuery Mobile이라는 물건도 있는데, 이것은 자바스크립트 라이브러리인 jQuery와는 달리 모바일 웹페이지나 HTML5 웹앱 등의 제작에 사용하는 웹 개발 프레임워크다.[9] HTML5 웹앱 프레임워크들이 대개 그렇듯 iOS, 안드로이드는 당연히 지원하고, Windows Phone, 블랙베리, 심비안 등 웬만한 기기는 다 지원한다.

jQuery는 다음과 같은 기능을 갖고 있다.

• DOM 엘리먼트 선택

• DOM 트래버설 및 수정(CSS 1-3 지원. 기본적인 XPath를 플러그인 형태로 지원)

• 이벤트

• CSS 조작[10]

• 특수효과 및 애니메이션[11]

• AJAX 및 JSON, XML 파싱

• JavaScript 플러그인을 통한 확장성

• 유틸리티 - 브라우저 종류와 버전,[12][13] "each" 함수[14]

덕분에 대한민국의 국가기술자격인 웹디자인기능사 실기시험에서 기존에는 애니메이션 효과를 Flash로 주다가 2017년부터는 jQuery로 바꿔서 출제되고 있다. 웹디자인기능사 자격증을 취득하려는 사람들은 의무적으로 jQuery를 사용해서 서브메뉴와 팝업창을 숨겼다 띄웠다 할 줄 알아야 하고, 대형 이미지 슬라이드를 움직일 줄 알아야 하는 것이다.

jQuery는 본래 1.x, 2.x, 3.x 버전의 세 가지 종류가 있었다가 1.x, 2.x 버전은 모두 업데이트가 종료되고, 3.x 버전만 업데이트되고 있다. 후대 버전으로 갈수록 구형 브라우저 지원을 위한 레거시 코드를 삭제하여 용량이 작고 속도도 더 빠르다. Internet Explorer 8 이전 버전에서의 호환이 필요하다면 1.x를 사용해야 한다. 1.x 버전 중에서도 특히 1.9 버전은 하위 호환성이 떨어지는데, 1.9에서 삭제된 것들이 많기 때문이다. 이 때문에 연식이 오래된 툴일 경우에는 호환성 문제 때문에 1.8 버전에서 머무는 경우가 많다. 1.9 버전 이상을 사용하면서 1.8 이하 버전의 호환성을 유지하려면 jQuery Migrate라는 플러그인을 사용하면 된다. 하지만 구형 브라우저는 jQuery뿐만 아니라 HTML5에만 있는 태그와 CSS에서도 문제를 일으키는데다가[15] 보안 문제 때문에 강제업그레이드가 이루어지며 사용자가 거부할 수 없게 되어 있다.[16] 따라서 2020년 현재는 3.x버전을 쓰는 게 정답이다.

2018년 하반기 기준, 역시 국내는 논외로 하고 해외 추세를 보면 JavaScript의 기능 자체가 좋아지면서 jQuery 의존도가 점차 낮아지는 경향이 있다.

 

서버 사이드 JavaScript 엔진인 Node.js에서도 jQuery를 사용할 수 있다. 단 Node.js에는 window 전역 객체가 없기 때문에 jsDom이라는 라이브러리를 추가로 설치해야 한다. 역시 DOM 조작에 사용한다. 보통 복잡한 템플릿 코드를 서버 쪽에서 생성하거나 웹 크롤러를 만들 때 사용한다.

2016년 6월 9일, jQuery 3.0이 정식 출시되었다.

 

 

 

 

************************************************************************************************************

아파치 소프트웨어 재단에서 개발하는 Java 기반의 서블릿 컨테이너이자 웹 서버. JSP/Spring으로 웹사이트를 구축한다면 톰캣은 거의 반드시 사용된다고 볼 수 있다. Tomcat은 수컷 고양이를 뜻하는 영어 단어이다.

지금은 오라클에 인수된 썬 마이크로시스템즈에서 1990년대에 Java 웹 애플리케이션 표준인 JSP/서블릿을 개발하기 시작했고, 이것의 표준 구현(Reference Implementation)으로 개발하던 것을 나중에 오픈 소스화하여 공개한 것에서 시작되었다. 이후 2005년부터 아파치 소프트웨어 재단이 관리하고 있다.

톰캣에는 오로지 서블릿/JSP 및 HTTP 처리 엔진만 들어있으며, 여기에 J2EE API를 추가하여 엔터프라이즈 버전으로 배포중인 웹 애플리케이션 서버 Apache TomEE도 있다.

톰캣의 존재로 인해서 JSP 사용자가 크게 늘어나 ASP는 쓰는 사람만 쓰는 언어가 되었다.(...)

프로그래밍에서 개발환경을 구축할때 환경변수를 지정하는 경우가 많은데, 톰캣은 특이하게도 TOMCAT_HOME이 아니고 CATALINA_HOME이라는 변수를 사용한다. Java의 경우 JAVA_HOME, 오라클 데이터베이스의 경우 ORACLE_HOME, Android SDK의 경우 ANDROID_HOME 등을 사용하는데 톰캣은 변수가 이름과 전혀 관련없는 특이한 케이스. 톰캣의 개발자인 제임스 데이비슨에 따르면 본인이 캘리포니아의 카탈리나 섬을 좋아해서(...) 그렇게 지었다고 한다.