jquery QRcode


오늘은 QR코드를 만들어 볼려고 합니다. 바코드 자체도 훌륭하지만 보통 숫자만 쓸 수 있고
영어까지 포함한 바코드 체계를 쓰면 양 옆으로 너무 길어지는 형상이 있습니다.
그래서 나온게 3차원 바코드 QR코드죠 7089글자가 인식 가능하니 사실상
현재로는 가능한 충분한 데이터를 그 작은 네모안에 표현할 수 있습니다. 



그래서 오늘은 QR코드를 jquery로 만드는 방법을 알아보려고 합니다.

▼개발자 사이트는 아래와 같습니다.

우리 익스프레스 강의를 들어온 개발자 분들에게
간단한 예제릴 만들어 봤습니다.

▼ 아래 파일을 모두 다운로드 해서 gocoder_qrcode.html를 실행시켜보면 됩니다.

▼ 소스는 아래와 같습니다. qrcode()라는 놈을 잘 활용하면 될거 같습니다. 

<html>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.js"></script>
<script type="text/javascript" src="qrcode.js"></script>

<div id="gcDiv"></div>

<script>
    jQuery("#gcDiv").qrcode({   //qrcode 시작
        render "table",      //table, canvas 형식 두 종류가 있다. 
        width 100,            //넓이 조절
        height 100,           //높이 조절
        text   "http://gocoder.tistory.com/"     //QR코드에 실릴 문자열
    });
</script>

</body>
</html>

▼ 결과물은 아래와 같습니다.






마무리


QR코드는 정말 혁명이 아닌가 싶습니다.


댓글을 달아 주세요



검색 가능한 select 박스 


셀렉트 박스의 옵션이 많아지면 스크롤 길이도 어마 어마 하고 불편합니다.
오름순으로 정렬 하여 데이터를 나열하면 되지만.
우리의 클라이언트들은 참을성이 많지가 않습니다.



그래서 오늘은 아주 쓸만한 컴포넌트를 준비했습니다.
select2 라는 jquery 플러그인이다.
아래 홈페이지에서 자세한 정보를 찾아보자.

하지만 익스프레스하게 알려드리기 위해
아주 기초적이고 간단하게 코딩을 해보았습니다.

▼우선 아래처럼
select2.css , select2.js를 참조 시키자 그리고 jquery는 기본
1
2
<link href="select2.css" rel="stylesheet"/>
<script src="select2.js"></script>
cs

▼참고로 jquery 참조 URL은 외웁시다.
1
<script src="http://code.jquery.com/jquery.min.js"></script>
cs

http://code.jquery.com/jquery.min.js
http://code.jquery.com/jquery.min.js
http://code.jquery.com/jquery.min.js

이렇게 3번 쓰면 외워집니다.

▼해당 선택자의 .select2();를 붙이면 작동합니다.
1
2
3
4
5
<script>
    $(document).ready(function () {
        $("#ee").select2();
    });
</script>
cs

▼소스의 합은 이렇습니다. 가장 기본적으로 알아보기 쉽게 만들어보았습니다.
<script src="http://code.jquery.com/jquery.min.js"></script>

<head>
    <link href="select2.css" rel="stylesheet"/>
    <script src="select2.js"></script>
    <script>
        $(document).ready(function () {
            $("#ee").select2();
        });
    </script>
</head>
<body>
<select id="ee">
    <option value="">서태지</option>
    <option value="">양현석</option>
    <option value="">이주노</option>
</select>
</body>

▼첨부파일을 한폴더에 풀고 실행해보세요


▼클릭하면 셀렉트 박스이고 검색할 수 있는 검색창이 있네요







마무리



플러그인을 잘 사용하는 개발자가 됩시다.


댓글을 달아 주세요



자바스크립트로 아이폰 체크하기 


이젠 아이폰 점유율이 절반 가까운 이 시점에
윈도우와  안드로이드만을 두고 개발하는 시대가 끝난거 같습니다.

간단한 예로 어플도 아이폰과 안드로이드 두개를 만들어놓고
접속하는 기기단말을 보고 분기하여

안드로이드일땐 플레이 스토어 어플로
아이폰일땐 아이툰즈 어플로 링크를 보내줘야 할것 입니다.

그래서 오늘은 이 체크하는 방법을 아래처럼 다뤄봤다.


navigator : 브라우저 전반에 걸친 정보를 제공하는 객체이다.
platform  : 브라우저를 실행하는 플랫폼 (기기) 가 무엇인지 말해준다.




아래처럼 아주 간단하게 코딩이 완성 되었습니다.
그밖에도 navigator 객체를 이용하여 클라이언트의 접속 환경을 알아낼 수 있습니다.


<script>
    var UserAgent navigator.platform//하드웨어 플랫폼

    if (UserAgent.match(/i(Phone|Pod)/i!= null ){
        //아이폰 or 아이패드이면
    else{
        //나머지 대부분 안드로이드와 윈도우 겠죠
    }
</script>




마무리


아이폰? 안드로이드? 하나만 씁시다


댓글을 달아 주세요



자바스크립트로 바코드 만들기


간단하게 스크립트로 바코드를 만들수 있는 방법이다.

▼해당 사이트를 참조하였다. 


▼아래는 해당 URL을 보고 만든 샘플 아래 소스를 갖다 써도 되고 
아래 파일을 다운받아 한폴더에서 실행하면 충분한 레퍼런스가 될거라 생각됩니다.

<html>
<
head>
    <
script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <
script type="text/javascript" src="jquery-barcode.js"></script>
</
head>
<
body>

<
div id="bcTarget"></div>
</
body>

<
script type="text/javascript">
   
$("#bcTarget").barcode("1234567890128", "codabar");

   
//    바코드 타입    
   
//    codabar
    //    code11 (code 11)
    //    code39 (code 39)
    //    code93 (code 93)
    //    code128 (code 128)
    //    ean8 (ean 8)
    //    ean13 (ean 13)
    //    std25 (standard 2 of 5 - industrial 2 of 5)
    //    int25 (interleaved 2 of 5)
    //    msi
    //    datamatrix (ASCII + extended)
</script>

</html>



프론트에서 처리 가능하는 방법으로 
바코드 사용시 가장 추천하는 방법이다. 



+고코더 추천강의



+폰트를 등록해 바코드로 만들어 보세요.
-> http://gocoder.tistory.com/84



+jQuery로 QRcode를 만들어보세요.
-> http://gocoder.tistory.com/86






마무리


javascript가 이제 모든걸 대체 할 것 입니다.





댓글을 달아 주세요

  • 질문매니아 2017.12.01 14:59  댓글주소  수정/삭제  댓글쓰기

    안녕하세요.
    게시글 너무 잘읽었습니다.
    하나 궁금한점이 생겨 댓글 남깁니다.
    제가 위에 올리신 소스를 사용하여 바코드 생성 후 스캐너로 읽으면 앞뒤에 A라는 글자가 붙던데
    이것을 지울 방법을 소스를 봐도 잘 모르겠네요...

    혹시 도움이 주실 수 있다면 너무 감사하겠습니다.^^

    • Favicon of https://gocoder.tistory.com 고코더 2017.12.01 15:13 신고  댓글주소  수정/삭제

      안녕하세요 개발자님^^
      문의하신 내용으로 검수 한 결과
      제가 올린 예제에 A가 붙을 수 없습니다.codabar는 숫자만 바코드를 표출하거든요 ㅠ

      제 예제에서
      A가 붙을수 있는 바코드 타입은
      code39 (code 39)
      code93 (code 93)
      code128 (code 128)
      이렇습니다.

      혹시 갖고 계신 리더기가 지원하는 코드 체계와 현재 개발하신 바코드 타입이 상이한건 아니신지 궁금하네요^^
      제가 주석으로 처리한 타입으로
      읽혀 보시면서 테스트 해보세요!

  • 질문매니아 2017.12.01 15:40  댓글주소  수정/삭제  댓글쓰기

    codabar는 어떤한 문제인지.. 계속 해서 A가 붙길래 다른 타입으로 변경하여 사용합니다.
    친절한 답변 너무 감사합니다.

    2017년 마무리 잘하세요^^



셀렉트 박스의 옵션 값과 텍스트 값 가져오기


셀렉트 박스를 다룰 때 간단하지만 자주 찾고 자주 까먹는 방법입니다.

options[target.selectedIndex].text  : 셀렉트 박스 옵션 사이에 있는 텍스트 값을 가져온다
options[target.selectedIndex].value : 셀렉트 박스 value 의 값을 가져온다.




▼ 아래처럼 하면은 셀렉트박스의 text 값과 value 값을 가져오는 방법이 됩니다.
<html>
<
body>
<
select name="selectBox" id="selectBox">
    <
option value="" selected>A</option>
    <
option value="">B</option>
    <
option value="">C</option>
</
select>
</
body>

<
script type="text/javascript">
   
var target = document.getElementById("selectBox");
    alert
('선택된 옵션 text =' + target.options[target.selectedIndex].text);     // 옵션 text
       
alert('선택된 옵션 value =' + target.options[target.selectedIndex].value);     // 옵션 value

</script>

</html>

▼ 예제 화면 





+고코더의 추천 강의


▼ select박스도 검색되게 해보세요!

-> http://gocoder.tistory.com/67?category=708022






마무리


셀렉트 박스의 option 값 말고도 text값을 이용해서 다양하게 프로그램을 만드셔도 좋은 방법입니다.

물런 필요하다면요.






















댓글을 달아 주세요



셀렉트 박스 값 변경하지 못하게 하기  (readonly)


select박스는 알다시피 readonly가 먹지가 않습니다.
그렇다고 disabled 를 하면 post로 넘어온 값을 받을 수 없습니다.
disabled로 인해 얼어 버린 select 박스는 고객 입장에서는 문제가 생겼나라는 생각이 듭니다.

그래서 오늘은 select box의 readonly 효과를 흉내내는 방법을 구현해봤다.

▼아래와 같이 onFocus와 onChange를 이용해
Readonly 와 같은 효과를 낼 수 있다.
<html>
<body>
<select onFocus='this.initialSelect this.selectedIndex;onChange='this.selectedIndex this.initialSelect; >
   <option 1</option>
   <option 2</option>
   <option 3</option>
</select>
</body>
</html>




▼다른 값을 선택한다고 해도 최초의 selected 된것을 하면 기존의 값 그대로 다시 선택 된다.



마무리


가을이네요^^ 취미가 있으신가요? 일도 좋지만 재밌어 하는것에도 미쳐보세요 



댓글을 달아 주세요



패커로 자바스크립트 암호화, 압축하기


 .js는 공개되어 있다. HTML을 동적으로 만들어주는 역할을 하는 프론트 언어이기 때문입니다. 
공개 되어 있다는건 노출되어 있고 누구나 열어 볼 수 있습니다. 보안의 취약점을 만들어 낼 수 있습니다. 



딘 에드워드라는 사람이 개발한 자바크립트 압축 프로그램입니다.

큰 기업에서는 이런 컴포넌트를 직접 개발해 쓰겠고 nodejs로 압축하겠지만
소기업이나 개인에게는 이렇게 무료로 제공되는 모듈이 효율적일 수 있겠습니다.

사용법은 아주 간단합니다.
체크하면 해당에 맞게 자바스크립트가 화면에서 바로 저런식으로 output이 됩니다.

 Base62 encode : 암호화 
- 자바스크립트를 확인 할 수 없게 암호화 합니다.

 Shrink variables : 압축
- 공백등을 제거해 압축합니다. 




사용하는데 주의사항

  1.  세미콜론을 잘 찍어줘야 한다. -> ; 
    - 암호화,압축후 오류가 난다면 세미콜론 문제일 경우가 많습니다. 문자열을 한줄로 나열하기 때문입니다.
  2. p,a,c,k,e,r 라는 시작 문자열이 찍혀 있다. 즉 모듈을 사용했다는걸 명시되어 있다. 
    - 큰 기업일 경우 개인 프로그래머의 모듈을 사용하는건 신뢰가 떨어질 수 있다.
    - 해당 packer 명명을 따라 해커들이 공격할 수도 있지 않을까?
  3. 원본을 잘보관해야 한다.
    - 프로젝트시 압축하기전 원본을 따로 보관해야 변경이 가능합니다. 


마무리

요즘 추세는  HTML에 자바스크립트로 XML을 파싱하여 프론트를 구성하는 것 이다.
보안을 위해서 경량화를 위해서 스크립트를 압축하여 사이트를 운영 하는걸 추천! 





댓글을 달아 주세요