이미지 출처: QZ Tray

📘 QZ Tray 버전 선택 가이드

1. 시작하며

• QZ Tray 에는 다양한 버전이 존재합니다.
• 그리고 이 버전에 따라서, 어떤 프로그램 혹은 언어 버전의 호환성이 나뉩니다.
• 오늘은 이 버전에 대해 간략하게 주목할 만한 변화에만 한에서 이야기 해보려고 합니다.
• 최신 업데이트를 보고 싶으시다면, 자세한 버전 업데이트 를 참고해 주세요.

2. 버전별 자바 호환성 및 제공 기능 확인

버전 설명

2.2.0: 베타 버전

2.1.4: 자바 16 지원

2.1.3: 인쇄 상태 리포팅 기능 지원

2.1.2: 파이어폭스 https 지원

2.1.1: 프린터 포트 정보 지원

2.1.0: HTML 다중 인쇄 및 고화질 인쇄

2.0.12: ..

2.0.11: ..

2.0.10: Open JDK 11 지원 \ 다크 모드 지원

2.0.9: JDK 11 지원

2.0.8: ..

2.0.7: ..

2.0.6: ..

2.0.5: JDK 9 지원

*** *** *** (이후는 워낙 초기 버전이라 포함하지 않았습니다.)

기본 자바 요구 버전: (open) JDK 7 버전 이상

3. 마치며

오늘은 새로운 Qz Tray 를 사용하기 앞서 확인해야 할 버전 정보에 대해 간략하게 소개를 해 봤습니다.

어떤 버전을 사용할지 막막하신 분들에게 조금이나마 도움이 되었으면 합니다.

궁금하신 점이나, 오류 사항은 댓글에 남겨 주시면 성심 성의 껏 답변 드리겠습니다.

// 작성자 본인으로서, 무단으로 글을 퍼가거나 복제하는 것을 금합니다.

이미지 출처: QZ Tray-2.0.10

📘 QZ Tray 무료 증명서 발급 및 적용

1. 시작하며

1.1 문제 정의

• 필자가 맞닥드린 문제는 다음과 같다.

• 성공적인 프로그램 설치 후, 프로그램 폴더 안에 있는 sample.html 웹 페이지 파일을 통해 테스트로 페이지를 출력하려고 시도 하자 다음과 같은 작업 확인 다이어로그가 띄워진다.

  이미지 1.1_1: 어떤 함수든 QZ Tray를 사용하게 되면 매번 띄워지는 다이어로그

  

  이미지 1.1_2: 'Certificate Information' 을 누르면 출력됨

2. 원하는 결과

• 이 작업을 통해서 우리 모두가 원하는 결과는 다음과 같다.

• 맨 처음 QZ Tray 에 사용자 증명서 정보와 함께 인증을 하고 해당 값을 기억할 수 있게 해주는 페이지를 볼 수 있게 해야 한다.

  

  이미지 2_1: 인증 성공

• 정상적인 인증이 완료되면, 'Certificate Information' 을 클릭 했을 때 다음과 같은 화면을 볼 수 있어야 한다.

  

  이미지 2_2: 인증 성공 인증 세부 사항

  자 그럼, 이제 증명서를 발급 하고 실 프로그램에 적용하는 방법을 알아보자.

3. 인증 방법

• 먼저, 다운 받은 QZ Tray 의 바이너리 폴더를 재인증 하고 리컴파일 하기위해 다음과 같은 설치가 필요하다.

  3.1. 사전 설치 작업

  1. JDK 7 혹은 이상 (14 이상은 QZ Tray 가 지원하지 않을 수 있음으로, 여기에서 QZ Tray 버전에 대한 Java 버전 지원을 확인한다.)

     • 필자는 여기서 Azul Zulu Open JDK 11.0.x 를 사용했다. (다운로드 링크 참고)

  2. Apache Ant

     • 설치 후 환경변수를 등록함으로 cmd/terminal 에서 'ant --version' 이 확인이 가능하게끔 준비한다.
     • 필자 (윈도우) 다운로드 버젼: Apache Ant-1.10.12

  3. NSIS 3.0x

     • 리컴파일 시 Ant 와 함께 필요한 프로그램이다.

  4. (선택사항) Git

     • 사이트 다운로드에서 .tar 나 .zip 을 받거나, git 설치후 'git clone https://github.com/qzind/tray.git' 을 해도 된다.

  5. OpenSSL

     • QZ Tray 바이너리 소스코드를 재 컴파일 하기 전, 사용자를 위한 새로운 인증서를 만들기 위한 프로그램이다.
     • 필자는 'Win64 OpenSSL v3.0.0.msi' 를 다운받아 설치했다.

* 다운 받은 qz-tray-2.0.10 의 압축 파일의 해제 경로가 주 경로가 될 것이니, 참고하여 경로를 지정하기 바란다.

* 필자는 C:\Utilities 라는 경로 아래 모든 작업을 진행했다.

3.2. 인증 작업

• 설치가 모두 완료 되었다면, cmd/terminal 을 열고 openssl 을 통해 암호 파일을 만든다.
• 해당 구문을 실행하는 곳이 암호 파일들이 생성될 곳 임으로, 위치를 지정하고 싶다면 cmd/terminal 에서 'cd ' 명령어로 원하는 위치에서 입력하기 바란다.

3.2.1. 암호키 생성

openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 11499 -nodes

• key.pem 은 private key 의 값을 담을 파일명을 정의
• cert.pem 은 certificate key 의 값을 담을 파일명을 정의
• days 11499 는 입력 가능한 최댓값으로 5년 이다.

• 위 명령어를 입력하고 아래의 값을 순서에 따라 입력한다. (아래는 필자가 입력한 값이다.)

  '..+..+..........+.....+.+..................+..+.......+..+...+......+.+...+...........+....+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++...' //// (--를 대체) You are about to be asked to enter information that will be incorporated into your certificate request. What you are about to enter is what is called a Distinguished Name or a DN. There are quite a few fields but you can leave some blank For some fields there will be a default value, If you enter '.', the field will be left blank. //// Country Name (2 letter code) [AU]: KR State or Province Name (full name) [Some-State]: Seoul Locality Name (eg, city) []: Seocho-gu Organization Name (eg, company) [Internet Widgits Pty Ltd]: AWS Ltd. Organizational Unit Name (eg, section) []: IT Common Name (e.g. server FQDN or YOUR name) []: *.aws.com Email Address []: dev.jongjinkim@gmail.com

  • 중요!!: Common Name 을 입력할 때는, '*' 과 같은 와일드 카드 포맷을 따라 다음과 같이 정의 하는데, 운영하는 웹 페이지의 도메인 명을 기준으로 해야한다. 예) *.naver.com *.google.com *.velog.io *.kakao.com

• 위 작업을 마치면, 해당 폴더에 두개의 암호 파일이 생성된 것을 확인할 수 있다.
• 이제 생성된 파일에 대해 아래와 같은 암호문 변경을 진행한다.

3.2.2. 암호키 변경

openssl pkcs12 -inkey key.pem -in cert.pem -export -out privateKey.pfx

• 여기서 입력하는 비밀번호는 안전한 비밀번호로 설정할 것을 권고.

3.2.3. 생성된 암호키를 활용한 리컴파일

C:\Utilities\tray-2.0.10> ant nsis -Dauthcert.use="C:\Utilities\cert.pem"

꼭 기억하세요.

1. 필자는 위에서 설명한 것 처럼 ant 를 환경변수 등록을 해 놓았기에 'ant' 입력을 했습니다.
2. 위 리컴파일 명령어를 실행 위치는, QZ Tray.zip/tar 파일을 다운 받고 압축 해제 한 경로 안 입니다.

3.2.4. 컴파일 작업이 결과 모니터링

• 컴파일 결과가 실패할 수 있으니 결과에서 '' 가 나왔는지 확인한다.
• 컴파일 완료 후 컴파일 작업 폴더 내 /out 폴더와 함께 안에 '' 가 아래와 같이 생성되었는지 확인한다.
• 소요시간은 컴퓨터의 성능에 따라 상이하며, 약 50s ~ 5m 정도 소요된다.
• 처리 결과:

  BUILD SUCCESSFUL
  Total time: 1 minute 31 seconds

이미지 3.4_1: 설치 성공 화면_1

이미지 3.4_2: 설치 성공 화면_2

사진에서 보는 설치 응용 프로그램이 있어야 한다.

3.2.5. Demo 파일을 통한 테스트

1. 새로 생성된 qz-tray-community-2.0.10.exe 를 설치한다.
2. 설치가 완려되면 동일한 폴내에 있는 *../dist/demo/* * 파일들을 가지고 테스트를 진행본다.
3. sample.html 을 웹 브라우저로 열어본다.
4. 열자마자 다음과 같은 화면을 보게 될거다.

   

   이미지 3.2.5_1: 허용되지 않은 사이트

   • 여기서 'Allow' 를 누르게 되면 이후에 모든 작업들에 대해서 계속 똑같은 확인 다이어로그가 나오게 된다.
   • 방지하기 위해 'Remember this decision' 을 누르게 되면 'Allow' 버튼을 누를 수 없게 되는데 이부분을 이제 해소해 보자.

     

     이미지 3.2.5_2: 인증 불가

   • Certificate information 을 눌러보면 아래와 같이 인증이 정상적으로 되지 않았음을 알 수 있다.

     이미지 3.2.5_3: 인증 불가 세부 내용

   • Block 을 누르게 되면 사용자 삭제 후 'Allow' 를 통해 다시 등록 해줘야 하니 주의 하자.

5. 2.5.5. 이 상태로는 아직까지 실무에 사용할 수 없고, 일반 설치 과정과 동일하게 했을 때와 같은 문제를 야기하기 때문에 다음으로 넘어가서 해소해보자.

3.2.6. 인증 허용 작업

• 지금 현재 sample.html 이 있는 폴더에서 소스코드 몇가지를 조금 바꿔보자.

1. 먼저 'jsrsasign-all-min.js' 를 '..\tray-2.0.10\out\dist\demo\js\dependencies' 에 추가한다.

2. 그리고 이제 sample.html 를 수정할 것인데, 먼저 앞서 추가한 js 파일을 html 에서 불러올 수 있도록 경로를 등록해 준다.

   • 필자는 'jsrsasign-all-min.js' 의 소스코드를 가져와서 파일로 만든 후 프로젝트에 직접 등록 했다.

     이미지 3.2.6_1: jsrsasign-all-min.js 불러오기

   • 소스코드를 프로젝트에 담지 않고, 바로 가져오고 싶은사람은 아래와 같이 하면 된다.

3. 마지막으로 'sample.html' 파일의 777 라인 정도 내려가면 setCettificatePromise() 라는 함수가 있는데, 여기부터 80 줄 정도 아래의 858 라인 launchQZ 직전까지의 코드를 아래의 코드로 전체 치환한다.

   /// Authentication setup ///
    qz.security.setCertificatePromise(function(resolve, reject) {
        resolve(publicKey);
    });
    qz.security.setSignaturePromise(function(toSign) {
        return function(resolve, reject) {
            try {
                var pk = KEYUTIL.getKey(privateKey);
                var sig = new KJUR.crypto.Signature({
                    "alg": "SHA1withRSA"
                });
                sig.init(pk);
                sig.updateString(toSign);
                var hex = sig.sign();
                // console.log("DEBUG: \n\n" + stob64(hextorstr(hex)));
                resolve(stob64(hextorstr(hex)));
            } catch (err) {
                console.error(err);
                reject(err);
            }
        };
    });
   });
   

function strip(key) { if (key.indexOf('-----') !== -1) { return key.split('-----')[2].replace(/\r?\n|\r/g, ''); } }

>* 위 코드에서 publicKey 와 privateKey 는 맨 처음 생성한 암호키(cert.pem&key.pem)의 내용이다.
> * 변수대신 파일을 직접 열어 복사해 넣어도 정상 작동한다.

#### 3.2.7. 인증 여부 확인
* 위와 같이 모두 잘 따라 했다면, 적용 후 sample.html 을 열어 보았을 때, 더 이상 접근 허용 다이어로그가 뜨지 않을 것이다.
> ![](https://images.velog.io/images/jongjin_kim/post/851082b1-38f0-40ab-bbea-00bba97694b4/image.png)
> ##### <center>이미지 3.2.7_1: 인증 성공</center>
>![](https://images.velog.io/images/jongjin_kim/post/99c2ec1b-3e7c-46a6-814b-ce0616de938f/image.png)
> ##### <center>이미지 3.2.7_2: 인증 세부 내역</center>
***

## 4. 문제 해결
### 4.1. 똑같이 따라 했는데 인증 결과가 아직도 'untrusted website' 라고 뜹니다.
#### 예상 원인:
4.1.1. 암호 키 값이 정상적으로 소스코드에 입혀지지 않았을 수 있습니다. **소스 코드 재확인** 해보세요.
4.1.2. 설치 후 바로 sample.html 을 열어 보았다면, **의도치 않은 캐시나 허용되지 않은 증명서**를 통한 사용자 접근 기록이 존재할 수 있습니다. 아래와 같이 들어가서 확인 후 **사용자를 제거**해 보세요.
> ![](https://images.velog.io/images/jongjin_kim/post/2e5196d3-1aee-4dba-8c44-cd580b30ec09/image.png)
> ##### <center>이미지 4.1_1: QZ Tray 사용자 관리</center>
> ![](https://images.velog.io/images/jongjin_kim/post/2a742bfe-223b-4941-aace-abbf36d896e8/image.png)
> ##### <center>이미지 4.1_2: QZ Tray 사용자 관리 내역</center>
> 이미지: 정상 인증된 계정입니다. (착오 없으시길 바랍니다.)(계정은 예시입니다.)
4.1.3. 일반적인 **인식 문제**일 수 있습니다. 방금 한 작업을 다시 한 번 빼먹은 것이 없는지 ** 암호키 생성 단계부터 다시** 해보세요.  

### 4.2. 리컴파일 중, 오류가 발생해요. 'nsis' 를 찾을 수 없다고 나옵니다.
#### 예상 원인:
4.2.1. NSIS 를 잘 설치했는지 확인해 봅니다.
4.2.2. ANT 의 환경변수 설정이 잘 되어 있는지 확인해 봅니다.

## 5. 마치며
웹 서버가 구축된 환경에서 사용자(클라이언트)의 컴퓨터에 설치된 인쇄기를 통해 '사용자의 아무런 개입 없이' 혹은 '최소한의 사용자 상호작용' 만으로 인쇄가 되도록 하는 것은 생각보다 좀 처럼 간단하기만 한 일은 아니었습니다.

해당 기능을 구현하기 위해 QZ Tray 에 대한 존재를 먼저 알아야 했고, 이후에 해당 프로그램을 무료로 실 사이트에 적용하기 위한 방법을 찾기까지 많지만은 않은 외국 레퍼런스만을 공부하며 참고했어야 했습니다. (외국 레퍼런스를 검색해 보시면, 제가 정리한 글과 겹치는 부분이 있을 겁니다.)

설치하고 적용하는 과정은 생각보다 쉽습니다. 다만, 무료 버전에서는 QZ Tray 를 사용하여도 사용자의 직접적인 상호작용 없이 바로 인쇄를 할 수 있는 기능을 막아 놓았기 때문에, 이 부분을 원활하게 사용하기 위해 진행하는 작업을 적은 레퍼런스 속에서 해내기 쉽지 않았습니다.

정확히 말하면, 그냥 무작정 막아 놓았다는 개념보다는 원격 서버로 부터의 인쇄를 안전하기 위해 설정해 놓은 인증서를 무료로 발급해 주지 않는다는 점으로 하여금 무료 사용을 간접적으로 막아놓았다고 말하는게 맞겠네요. ([Self Sign Certificate 을 발급](https://velog.io/@jongjin_kim/QZ-Tray-%EC%A6%9D%EB%AA%85%EC%84%9C-%EC%85%80%ED%94%84-%EB%B0%9C%EA%B8%89-Self-Signed-Certificate)하면 무료로 사용 가능합니다.)

비교적 수월하게 인증서를 발급받고 적용하여 안전하고 편리한 플러그 인을 사용하려면 QZ Tray 의 직접적인 도움을 받은 방법 (직접 제공 라이선스 및 인증서 발급 + 기술 지원)($ 500 ~ $2,500) 이 수월합니다.

제가 나름 열심히 찾아 보았을 때는 한글로 된 레퍼런스가 없었기에, 저 처럼 혹시 다른 분들도 이렇게 헤매시지 않을까 도움이 되고자 설치하여 무료로 이용할 수 있는 방법을 정리해서 공유 합니다.
(다만, 위 방법을 통해 상업적인 목적으로 이용할 시 발생하는 문제에 대해서는 아무런 책임을 지지 않음을 미리 양지 하시기 바랍니다.)

위에 방법을 시도 하고자 하시는 분들은, 서론에 소개된 목적을 통해 본인이 구현하고자 하는 기능을 정말로 충족시켜 주는 지를 먼저 확인하시고, 하나 하나 꼼꼼히 따라서 해보시기 바랍니다. 약간의 오차로 인해 전체가 작동하지 않을 수 있습니다.

궁금한 점, 시간이 지나 변경된 사항이 있거나, 잘못된 설명이나 해석이 있다면 편하게 댓글 남겨주시기 바랍니다.

// 작성자 본인으로서, 무단으로 글을 퍼가거나 복제하는 것을 금합니다.

이미지 출처: .bubble | QZ Tray

📘 QZ Tray 설치 가이드

1. 시작하며

1.1 문제 정의

• 필자가 맞닥드린 문제는 아래와 같다.

1. 사용자가 몸을 사용하는 실무를 하는 동시에 웹 사이트(Spring Boot 로 클라우드 서버를 통해 배포)를 통해 반복적인 데이터를 기록하고 처리를 하며, 이에 따라 실제 인쇄물이 바로바로 나와야 한다.
2. 이 때, 사용자가 전반적인 업무를 보다 효율적이고 반복적인 작업을 최소화 할 수 있게 해주기 위해서는 인쇄를 하는 과정을 대폭 간소화 시켜주면 된다.

   이미지 1.1: 실무자의 전산 처리 업무 구조

인쇄하는 과정을 간소화 시켜주지 않는다면...

• 실무자는 몸을 사용하는 업무를 하고, 전산을 기록하고 처리된 파일을 열어 직접 컴퓨터에 인쇄 명령을 내리는 작업을 업무를 수 없이 반복해야 한다. 이 과정을 좀 더 쉽고 간단하게 할 수 있게 실무자를 도와주자.

1.1.1. 사용자의 실무 중 고충

• 일반적으로, 문서나 이미지를 특히나 웹에서 인쇄 하고자 할 때는 항상 아래와 같은 유형의 사용자의 상호작용이 필수적으로 필요하다.

  1. 인쇄 버튼 -> 인쇄 설정 페이지 -> 인쇄
  2. Ctrl + P -> 인쇄 설정 페이지 -> 인쇄
  3. 마우스 우클릭 -> 인쇄 클릭 -> 인쇄 설정 페이지 -> 인쇄

• 하지만, 1)인쇄 설정 페이지에 들어가서 2)설정을 하고 3)인쇄 버튼을 누르는 수작업은 실제로 특정 작업을 반복하는 실무자에 입장에서는 매우 비효율적일 수 있다.

  2. 해결 방안과 접근 방식

• 전산 처리 중, 처리된 문서에 대한 즉각적인 인쇄 작업을 간소화 시켜주는 작업을 QZ Tray 라는 웹 브라우저 인쇄 플러그인 을 통해 진행해 보도록 하겠다.

QZ Tray 란?

• QZ Tray 는 브라우저 간 혹은 플랫폼 간의 특별한 인쇄 기능을 제공하는 플러그 인 이다.
• 이 플러그인을 통해 웹 사이트 내에서 사용자가 원하는 파일을 최소한의 상호작용으로 사용자의 로컬 인쇄기를 통해 출력할 수 있게 해주는 기능을 제공한다.
• 대부분의 인쇄 방식을 지원하지만, 반복적이고, 조금은 특수한 방식이 필요한 열전사 인쇄기 (Thermal Printer) 에 다양한 기능을 지원한다.

* 다음은 QZ Tray 를 이용해 사용자의 전산 처리 과정을 최소화 하는 구도다.

이미지 2.1: QZ Tray 도입 후 사용자 전산 업무 처리 구도

• 이미지에 적힌 숫자에 대한 설명은 다음과 같다.

  1. 사용자가 개인 컴퓨터에 설치된 인쇄기 정보를 가져온다.
  2. 가져온 인쇄기 정보를 QZ Tray 에 전달하고,
  3. QZ Tray 는 해당 정보들을 전산 처리 서버에 전송한다.
  4. 전송받은 서버는 알맞은 전산 처리 후, 사용자가 인쇄해야 하는 정보를 QZ Tray 에 넘겨준다.
  5. QZ Tray 는 사용자를 지나,
  6. 사용자의 컴퓨터에 설치된 인쇄기에 정보(EPL, ZPL, Base64 등 의 인코딩 방식 혹은 인쇄 언어)를 전달하여 출력한다.

3. 대체 해결 방안

• QZ Tray 를 원활하게 사용하기 까지의 과정은 그리 짧고 간단하지만은 않기에 위 방법을 사용하지 않아도 요구사항을 충족시켜줄 수 있다면 다음 소개된 대체 해결 방안들 중 적합한 것을 찾아 처리 할 수 있길 바란다.
• 다만, 필자와 유사한 상황에 놓인 개발자라면, 곧 이어 소개될 과정들을 통해 만족할 수 있는 결과를 얻어가길 바란다.

3.1. Chrome 브라우저와 JS 의 Print() 함수를 활용

• 본 대체 해결 방안은, 앞서 이야기한 전형적인 사용자 상호작용 인쇄 방식을 그대로 유지하면서 자동화 하는 방법이다.

  이해가 필요한 사항

  • 기본 JS 에서는 print() 라는 함수를 지원하고, 이 함수를 실행할 경우 대부분의 메이저 웹 프라우저에서는 사용자가 인쇄를 하기 앞서 추가적인 확인(상호작용)을 할 수 있는 다이어로그를 자동('마우스 우 클릭 + "인쇄" ' 혹은 ctrl + p 가 필요 없는)으로 띄워준다.
  • Chrome 에서는 인쇄하기를 눌렀을 때 나오는 사용자 다이어로그 창이 생성되었을 때, 자동으로 인쇄하기를 수행(인쇄 버튼을 눌러주는 것) 해 준다. (다른 브라우저는 본 기능을 지원하는지 확인이 필요.)

• 이렇게 위 두가지 방법을 합치게 되면, 사용자는 인쇄하는 작업을 위해 따로 손을 댈 필요가 없어진다.
• 다만, 이 방법을 사용하게 되었을 때의 단점은 다음과 같이 파악될 수 있다.

  1. 한개 이상의 문서를 두개 이상의 파일을 통해 인쇄를 진행하게 된다면, 순차적인 작업이 될 수 있게 설정하는 것이 결코 효율적으로 되기 어렵다.

     이유는...

     • 첫 번째 파일의 인쇄가 끝이 나고 두번째 파일의 인쇄를 하고자 할 때, 첫 번째 파일의 인쇄가 언제 시작하고 언제 끝이 나는지에 대한 소요시간(인터넷 속도와 사용자 컴퓨터의 상태에 따라 상이)에 따른 처리 논리를 코드에 작성할 수 없다.
     • 그로인해 특정한 고정 대기 시간 (ex 5초)을 잡고 순차적인 처리를 하면 사람의 손이 닿지 않고 처리가 되게 할 수 있지만, 속도는 사람이 처리하는 것 보다 느려지게 된다.

3.1.1. Chrome 브라우저 자동 인쇄 처리 설정 및 사용 방법

3.1.2. JS 의 print() 함수 사용 예제

• Backend(Controller)-Spring Boot 에서 연산과 전산 처리를 하고, 인쇄하고자 하는 데이터를 Frontend(View)-JS 에 'Base64' 로 변환된 String 데이터 타입을 전달한다.

• 전달받은 데이터를 'response' 의 변수에 담아 처리하도록 하겠다.

• Spring Boot Java Controller Code:

  @ResponseBody
  @PostMapping(value = "/printLabel")
  public String printLabel (HttpSession session,
    @RequestParam(value = "label_url", required = false) String labelURL) 
    throws Exception {
        packingService.setPdf_base64_str(labelURL);
  
        HttpHeaders headers = new HttpHeaders();
        String fileName = "label.pdf";
        headers.setContentType(MediaType.parseMediaType("application/pdf"));
        headers.add("content-disposition", "inline;filename=" + fileName);
        headers.setCacheControl("must-revalidate, post-check=0, pre-check=0");
  
        String encodedString = packingService.getPdf_base64_str();
        return encodedString;
    }

• JS Code:

  $.ajax({
        type: 'POST',
        url: '/printLabel?label_url=' + url,
        responseType: 'blob',
        success: function (response) {
            var byteCharacters = atob(response);
            console.log(byteCharacters.length)
            var byteNumbers = new Array(byteCharacters.length);
            for (var i = 0; i < byteCharacters.length; i++) {
                byteNumbers[i] = byteCharacters.charCodeAt(i);
            }
            var byteArray = new Uint8Array(byteNumbers);
            var file = new Blob([byteArray], {type: 'application/pdf;base64'});
            var fileURL = URL.createObjectURL(file);
            var wnd = window.open(fileURL);
            wnd.print();
            setTimeout(function() {
                wnd.close();
            }, 5000);
            // setTimeout... 5000 은 5초 후 인쇄할 문서를 끄는 명령어.
        }
    })

  3.2. Restful API 와 Java 의 로컬 인쇄 라이브러리 활용

• 자바의 내장 라이브러리 javax.print(문서 참고) 라는 인쇄 기능이 있다. 이 기능을 활용하면 본인 컴퓨터의 프린터 정보를 읽고 원하는 정보를 출력할 수 있다.

• 다만, 인쇄하고자 하는 값이 본인 컴퓨터에 있는 것이 아닌, 원격 서버에서 정보를 처리하고 받아올 수 있는 경우에는 본인 컴퓨터만으로 원하는 정보의 문서를 인쇄할 수 없다.

• 이를 해결하기 위해서는 원격 서버와 안전하게 데이터 통신을 할 수 있는 Rest API 환경을 서버에 구축하고, 해당 API 를 호출해서 통신할 수 있는 사용자 컴퓨터에서의 어플리케이션이 필요하다.

  • 본문에서 사용자 어플리케이션은, 사용자 컴퓨터에서 실행되는 runnable exe 프로그램 혹은 local web application 을 지칭한다.

• 이를 간단하게 시각화 한 이미지는 다음과 같다.

  

  이미지 3.2_1: REST API 와 사용자 어플리케이션 사용 구도

4. 준비 사항

• 본 포스트에서는 필자가 사용한 버전을 기준으로 작성했다.
• 웹 환경

  • Open JDK (Zulu) 11.0.12
  • Spring Boot 2.1.4
  • maven 3.8.2
  • freemarker

• 하드웨어

  • XPrinter DT108B (프린터 사 사이트)

• 인쇄 플러그인

  • QZ Tray 2.0.10 (깃헙)

Qz Tray 2.0.10 을 선택한 이유? (버전 정보 참고)

포스트를 작성하는 2021-10-26 기준,

• 버전 2.2.0 은 아직 안정성 문제가 확보되지 않음.
• 2.1.x 는 차후에 'Self Sign Certificate' 을 진행하는 과정에서 인증 요소가 약간 변경 되었음.

  21.10.23 기준) 2.1.x 버전도 이것이 정상 작동하는 것을 확인.

• 2.0.10 부터 Open JDK 11 버전을 지원하기 시작
• 자세한 버전별 정리는 여기를 참고 바란다.

권장 버전(Open JDK 11 사용자 기준):

QZ Tray Version >= 2.0.10 & < 2.1.0

5. 설치 과정

* 설치 과정은 두가지로 나뉜다.

1. 설치하고 인증 여부 상관 없이 테스트 용 설치

• 이 경우에는 여기 에서 일반적인 '다운로드' 로 설치 프로그램을 다운받아 설치하고, 설치 폴더 ../demo 폴더에서 테스트를 진행한다.

2. 설치하고 인증 후 원활한 사용 용 설치

• QZ Tray 를 프로젝트에 추가해서 좀 더 기능적인 기능을 구현하고 싶은 경우 이 방법을 권장한다.
• 여기를 참고하기 바란다.

6. 오류 대처

6.1. 설치 후 sample.html 로 테스트를 해 보았는데, 'untrustred website' 오류가 뜨면서 접근 허용 다이어로그가 계속 떠요.

• 이 문제는 여기 에서 다뤄 보겠습니다.

7. 마치며

오늘은 새로운 Qz Tray 라는 툴에 대해 알아 보았습니다.

다음 시간에는 실무에서도 사용할 수 있게, 제한되어 있는 인증 이슈 관련해서 다뤄보도록 하겠습니다.

궁금하신 점이나, 오류 사항은 댓글에 남겨 주시면 성심 성의 껏 답변 드리겠습니다.

// 작성자 본인으로서, 무단으로 글을 퍼가거나 복제하는 것을 금합니다.

이미지 출처: MySQL

📘 MySQL Workbench 사용 방법

✔ 시작하며

• 데이터 베이스(DB)에 연결하기에 앞서 본인의 컴퓨터 혹은 원격 클라우드 컴퓨터 등에 데이터 베이스를 설치해야 한다.

✔ Database 연결

✔ 필수 값 입력

1. 설치가 완료된 MySQL Workbench 를 실행하고, 실행하면 다음과 같은 화면이 켜진 것을 확인한다.

   정상적으로 실행이 되었다면, 'MySQL Connections' 옆에 '+' 버튼을 눌러 새로운 연결을 생성한다.

2. '+' 버튼을 누르고 다음과 같은 새로운 창이 열리면, 다음과 같이 색칠된 부분만 신경써서 연결 객채를 생성해 준다.

• Connection Name: 연결 객체의 별칭으로, 연결 자체에는 직접적인 연관이 없음으로 내가 알고 구분하기 쉬운 이름을 지정한다. (영문 사용 권장)
• Hostname: 기본값은 사진과 같은 '127.0.0.1' or 'localhost' 이지만, 원격 서버의 경우 해당 원격 서버의 IP 를 입력해 준다.

  • 공유기에 함께 연결되어 있는 로컬 서버: ex) 192.168.0.xxx

    • CMD 창을 열고 'ipconfig' 라고 입력 했을 때, 나오는 다음과 같은 IPv4 주소 값을 말한다.

  • 물리적인 원격 서버: ex) 59.12.42.125

    • 클라우드 기반 사용시, 해당 제공 서비스에서 IP 를 지정하고 관리할 수 있게 해준다.
    • 물리적으로 독립된 일반 원격 컴퓨팅 서버의 경우, 여기 를 접속하여 접속하는 컴퓨터의 공식 IP 를 알려준다. (링크가 유효하지 않을 경우, Google 에 'my ip address' 라고 검색해서 나온 상단 결과 사이트를 무작위로 들어가도 나온다.)

• Port: MySQL 이외 다른 RDBMS 를 사용할 경우, 맞는 지정 Port 값을 사용해 줘야 한다. (MySQL 을 사용하므로 그대로 3306 을 사용한다.)
• Username: 초기에 MySQL 을 설치할 때 지정해 줬던 사용자 명이나, 이후에 따로 권한 부여를 통해 RDBMS 계정을 추가한 사용자명을 입력하면 된다. (초기 슈퍼 사용자 명은 보통 root 로 통용 된다.)
• Password ...Store in Vault: 사용자 명과 일치하는 비밀번호를 입력하면 된다.
• Test Connection 버튼: 위의 값들이 모두 유효한 값으로 일치하면, 연결 검사가 정상적으로 끝난다.

✔ 최종 연결 성공시,

✔ 최종 연결 실패시,

✔ 갑자기 연결 값들을 가린이유?

• 기존의 127.0.0.1 의 값으로 하다가, 필자의 연결 값들은 실제 원격 DB 기준으로 입력했기 때문에 보안상의 유출 문제 방지를 위해 가리게 되었다.

✔ Connection Test 시 뜨는 메시지는?

• 연결하려고하는 구축된 원격 DB Server 의 MySQL 버전과, MySQL Workbench 에서 연결하기 위해 사용하는 드라이버의 버전이 적합하게 호환되지 않는다는 주의 메시지 이다. (주의 메시지 일뿐 직접적인 오류는 발생하지 않지만, 차후 이로인해 문제가 발생할 수는 있다.)

✔ 모든 값을 알맞게 입력해 줬음에도 왜 연결이 안되는 경우

• 입력한 사용자의 연결/접근 권한이 부족하거나 없어서 일 수 있다.
• 원격 서버의 경우, 방화벽으로 인한 연결 차단의 가능성을 결코 배제할 수 없다.
• OK 버튼: DB 연결을 위한 연결 객체의 연결 가능 여부를 판단하지 않고, 일단 생성이 가능하지만 연결 검사 (Test Connection 에서 성공 후 이 버튼을 누르는 것을 권장한다.)

✔ 마치며

DB 서버와 연결하는 방법을 전혀 몰랐던 분들에겐 전반적인 가이드를, 연결 시도 중 낯선 오류를 맞닥뜨린 분들에겐 오류에 대한 해결책을 제공드릴 수 있었던 계기였으면 좋겠습니다.

궁금한 점, 시간이 지나 변경된 사항이 있거나, 잘못된 설명이나 해석이 있다면 편하게 댓글 남겨주시기 바랍니다.

이제는 연결을 성공적으로 완료했으니, 다음 포스트에서는 간단한 설정들과 기능들을 몇가지 소개하겠습니다.

📘 MySQL Workbench 설치

✔ 시작하며

• 이번 시간에는 관계형 데이터 베이스에 접속하여 더 편하게 데이터 베이스와 질의하며 제어할 수 있게 도와주는 MySQL 워크벤치를 설치하고 간단하게 제어해 보려고 한다.

  MySQL 외에 다른 관계형 데이터 베이스를 해당 워크벤치에서 사용할 수 있지만, MySQL 에 특화되어 제공되는 툴이기에 MySQL 사용을 권장합니다.

시작 전 유의 사항:

1. 데이터 베이스: MySQL
2. 데이터 베이스 엔진: InnoDB (자세한 사항은 따로 참고) (이번 시간에서는 크게 중요하진 않다.)
3. 구동 운영체제: Windows 10 Home 64 bit

앞서 안내한 유의 사항과 크게 다른 점이 없다면, 설치하여 몇 가지 간단한 사용 방법을 파악할 때 큰 문제가 없을 것이다.

✔ 설치 방법

1. 먼저 mysql workbench 를 Google 에서 검색하여 제일 먼저 보이는 링크로 들어가게 되면 아래와 같은 페이지로 이동된다. (설치 페이지)

2. 원하는 방식으로 쿠키 처리를 한 후, 바로 보이는 'Download' 버튼을 클릭하여 다운로드 한다.

3. 다운로드 버튼을 클릭하여 다음으로 넘어가면 로그인을 권장하지만, 신경쓰지 말고 바로 다운로드를 진행한다.

4. 다운로드가 완료되면, 창을 열고 설치를 진행한다.

5. 다음으로 넘어가면 설치할 경로를 지정하라고 하지만, 필자는 따로 지정할 필요가 없기에 제안해주는 경로에 그대로 설치를 진행한다.

6. 설치 유형은 완전(Complete) 판으로 진행한다. 사용자 지정(Custom) 판은 심화 사용자에게 권장한다고 안내되어 있다.

7. 나머지 진행 버튼을 순차적으로 눌러주게되면 설치는 문제없이 완료가 된다.

✔ 설치하는 과정에서 오류가 발생해요.

➰ ...C++ 2019 Redistributable Packaged...

• 설치를 진행하려고 하니 다음과 같은 오류가 발생하면서 설치가 진행되지 않는다.

다음 두 방법 중 하나를 통해 이를 해결할 수 있다.

1. 아래 제공된 링크를 통해 Visual C++ 2019 를 퀵 설치 하거나,

   참고 가이드: 링크 | for x64: vc_redist.x64.exe

2 'Download Prerequisites' 를 누르고 설치에 필요한 파일을 사전 설치한다.

✔ 마치며

개발이 뭔줄도 모르는 초짜 입장에서는 모든 것이 낯설고, 어떻게 해야할지 갈피를 잡기 어렵습니다.

이 글을 통해서 조금이나마 손쉽게 진행하실 수 있었길 바랍니다.

성공적으로 잘 했다면 좋아요 한번씩 눌러주시길 바랍니다.

궁금한 점, 시간이 지나 변경된 사항이 있거나, 잘못된 설명이나 해석이 있다면 편하게 댓글 남겨주시기 바랍니다.

이제는 설치를 완료했으니, 다음 포스트에서는 연결 방법과 함께 간단한 설정들과 기능들을 몇가지 소개하겠습니다.

썸네일 이미지 출처: Google Image

📘 파이썬 설치하기

✔ 시작하며...

오늘은 파이썬을 설치해 보려고 한다.

먼저, 아래의 링크에 접속하여 설치를 시작해 보자.

https://www.python.org/downloads/

파이썬은 오픈소스로 누구나 자유롭게 다운로드 하여 사용할 수 있는 프로그래밍 언어다.

파이썬 다운로드 링크를 타고 들어가면 다양한 버전들을 확인할 수 있는데, 너무 오래되지도 최신이지도 않은 적당한 버젼을 다운로드 받아서 설치해보자.

✔ 버전 선택 고려 사항

2.x.x 보다는 3.x.x 을 사용하는 것을 권장한다.

• 직접 사용해 보면 다양한 부분에서 3.x.x 버전 대에 비해 지원하지 않는 점이나, 사용 방식에서 차이가 나는 것을 확인할 수 있다.
• 다양한 라이브러리를 가져와서 사용할 때 또한, 3.x.x 가 더 유연한 확장성과 다양성을 보장한다.
• 하지만, 너무 최신 버전의 3.9.x 와 같은 버전의 사용은 타 라이브러리를 이용하는 측면에서 오히려 업데이트가 되어 있지 않아 호환성 문제가 발생할 수 있음으로, 이 또한 권장하지 않는다.

✔ 버전을 선택할 시 제일 중요하게 고려해야 할 것:

1. Long Term Support (장기 지원) - 언제까지 해당 버젼에 대해 관리와 기술적인 지원이 적용될 것 인지를 확인 해야 한다.
2. Popularity (대중성) - 어떤 버전이 얼마나 많은 이들에게 사용되고 있는지에 따라, 각기 다른 라이브러리 호환성이 무시 못하게 영향을 미칠 수 있다.

이제 정말 설치를 진행해 보자. 필자는 여기서 Python-3.7.9 버전을 설치해볼 것이다.

✔ 설치 과정

1. 앞서 소개한 링크를 접속한다.
2. 스크롤을 내려 아래로 내려가면, 다양한 버전을 다운로드 할 수 있는 링크가 제공된다.
3. 설치를 원하는 버전을 찾아 'Download' 를 클릭하여 설치 페이지로 이동한다.
4. 이동 된 페이지 아래로 내려보면, 다운로드 할 수 있는 다양한 운영체제별 설치 파일들이 있는데, 이 중에서 필자는 'Windows x86-64 executable installer' 를 설치해 보려고 한다.

• 많은 설치 파일 중 위 파일을 선택한 이유: 1) 사용하는 컴퓨터가 Windows 10 Home 64 bit 다. 2) executable 설치 파일이 설치하기 간편하다.

5. 설치 파일 다운로드를 완료하면, 설치 파일을 실행해서 설치를 시작한다. 그냥 간단하게 설치하고 경로를 별로 신경쓰지 않으면 'Install Now' 를 통해 간편 설치를 진행하고, 추가 설정을 진행 할 경우 사진처럼 따라 설정을 하고 설치를 진행하면 된다.

• 추가 설정: 1) 'Add Python 3.7 to PATH' 를 선택하고 설치하면, 차후에 CMD 를 통해 'python' 이라는 명령어만을 입력해도, 콘솔 환경에서 python 을 실행 해 볼 수 있다. (UI 없는 테스트 코딩 프로그램 실행할 때도 유용.) 2) 'Customize Installation' 을 선택하여 설치하면, 경로와 제공되는 기능을 원하는 대로 설치할 수 있다. (자세한 설명은 다음 사진에서 설명하겠다.)

6. 다른 옵션들은 선택적으로 체크하고 설치를 진행하면 되지만, 하이라이트 된 pip 는 꼭 체크를 하고 설치를 진행해야 한다. (차후에 파이썬 라이브러리를 손쉽게 설치하기 위함.)
7. 'Next' 를 누르고 다음으로 넘어가면, 아래와 같은 상태일텐데, 이 때, 필자는 색칠된 부분을 체크하고 원하는 경로로 수정한 뒤 설치를 진행하겠다.

• 모든 사용자에게 설치를 하면, 다른 사용자로 컴퓨터 로그인을 해도 원활하게 사용할 수 있다.
• 경로를 좀 더 내가 찾기 쉬운 경로로 수정한다.
• 두번째 색칠된 'Download debug binaries' 는 VS 를 IDE 로 사용하여 개발을 할 경우 함께 설치하면 좋다.

8. 설치를 누르고 진행한다. 설치가 완료되면, 다음과 같은 화면이 나온다.
9. 설치가 정상적으로 되었는지 확인해보기 위해 CMD 창을 열어 파이썬을 실행해 보겠다. 정상적인 설치가 완료가 되면, 아래와 같이 명령어를 입력했을 때, 오류 없이 잘 출력이 되어야 한다. (필자는 이전에 먼저 설치하여 사용하고 있던 python 3.7.6 이 있음으로, 3.7.9 가 출력되지 않았다.)
10. 설치가 정상적으로 된 것을 확인했다면, 마지막으로 본격적인 파이썬 사용에 앞서 pip(라이브러리 설치 툴)를 업데이트 해주자.

✔ 파이썬 라이브러리 이용 준비

pip install --upgrade pip
python -m pip install --upgrade pip

✔ CMD 를 실행하는 방법

1. Win + R
2. cmd 입력 후 엔터 or
3. Window 키 입력후 cmd 검색 후 실행

Ctrl + Shift + Enter 를 누르면 관리자 권한으로 프로그램을 실행하는 꿀팁도 있으니, 참고하면 좋겠다.

✔ 마치며

파이썬 설치를 해보고 싶은 입문자 분들이 이 글을 보고 손쉽게 파이썬 설치를 했으면 좋겠습니다.

성공적으로 파이썬 설치를 잘 했다면 좋아요 한번씩 눌러주시길 바랍니다.

궁금한 점, 시간이 지나 변경된 사항이 있거나, 잘못된 설명이나 해석이 있다면 편하게 댓글 남겨주세요.