자바 강의자료 정리

나만 보기용

스프링부트 세팅

Logger logger = LoggerFactory.getLogger(this.getClass().getSimpleName());

로그처리

날짜 및 통화표시

매퍼 구현

카카오 맵 구현

다국어 구현

json처리 라이브러리

카카오맵 마커 그리기

img log 디렉토리 변경

에러 핸들링

시큐리티 설정

oracle 이용하면서 로깅 남기기

jsp페이지네이션 추가

페이지네이션, pagination

암호화, BCryptPasswordEncoder

file Upload Utility

파일업로드시 필요함.
사진 업로드시 dto에 업로드 위한 변수 추가 지정하고, 메소드에도 본 클래스 이용한 아이디 추출 및 업로드 진행.

package com.kbstar.controller;
​
import com.kbstar.dto.Msg;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.simp.SimpMessageHeaderAccessor;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;
​
@Controller
public class MsgController {
    @Autowired
    SimpMessagingTemplate template;
​
    @MessageMapping("/receiveall") // 모두에게 전송
    public void receiveall(Msg msg, SimpMessageHeaderAccessor headerAccessor) {
        System.out.println(msg);
        template.convertAndSend("/send",msg);
    }
    @MessageMapping("/receiveme") // 나에게만 전송 ex)Chatbot
    public void receiveme(Msg msg, SimpMessageHeaderAccessor headerAccessor) {
        System.out.println(msg);
​
        String id = msg.getSendid();
        template.convertAndSend("/send/"+id,msg);
    }
    @MessageMapping("/receiveto") // 특정 Id에게 전송
    public void receiveto(Msg msg, SimpMessageHeaderAccessor headerAccessor) {
        String id = msg.getSendid();
        String target = msg.getReceiveid();
        template.convertAndSend("/send/to/"+target,msg);
    }
}

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<style>
  #all {
    width: 400px;
    height: 200px;
    overflow: auto;
    border: 2px solid red;
  }

  #me {
    width: 400px;
    height: 200px;
    overflow: auto;
    border: 2px solid blue;
  }

  #to {
    width: 400px;
    height: 200px;
    overflow: auto;
    border: 2px solid green;
  }
</style>

<script>
  let websocket = {
    id:null,
    stompClient:null,
    init:function(){
      this.id = $('#adm_id').text();
      $("#connect").click(function() {
        websocket.connect();
      });
      $("#disconnect").click(function() {
        websocket.disconnect();
      });
      $("#sendall").click(function() {
        websocket.sendAll();
      });
      $("#sendme").click(function() {
        websocket.sendMe();
      });
      $("#sendto").click(function() {
        websocket.sendTo();
      });
    },
    connect:function(){
      var sid = this.id;
      var socket = new SockJS('http://127.0.0.1:8088/ws');
      this.stompClient = Stomp.over(socket);

      this.stompClient.connect({}, function(frame) {
        websocket.setConnected(true);
        console.log('Connected: ' + frame);
        this.subscribe('/send', function(msg) {
          $("#all").prepend(
                  "<h4>" + JSON.parse(msg.body).sendid +":"+
                  JSON.parse(msg.body).content1
                  + "</h4>");
        });
        this.subscribe('/send/'+sid, function(msg) {
          $("#me").prepend(
                  "<h4>" + JSON.parse(msg.body).sendid +":"+
                  JSON.parse(msg.body).content1+ "</h4>");
        });
        this.subscribe('/send/to/'+sid, function(msg) {
          $("#to").prepend(
                  "<h4>" + JSON.parse(msg.body).sendid +":"+
                  JSON.parse(msg.body).content1
                  + "</h4>");
        });
      });
    },
    disconnect:function(){
      if (this.stompClient !== null) {
        this.stompClient.disconnect();
      }
      websocket.setConnected(false);
      console.log("Disconnected");
    },
    setConnected:function(connected){
      if (connected) {
        $("#status").text("Connected");
      } else {
        $("#status").text("Disconnected");
      }
    },
    sendAll:function(){
      var msg = JSON.stringify({
        'sendid' : this.id,
        'content1' : $("#alltext").val()
      });
      this.stompClient.send("/receiveall", {}, msg);
    },
    sendTo:function(){
      var msg = JSON.stringify({
        'sendid' : this.id,
        'receiveid' : $('#target').val(),
        'content1' : $('#totext').val()
      });
      this.stompClient.send('/receiveto', {}, msg);
    },
    sendMe:function(){
      var msg = JSON.stringify({
        'sendid' : this.id,
        'content1' : $('#metext').val()
      });
      this.stompClient.send("/receiveme", {}, msg);
    }
  };
  $(function(){
    websocket.init();
  })

</script>
<!-- Begin Page Content -->
<div class="container-fluid">

  <!-- Page Heading -->
  <h1 class="h3 mb-2 text-gray-800">Live Chart</h1>

  <!-- DataTales Example -->
  <div class="card shadow mb-4">
    <div class="card-header py-3">
      <h6 class="m-0 font-weight-bold text-primary">Live Chart</h6>
    </div>
    <div class="card-body">
      <div id="container"></div>
      <div class="col-sm-5">
        <h1 id="adm_id">${loginadm.id}</h1>
        <H1 id="status">Status</H1>
        <button id="connect">Connect</button>
        <button id="disconnect">Disconnect</button>

        <h3>All</h3>
        <input type="text" id="alltext"><button id="sendall">Send</button>
        <div id="all"></div>

        <h3>Me</h3>
        <input type="text" id="metext"><button id="sendme">Send</button>
        <div id="me"></div>

        <h3>To</h3>
        <input type="text" id="target">
        <input type="text" id="totext"><button id="sendto">Send</button>
        <div id="to"></div>

      </div>
    </div>
  </div>
  <!-- /.container-fluid -->
</div>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<style>
  #all {
    width: 400px;
    height: 200px;
    overflow: auto;
    border: 2px solid red;
  }

  #me {
    width: 400px;
    height: 200px;
    overflow: auto;
    border: 2px solid blue;
  }

  #to {
    width: 400px;
    height: 200px;
    overflow: auto;
    border: 2px solid green;
  }
</style>

<script>
  let websocket = {
    id:null,
    stompClient:null,
    init:function(){
      this.id = $('#adm_id').text();
      $("#connect").click(function() {
        websocket.connect();
      });
      $("#disconnect").click(function() {
        websocket.disconnect();
      });
      $("#sendall").click(function() {
        websocket.sendAll();
      });
      $("#sendme").click(function() {
        websocket.sendMe();
      });
      $("#sendto").click(function() {
        websocket.sendTo();
      });
    },
    connect:function(){
      var sid = this.id;
      var socket = new SockJS('http://127.0.0.1:8088/ws');
      this.stompClient = Stomp.over(socket);

      this.stompClient.connect({}, function(frame) {
        websocket.setConnected(true);
        console.log('Connected: ' + frame);
        this.subscribe('/send', function(msg) {
          $("#all").prepend(
                  "<h4>" + JSON.parse(msg.body).sendid +":"+
                  JSON.parse(msg.body).content1
                  + "</h4>");
        });
        this.subscribe('/send/'+sid, function(msg) {
          $("#me").prepend(
                  "<h4>" + JSON.parse(msg.body).sendid +":"+
                  JSON.parse(msg.body).content1+ "</h4>");
        });
        this.subscribe('/send/to/'+sid, function(msg) {
          $("#to").prepend(
                  "<h4>" + JSON.parse(msg.body).sendid +":"+
                  JSON.parse(msg.body).content1
                  + "</h4>");
        });
      });
    },
    disconnect:function(){
      if (this.stompClient !== null) {
        this.stompClient.disconnect();
      }
      websocket.setConnected(false);
      console.log("Disconnected");
    },
    setConnected:function(connected){
      if (connected) {
        $("#status").text("Connected");
      } else {
        $("#status").text("Disconnected");
      }
    },
    sendAll:function(){
      var msg = JSON.stringify({
        'sendid' : this.id,
        'content1' : $("#alltext").val()
      });
      this.stompClient.send("/receiveall", {}, msg);
    },
    sendTo:function(){
      var msg = JSON.stringify({
        'sendid' : this.id,
        'receiveid' : $('#target').val(),
        'content1' : $('#totext').val()
      });
      this.stompClient.send('/receiveto', {}, msg);
    },
    sendMe:function(){
      var msg = JSON.stringify({
        'sendid' : this.id,
        'content1' : $('#metext').val()
      });
      this.stompClient.send("/receiveme", {}, msg);
    }
  };
  $(function(){
    websocket.init();
  })

</script>
<!-- Begin Page Content -->
<div class="container-fluid">

  <!-- Page Heading -->
  <h1 class="h3 mb-2 text-gray-800">Live Chart</h1>

  <!-- DataTales Example -->
  <div class="card shadow mb-4">
    <div class="card-header py-3">
      <h6 class="m-0 font-weight-bold text-primary">Live Chart</h6>
    </div>
    <div class="card-body">
      <div id="container"></div>
      <div class="col-sm-5">
        <h1 id="adm_id">${logincust.id}</h1>
        <H1 id="status">Status</H1>
        <button id="connect">Connect</button>
        <button id="disconnect">Disconnect</button>

        <h3>All</h3>
        <input type="text" id="alltext"><button id="sendall">Send</button>
        <div id="all"></div>

        <h3>Me</h3>
        <input type="text" id="metext"><button id="sendme">Send</button>
        <div id="me"></div>

        <h3>To</h3>
        <input type="text" id="target">
        <input type="text" id="totext"><button id="sendto">Send</button>
        <div id="to"></div>

      </div>
    </div>
  </div>
  <!-- /.container-fluid -->
</div>

web socket 클라이언트 및 서버

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<script>
  let pic = {
    myVideoStream:null,
    init:function(interval){
          this.myVideoStream = document.querySelector('#myVideo');
          $('#cfr_btn').click(function(){
            $('#cfr_form').attr({
              'method':'post',
              'action':'/cfrimpl'
            });
            $('#cfr_form').submit();
          });
    },
    getVideo:function(){
          navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
          navigator.getMedia(
                  {video: true, audio: false},
                      function(stream) {
                        pic.myVideoStream.srcObject = stream
                        pic.myVideoStream.play();
                  },
                  function(error) {
                      alert('webcam not working');
                  });
    },
    takeSnapshot:function(){
          var myCanvasElement = document.querySelector('#myCanvas');
          var myCTX = myCanvasElement.getContext('2d');
          myCTX.drawImage(this.myVideoStream, 0, 0, myCanvasElement.width, myCanvasElement.height);
    },
    send:function(){
          const canvas = document.querySelector('#myCanvas');
          const imgBase64 = canvas.toDataURL('image/jpeg', 'image/octet-stream');
          const decodImg = atob(imgBase64.split(',')[1]);
          let array = [];
          for (let i = 0; i < decodImg .length; i++) {
            array.push(decodImg .charCodeAt(i));
          }
          const file = new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
          const fileName = 'snapshot_' + new Date().getMilliseconds() + '.jpg';
          let formData = new FormData();
          formData.append('file', file, fileName);
          $.ajax({
              type: 'post',
              url: '/saveimg/',
              enctype: 'multipart/form-data',
              cache: false,
              data: formData,
              processData: false,
              contentType: false,
              success: function (data) {
                $('#imgname').val(data);
              }
            });
          },
    takeAuto:function(interval){
          this.getVideo();
          myStoredInterval = setInterval(function(){
            pic.takeSnapshot();
            pic.send();
          }, interval);
    }
  };
  $(function(){
    pic.init();
  });
</script>
<div class="col-sm-8 text-left">
  <h1>Pic</h1>
  <hr>
  <video  id="myVideo" width="400" height="300" style="border: 1px solid #ddd;"></video>
  <canvas id="myCanvas" width="160" height="140" style="border: 1px solid #ddd;"></canvas><br>
  <input type=button value="get Video" onclick="pic.getVideo();">
  <input type=button value="get Pic" onclick="pic.takeSnapshot();">
  <input type=button value="send Pic" onclick="pic.send();"><br>
  <input type=button value="Auto Pic" onclick="pic.takeAuto(5000);">
  <form id="cfr_form">
    Image Name:<input type="text" name="imgname" id="imgname"><br>
    <button id="cfr_btn">CFR</button>
  </form>
</div>

ajax이용한 파일 업로드

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>

<script>
    let pic = {
        myVideoStream:null,
        init:function(){
            this.myVideoStream = document.querySelector('#myVideo');
            $('#cfr_btn').click(function(){
                $('#cfr_form').attr({
                    'method':'post',
                    'action':'/cfrimpl'
                });
                $('#cfr_form').submit();
            });
        },
        getVideo:function(){
            navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
            navigator.getMedia(
                {video: true, audio: false},
                function(stream) {
                    pic.myVideoStream.srcObject = stream
                    pic.myVideoStream.play();
                },
                function(error) {
                    alert('webcam not working');
                });
        },
        takeSnapshot:function(){
            var myCanvasElement = document.querySelector('#myCanvas');
            var myCTX = myCanvasElement.getContext('2d');
            myCTX.drawImage(this.myVideoStream, 0, 0, myCanvasElement.width, myCanvasElement.height);
        },
        send:function(){
            const canvas = document.querySelector('#myCanvas');
            const imgBase64 = canvas.toDataURL('image/jpeg', 'image/octet-stream');
            const decodImg = atob(imgBase64.split(',')[1]);
            let array = [];
            for (let i = 0; i < decodImg .length; i++) {
                array.push(decodImg .charCodeAt(i));
            }
            const file = new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
            const fileName = 'snapshot_' + new Date().getMilliseconds() + '.jpg';
            let formData = new FormData();
            formData.append('file', file, fileName);
            $.ajax({
                type: 'post',
                url: '/saveimg/',
                enctype: 'multipart/form-data',
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    $('#imgname').val(data);
                }
            });
        },
        takeAuto:function(interval){
            this.getVideo();
            myStoredInterval = setInterval(function(){
                pic.takeSnapshot();
                pic.send();
            }, interval);
        }
    };
    $(function(){
        pic.init();
    });
</script>
<div class="col-sm-8 text-left">
    <h1>Pic</h1>
    <hr>
    <video  id="myVideo" width="400" height="300" style="border: 1px solid #ddd;"></video>
    <canvas id="myCanvas" width="160" height="140" style="border: 1px solid #ddd;"></canvas><br>
    <input type=button value="get Video" onclick="pic.getVideo();">
    <input type=button value="get Pic" onclick="pic.takeSnapshot();">
    <input type=button value="send Pic" onclick="pic.send();"><br>
    <input type=button value="Auto Pic" onclick="pic.takeAuto(5000);">
    <form id="cfr_form">
        Image Name:<input type="text" name="imgname" id="imgname"><br>
        <button id="cfr_btn">CFR</button>
    </form>
</div>

사진 촬영, 자동 촬영, 보내기

스케줄링

고정버튼 만들기

#scroll-btn {
            opacity: 0;
            width: 50px;
            height: 50px;
            color: #fff;
            background-color: #ef476f;
            position: fixed;
            bottom: 13%;
            right: 10%;
            border: 2px solid #fff;
            border-radius: 50%;
            font: 2px monospace;
            transition: opacity 2s, transform 2s;
        }
        #scroll-btn.show {
            opacity: 1;
            transition: opacity 5s, transform 5s;
        }
        #scroll-btn2 {
            opacity: 0;
            width: 50px;
            height: 50px;
            color: #fff;
            background-color: #ef476f;
            position: fixed;
            bottom: 5%;
            right: 10%;
            border: 2px solid #fff;
            border-radius: 50%;
            font: bold 10px monospace;
            transition: opacity 2s, transform 2s;
        }
        #scroll-btn2.show {
            opacity: 1;
            transition: opacity 5s, transform 5s;
        }

let chatbtn = {
            init:function(){
                const scrollBtn = document.createElement("button");
                scrollBtn.innerHTML = "chatbot";
                scrollBtn.setAttribute("id", "scroll-btn");
                document.body.appendChild(scrollBtn);
                scrollBtn.classList.add("show");
                scrollBtn.addEventListener("click", function(){
                    location.href='/login';
                });
                const scrollBtn2 = document.createElement("button");
                scrollBtn2.innerHTML = "1:1";
                scrollBtn2.setAttribute("id", "scroll-btn2");
                document.body.appendChild(scrollBtn2);
                scrollBtn2.classList.add("show");
                scrollBtn2.addEventListener("click", function(){
                    location.href='/login';
                });
            }
        };

        $(function(){
            chatbtn.init();
        });