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 라이브러리
  • 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
PDF react-pdf
Thermal Printer react-thermal-printer 😍

🎁 Event

감사합니다

React로 영수증 출력해보기: 자바스크립트로 POS를 만든다고?

By Seokju Na

React로 영수증 출력해보기: 자바스크립트로 POS를 만든다고?

어느 날 가게에서만 봐왔던 POS를 만들게 되었어요! POS를 만들면서 주문/결제 과정에서의 복잡한 상태 관리, 결제 단말기, 영수증 프린터와 같은 하드웨어와의 연동 등 도전적인 과제가 많았어요. 그중 영수증을 출력하면서 어떤 어려움이 있었고, 어떻게 해결해나갔는지 여러분께 경험을 공유하고 싶어요.

  • 290