'분류 전체보기'에 해당되는 글 223건
- 2015.12.14 Ubuntu 에 Node.js 설치하기~
- 2015.12.13 크롬 개발자 도구 기능 사용하기 #1 : contentEditable 설정 1
- 2015.12.07 curl 을 이용해 Linux 서버 백업을 다른 서버로 전송하기
- 2015.12.07 웹에서 signature_pad.js 사용해서 서명받기 예제
- 2015.12.07 maven jetty plugin 이클립스에서 디버깅하기
Ubuntu 에 Node.js 설치하기~
이런저런 방법이 많던데 내가 생각하기에 가장 간단한 방법은 요렇게 하는 것이다.
현재 최신 버전인 5.2.0 을 설치하려면 요렇게 하면 된다.
curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash - sudo apt-get install -y nodejs
Node 사이트에 가보면 4.2.3 LTS 버전이 있는데 고 버전을 설치하려면 요렇게 하면 된다.
curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash - sudo apt-get install -y nodejs
Node 가 설치되면 요렇게 잘 설치가 됐는지 확인해 보고
node -v
요렇게 npm 을 최신버전으로 업데이트 한다.
sudo npm install -g npm@latest
끝~
'쓸만한지식' 카테고리의 다른 글
| Xshell 로 터널링해서 회사에서 막힌 사이트 접속하기 (1) | 2015.12.29 |
|---|---|
| 크롬 개발자 도구 기능 사용하기 #2 : 이벤트 관련 기능 (1) | 2015.12.15 |
| 크롬 개발자 도구 기능 사용하기 #1 : contentEditable 설정 (1) | 2015.12.13 |
| curl 을 이용해 Linux 서버 백업을 다른 서버로 전송하기 (0) | 2015.12.07 |
| 크롬에서 인터넷 뱅킹 플러그인 설치해도 인식이 안될때 (0) | 2015.05.13 |
크롬 개발자 도구 기능 사용하기 #1 : contentEditable 설정
별로 쓰잘데기 있는 기능은 아니지만 그냥 왠지 재밋어 보여서~~
F12 를 눌러 크롬 개발자 도구를 연다음 console 탭으로 이동해
document.body.contentEditable=true
요걸 입력한다.
그러면 사이트에 있는 텍스트를 마음데로 편집할 수 있다. -.- 끝~~~
'쓸만한지식' 카테고리의 다른 글
| 크롬 개발자 도구 기능 사용하기 #2 : 이벤트 관련 기능 (1) | 2015.12.15 |
|---|---|
| Ubuntu 에 Node.js 설치하기~ (0) | 2015.12.14 |
| curl 을 이용해 Linux 서버 백업을 다른 서버로 전송하기 (0) | 2015.12.07 |
| 크롬에서 인터넷 뱅킹 플러그인 설치해도 인식이 안될때 (0) | 2015.05.13 |
| MySQL : Lost connection to MySQL server at 'reading initial communication packet', system error: 0 에러날때 (2) | 2015.02.16 |
curl 을 이용해 Linux 서버 백업을 다른 서버로 전송하기
최근 Ubuntu 서버에 있는 Mysql 과 특정 디렉토리에 있는 이미지 파일들을 다른 서버로 백업받을 수 있도록 해 달라는 부탁을 받았다.
방법이야 이것저것 많이 있겠지만 내가 알고 있으면서도 할 수 있는 가장 간단한 방법으로 잔머리를 조금 써 보았다.
쉘스크립트로 디비 백업은 mysqldump로, 특정 이미지 디렉토리에 있는 파일들은 그냥 tar 로 압축해서 curl 을 이용해서 다른 서버에 있는 웹서버로 전송하는 걸로 생각을 하고 한번 맨들어 보았다.
파일 수신쪽은 JSP 든 PHP든 뭐 편한걸로 하면 되겠지만 JSP 는 이것저것 더 셋팅이 필요하기 때문에 왠만해선 아무것도 추가 설치가 필요없는 PHP 를 사용하기로 했다.
요렇게 쉘 스크립트를 작성하고 cron 에 등록해서 원하는 일정으로 원격 백업서버로 백업할 수 있다.
Shell Script
CUR_DATE=`date '+%Y%m%d%H%M'` # 백업된 압축파일이 생성될 디렉토리 BACKUP_DIR=/home/test/backup # 백업할 디렉토리 TARGET_IMAGE_DIR=/home/backup_target_dir DATABASE_BACKUP_FILE_NAME=database_$CUR_DATE.sql IMAGE_BACKUP_FILE_NAME=images_$CUR_DATE.tar.gz BACKUP_FILE_NAME=BACKUP_$CUR_DATE.tar.gz BACKUP_SERVER_URL=http://www.backup_server.com/backup.php mkdir $BACKUP_DIR # DB BACKUP mysqldump -uroot -p루트암호 -A > $BACKUP_DIR/$DATABASE_BACKUP_FILE_NAME # 백업할 특정디렉토리 압축 tar zcvf $BACKUP_DIR/$IMAGE_BACKUP_FILE_NAME $TARGET_IMAGE_DIR cd $BACKUP_DIR tar zcvf /home/test/$BACKUP_FILE_NAME ./* # 백업서버로 업로드 cd /home/test curl -F backup_file=@$BACKUP_FILE_NAME $BACKUP_SERVER_URL # clean rm -rf $BACKUP_DIR rm -rf ~/$BACKUP_FILE_NAME
백업 서버쪽 php (backup.php)
간단하게 요정도로만
<?php
$uploaddir = '/home/stove/test/';
$uploadfile = $uploaddir . basename($_FILES['backup_file']['name']);
move_uploaded_file($_FILES['backup_file']['tmp_name'], $uploadfile);
?>
※ php 업로드 사이즈 제약으로 에러날수 있는데 php.ini 파일에 post_max_size 와 upload_max_filesize 값을 적당히 조정해 주면 된다.
'쓸만한지식' 카테고리의 다른 글
| Ubuntu 에 Node.js 설치하기~ (0) | 2015.12.14 |
|---|---|
| 크롬 개발자 도구 기능 사용하기 #1 : contentEditable 설정 (1) | 2015.12.13 |
| 크롬에서 인터넷 뱅킹 플러그인 설치해도 인식이 안될때 (0) | 2015.05.13 |
| MySQL : Lost connection to MySQL server at 'reading initial communication packet', system error: 0 에러날때 (2) | 2015.02.16 |
| 크롬 개발자 도구 창 분리하기 (2) | 2015.02.13 |
웹에서 signature_pad.js 사용해서 서명받기 예제
Signature Pad : https://github.com/szimek/signature_pad
Demo 사이트 : http://szimek.github.io/signature_pad/
요기에 가보면 어떤 머리좋고 착한 사람이 웹에서 사인을 할 수 있도록 지원해주는 js 를 맨들어 놓고 설명을 해 주고 있다.
웹에서 사인한 이미지를 php 을 사용해서 png 이미지 파일을 생성하는 예제는 있는데 Java 예제는 없어서 Java 로 하는걸 살짝 맹글어 보았다.
뭐 별건 아니고 BASE64 로 인코딩된 문자열을 다시 디코딩해서 png 파일로 맨드는것만 하면 된다.
보다 쉬운 편의를 위해서 Apache Commons 프로젝트에 있는 라이브러리 몇개(lang, io, codec)를 가져다 썼다.
maven 을 사용하는 사람들은 디펜던시에 요걸 추가해 주면 되고 아니면 그냥 commons.apache.org 에 가서 다운로드 받으면 된다.
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.10</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.4</version>
</dependency>
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>::: 사인패드 테스트 :::</title>
<script src="${pageContext.request.contextPath}/resources/js/jquery-1.11.3.min.js" type="text/javascript">
</script>
<script src="${pageContext.request.contextPath}/resources/js/signature_pad.min.js" type="text/javascript">
</script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/css.css">
</head>
<body>
<div id="signature-pad" class="m-signature-pad">
<div class="m-signature-pad--body">
<canvas></canvas>
</div>
<div class="m-signature-pad--footer">
<div class="description">사인해 주세요~</div>
<button type="button" class="button clear" data-action="clear">지우기</button>
<button type="button" class="button save" data-action="save">저장</button>
</div>
</div>
<script>
var canvas = $("#signature-pad canvas")[0];
var sign = new SignaturePad(canvas, {
minWidth: 5,
maxWidth: 10,
penColor: "rgb(66, 133, 244)"
});
$("[data-action]").on("click", function(){
if ( $(this).data("action")=="clear" ){
sign.clear();
}
else if ( $(this).data("action")=="save" ){
if (sign.isEmpty()) {
alert("사인해 주세요!!");
} else {
$.ajax({
url : "save.jsp",
method : "post",
dataType : "json",
data : {
sign : sign.toDataURL()
},
success : function(r){
alert("저장완료 : " + r.filename);
sign.clear();
},
error : function(res){
console.log(res);
}
});
}
}
});
function resizeCanvas(){
var canvas = $("#signature-pad canvas")[0];
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
}
$(window).on("resize", function(){
resizeCanvas();
});
resizeCanvas();
</script>
</body>
</html>
save.jsp
잠깐 테스트로 예제를 작성하는것이기 때문에 Controller 없이 그냥 jsp 로 맨들어 보았다.
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@page import="org.apache.commons.codec.binary.Base64"%>
<%@page import="org.apache.commons.io.FileUtils"%>
<%@page import="org.apache.commons.lang3.StringUtils"%>
<%@page import="java.io.File"%>
<%
String sign = StringUtils.split(request.getParameter("sign"), ",")[1];
String fileName = "sign"+System.currentTimeMillis()+".png";
FileUtils.writeByteArrayToFile(new File("d:\\"+fileName), Base64.decodeBase64(sign));
%>
{
"filename" : "<%= fileName %>"
}
예제 프로젝트 다운로드
JavascriptSignature.zip'Javascript' 카테고리의 다른 글
| 네이버맵 : clientId와 웹 서비스 url을 확인해주시기 바랍니다. 메시지가 나올때 (0) | 2017.02.14 |
|---|---|
| jQuery Mobile : select 박스가 안드로이드폰에서 작동하지 않을때 (0) | 2012.11.08 |
| Javascript로 문자열 중에서 ip 문자열을 배열로 추출하기 (0) | 2012.05.30 |
| Javascript 숫자에 천단위로 콤마(,) 찍기 (1) | 2011.11.29 |
| 순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기 (2) | 2011.11.14 |
maven jetty plugin 이클립스에서 디버깅하기
maven 프로젝트에서 jetty plugin 을 사용해서 개발하면 가벼운 환경에서 가볍게 개발할 수 있어서 즐겨 사용하는 편이다.
개발을 하다 문득 디버깅을 해보고 싶다는 생각이 들어 방법을 찾아보았다.
1. Run 설정하기
Main 탭 Goals 에 clean jetty:run -Djetty.port=8888 입력
뭐 jetty:run 만 입력해도 무방하다. 8080 포트를 다른게 사용하고 있어서 -Djetty.port=8888 옵션으로 8888로 바꾸었다.
2. 디버깅 관련 자바 옵션 추가하기
JRE 탭 VM arguments 에 아래 옵션을 추가해 준다.
-Xdebug -Xnoagent -Djava.compiler=NONE -Xrunjdwp:transport=dt_socket,address=8000,server=y,suspend=n
address=8000 은 원하는 포트로 바꿔줘도 무방하다.
요렇게 설정한 후 Run 버튼을 클릭해 jetty 를 실행시켜 서버를 일단 실행시켜둔다.
3. Remote Java Application 추가하기
프로젝트 익스플로러나 네비게이터에서 프로젝트를 선택하고 오른쪽 버튼 클릭 > Debug As > Debug Configurations 선택
왼쪽 트리에서 Remote Java Application 선택해서 오른쪽 버튼 클릭 New 로 새로 하나 추가해 주고 요렇게 설정해 주면 된다.
Port 는 2번 항목에서 설정한 포트로 변경해 주면된다. 2번에서 address=8000 요렇게 설정했기 때문에 포트는 8000 으로~
요렇게 설정하고 Debug 버튼을 클릭해서 디버그를 시작한다.
※ 디버그를 시작하더라도 별다른 메세지는 안뜬다.
4. 브레이크 포인트 걸어서 테스트 해보기
요렇게 브레이크 포인트를 걸어 놓고 브라우저로 index.jsp 를 호출해보면
요렇게 디버그가 잘된다~ 끝~
'이클립' 카테고리의 다른 글
| 이클립스 svn add to svn:ignore 가 비활성화 됐을때 (2) | 2017.03.07 |
|---|---|
| 이클립스 Neon 에서 git commit 할때 예전처럼 commit 창 띄워서 커밋하기 (0) | 2016.09.29 |
| Description Resource Path Location Type Can not find the tag library descriptor for "http://java.sun.com/jsp/jstl/core" 에러날때 (0) | 2014.09.19 |
| 이클립스로 github 연동하기 (egit 사용) (0) | 2014.03.07 |
| 64bit 버전 이클립 with 전자정부프레임워크 (5) | 2012.11.15 |
