Jquery와 Connection Pool
오늘 오전엔 드디어 JQuery를 깔고, 그리고 가볍게 살펴보았다. 먼저 JQuery는 Javascripte Library이다. 그렇기때문에 라이브러리 설치를 해줘야한다
Jquery 라이브러리는 설치(적용) 하는 방법이 여러가지이다.
먼저 공식 홈페이지에서 파일을 다운로드받아, 프로젝트에 입력하고 <script src=를 이용하여 적용해주는 방법인 다운로드 적용 방식이 있고
직접적으로 URL을 링크하듯이 걸어 Jquery 라이브러리를 불러와주는 CDN방식이 있다. 두가지 방법 다 알아보겠다.
Jquery 다운로드페이지 새창 바로가기
Download jQuery | jQuery
link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download
jquery.com
Jquery 3.6.3 버전을 다운로드해주겠다.
production과 development 버전의 차이는 쉽게 얘기하면 배포버전, 개발자 버전 이라고 보면 될거같다. developmonet 버전은 내부에 주석으로 설명이 떡칠되어있다.
우리는 일반 배포버전으로 다운로드를 해주겠다. Chrome이나 Egde에서 해당 링크를 누르면 엄청 뭐라뭐라 괴상한 문자들이 나올것이다. 마우스 오른쪽버튼을 눌러 다른이름으로 저장을 눌러 잘 저장해주자.
그럼 파일명 정하는 창이 나올텐데 파일명은 변경해주지 말자.
이 파일을 저장했다면 이제 Jquery를 적용할 프로젝트 어딘가에 저장을 하자. 나는 Webcontent 밑에 JS라는 폴더를 만들어 그 밑에 넣어주었다.
그럼 이제 JSP 파일에서 Head부분에 해당문서의 위치를 기준해서 Jquery파일의 경로를 <script src="Jquery파일의 위치"> 로 지정해주면 된다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<!-- cdn 방식으로 jquery 연동 -->
<!-- <script src="https://code.jquery.com/jquery-2.2.4.js"></script> -->
<!-- download방식으로 jquery 연동 -->
<script src="./js/jquery-3.6.3.js"></script>
<meta charset="utf-8">
<title></title>
<style></style>
<script></script>
</head>
<body>
</body>
</html>
내 기준으로 보자면 해당 JSP파일이 WebContent 안에 있고. 같은 WebContent 밑에 있으니 .을 입력해주고 그뒤에 /로 경로를 지정해주었다.
이렇게 되면 설정이 끝난거다.
CDN 방식을 알아보자. 링크 방식이라 간단하다. JQuery 사이트에서 링크를 가져와 링크를 걸어주는 방법도 있지만. 간편하게 Google에서 제공하는 Google CDN을 이용하자. W3School에서도 이방법을 권장하는거 같다.
호스팅된 라이브러리 | Hosted Libraries | Google Developers
가장 많이 사용되는 오픈소스 자바스크립트 라이브러리를 위한 안정적이고, 안정적이며, 속도가 빠른, 전 세계적으로 제공되는 콘텐츠 배포 네트워크입니다.
developers.google.com
에 들어가보면 손쉽게 CDN 방식으로 가져올수 있는 JQuery들이 버전별로 나와있다.
jQuery
3.x 스니펫:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
2.x 스니펫:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
1.x 스니펫:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
이중에 골라서 사용해주면 된다.
적용방법은 Download 방식과 동일하다. <script src="Cdn방식 주소"> 해주면 끝난다.
그럼 잘 적용이 되는지 Test를 해주면서 기본 문법을 알아보자.
See the Pen Untitled by codeJo (@yatong) on CodePen.
기본문법을 살펴보자면 $(달러표시)로 시작한다
$(document).ready는 document(문서)가 준비가 되면, 이라는 뜻이다. JSP에서 document.ready()라고 할수 있다.
JSP의 라이브러리 답게 기능구현은 JSP와 동일하다, 단 코드 구현부가 달라져서 좀더 간결해지는 장점이 있다.
각 속성에 접근해서 값을 가져오고 이를 JSP Style과 JQuery Style로 구현해보았다.
먼저 Button을 여러개 만들어서 각 버튼을 누를시에 해당 객체에 접근해 속성의 Value를 추출해오는 코드를 보겠다.
See the Pen Untitled by codeJo (@yatong) on CodePen.
코드를 보면 결국엔 기존의 JSP에서 document.getElementById("id이름").text와 HTML이 JQuery에서는
$("id명").text와 HTML로 아주 간결하게 변경된다.
★★★★★val() - 양식 필드의 값을 설정하거나 반환은 아주 유용하게 자주 쓰인다고 하니 꼭 사용법을 숙지해두는것이 좋다고 한다.
이렇게 간단하게 Jquery 설정과 기본 문법을 알아봤고, 오후에는 Connection Pool 환경설정에 돌입했다.
먼저 Connection Pool이란 웹 어플리케이션이 실행되면서 Database와 미리 Connection 해놓은 객체들을 Pool에 저장을 해두었다가, 사용자의 요청이 오면 Connection을 빌려주었다가, 다시 Connection을 Pool에 저장하는 방식을 이야기 한다.
우리는 기존에 Java나 JSP에서 Connection 객체를 매번 생성하고 매번 수동으로 닫아주면서, 직접 Driver를 요청하고 그랬다.
이 방식은 사용자가 요청할때마다 Driver요청 -> Connection 객체 생성 -> Connection 객체 반납을 반복하기때문에 굉장히 비효율적이다. 이러한 비효율적인 문제를 해결하기 위한것이 바로 Connection Pool이다.
쉽게 설명하자면, Server가 구동될때 미리 Connection 객체를 생성해두고 DB와 연결을 자동으로 동시에 시작해준다.
그리고 그 생성된 Connection 객체는 사용자의 요청이 있기 전엔 Pool에 저장되었다가 새로 객체 생성할 필요 없이
사용자의 요청이 있으면 저장된 Pool 안의 객체를 이용하여 DB와 연결했다가 작업이 끝나면 다시 있던 자리로 돌아가는거라고 생각한다.
이클립스에서 Connection Pool을 사용해주기 위해서는 Jar 라이브러리 파일이 3종류가 필요하다. pool2,dbcp2,logging 파일 3가지이다.
이것부터 먼저 다운로드 하러 가보자. 현재 수업 개발환경에서는
- dbcp2 - 2.8.0 ver
- logging - 1.2 ver
- pool2 - 2.9.0 ver
이렇게 3가지 버전을 다운로드받아 라이브러리에 추가해주었다. 다운받으러 Apache-Commons 사이트를 방문하자
Apache-Commons 새창으로 바로가기
Apache Commons – Apache Commons
Welcome to Apache Commons Apache Commons is an Apache project focused on all aspects of reusable Java components. The Apache Commons project is composed of three parts: The Commons Proper - A repository of reusable Java components. The Commons Sandbox - A
commons.apache.org
이번에도 어김없이 찾기 어렵게 꽁꽁 숨겨놨다. 오른쪽상단에 조그맣게 Compornents로 들어가자
그럼 이 Components 안에서 Pool과 DBCP와 Logging을 각각 들어가서 다운로드 해줘야한다 각각 들어가서 다운로드 해주자
3가지의 파일을 다운받았다면, 이클립스에서 웹프로젝트 -> WebContent -> Web-INF - lib안에 3가지파일을 넣어주면된다.
이제부터가 중요하다. 해당 파일에 대한 설정이 완료됐다면, 이제 직접 Java코드로, Server가 작동될때 자동으로 해당 Java파일이 실행되도록 설정해주고, 해당 Java 파일에는 JDBC Driver 생성과 Connection 객체를 생성하는 코드를 작성해줘야한다.
먼저. WEB-INF 폴더에 Web.xml에 추가해줘야할 코드가 있다.
<servlet>
<servlet-name>서블릿네임</servlet-name>
<servlet-class>클래스의 실제경로</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
이 코드를 Web.xml 코드에 추가해줘야한다. 예를들면 DBCPInit 이라는 파일을 만들고 해당 파일을 Java Source 폴더에 만든다면,
이러한 경로로 되어있을것이다. 그럼 클래스이름에 DBCPInit을 입력해주고 클래스 경로에는 jdbc.DBCPinit을 입력해주면된다 load-on-startup은 Server가 실행될때 로딩 순서를 설정하는란이다. Driver 연결과 Connection 객체는 Server 실행시 한번만 수행하기때문에 가장 첫번째로 로딩되기위해 1이라고 설정해주었다.
그리고 나면 이제 Java Resources 폴더에 Java 파일을 생성하고 해당 코드를 입력해보자
package jdbc;
import java.io.IOException;
import java.sql.DriverManager;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.dbcp2.ConnectionFactory;
import org.apache.commons.dbcp2.DriverManagerConnectionFactory;
import org.apache.commons.dbcp2.PoolableConnection;
import org.apache.commons.dbcp2.PoolableConnectionFactory;
import org.apache.commons.dbcp2.PoolingDriver;
import org.apache.commons.pool2.impl.GenericObjectPool;
import org.apache.commons.pool2.impl.GenericObjectPoolConfig;
public class DBCPInit extends HttpServlet {
@Override
public void init() throws ServletException { //웹 어플리케이션 시작시 단 한번만 호출이 되는 init method
System.out.println("init메소드 호출");
loadJDBCDriver();
initConnectionPool();
}
@Override
//get방식으로 요청시 호출
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("doget");
super.doGet(req, resp);
}
@Override
//post 방식으로 요청시 호출
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("dopost");
super.doPost(req, resp);
}
@Override
public void destroy() { //종료시 호출되는 method
System.out.println("destroy 호출");
super.destroy();
}
private void loadJDBCDriver() {
try {
Class.forName("com.mysql.jdbc.Driver"); //mysql 드라이버
System.out.println("DBCPInit 드라이버 등록 성공");
} catch (ClassNotFoundException e) {
System.out.println("ClassNotFoundException");
e.printStackTrace();
}
}
private void initConnectionPool() {
String jdbcUrl = "jdbc:mysql://localhost:3306/chap14?useUnicode=true&characterEncoding=utf8";
String username = "jspexam";
String pw = "jsppw";
try {
ConnectionFactory connFactory = new DriverManagerConnectionFactory(jdbcUrl, username, pw);
PoolableConnectionFactory poolableConnFactory = new PoolableConnectionFactory(connFactory, null);
poolableConnFactory.setValidationQuery("select 1");
GenericObjectPoolConfig poolConfig = new GenericObjectPoolConfig();
poolConfig.setTimeBetweenEvictionRunsMillis(1000L * 60L * 5L);
poolConfig.setTestWhileIdle(true);
poolConfig.setMinIdle(4);
poolConfig.setMaxTotal(50);
GenericObjectPool<PoolableConnection> connectionPool = new GenericObjectPool<>(poolableConnFactory, poolConfig);
poolableConnFactory.setPool(connectionPool);
Class.forName("org.apache.commons.dbcp2.PoolingDriver");
PoolingDriver driver =
(PoolingDriver) DriverManager.getDriver("jdbc:apache:commons:dbcp:");
driver.registerPool("chap14", connectionPool);
} catch (Exception e) {
throw new RuntimeException(e);
}
}
}
init 메소드는 서버 실행시 단 한번만 실행해주는 메소드이다. 따라서 해당 메소드에 다시 메소드를 호출하여
initConnectionPool 메소드와 loadJDBCDriver 메소드를 1번만 실행할것이며
해당메소드들은 호출되면서 Mysql Driver를 불러올것이며, Connection 객체를 딱 한번 생성할것이다.
'Study > 중앙정보처리학원과정' 카테고리의 다른 글
| 48일차. 팀 프로젝트(Project)를 위한 ERD 작성해보기(ERD Cloud) (0) | 2022.12.31 |
|---|---|
| 47일차. Jquery Event On()과 event.stopPropagation() 메서드 (0) | 2022.12.30 |
| 42일차. JSP BOM(Browser Object Model), Eclipse에 JSP와 Mysql 연동하기 (0) | 2022.12.27 |
| 41일차. MySQL 설치 (0) | 2022.12.26 |
| 40일차(2). Request SendRedirect와 <JSP:forward와 param> (1) | 2022.12.24 |
