1. JQuery 사용 기초

forest71 2016. 6. 4. 07:52

2016. 6. 4. 07:52

JQuery는 자바스크립트(JavaScript - JS)를 브라우저 호환성 등을

신경 쓰지 않고 쉽게 짧은 코드로 사용할 수 있게 만든 라이브러리(위키-https://ko.wikipedia.org/wiki/JQuery)로,

가장 폭 넓게 사용되는 라이브러리라고 생각한다.

사용법에 대한 자료가 많으니 인터넷 검색을 통해 익혀 두길 바라고

여기서는 게시판(글읽기-댓글)에 사용된 자바 스크립트를 JQuery로 변환하면서 필요한 내용만 언급하고자 한다.

여기서 JQuery를 이용하는 이유는 코드가 간단해지는 것도 있고

동적인 웹 사이트를 만들 때 필요한 라이브러리(Tree, Grid 등)들이 JQuery를 기반으로 제공되기 때문이다.

개인적으로 JS = JQuery 라고 생각한다.

먼저, 컨트롤(Board6Ctr.java), JSP(board6)만 board7으로 복사해서 만들고

서비스(Board6Svcjava)와 sql문이 있는 board6.xml는 새로 작성하지 않는다.

JS를 JQuery로 바꾸는 것은 JSP 파일만 수정하면 된다.

Board7Ctr 컨트롤이 필요한 이유는

별도로 예제를 구성하기 위해서 이기도 하고

다음 예제가 JQuery Ajax를 사용하는 것으로

Ajax는 서버(컨트롤)와 통신하는 것이기 때문에 통신을 위한 수정이 필요하기 때문이다.

따라서, 새로운 컨트롤(Board7Ctr.java), JSP(board7)을 생성한다.

다음으로 JQuery 공식 사이트에서 적절한 버전을 다운로드 받는다.

1.x와 2.x 중에 적절한 버전을 선택하여 다운 받는다.

여기서는 Internet Explorer 6, 7, or 8를 지원하지 않는 2.2.3를 다운 받았다.

https://code.jquery.com/jquery-2.2.3.min.js

다운 받은 jquery-2.2.3.min.js 파일을 webapp 폴더에 js 폴더를 만들어 보관하였다.

폴더의 위치는 원하는 위치로 하면 되는데

개인적으로 webapp/js 폴더에 모아서 사용한다.

그런 후 Spring 환경파일(webapp/WEB-INF/dispatcher-servlet.xml)에

<mvc:resources mapping="/js/**" location="/js/" />

를 추가해 주어야 한다.

그렇지 않으면 파일을 찾을 수 없다는 메시지를 받게 된다.

대부분 CSS와 이미지도 이런 식으로 모아서 사용하니 다른 자료들을 더 확인해 두길 바란다.

마지막으로 JQuery를 사용할 jsp파일 (BoardRead.jsp)의 head 테그에

JQuery 스크립트를 가져오는 다음 코드를 추가해 준다.

SW 개발이 좋은 사람