'Javascript'에 해당되는 글 14건

  1. 2017.02.14 네이버맵 : clientId와 웹 서비스 url을 확인해주시기 바랍니다. 메시지가 나올때
  2. 2015.12.07 웹에서 signature_pad.js 사용해서 서명받기 예제
  3. 2012.11.08 jQuery Mobile : select 박스가 안드로이드폰에서 작동하지 않을때
  4. 2012.05.30 Javascript로 문자열 중에서 ip 문자열을 배열로 추출하기
  5. 2011.11.29 Javascript 숫자에 천단위로 콤마(,) 찍기 1

네이버맵 : clientId와 웹 서비스 url을 확인해주시기 바랍니다. 메시지가 나올때

Javascript 2017. 2. 14. 15:36


문득 지도가 잘 안되는것 같기도 해서 간만에 네이버 오픈 api 사이트에 가보니 기존에 쓰던 key 방식 대신에 clientId 방식으로 바꾸라고 그래서 한번 바꿔 보았다.


기존에 등록해서 썼던 key 들은 어데 갔는지 잘 못찾겠고 뭔 애플리케이션을 등록하라길래 등록하고 지도 api를 사용할 web url을 입력하고 clientId를 발급받았다.


기존과는 다르게 사용할 url을 여러개 입력할수 있길래 개발서버 ip, 내 로컬서버 ip, 운영서버 도메인 요렇게 싹 등록하고 발급받은 다음에


지도 api 로드하는 js 를 https://openapi.map.naver.com/openapi/v2/maps.js?clientId=xxxxxxx 요렇게 바꿧다.(기존에 지도api 2.0버전을 사용하고 있었기 때문에)


시키는 데로 쪽바로 따라했지만 clientId와 웹 서비스 url을 확인해주시기 바랍니다. 이런 메시지가 자꾸 뜬다.


네이버 개발자센터 포럼이랑 구글에서 검색해 봤지만 URL 형태를 쪽바로 넣으시오! 라는 대답밖에 없었다.


나는 분명히 URL 을 쪽바로 입력했는데... 살살 짜증이 났다.


오만 이상한 URL 로 바꿔가면서 쌩난리를 쳐봤지만 안되서, 그냥 문득 뜬금없이 애플리케이션을 등록할때 입력했던 로컬, 개발, 운영 URL을 싹 지우고 하나만 입력하고 다시 해보니 문득 또 뜬금없이 잘 됐다. -.-



결론은 애플리케이션 웹 서비스 URL 을 하나만 등록해서 해결했다는 것이다.


그냥 마음편하게 개발서버용, 로컬서버용, 운영서버용 애플리케이션을 따로 등록해서 clientId 를 각각 따로 발급받아서 써야 한다~ 끝~

저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

웹에서 signature_pad.js 사용해서 서명받기 예제  (0) 2015.12.07
jQuery Mobile : select 박스가 안드로이드폰에서 작동하지 않을때  (0) 2012.11.08
Javascript로 문자열 중에서 ip 문자열을 배열로 추출하기  (0) 2012.05.30
Javascript 숫자에 천단위로 콤마(,) 찍기  (1) 2011.11.29
순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기  (2) 2011.11.14
Posted by 스토브

웹에서 signature_pad.js 사용해서 서명받기 예제

Javascript 2015. 12. 7. 16:11



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 에 가서 다운로드 받으면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<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 로 맨들어 보았다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%@ 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
Posted by 스토브

jQuery Mobile : select 박스가 안드로이드폰에서 작동하지 않을때

Javascript 2012. 11. 8. 14:13


보통 개발할때 굳이 모바일 기기에서 테스트를 많이 안하고 개발을 해서 이런 오류가 있는줄은 몰랐다.


막상 실제 모바일웹으로 올린 후 직접 안드로이드 폰을 이용해서 이것저것 해보니 안드로이드 ICS 와 아이폰에서는 셀렉트박스가


잘 작동했는데 진저브레드 안드로이드 폰에서는 셀렉트 박스를 눌러도 작동을 하지 않았다 -_-



이유를 알아보니 전혀 예상하지 못했던 HTML 쪽 때문에 오류가 발생했던 것이였다 -.-


jQuery Mobile 을 적용할때 HTML 코드는

1
2
3
4
5
6
7
8
9
10
<html>
    <head>
        .....
    </head>
    <body>
        <div data-role="page">
            ...
        </div>
    </body>
</html>

요런식으로 body 태그 바로 아래 <div data-role="page"> 가 위치해야 한다.



기존 셀렉트 박스가 작동안했던 코드는 요랬다 -_-

1
2
3
4
5
6
7
8
9
10
11
12
<html>
    <head>
        .....
    </head>
    <body>
        <div class="wrap">
            <div data-role="page">
                ...
            </div>
        </div>
    </body>
</html>

위 코드 처럼 body 태그의 child 로 다른게 얼쩡거리면 아마 셀렉트 박스가 안될것이다. 진저브레드에서 -,-

저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

네이버맵 : clientId와 웹 서비스 url을 확인해주시기 바랍니다. 메시지가 나올때  (0) 2017.02.14
웹에서 signature_pad.js 사용해서 서명받기 예제  (0) 2015.12.07
Javascript로 문자열 중에서 ip 문자열을 배열로 추출하기  (0) 2012.05.30
Javascript 숫자에 천단위로 콤마(,) 찍기  (1) 2011.11.29
순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기  (2) 2011.11.14
Posted by 스토브

Javascript로 문자열 중에서 ip 문자열을 배열로 추출하기

Javascript 2012. 5. 30. 19:10



문자열이 쪽 있으면 그 문자열에서 IP 에 해당하는 문자열 부분들을 찾아내서 배열로 얻고 싶을때는 요렇게~


응용해서 정규표현식만 원하는 패턴으로 바꿔주면 정규표현식에 해당하는 패턴을 배열로 쪽 뽑아낼 수 있다.


1
2
3
4
var pattern = /((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){3}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})/g;
 
// ["19.22.2.255", "219.22.2.253", "219.22.2.251"]
var ipList = "19.22.2.255@219.22.2.253 219.22.2.251".match(pattern);


여기서 한발짝 더 뿍 나가

String 객체의 prototype 에다 함수를 추가시켜 쓰면 쪼매더 간지나 보인다.


공통으로 땡겨다 쓰는 js 파일에다 요렇게 String prototype 을 추가하고

1
2
3
4
5
String.prototype.getIP = function() {
    var pattern = /((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){3}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})/g;
 
    return this.match(pattern);
};


아무데서나 요렇게 쓰면 위와 똑같은 결과를 쫌더 간지나게 얻을 수 있다.

1
2
// ["19.22.2.255", "219.22.2.253", "219.22.2.251"]
var ipList = "19.22.2.255@219.22.2.253 219.22.2.251".getIP();
저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

웹에서 signature_pad.js 사용해서 서명받기 예제  (0) 2015.12.07
jQuery Mobile : select 박스가 안드로이드폰에서 작동하지 않을때  (0) 2012.11.08
Javascript 숫자에 천단위로 콤마(,) 찍기  (1) 2011.11.29
순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기  (2) 2011.11.14
javascript Array 에 protoype으로 remove 함수 추가하기  (2) 2011.11.09
Posted by 스토브

Javascript 숫자에 천단위로 콤마(,) 찍기

Javascript 2011. 11. 29. 15:49

자바스크립트 Number, String 클래스의 prototype 에 format() 라는 함수를 추가시키면 어디에서든지 간단하게 숫자에다 천단위로 콤마를 찍을 수 있다.



솟스코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 숫자 타입에서 쓸 수 있도록 format() 함수 추가
Number.prototype.format = function(){
    if(this==0) return 0;
 
    var reg = /(^[+-]?\d+)(\d{3})/;
    var n = (this + '');
 
    while (reg.test(n)) n = n.replace(reg, '$1' + ',' + '$2');
 
    return n;
};
 
// 문자열 타입에서 쓸 수 있도록 format() 함수 추가
String.prototype.format = function(){
    var num = parseFloat(this);
    if( isNaN(num) ) return "0";
 
    return num.format();
};
 
 
 
// 숫자 타입 test
var num = 123456.012;
console.log(num.format());               // 123,456.012
 
num = 13546745;
console.log(num.format());               // 13,546,745
 
// 문자열 타입 test
console.log("12348".format());           // 12,348
console.log("12348.6456".format());      // 12,348.6456



자바스크립트의 프로토타입을 가지고 쪼물락 거리면 재미진걸 많이 할 수 있는것 같다.

2011/11/01 - [Javascript] - Javascript 문자열 바이트수 가져오기(byteLength)

2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2

2011/11/14 - [Javascript] - 순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기

2011/11/15 - [Javascript 예제] - jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제

2011/11/18 - [Javascript 예제] - jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기

2011/11/18 - [jQuery Plugin] - 자작 훌러그인 : jQuery shortcut v0.1 (웹페이지에 단축키 기능을 넣자)

2011/11/24 - [Javascript 예제] - jQuery 로 원하는 갯수만큼 checkbox 선택하기


저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

jQuery Mobile : select 박스가 안드로이드폰에서 작동하지 않을때  (0) 2012.11.08
Javascript로 문자열 중에서 ip 문자열을 배열로 추출하기  (0) 2012.05.30
순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기  (2) 2011.11.14
javascript Array 에 protoype으로 remove 함수 추가하기  (2) 2011.11.09
javascript 로 PC에서 접속했는지 모바일 기기에서 접속했는지 체크하기  (6) 2011.11.07
Posted by 스토브
prev 1 2 3 next
openclose

Article Category

분류 전체보기 (223)
이클립 (28)
maven (9)
Spring (7)
Java (26)
mybatis (8)
jQuery Plugi.. (8)
Javascript (14)
Javascript 예.. (12)
CSS (2)
잡다구리 샘플 (4)
쓸만한지식 (81)
Ubuntu serve.. (22)
쇼핑물건 평가 (1)

Recent Article

티스토리툴바