datepicker는 급하게 기능을 구현해야 하거나 예쁜 디자인이 필요 없이 간단하게 달력창을 만들어서 사용할 때 적용하기 편합니다.

datepicker에 대해 가장 기본적인 설정부터 조금씩 살을 붙여 나가면서 사용 방법에 대해 알아봅니다.

 

1. 기본 기능 설정

 

우선 datepicker를 사용하기 위해서는 아래와 같은 jquery가 필요합니다.

 

 

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

 

그리고 HTML 태그를 이용하여 날짜를 입력 받기 위한 text input을 하나 만들어 줍니다.

 

<body>

    <label for="startDate">Date :</label>

    <input type="text" name="start_dt" id="start_dt" size="15" maxlength="15" readonly="readonly" />

    <input type="button" value="send" onclick="send();">

</body>

 

그리고 javascript에서 input 입력과 datepicker을 기본적 값으로 설정하고 서로 연결 시켜주면 바로 달력창을 사용할 수 있습니다.

 

<script type="text/javascript">

 $(document).ready(function () {

    $.datepicker.setDefaults();

    $("#start_dt").datepicker();

});

 </script>

 

 

웹 브라우저에서 실행하고 input 박스를 클릭하면 아래와 같은 가장 기본적인 달력창을 확인할 수 있고 날짜를 선택해서 input 창에 값을 입력 받습니다.

 

 

가장 기본적인 설정으로는 [//]의 형식으로 날짜가 입력됩니다.

03/21/2024

우리는 이렇게 사용하지 않으니 수정하려면 날짜 형식을 설정하는 값을 하나 추가합니다.

 

    $.datepicker.setDefaults({

        dateFormat: 'yy-mm-dd',

    });

 

다시 실행해서 확인해 봅니다.

 

 

 

 

날짜가 설정한 형식으로 잘 입력이 되었습니다.

 

$.datepicker.setDefaults() 로 정의된 함수에 추가하는 설정 값은 공통으로 적용되는 설정입니다.

하나의 페이지에 여러 개의 달력 창을 만들어 사용하는 경우 모든 달력창에 동일한 설정 값이 적용됩니다.

만약 하나의 페이지에 여러 개의 달력창을 사용하는데 각각 또는 일부 달력창에는 다른 형태의 설정 값을 적용해서 사용하고 싶은 경우에는 배열 변수를 필요한 만큼 생성해서 서로 다른 설정을 정의한 후 필요한 달력 창에 적용해주면 됩니다.

 

예를 들어 var datepicker_set1 변수를 하나 생성하고 새로운 달력창(end_dt)을 추가한 후 설정을 반영해보도록 하겠습니다.  날짜 구분을 사선으로 구분하는 설정입니다.

 

    var datepicker_set1 = {

        dateFormat: 'yy/mm/dd',

    }

    $("#end_dt").datepicker(datepicker_set1);

 

input 박스를 클릭해서 날짜를 입력 받으면 바로 확인 가능합니다.

 

 

 

이런 식으로 처음 작업해본 start_dt와는 다른 결과 값을 얻기 위해 별도의 설정 값 적용하는 것이 가능 합니다.

물론 변수를 생성해서 사용하는 것이 혼란스럽다면 아래처럼 값을 직접 입력해도 됩니다.

 

    $("#end_dt").datepicker({dateFormat : ‘yy/mm/dd’});

 

 

 

2. 한글 사용

 

 

이번에는 datepicker 달력창에 한글을 사용하는 방법입니다.

한글 추가라고 해서 특별한 건 없고 지금까지 작업한 소스에 아래 설정을 추가해서 월과 요일을 한글로 변경할 수 있습니다.

 

 

        monthNames: ['1(JAN)','2(FEB)','3(MAR)','4(APR)','5(MAY)','6(JUN)',

        '7(JUL)','8(AUG)','9(SEP)','10(OCT)','11(NOV)','12(DEC)'],

        dayNamesMin: ['','','','','','',''],

 

 

브라우저에서 어떻게 나오나 확인해 보겠습니다.

 

 

 

 

 

입력한 값이 그대로 노출되기 때문에 수정이 필요하면 바로 고치면 됩니다.

 

 

이번에는 년과 월을 선택하는 방법을 변경하는 설정을 추가해 보겠습니다.

지금까지는 좌우측 끝부분에 있는 버튼을 이용해서 월을 이동하는 방식이었는데 셀렉트 박스로 년과 월을 변경하는 방법입니다.

아래에 있는 설정을 추가합니다.  물론 전체 또는 필요한 달력창만 설정이 반영하도록 할 수 있습니다.

changeXX라는 설정은 년월을 변경하겠다는 것이고 추가로 월의 값을 한글로 수정할 수 있도록 한글 월을 적어주도록 합니다.

 

        changeMonth: true,

        changeYear: true,

        monthNamesShort: ['1','2','3','4','5','6',

        '7','8','9','10','11','12'],

 

monthNamesShort은 셀렉트 박스에서 보여주는 월 명칭입니다.  생략하면 기본값으로 영문이 나오게 됩니다.  값은 입력한 한글이 그대로 노출되니 필요에 따라 수정하면 됩니다.

 

 

년 또는 월을 선택하기위해 방형버튼을 여러 번 누르지 않고도 바로 선택을 할 수 있습니다.

 

 

 

3. 버튼 추가

 

달력창을 보다 유용하게 사용하고 커스터마이징을 하는 방법으로 하단에 버튼을 추가해서 작업을 할 수 있습니다.

 

        showButtonPanel: true,

        currentText: "이번달",

        closeText: '닫기',

 

이 설정은 달력창 아래에 버튼을 추가하도록 하며 버튼의 기본 값은 영문으로 current close로 나오는데 이를 한글로 변경해서 볼 수 있습니다.

 

 

 

[이번달] 버튼은 다른 년 월을 선택했다가 다시 현재의 날짜로 돌아오려는 경우 사용하는 버튼입니다.

 

[닫기] 버튼은 그냥 달력창을 닫기만 하는 용도인데 내부적으로 함수를 가지고 있습니다.  만약 다른 기능을 추가하려면 아래와 같이 함수에 기능을 추가 해서 사용이 가능 합니다.

여기서는 선택한 값을 alert으로 나오도록 하는 단순 작업인데 필요에 따라 복잡하게 하면 되겠죠.

 

        onClose: function(dateText, inst ) {

            alert(dateText);

        }

 

[닫기] 버튼을 클릭해 볼까요?

 

 

 

 

 

 

좀더 많은 내장된 함수와 기능들은 홈페이지를 방문하면 찾아볼 수 있습니다.

 

https://jqueryui.com/datepicker/

 

소스도 공개되어 있고 API documentation에 가면 다양한 기능 목록을 확인할 수 있습니다.

 

 

지금까지 작업한 전체 소스

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

   

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

 

<script type="text/javascript">

 

var startDate = "";

var endDate ="";

 

$(document).ready(function () {

 

    $.datepicker.setDefaults({

        dateFormat: 'yy-mm-dd',

        monthNames: ['1(JAN)','2(FEB)','3(MAR)','4(APR)','5(MAY)','6(JUN)',

        '7(JUL)','8(AUG)','9(SEP)','10(OCT)','11(NOV)','12(DEC)'],

        dayNamesMin: ['','','','','','',''],

    });

 

    $("#start_dt").datepicker();

 

    var datepicker_set1 = {

        changeMonth: true,

        changeYear: true,

        monthNamesShort: ['1','2','3','4','5','6',

        '7','8','9','10','11','12'],

        showButtonPanel: true,

        currentText: "이번달",

        closeText: '닫기',

 

    }

    $("#end_dt").datepicker(datepicker_set1);

});

</script>

</head>

<body>

    <label for="startDate">Date :</label>

    <input type="text" name="start_dt" id="start_dt" size="15" maxlength="15" readonly="readonly" />

    <input type="text" name="end_dt" id="end_dt" size="15" maxlength="15" readonly="readonly" />

    <input type="button" value="send" onclick="send();">

</body>

</html>

 

- copy coding -

 

 

Visual Studio Code로 파일을 불러왔는데 한글이 깨지면서 아래처럼 모두 물음표로 나오는 경우가 있습니다.

 

    //id �� �� ����

    $("#input_id").val("set input Value by id");

    //class �� �� ����

    $(".input_class").val("set input Value by class");

    //name���� �� ����

    $('input[name="input_name"]').val("set input Value by name");

 

Visual Studio Code 프로그램의 언어 설정은 프로그램 하단 우측을 보면 확인하면 알 수 있습니다.

 

 

그림에서 보이는 것처럼 현재 VS Code의 언어 설정은 UTF-8로 되어있지만 한글이 깨지는 경우입니다.

이런 경우 불러온 파일의 생성을 UTF-8가 아닌 다른 언어로 설정하여 작업했기 때문에 한글이 깨지는 상황입니다.

 

원래의 한글 인코딩을 찾기 위해서는 하단에 있는 인코딩 상태 값의 [UTF-8]을 클릭하면 상단 가운데에 다음처럼 [Reopen with Encoding] 메뉴를 볼 수 있습니다.

 

 

 

[Reopen width Encoding]을 클릭하면 문서의 인코딩을 변경할 수 있는 character set 값들이 나오는데

 

 

 

가능하면 한글 인코딩 설정을 먼저 선택해 보고 안되면 가능성 있는 인코딩 값을 선택합니다.

목록에서 [Korean (EUC-KR)을 찾아서 선택해 보았습니다.

 

    //id 설정

    $("#input_id").val("set input Value by id");

    //class 설정

    $(".input_class").val("set input Value by class");

    //name으로 설정

    $('input[name="input_name"]').val("set input Value by name");

 

이제 한글이 제대로 보이는군요.

 

- copy coding -

 

JDBC Batch는 프로젝트와 별개로 작업하고 실행을 할 수 있어서 수정사항 발생시 바로바로 적용을 할 수 있다는 점이 운영하는 측에서는 편한 작업이 될 수 있습니다.  그러나 Batch job의 개수가 많아지거나 Table 사이즈가 크거나 작업의 우선 순위가 있어야 하는 경우 등의 상황에서는 다른 방법과 병행해서 사용하는게 개인적으로는 좋았던 것 같습니다.

 

 

 

오늘 기록해 놓으려는 소스는 SELECT 문을 사용해 key값의 데이터가 기존에 입력 되어있는지 확인하고 존재하면 UPDATE, 없으면 INSERT하는 단순 작업입니다.

 

1. DB 접속

먼저 DB 접속을 정의합니다.

 

Connection conn = null;
Class.forName("org.mariadb.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mariadb://127.0.0.1:3306", "db_id","db_passwd");
conn.setAutoCommit(false);

 

Driver는 사용하는 DB에 맞게 수정하면 됩니다.

 

2. Select 사용

 

기존에 입력된 데이터가 있는지 확인을 하기위해 함수를 하나 만들어서 결과를 리턴 받습니다.

int iCnt = getInsertCnt(conn, yesterday);

DB 접속 정보와 날짜를 파라미터로 데이터가 있는지 조회하는 쿼리입니다.

 

PreparedStatement pstmt = null;
int nCnt = 0;
ResultSet rs = null;
                    
try {
 
           StringBuilder sql = new StringBuilder();
           sql.append("SELECT count(*) AS CNT FROM test.statistics WHERE INSERT_DT = ?");
          
           pstmt = conn.prepareStatement(sql.toString());
           pstmt.setString(1, yesterDay);
                        
           rs = pstmt.executeQuery();
           while(rs.next()) {
               nCnt =  rs.getInt(1);
               System.out.println("=== CNT : " + rs + "/" + nCnt);
           }
           rs.close();
           pstmt.close();
}

 

PreparedStatement : 쿼리를 높은 효율성으로 반복적으로 사용하기위한 저장 객체.

ResultSet : SQL 쿼리를 실행한 결과를 저장하는 객체.

nCnt : SELECT 결과의 개수를 저장하려고 만든 변수입니다.

 

쿼리 생성시 사용하는 변수를 물음표(?)로 표시하고 값을 대입해서 쿼리를 완성하게 됩니다.

변수가 변경되면 쿼리는 수정하지 않고 변수 값만 수정해주면 반복해서 쿼리를 사용할 수 있게됩니다.

물음표에 해당하는 값을 대입하는데 사용되는 메소드는 아래처럼 정수, 실수, 문자등을 구분해서 대입하게 됩니다.

 

 

public void setInt(int index, int value)
public void setString(int index, String value)
public void setFloat(int index, float value)
public void setDouble(int index, double value)

 

index는 물음표의 순번으로 첫번째 물음표는 1이 됩니다.

 

쿼리를 실행하는 메소드는 여러 종류가 있는데 여기서는 SELECT 결과를 ResultSet에 담아야 하기때문에 리턴 값이 ResultSet인 메소드 executeQuery()를 선택해서 사용했습니다.

 

좀더 자세한 PreparedStatement 관련 메소드는 아래 링크를 참조하면 도움이 됩니다.

https://docs.oracle.com/javase/8/docs/api/java/sql/Statement.html

 

JDBC는 업무 로직이 복잡하면 어려워지는거고 실제 사용법은 간단합니다.  SELECT문 하나만으로 필요한 내용 설명은 거의 설명이 되는군요.

 

 

3. Insert / update

 

Insert문도 PreparedStatement 와 변수 대입을 위한 setString()을 사용합니다.

PreparedStatement pstmt = null;
                    
                     try {
                               
                    StringBuilder sql = new StringBuilder();
                    sql.append("INSERT INTO test.statistics (");
                    sql.append("  INSERT_DT");
                    sql.append(", VISIT_CNT");
                    sql.append(", PAGE_VIEW_CNT");
                    sql.append(", INST_DT");
                    sql.append(", INST_ID");
                    sql.append(") VALUES (");
                    sql.append(" ?");
                    sql.append(", (select 1 from dual)");
                    sql.append(", (select 2 from dual)");
                    sql.append(", date_format(now(), '%Y%m%d%H%i%s')");
                    sql.append(", 'tester'");
                    sql.append(")");
                   
                    pstmt = conn.prepareStatement(sql.toString());
                    pstmt.setString(1, yesterDay);
 

 

Select에서는 쿼리 실행을 위해 pstmt.executeQuery()를 사용하고 InsertUpdate에서는 addBatch()executeBatch()을 사용했습니다.

addBatch()는 쿼리를 바로 실행하지 않고 쿼리 구문을 메모리에 올려두었다가, 실행 명령(executeBatch)이 있으면 한번에 DB쪽으로 쿼리를 보내어 처리를 하게 됩니다.  , 한 번의 SQL 수행으로 대량의 로우를 동시에 insert / update / delete를 진행할 수 있어 대용량 처리를 하는데 적합한 방법입니다.

여기서는 달랑 하나 처리했는데 동일한 작업을 진행하려면 loop 문을 이용해서 작업을 하면 됩니다.

 

간단히 설명이 끝났습니다.

 

아래 소스를 보면 좀더 파악이 쉬우리라 생각하며 소스를 첨부합니다.

 

 

package com.example.demo.test;
 
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;
import java.util.Properties;
 
public class Job {
 
           public static void main(String[] args) {
                     
                     Connection conn = null;
 
               try {
                Class.forName("org.mariadb.jdbc.Driver");
                conn = DriverManager.getConnection("jdbc:mariadb://127.0.0.1:3306", "root","will99");
                conn.setAutoCommit(false);
               
                String yesterday = getYesterday();
               
               
                      int iCnt = getInsertCnt(conn, yesterday);
               
                      if(iCnt < 1) {
                                 System.out.println("======  insert ==================");
                       insertData(conn, yesterday);
                      } else {
                                 System.out.println("======  update ==================");
                         updateData(conn, yesterday);
                      }
                      
                      conn.close();
                 
               } catch (Exception e) {
               
                  e.printStackTrace();
               } finally {
                if(conn != null) {
                 try {
                      conn.close();
                 } catch (Exception e) {}
                }
               }
           }
          
           private static int getInsertCnt(Connection conn, String yesterDay) {
                     PreparedStatement pstmt = null;
                     int nCnt = 0;
                     ResultSet rs = null;
                    
                     try {
                               
                                StringBuilder sql = new StringBuilder();
                         sql.append("SELECT count(*) AS CNT FROM test.statistics WHERE INSERT_DT = ?");
          
                         pstmt = conn.prepareStatement(sql.toString());
                         pstmt.setString(1, yesterDay);
                        
                         rs = pstmt.executeQuery();
                         while(rs.next()) {
                              nCnt =  rs.getInt(1);
                                    System.out.println("=== CNT : " + rs + "/" + nCnt);
                         }
                         rs.close();
                         pstmt.close();
 
              
                     } catch (Exception e) {
                      
                    e.printStackTrace();
                 } finally {
                      if(pstmt != null) {
                                 try {
                                 pstmt.close();
                                 } catch (Exception e) {}
                       }
        }
 
                     return nCnt;
           }
          
           private static void insertData(Connection conn, String yesterDay) {
                     PreparedStatement pstmt = null;
                    
                     try {
                               
                    StringBuilder sql = new StringBuilder();
                    sql.append("INSERT INTO test.statistics (");
                    sql.append("  INSERT_DT");
                    sql.append(", VISIT_CNT");
                    sql.append(", PAGE_VIEW_CNT");
                    sql.append(", INST_DT");
                    sql.append(", INST_ID");
                    sql.append(") VALUES (");
                    sql.append(" ?");
                    sql.append(", (select 1 from dual)");
                    sql.append(", (select 2 from dual)");
                    sql.append(", date_format(now(), '%Y%m%d%H%i%s')");
                    sql.append(", 'tester'");
                    sql.append(")");
                   
                    pstmt = conn.prepareStatement(sql.toString());
                    pstmt.setString(1, yesterDay);
                   
                    pstmt.addBatch();
                   
                    pstmt.clearParameters();
 
                    pstmt.executeBatch();
                   
                    pstmt.clearBatch();
                   
                    conn.commit();
                   
                    pstmt.close();
                  
                 } catch (Exception e) {
                      
                    e.printStackTrace();
                 } finally {
                      if(pstmt != null) {
                                 try {
                                 pstmt.close();
                                 } catch (Exception e) {}
                      }
                 }
           }
          
           private static void updateData(Connection conn, String yesterDay) {
                     PreparedStatement pstmt = null;
                    
                     try {
                               
                    StringBuilder sql = new StringBuilder();
                    sql.append("UPDATE test.statistics SET ");
                    sql.append("VISIT_CNT = (select 1 from dual)");
                    sql.append(", PAGE_VIEW_CNT = (select 1 from dual)");
                    sql.append(", UPDT_DT = date_format(now(), '%Y%m%d%H%i%s')");
                    sql.append(", UPDT_ID = 'tester'");
                    sql.append("where INSERT_DT = ?");
                   
                    pstmt = conn.prepareStatement(sql.toString());
                    pstmt.setString(1, yesterDay);
 
                    pstmt.addBatch();
                   
                    pstmt.clearParameters();
 
                    pstmt.executeBatch();
                   
                    pstmt.clearBatch();
                   
                    conn.commit();
                   
                    pstmt.close();
                  
                 } catch (Exception e) {
                      
                    e.printStackTrace();
                 } finally {
                      if(pstmt != null) {
                                 try {
                                 pstmt.close();
                                 } catch (Exception e) {}
                      }
                 }
           }
          
           private static String getYesterday() {
                     Date today = new Date();
                     SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
                     String fmDate = sdf.format(today);
                     System.out.println("=== today : " + fmDate);
                    
                     Calendar cal = Calendar.getInstance();
                     cal.setTime(today);
                    
                     cal.add(Calendar.DATE, -1);
                     String fmDate2 = sdf.format(cal.getTime());
                     System.out.println("=== yesterday : " + fmDate2);
                    
                     return fmDate2;
           }
 
}

 

 - copy coding -

 

 

스프링부트에서 예전처럼 jstl을 사용하기 위해 pom.xml 파일에 dependency를 설정합니다.

 

               <dependency>
                       <groupId>javax.servlet</groupId>
                       <artifactId>jstl</artifactId>
                       <version>1.2</version>
               </dependency>

 

이게 기존에 사용하던 jstl 내용인데 Spring Boot 3.0부터는 오류가 발생 합니다.

 

웹 브라우저에서는 [Whitelabel Error Page]와 함께 하단에 status=500 오류가 나타납니다.

 

 

 

Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.
Thu Feb 15 09:19:28 KST 2024
There was an unexpected error (type=Internal Server Error, status=500).
 

 

 

서버 로그에서는 Servlet.service() for servlet [jsp] threw exception 오류가 발생합니다.

 

 

 

2024-02-15T09:19:27.884+09:00  INFO ---[nio-8080-exec-1]o.a.c.c.C.[Tomcat].[localhost].[/]      : Initializing Spring DispatcherServlet 'dispatcherServlet'

2024-02-15T09:19:27.884+09:00  INFO ---[nio-8080-exec-1]o.s.web.servlet.DispatcherServlet       : Initializing Servlet 'dispatcherServlet'

2024-02-15T09:19:27.886+09:00  INFO ---[nio-8080-exec-1]o.s.web.servlet.DispatcherServlet       : Completed initialization in 2 ms

2024-02-15T09:19:28.149+09:00 ERROR ---[nio-8080-exec-1]o.a.c.c.C.[.[localhost].[/].[jsp]       : Servlet.service() for servlet [jsp] threw exception

 

java.lang.ClassNotFoundException: javax.servlet.jsp.tagext.TagLibraryValidator

        at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:641) ~[na:na]

        at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:188) ~[na:na]

        at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:525) ~[na:na]

        at java.base/java.lang.ClassLoader.defineClass1(Native Method) ~[na:na]

        at java.base/java.lang.ClassLoader.defineClass(ClassLoader.java:1017) ~[na:na]

 

 

지금까지 잘 사용하던 jstl dependency라 잘못 적용한 내용은 없지만 Spring Boot 버전이 맞지 않아 발생하는 오류입니다.

 

기존 jstl 1.2 설정은 Spring Boot 3.0부터 지원을 하지 않으므로 가능하면 다른 해결방법을 찾기 위해 노력하지 말고 다른 dependency를 설정해 주면 됩니다.

 

 

               <dependency>

                       <groupId>jakarta.servlet</groupId>

                       <artifactId>jakarta.servlet-api</artifactId>

                       <version>6.0.0</version>

                       <scope>provided</scope>

               </dependency>

              

               <dependency>

                       <groupId>jakarta.servlet.jsp.jstl</groupId>

                       <artifactId>jakarta.servlet.jsp.jstl-api</artifactId>

                       <version>3.0.0</version>

               </dependency>

                             

               <dependency>

                       <groupId>org.glassfish.web</groupId>

                       <artifactId>jakarta.servlet.jsp.jstl</artifactId>

                       <version>3.0.1</version>

               </dependency>

 

 

이렇게 수정된 내용으로 pom.xml에 추가를 하고 예전처럼 Controller를 작성해서

 

@Controller

public class TestController {

 

        @RequestMapping("/test/cal")

        public String cal() throws Exception {

               return "test/cal";

        }

}

 

 

실행을 하면 아무런 일 없이 cal.jsp를 호출하고 결과를 볼 수 있습니다.

 

 

- copy coding -

 


1234···116

+ Recent posts