react 2

바이브 코딩으로 React 코드를 PDF로 변환 기능 만들기

사이드 프로젝트에서 그래프와 혈당 수치가 담겨있는 테이블을 PDF 형식으로 내보내기 기능을 만드는데, React 코드를 PDF로 변환해주는 라이브러리 중 맘에 드는 것을 찾지 못해서 Cursor와 함께 직접 만들게 된 과정을 정리한 내용입니다. 일단 라이브러리 선택 조건은 다음과 같았습니다.별도의 코드 변환없이 기존 컴포넌트를 그대로 바로 사용할 수 있도록 해야한다.각 페이지의 Header와 Footer를 원하는대로 직접 제어할 수 있어야 한다.pdf 내에서 텍스트 검색이 되어야 한다.사실 이번 개발은 라이브러리 선택만 잘하면 금방 끝날 거라고 생각했지만, 생각했던 것 보다 쉽지 않은 작업이었습니다.마음에 드는 라이브러리를 찾기 위한 과정react-pdf/renderer (링크)React 코드를 사용해서..

개발 지식/react 2026.03.09

Next.js 에서 ReferenceError: document is not defined 에러 해결하기

문제 상황저는 평소에 컴포넌트를 만들 때 document나 window를 useEffect 밖에 선언해서 사용을 하지 않는 편입니다.근데 이번에 모달 컴포넌트를 만들 때 React 18 공식 문서에 나와있는 createPortal 예제(링크)를 보면서 만들다가 document를 사용하게 되었습니다. 이 때  ReferenceError: document is not defined  에러를 만나게 되었죠.  기존에 모달 컴포넌트를 만들 때도 createPortal을 사용했었는데, 항상 ref에 document를 저장해서 사용했었기 때문에 createPortal에 바로 document를 넣어서 사용한 것은 처음이었습니다.(참고로 아래 코드도 초창기 React 16 버전 공식 문서를 참고해서 만들었던 걸로 기억..