yum install git #root인경우
sudo yum install git
(중략...)
git --version
| CentOS 8 - mysql 특정 버전(5.7) 설치하기 (0) | 2021.01.26 |
|---|---|
| CentOs 8 - Mysql 8 설치 (기본 설정 버전) (0) | 2021.01.22 |
| Linux - 명령어 모음 (0) | 2020.10.15 |
| Ubuntu - 우분투 톰캣 설치하기 & 톰캣 서비스 생성하기 (4) | 2020.02.19 |
| Ubuntu - 우분투에서 자바 설치하기(ubuntu java tar파일로 설치) (0) | 2020.02.19 |
position값을 사용하여 처리하면 center같은 옵션이 먹지 않는데, 이런 경우에는 약간의 연산이나 transform옵션을 활용하면 중앙 정렬 또는 가운데 정렬등을 처리 할 수 있습니다.
HTML - 예시 데이터
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
.popup {
width: 300px;
height: 450px;
border: 1px solid gray;
background-color: aquamarine;
position: absolute;
top: 0%;
left: 0%;
}
</style>
<body>
<div class="popup"></div>
</body>
</html>
이러한 형태의 div를 중앙 정렬을 또는 가운데 정렬을 처리해보겠습니다.
1. top, left에 50%씩 처리하여 가운데로 밀어넣기
.popup 클래스에 top, left를 50퍼로 수정합니다.
.popup {
width: 300px;
height: 450px;
border: 1px solid gray;
background-color: aquamarine;
position: absolute;
top: 50%;
left: 50%;
}
중앙을 기준으로 가로 300px, 높이 450px짜리 div가 처리된것을 볼 수 있습니다.
이부분에서 transform을 추가하여 완벽한 중앙 정렬을 처리합니다.
2. transform으로 요소 사이즈만큼 반대로 이동시키기
.popup {
width: 300px;
height: 450px;
border: 1px solid gray;
background-color: aquamarine;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
원리는 아래와 같습니다.
개체의 넓이와 높이만큼 50퍼센트를 반대로 이동합니다.
높이는 30px만큼 고정으로 띄우고 가운데만 정렬하고자 할때는 아래와 같이합니다.
.popup {
width: 300px;
height: 450px;
border: 1px solid gray;
background-color: aquamarine;
position: absolute;
top: 30px;
left: 50%;
transform: translate(-50%, 0%);
}
translate의 첫번째 x축인 가로축만 50퍼센트만큼 당겨와서 가운데 정렬을 처리할 수 있습니다.
| HTML - Table td안에 특수문자(")가 존재할 경우 넓이 초과 현상 (0) | 2020.11.26 |
|---|---|
| CSS - p태그 등 너무 긴 문자열이 존재할 때, 넓이에 따른 자동 줄바꿈 (2) | 2020.09.09 |
| CSS - checkbox를 이미지로 꾸미고 동작시키기(label, CSS Trick) (2) | 2020.05.25 |
| HTML - input 속성 태그 모바일 환경에서 숫자패드 먼저 나오게 하기 (0) | 2019.09.06 |
| HTML - Form 태그, Input 태그 자동완성 해제하기 (0) | 2019.09.06 |
캔버스에 마우스 이벤트를 통해 클릭을 하는순간 그리기모드로 전환 후
마우스 이동에 따라 선을 그리고 마우스가 영역을 벗어나거나 마우스 클릭을 떼는 순간 그리기를 멈추는 소스를 작성해보겠습니다.
See the Pen CanvasDrawSign by myhappyman (@myhappyman) on CodePen.
| p5.js - 하트가 빙글빙글 돌면서 움직이는 예제(heart moving and rotates) (0) | 2021.02.19 |
|---|---|
| P5.js - 3D 도형 정육면체 제어하기 (0) | 2021.02.16 |
| P5.js - 시작하기 (0) | 2021.02.16 |
| Canvas - 두개의 점 사이를 화살표 처리하기 (0) | 2020.07.16 |
| Canvas - 클릭 한 곳(캔버스)에 네모, 동그라미 모양 생성하기 (0) | 2020.07.14 |
jQuery-ui를 사용하여 드래그 이벤트와 리사이즈 이벤트를 추가 할 수 있는데, 직사각형의 영역을 서로 침범할 경우 기존 위치로 원위치 시키는 방법을 알아보겠습니다.
1. 일반 2차원 배열에 0으로 채워넣고, 도형이 있는 위치는 1로 채웁니다.
2. 도형 위치마다 1로 더하기때문에 겹치는 영역이 생기면 아래처럼 2가 존재하게 됩니다.
3. 각 도형마다의 위치와 넓이, 높이를 기억하고 있다가 겹치면 원위치 시킨다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
* {
margin: 0;
padding: 0
}
#box {
width: 500px;
height: 500px;
border: 1px solid black;
background: #eee;
}
#box .rect {
position: absolute;
width: 50px;
height: 50px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="box">
<div class="rect" idx=0></div>
<div class="rect" idx=1></div>
</div>
<script src="./draggable_rect.js"></script>
</body>
</html>
var rectArr = [];
var canvasArr = [];
$(function () {
//초기 세팅
for (i = 0; i < $(".rect").length; i++) {
var rect = $($(".rect")[i])
var idx = rect.attr("idx");
var x = rect.offset().left;
var y = rect.offset().top;
var left = rect.css("left");
var top = rect.css("top");
var w = rect.width();
var h = rect.height();
rectArr[idx] = { x: x, y: y, left: left, top: top, w: w, h: h };
}
var width = $("#box").width();
var height = $("#box").height();
for (i = 0; i < height; i++) {
canvasArr[i] = new Array(width);
}
for (i = 0; i < height; i++) {
for (j = 0; j < width; j++) {
canvasArr[i][j] = 0;
}
}
});
$(".rect").draggable({
containment: "parent",
start: function (event, ui) {
},
stop: function (event, ui) {
var idx = $(this).attr("idx");
var left = $(this).css("left");
var top = $(this).css("top");
var x = $(this).offset().left;
var y = $(this).offset().top;
var w = $(this).width();
var h = $(this).height();
var thisObj = { x: x, y: y, w: w, h: h, idx: idx };
if (overLapChecker(".rect", thisObj)) {
//통과
rectArr[idx] = { x: x, y: y, left: left, top: top, w: w, h: h };
} else {
//겹침 - 초기화
var obj = rectArr[idx];
$(".rect[idx=" + idx + "]").css("top", obj.top);
$(".rect[idx=" + idx + "]").css("left", obj.left);
}
}
}).resizable({
containment: "parent",
start: function (event, ui) {
},
stop: function (event, ui) {
var idx = $(this).attr("idx");
var left = $(this).css("left");
var top = $(this).css("top");
var x = $(this).offset().left;
var y = $(this).offset().top;
var w = $(this).width();
var h = $(this).height();
var thisObj = { x: x, y: y, w: w, h: h, idx: idx };
if (overLapChecker(".rect", thisObj)) {
//통과
rectArr[idx] = { x: x, y: y, left: left, top: top, w: w, h: h };
} else {
//겹침 - 초기화
var obj = rectArr[idx];
$(".rect[idx=" + idx + "]").css("top", obj.top);
$(".rect[idx=" + idx + "]").css("left", obj.left);
$(".rect[idx=" + idx + "]").css("width", obj.w);
$(".rect[idx=" + idx + "]").css("height", obj.h);
}
}
})
function overLapChecker(className, thisObj) {
var len = $(className).length;
if (len > 0) {
var thisMapArr = JSON.parse(JSON.stringify(canvasArr)); //빈 배열을 복사한다.
var x = thisObj.x;
var y = thisObj.y;
var w = thisObj.w;
var h = thisObj.h;
for (i = y; i < y + h; i++) {
for (j = x; j < x + w; j++) {
thisMapArr[i][j] = thisMapArr[i][j] + 1;
}
}
for (z = 0; z < len; z++) {
var idx = $($(className)[z]).attr("idx");
if (idx == thisObj.idx) {
continue;
} else {
var checkerArr = JSON.parse(JSON.stringify(thisMapArr));
var x2 = $(".rect[idx=" + idx + "]").offset().left;
var y2 = $(".rect[idx=" + idx + "]").offset().top;
var w2 = $(".rect[idx=" + idx + "]").width();
var h2 = $(".rect[idx=" + idx + "]").height();
for (i = y2; i < y2 + h2; i++) {
for (j = x2; j < x2 + w2; j++) {
checkerArr[i][j] = checkerArr[i][j] + 1;
if (checkerArr[i][j] > 1) {
return false;
}
}
}
}
}
}
return true;
}드래그, 리사이즈 이벤트 처리를 하고 각 도형의 위치를 특정 배열에 담아둡니다.
드래그 또는 리사이즈 이벤트가 멈추면 멈추는 동시에 위치를 체크합니다. 겹치는 동선이 존재하여 배열에(2)가 처리되면 원위치 시킵니다.
| jQuery - checkbox 전체 선택, 해제 기능 및 단일 체크박스가 해제되었을때 전체 선택 해제 하기 (6) | 2020.10.27 |
|---|---|
| jQuery - ajax xhr을 활용한 파일 업로드 진행 상태 확인하기 (0) | 2020.10.20 |
| jQuery - 동그라미 도형 드래그(Draggable) 이벤트 겹침 방지하기 (0) | 2020.07.20 |
| jQuery - 클릭이벤트 동적 처리하기($("").click(), on('click') 차이) (13) | 2020.04.22 |
| jQuery - radio, checkBox값 가져오기, 선택하기, 제어 등 (2) | 2020.02.21 |
css를 활용하여 div를 동그라미로 만들었고 jQuery-ui의 Draggable 이벤트를 추가하였습니다.
기본적으로 position을 활용하기 때문에 서로 두개의 도형을 위 이미지형태로 처리하면 겹치게 되는데, 두 개 이상의 원형이 있을경우 겹치지 않도록 처리해보겠습니다.
소스를 보기전에 간단하게 겹침처리 방지에 사용한 방식을 설명하겠습니다.
각 도형의 좌측, 상단의 좌표값을 알때 중간점을 구할수 있고, 중간점과 중간점의 거리를 구해서
그 거리값이 반지름 + 반지름한 값보다 작다면 겹쳤다고 판단하여 원래 위치로 돌리는 소스입니다.
See the Pen BaLQdbG by myhappyman (@myhappyman) on CodePen.
| jQuery - ajax xhr을 활용한 파일 업로드 진행 상태 확인하기 (0) | 2020.10.20 |
|---|---|
| jQuery - 드래그, 리사이즈 이벤트에 따른 영역 침범 막기 (0) | 2020.07.21 |
| jQuery - 클릭이벤트 동적 처리하기($("").click(), on('click') 차이) (13) | 2020.04.22 |
| jQuery - radio, checkBox값 가져오기, 선택하기, 제어 등 (2) | 2020.02.21 |
| jQuery - ajaxSubmit 사용법 및 유의사항(페이지 리로드 현상) (0) | 2020.02.21 |
자바 소켓 프로그램 + 스케줄러로 구성된 프로세스를 실서버 운용중에 있었는데, 주말간 문제가 없었는지 확인해보니 주말사이에 스케줄러가 동작할때마다 에러를 뿜어내고 있었습니다.
[2020-07-18 11:00:00] ERROR (utils.SqlSessionUtils - selectList:92) - Exception
org.apache.ibatis.exceptions.PersistenceException:
### Error querying database. Cause: org.apache.ibatis.transaction.TransactionException: Error configuring AutoCommit. Your driver may not support getAutoCommit() or setAutoCommit(). Requested setting: false. Cause: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure
The last packet successfully received from the server was 86,387,538 milliseconds ago. The last packet sent successfully to the server was 0 milliseconds ago.
at org.apache.ibatis.exceptions.ExceptionFactory.wrapException(ExceptionFactory.java:30)
at org.apache.ibatis.session.defaults.DefaultSqlSession.selectList(DefaultSqlSession.java:150)
at org.apache.ibatis.session.defaults.DefaultSqlSession.selectList(DefaultSqlSession.java:141)
at kr.or.kisa.ktoaInterlock.utils.SqlSessionUtils.selectList(SqlSessionUtils.java:90)
at kr.or.kisa.ktoaInterlock.dao.InterlockDao.selectYesterdayReportList(InterlockDao.java:95)
at kr.or.kisa.ktoaInterlock.scheduler.InterLockScheduler.execute(InterLockScheduler.java:40)
at org.quartz.core.JobRunShell.run(JobRunShell.java:202)
at org.quartz.simpl.SimpleThreadPool$WorkerThread.run(SimpleThreadPool.java:573)와 같은 에러를 출력중이였는데...
DB는 mysql을 사용중이며 해당 스케줄러는 하루에 한번 돌도록 구성되어 있습니다.
에러 내용을 가지고 검색을 해보니, 너무 오랫동안 mysql을 사용하지 않고 있다가 갑자기 사용하려고 하면 발생하는 에러로 mysql에서 오랫동안 사용을 하지 않으니 강제로 종료해버리는 이슈라고 합니다.
POOLED타입의 옵션을 수정할 필요가 있었고, 옵션들을 살펴봤습니다.
https://mybatis.org/mybatis-3/ko/configuration.html
MyBatis – 마이바티스 3 | 매퍼 설정
매퍼 설정 마이바티스 XML 설정파일은 다양한 설정과 프로퍼티를 가진다. 문서의 구조는 다음과 같다.: configuration properties 이 설정은 외부에 옮길 수 있다. 자바 프로퍼티 파일 인스턴스에 설정할
mybatis.org
공식문서를 참고하였고, 다른 포스팅 글들과 함께 참고하여 아래의 3옵션을 확인하였습니다.
poolPingQuery - 커넥션이 작업하기 좋은상태인지 요청을 받을 준비가 되었는지 등 체크하기 위해 DB에 핑쿼리를 날리는 문구를 지정합니다.
poolPingEnabled - 핑쿼리를 사용할지 안할지 설정합니다. default - false
poolPingConnectionsNotUsedFor - 핑쿼리를 얼마나 자주 사용할지 지정합니다. 핑쿼리를 사용할 경우에만 해당 옵션이 동작합니다.(ms)
mybatis 설정쪽에 의미없는 쿼리로 핑을 날리듯이 처리를 할 수 있다고하여 옵션을 추가하였고, 지켜보기로 하였습니다.
문제가 해결된다면 해당 포스팅은 여기서 종료하겠습니다.
<property name="poolPingQuery" value="select 1"/> <!-- 핑쿼리 추가 -->
<property name="poolPingEnabled" value="true"/> <!-- 핑쿼리 추가 -->
<property name="poolPingConnectionsNotUsedFor" value="7200000"/> <!-- 2시간마다 -->위 내용처럼 ping처리를 할 수 있는 의미없는 쿼리와 사용하겠다는 옵션을 추가하였습니다.
모든 옵션
<environments default="development">
<environment id="development">
<transactionManager type="JDBC"/>
<dataSource type="POOLED">
<property name="driver" value="${driver}"/>
<property name="url" value="${url}"/>
<property name="username" value="${username}"/>
<property name="password" value="${password}"/>
<property name="poolPingQuery" value="select 1"/> <!-- 핑쿼리 추가 -->
<property name="poolPingEnabled" value="true"/> <!-- 핑쿼리 추가 -->
<property name="poolPingConnectionsNotUsedFor" value="7200000"/> <!-- 핑쿼리 추가 -->
<property name="poolMaximumActiveConnections" value="100"/> <!-- 주어진 시간에 존재할수 있는 활성화된 커넥션 수 -->
<property name="poolMaximumIdleConnections" value="100"/> <!-- 주어진 시간에 존재할 수 있는 유휴 커넥션의 수 -->
<property name="poolTimeToWait" value="20000"/> <!-- 풀이 로그 상태를 출력하고 비정상적으로 긴경우 커넥션을 다시얻을려고 시도하는 로우 레벨 셋팅 -->
</dataSource>
</environment>
</environments>
캔버스 내 클릭이벤트를 받아 처음에는 점만 그리고 한번 더 클릭하면 두 점을 잇는 선을 생성하고 두번째 생성된 위치에 화살표 모양을 처리해보겠습니다.
해당 기능을 구현하면서 Miscro Soft사의 파워포인트 기능들이... 엄청 훌륭하다는것을 다시한번 느꼈습니다!
수학적 기능이 많이 들어갔고, 두 점 사이의 좌표값을 알때, 사이각을 atan2를 통해 구하고 삼각형의 빗변을 구하는 공식을 통해 기준점을 정해 양 사이의 화살표처리를 하여 마무리하였습니다.
마지막에 화살표 처리를 위해 삼각형을 억지로 그려넣으면서 꽤나 뻘짓의 끝을 달렸는데, 수학적으로 접근하여 처리하니 어떤 방향에서든 정상적으로 처리되었습니다.
문제 해결에 도움되었던 사이트로는 아래 URL을 참조하였습니다.
참조 문서 : https://riptutorial.com/html5-canvas/example/18136/line-with-arrowheads
html5-canvas - Line with arrowheads | html5-canvas Tutorial
html5-canvas documentation: Line with arrowheads
riptutorial.com
See the Pen CanvasToDrawArrow by myhappyman (@myhappyman) on CodePen.
| p5.js - 하트가 빙글빙글 돌면서 움직이는 예제(heart moving and rotates) (0) | 2021.02.19 |
|---|---|
| P5.js - 3D 도형 정육면체 제어하기 (0) | 2021.02.16 |
| P5.js - 시작하기 (0) | 2021.02.16 |
| Canvas - 캔버스를 활용한 사인창 만들기 (0) | 2020.07.21 |
| Canvas - 클릭 한 곳(캔버스)에 네모, 동그라미 모양 생성하기 (0) | 2020.07.14 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
draw();
});
function draw() {
var ctx;
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
ctx = canvas.getContext("2d");
}
$(canvas).on("click", function (e) {
if (canvas.getContext) {
var l = $(this).offset().left;
var t = $(this).offset().top;
var x = e.pageX - l;
var y = e.pageY - t;
var w = 15;
var h = 15;
ctx.fillStyle = "rgb(255, 187, 0)";
ctx.fillRect(x, y, w, h);
}
})
}
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
canvas {
border: 1px solid black;
}
#canvas {
position: relative;
top: 150px;
left: 600px;
}
</style>
</head>
<body>
<canvas id="canvas" width="750" height="750"></canvas>
</body>
</html>canvas를 생성하고, 생성한 캔버스를 클릭하면 현재의 좌표를 받고 지정한 사이즈와 색상으로 사각형을 생성하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
draw();
});
function draw() {
var ctx;
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
ctx = canvas.getContext("2d");
}
$(canvas).on("click", function (e) {
if (canvas.getContext) {
var l = $(this).offset().left;
var t = $(this).offset().top;
var x = e.pageX - l;
var y = e.pageY - t;
var r = 5;
console.log("canvas click" + x + " " + y);
ctx.beginPath();
ctx.fillStyle = "rgb(54, 138, 255)";
ctx.arc(x, y, r, 0, Math.PI * 2, true);
ctx.fill();
}
})
}
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
canvas {
border: 1px solid black;
}
#canvas {
position: relative;
top: 150px;
left: 600px;
}
</style>
</head>
<body>
<canvas id="canvas" width="750" height="750"></canvas>
</body>
</html>사각형과 원리는 동일하며 생성하는 데이터각 사각형이 아닌 동그라미를 생성하고 그립니다.
| p5.js - 하트가 빙글빙글 돌면서 움직이는 예제(heart moving and rotates) (0) | 2021.02.19 |
|---|---|
| P5.js - 3D 도형 정육면체 제어하기 (0) | 2021.02.16 |
| P5.js - 시작하기 (0) | 2021.02.16 |
| Canvas - 캔버스를 활용한 사인창 만들기 (0) | 2020.07.21 |
| Canvas - 두개의 점 사이를 화살표 처리하기 (0) | 2020.07.16 |