[260409] TIL

Today I Learned (2026-04-09)

@react-pdf/renderer 리서치

• 청구서/정산서처럼 문서 형태가 필요한 화면을 위해 @react-pdf/renderer를 살펴봤다.
• React 컴포넌트 방식으로 PDF 전용 레이아웃을 만들 수 있고, 헤더/푸터 고정과 페이지 번호 처리가 비교적 편하다.
• 한글 폰트 등록이 필요하고, 일반 HTML 태그가 아니라 PDF 전용 컴포넌트를 사용해야 한다는 제약도 함께 확인했다.

코드 정리

• PDF 문서는 일반 화면 컴포넌트와 사용하는 태그가 다르기 때문에 템플릿 컴포넌트를 별도 영역으로 분리하는 것이 좋다.
• 폰트 등록, Tailwind 설정, PDF 뷰어 래퍼처럼 공통으로 쓰일 설정은 shared 영역에 두면 재사용하기 쉽다.
• 다운로드 버튼, 미리보기, 문서 템플릿은 각각 책임이 달라서 feature/widget/entity 단위로 나눌 수 있다.