Seokju Na
Beer Lover 🍺
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
Tx
Rx
+V
0
1
0
0
1
0
1
1
1
0
1
1
0
0
1
0
1
1
1
0
1
1
0
0
1
0
1
1
1
0
0
1
1
1
시리얼 포트로 올바르게 통신하기 위해서
baudRate 값이 필수로 필요해요
Web Serial API
"가ab"
UTF-8
EUC-KR
"가ab"
"ab"
Ascii
텍스트
인코딩
Uint8Array
자바스크립트로 바이너리 데이터 다루기
| 0x61 | 0x62 |
a
b
| 0xB0 | 0xA1 | 0x61 | 0x62 |
가
a
b
| 0xEA | 0xB0 | 0x80 | 0x61 | 0x62 |
가
a
b
"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 ... |
| ... |
ESC/POS 명령어
| 명령어(ASCII) | 설명 | HEX |
|---|---|---|
| ESC R n | 코드페이지 문자 셋 지정 | 예: (🇰🇷 n=13) 0x1B 0x52 0x0D |
그 외 다양한 명령어들
🤔
Imperative
Declarative
JSX를 사용해 영수증을 선언적으로 작성해보자
< Printer characterSet="euc-kr" />
왼쪽 정렬 텍스트
가운데 정렬 텍스트
< Text />
< Text align="center" />
< Image src="/image.png" />
< Line />
👆영수증 예시
환경
렌더되는 것
DOM
Native UI
소스 코드
ESC/POS
Command
render 함수 구현해보기
Learn Once, Write Anywhere
| 환경 | 패키지 |
|---|---|
| DOM | react-dom |
| iOS, Android | react-native |
| 터미널 | ink |
| react-pdf | |
| Thermal Printer | react-thermal-printer 😍 |
🎁 Event
감사합니다
React로 영수증 출력해보기: 자바스크립트로 POS를 만든다고?
By Seokju Na
React로 영수증 출력해보기: 자바스크립트로 POS를 만든다고?
어느 날 가게에서만 봐왔던 POS를 만들게 되었어요! POS를 만들면서 주문/결제 과정에서의 복잡한 상태 관리, 결제 단말기, 영수증 프린터와 같은 하드웨어와의 연동 등 도전적인 과제가 많았어요. 그중 영수증을 출력하면서 어떤 어려움이 있었고, 어떻게 해결해나갔는지 여러분께 경험을 공유하고 싶어요.
