캐쉬 비우기 및 강력 새로고침


프론트 엔드를 개발하다보면
 "캐시"가  지워지지 않아서 참 귀찮을 때가 많습니다.

크롬에서 그럴땐 보통
Ctrl + Shift + Delete 를 눌러서 
캐시를 삭제하는 경우가 많습니다.



▼아래 화면처럼 삭제하는 방법은 사실 조금 귀찮습니다.



그래서 오늘은 새로고침시 바로 캐시를 지우는 방법을 알아보겠습니다.
사실 방법은 간단합니다.
크롬에서 F12를 눌러 개발자 모드를 실행 한후에

새로고침 버튼위에서 마우스 오른쪾 버튼을 눌러보자
그럼 평소에 보이자 않는 버튼이 생기게 됩니다.

▼아래 버튼으로 새로고침을 하면 아까 설정에서 캐쉬를 지우는 방법을 먼저 선행하고 새로고침을 합니다.




프론트엔드 개발자나 퍼블리셔에게 아주 좋은 방법이다.



마무리

크롬은 완벽한 도구네요




댓글을 달아 주세요




테이블 데이터 정렬


화면에 보이는 데이터를 정렬 하고 싶을때가 있습니다.
(혹은 그런 기획이 오면 해야죠)

▼엑셀에 사용하는 그 기능 처럼요




하지만 웹에서는 DB에 order by 명령어를 받아
새로고침 하여 뿌리는 경우가 많아  느리기도 하고
굳이 서버를 다녀와야 할까 싶죠

그럴때 사용할수 있는 플로그인을 하나 소개 하겠습니다.

▼해당 사이트에 tabersorter 라는 플로그인
http://tablesorter.com/

오늘은 해당 사이트에 나와 있는 내용을 익스프레스하게 압축하여 설명해보겠습니다.
Jquery로 테이블에 있는 데이터를 거침없이 정렬 해봅시다.

▼jQuery와 tablesorter를 참조한다.
  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.tablesorter.min.js"></script>


▼적용 하고 싶은 Table 속성에 .tablesorter() 추가한다.
   $(document).ready(function(){
      $("#gcTable").tablesorter();
   });

▼테이블에 속성은 아래와 같습니다. 
<table >
   <thead>
   <tr>
      <th></th>
   </tr>
   </thead>
   <tbody>
    <tr>
        <td></td>
    </tr>
   </tbody>
</table>
       

▼그리고 아래가 소스의 합

<head>
   <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
   <script type="text/javascript" src="jquery.tablesorter.min.js"></script>
   <link rel="stylesheet" href="blue_style.css" type="text/css">
   <link rel="stylesheet" href="green_style.css" type="text/css">

</head>
<script type="text/javascript">
<!--
   $(document).ready(function(){ 
      $("#gcTable").tablesorter();
   });
//-->
</script>

<table id="gcTable" class="tablesorter">
   <thead>
   <tr>
      <th>이름</th>
      <th>나이</th>
   </tr>
   </thead>
   <tbody>
    <tr>
        <td>홍길동</td>
        <td>21</td>
    </tr>
    <tr>
        <td>사임당</td>
        <td>40</td>
    </tr>
    <tr>
        <td>이이</td>
        <td>90</td>
    </tr>
    <tr>
        <td>이도</td>
        <td>50</td>
    </tr>
    <tr>
        <td>이황</td>
        <td>80</td>
    </tr>
    <tr>
        <td>이순신</td>
        <td>54</td>
    </tr>
    <tr>
        <td>고코더</td>
        <td>88</td>
    </tr>
    <tr>
        <td>개발자</td>
        <td>9</td>
    </tr>
   </tbody>
</table>



▼압축파을일 열어 Gc.html을 열어보세요


▼압축파을일 열어 Gc.html을 열어보세요
아래와 같이 이용 가능합니다.




마무리

플로그인의 의존한다고 생각하지마세요. 
스스로 플로그인을 잘써야 만들수도 있습니다.




댓글을 달아 주세요



Notepad File encoding


홈에디터 플러스 무한사랑으로 지난 번 파일인코딩 변환 강의를 올렸는데
메모장으로는 변경하는 법을 묻는 개발자님이 계셔서 메모장 버전도 남겨드립니다.
사실 워낙 친숙하게 사용하고 있지만 
나름 인코딩 하는 법이 숨겨져 있습니다. 

오늘은 한번 메모장을 열어봅시다.


▼윈도우키를 누르거나 시작버튼을 눌러 notepad 라고 입력해보세요.
그럼 메모장이검색 됩니다. 한글로 메모장이라고 입력하셔도 문제 없습니다.



▼해당 하는 파일을 열기 하신 후 이번엔 
파일->다른 이름으로 저장을 눌러봅시다.
빠른 단축키는 ALT를 누른 상태에서 S,A를 차례대로 입력합니다.


▼그리고 다른으로 저장하려고 할때 인코딩을 지정하는 화면이 저장 옆에 있습니다.
보통 파일을 열고 저장을 하면 인코등 그대로 저장하지만 다른이름으로 저장시에만
메모장은 인코딩을 변경할 수 있습니다. 일반 사용자도 쓰는 메모장이니 당연한 방법이겠죠



▼ 저장을 누르면 중복 여부를 묻습니다. 예를 눌러주세요.
저희는 인코딩을 바꾸니 그대로 덮어 쓰는게 맞겠네요



▼ 이번에는 다시 위에 방법을 다시 해보면 인코딩이 UTF-8로 변해 있는걸 확인 할 수 있습니다.





+고코더의 추천강의

+EditPlus 에서 파일 encoding을 변경해보세요 






마무리

메모장 말고 에디터 플러스가 기본 메모장이었으면 좋겠네요^^


댓글을 달아 주세요



barcode font 사용하기


오늘은 바코드를 폰트로 등록하여 사용하는 방법을 알아보자.
폰트가 바코드가 무슨 상관이냐고 물음표를 그린 분이 있겠지만

바코드도 하나의 폰트입니다.
고딕,굴림체와 같은 폰트중에 하나로 그 모양세가 
나름의 규격으로 인해 유니크한 모양으로 보이는 것 이지요.
여러 컴포넌트로 바코드를 만들 수 있지만



오늘은 폰트를 등록해 바코드를 만들어 봅시다.

▼ 아래 사이트 가서 네모친 부분을 폰트를 클릭하여 다운로드 해보자.


▼ 다운로드 받은 파일을 풀어보면 해당처럼 나타난다. 이중에
BarcodeFont.ttf 를 더블 클릭해보자.


▼ 그럼 폰트 설치 화면이 나오고 설치 버튼을 클릭해보자.


▼ 자동으로 설치가 끝났다. 


▼ 설치가 완료되면 editplus를 열어서 숫자를 쓰고 폰트를 barcode font 로 변경해보자.


▼ 폰트를 바꾸면 바코드 모양으로 바뀐다. 다시말하면 바코드를 폰트 하나로 바라보고 표시하는 방법이다.


▼ 이번에는 메모장으로 꿔보자 역시 같은 방법으로 한다음 폰트를 바꾸면


▼역시나 바코드 형태로 바뀐다. 


운영하는 사이트에 바코드가 자유롭게 표시되기 원한다면 폰트를 서버에 설치한다.
그리고 프론트 단에서 바코드로 표시해야 하는부분을 해당 폰트로 노출하면
자유롭게 바코드를 사용할 수 있습니다.

하.지.만 이 방법보단 jQuery로 바코드를 만들어 사용하는 편이 훨씬 여러뭐로 용이합니다.^^





+고코더의 추천 강의

jQuery로 바코드를 만들어보세요




마무리

이제 사실 QR코드의 시대죠. QR코드 강의를 준비해야겠네요


댓글을 달아 주세요



 PHPstrom , Webstorm portable install


PHP스톰 쓰면서 이클립스에 비해  가장 아쉬운건 포터블 형태가 아닌것이다.
A, B라는 프로젝트를 동시에 진행 한다면 이클립스의 경우
A프로젝트의 셋팅 해놓은 이클립스와
B프로젝트의 셋팅 해놓은 이클립스를 다른 파일로 실행함으로써
작업 내역을 계속 이어 나갈 수 있다는 특징이 있다.

그런데 jetBrain IDE들은 알다시피 설치버전이라 editplus 처럼 하나만 설치가 가능하다.
PHP 프로젝트를 두개를 맡고 있다면 매번 폴더를 오픈해야 한다. 불편하다.



그래서 오늘은 PHPstrom , Webstorm 이 IDE를 포터블로 만드는 방법을 알아보자.

우선 먼저 써놓은 PHP스톰 강의를 보고 와도 좋을 것이다.http://gocoder.tistory.com/45

우선 최신버전 Storm을 받자 PHPstrom , Webstorm두개다 포터블로 만드는 방법은 같으니 
PHP스톰으로 예시를 들어보겠다.

▼우선 아래 URL에 가서 최신버전을 다운로드 하자



▼그 다음 받은 EXE 파일을 마우스 오른쪽을 눌러 반디집으로 열기로 눌러보자 
이전 강의에서도 말씀드렸다시피 개발자면 반디집을 쓰는 걸 추천!



▼그럼 마치 압축파일 처럼 보일것이다. 해당 이미지에 화살친 부분을 잡고 원하는 폴더로 드래그 드롭 하면 압축이 풀린다.


▼그다음 Bin 폴더에 접근해서 idea.properties 파일을 메모장이나 editPlus로 열어보자




▼해당 네모친곳을 이렇게 바꿔보자 ${user.home} -> ${idea.home}
설정 내용들을 OS 사용자 계정에 등록하는게 아니라 각 폴더에 등록하겠다는 말이다.



▼그리고 앞에 있는 주석을 제거 해보자 최종 모습은 아래와 같다.



▼그리고 다시 bin폴더에서 phpstorm64.exe 를 클릭하여 프로그램을 실행해보자.



▼설정부터 묻는 화면이 나온다 마치 처음 설치 했던 거처럼!!!!





이렇게 하면 이제 포터블한 IDE이기 때문에 프로젝트마다 하나의 스톰을 사용할 수 있다.
그리고 프로그램을 여러개를 실행할 수도 있다.
마치 이클립스 처럼 사용할 수 있다는 말이다.

참고로 추가 팁!!
해당 포터블 버전으로 사용하면 
인증 없이 무료 사용 30일마다 새로 압축을 풀어 오늘 배운 설정을 셋팅 하면
포터블로 계속 쓸수 있다.~~



마무리

jetBrains 가 IDE를 통합 할 것으로 생각 듭니다. 닷넷 IDE까지 나온거 보니 거침 없는 행보로 보입니다.


댓글을 달아 주세요



.DB 데이터 수정 할 수 있는 포터블 프로그램


sqllite 즉 파일 DB 를 수정할 필요가 있을때가 있다. 
다양한 방법이 있지만 그중에 
SQLiteman을 이용해서 수정하는 방법을 안내하려고 한다.

해당 링크를 따라가보자 

▼해당 화면에서 보이는 다운로드 버튼을 클릭하자



▼다운로드 했다면 그냥 단순하게 압축을 풀어보자 아래와 같이 파일들이 나오는데
여기서 아이콘이 있는 .exe를 클릭하면 된다.



▼클릭하면 해당 처럼 UI가 보이고 file->open을 눌러 .db를 선택해서 오픈해보자. 


▼클릭하면 해당 처럼 UI가 보이고 file->open을 눌러 .db를 선택해서 오픈해보자.
이제 해당 화면에서 SQL문을 날려서 사용하면 된다.
편의 기능은 거의 없다 시피 하니 포터블한 파일로 저장해놓고 가끔식 필요할때마다 사용하면 될거 같다!





마무리

저는 한번뿐이 파일DB를 안써봤지만 때에 따라 사용 가능하게 되니
한번 써보고 경험만 익혀두면 좋을거 같습니다.




'IT_Developers > SQLite' 카테고리의 다른 글

프로그램 - .db 수정을 위한 SQLiteman 설치하기  (0) 2017.11.28

댓글을 달아 주세요



MSSQL 0을 Null로 반환하여 isnull로 처리하기


MSSQL 에서 0으로 나눌시에는 오류가 발생한다. 0으로 숫자를 나눈건 로직이 잘못됐거나 모델링 잘못된 것이다.
하지만 .. 사람 맘 같이 세상이 움직이겠는가..
결국은 숫자가 꼬이고 꼬이면 0으로 나누고 결국 오류가 발생할것이다.
오늘은 그래서 MSSQL에서 0으로 나누기 오류를 대비하는 법을 배워보겠다.

우선 아래처럼 쿼리를 MSSQL매니저먼트에서 실행해보자
 SELECT 1000 / 0   



▼ 당연히 오류가 발생하였다. 수학에선 0으로 숫자를 나눌수 없다. 



이번엔 이 쿼리를 실행해보자
SET ANSI_WARNINGS OFF
SET ARITHIGNORE ON
SET ARITHABORT OFF
select 100 / 0

▼ 아래처럼 NULL 이 반환 됐다. (오류만 발생안했을 뿐이지 결국 오류이지만)



해당 옵션과 함께 isnull을 사용하면
SET ANSI_WARNINGS OFF
SET ARITHIGNORE ON
SET ARITHABORT OFF
select ISNULL(100 / 0,0)

▼ 가장 올바른 값이 표출 되었다. 
오류를 피해갈 수 있었다가 맞겠네요






+고코더의 추천강의


프로시저에서 오류를 캐치하기 RAISERROR 예제를 배워보세요

-> http://gocoder.tistory.com/34?category=701232



마무리


0으로 숫자를 나누지 않게 프로시져를 개발 하는게 정답입니다.


댓글을 달아 주세요



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


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

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


▼아래는 해당 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값을 이용해서 다양하게 프로그램을 만드셔도 좋은 방법입니다.

물런 필요하다면요.






















댓글을 달아 주세요



 WNMP로 Nginx와 PHP 마리아DB 사용하기


  1. 설치 
XAMPP 로 아파치와 PHP를 실행시켜봤다면
최근에 많이 쓰이는 Nginx와 PHP를 Wnmp라는 프로그램으로 실행해보겠습니다.

▼해당 웹사이트 접속후에 프로그램을 다운로드 (가끔 접속이 안됩니다..)



▼ 혹 해당 사이트에서 

https://sourceforge.net/projects/wnmp-env/


▼ 사이트들이 원활하지 않다면 첨부파일을 다운받아 설치하세요.

Wnmp-3.1.0.zip

Wnmp-3.1.0.z01

Wnmp-3.1.0.z02

Wnmp-3.1.0.z03

Wnmp-3.1.0.z04

Wnmp-3.1.0.z05



설치 후 실행 후 모습 XAMPP와 같은  UI다 각 start만 눌러주면 알아서 연동 후 실행됩니다.

 


  1. Nginx 설정         
     ▼엔진엑스의 간단한 설정을 해보겠습니다.
Configuration에서 nginx.conf를 실행      
     



       ▼대략 40번째 줄에 root 부분에 PHP 작업 폴더를 지정한다.
        대략 41번째 줄에 root 파일을 지정합니다.
    ## Root and index files.
    root D:/프로젝트폴더;     
    index  index.php index.html index.htm;

▼그리고 html에 PHP소스로 인식하기 위해서는 
대략 60번째줄에 location 부분을 아래처럼 바꿉니다.   
        ## Regular PHP processing.
        location ~ \.(php|html|htm)$ {     
            try_files  $uri =404;
            fastcgi_pass   php_processes;
            fastcgi_index  index.php;
            fastcgi_param  SCRIPT_FILENAME    $document_root$fastcgi_script_name;
            include        fastcgi_params;
        }

  1. 마리아DB설정

    마리아 DB의 초기 셋팅 정보는 이와 같습니다.
    username: root
    password: password

    해당 opeon MaraiDB Shell을 눌러 쉘에 접속해보자 

    접속해서 password 라는 비번을 입력해 접속 
    후에 아래처럼 맛보기로 입력해보자 (마리아DB가 잘 작동하는지만 확인)
--// user 보기
use mysql;
select user from user;



4.테스트 

     localhost로 접속해보자 php기반에 nginx가 실행된걸 확인하였습니다. 
     각 프로그램을 설치 후 운영하는것보다 이런식으로 GUI를 제공하는 프로그램이 나을것입니다. 
     




마무리

Nginx를 따로 다운받아 PHP와 연동하여 쓰다가 익스프레스 강의에 어울리도록 
빠르고 쉽게 사용할 방법을 찾아보다 렇게 친절한 프로그램을 발견하였습니다.
각 업무 현장에서 Nginx로 셋팅하여 개발해야 하는 분들은 애용하면 좋을거 같습니다.



댓글을 달아 주세요