React로 영수증 출력해보기

자바스크립트로 POS를 만든다고?

@ JSConf Korea 2022

웹 기술을 이용해 가치를 만들어 내요
필요한 기능이 있으면 직접 만들고 오픈소스로 공개하는 것을 좋아해요
요즘 관심사:
토스플레이스 Frontend Developer

발표자 소개

나석주

seokju-na

어느 날...

POS를 만들게 되었어요

POS기로 출력하는 것들

주문서

영수증

계산서

POS기로 출력하는 것들

Thermal Printer

열전사 프린터

USB

시리얼포트

LAN

전원

시리얼 포트가 뭐죠?

이 ~~씨리얼~~은 아는데...

시리얼 포트, 즉 직렬 포트(Serial Port)는 직렬 통신의 물리 인터페이스
직렬 통신은 말 그대로 직렬로 통신하는 방법
USB, 디스플레이 포트, 썬더볼트, 이더넷 등이 모두 직렬 통신
- USB = Universal Serial Bus
시리얼 포트는 일반적으로 RS-232 표준을 따르는 하드웨어를 가리킴
115200 bps = 1초당 11.52 KB
- USB 2.0: 이론상 1초당 대략 60 MB
- 노이즈에 강하고, 인터페이스가 단순한 이유로 여전히 산업 현장에서 사용됨

시리얼 포트

RS-232

Node SerialPort 라이브러리
- https://serialport.io
- Linux, macOS, Windows 플랫폼 지원
Web Serial API
- 웹에서 시리얼 포트를 다룰 수 있는 API
- 입출력은 각각 readable, writeable로 제어 가능
- readable, writeable 모두 Streams API로 제공됨

JS로 시리얼 포트 제어하기

Web Serial API

-V

시리얼 포트로 올바르게 통신하기 위해서

baudRate 값이 필수로 필요해요

Web Serial API

"가ab"

UTF-8

EUC-KR

"가ab"

"ab"

Ascii

텍스트

인코딩

Uint8Array

자바스크립트로 바이너리 데이터 다루기

0x61

0x62

0xB0

0xA1

0x61

0x62

가

0xEA

0xB0

0x80

0x61

0x62

가

"Hello World!" 출력하기

아무 반응 없음...

😂

프린터에 출력 커맨드를 입력해야 해요

그 전까지는 프린터 버퍼에 쌓여요

=> 출력 커맨드는 무엇이죠? 🤔

ESC/POS는 ESC/P의 한 종류
ESC/P
- Epson Standard Code for Printers
- 프린터 제어 언어
ESC/POS
- Epson에서 만든 프린터 명령 시스템
- POS에 사용되는 대부분의 Thermal Printer와 호환

ESC/POS

명령어(ASCII)	설명	HEX
LF	인쇄 및 개행	0x0A
ESC @	프린터 초기화 프린터 버퍼를 클리어하고 프린터 모드 리셋	0x1B 0x40
ESC E n	텍스트 강조 (bold)	0x1B 0x45 ...
GS k n	바코트 출력	0x1D 0x6B ...
GS V n	용지 자르기	0x1D 0x56 ...
...