React to PDF: 좌충우돌 PDF 생성 기능 개발기 / if(kakaoAI)2024
if kakao 카카오 · YouTube
AI 핵심 요약
혈당 데이터를 병원과 쉽게 공유하도록 기존 React 화면을 PDF로 변환하는 기능을 개발했지만, 라이브러리만으로는 기존 컴포넌트 재사용과 페이지 분할, 크기 조정을 모두 해결하기 어려웠습니다. `html2canvas`와 jsPDF로 DOM을 캔버스와 이미지로 바꾸고, `break-inside: avoid`가 적용된 요소의 위치를 계산해 앞에 패딩을 삽입하는 방식으로 페이지 분할을 구현했습니다. 헤더·푸터와 페이지 번호도 DOM의 높이를 기준으로 처리했으며, React Query의 `useIsFetching`과 Context를 활용해 로딩 시점과 PDF 전용 레이아웃을 관리했습니다. 그 결과 기존 콘텐츠를 재사용하면서 PDF와 이미지 다운로드 요구에도 대응할 수 있었고, 요구 사항을 화면이 아니라 좌표와 레이아웃 관점에서 재해석하는 것이 해결의 실마리였습니다.
- 기존 UI를 PDF 전용 컴포넌트로 다시 만들면 중복 개발과 테스트 부담이 커지므로, 기존 React 컴포넌트를 재사용할 수 있는 방식을 우선 검토하세요.
- 페이지 분할은 DOM 요소의 위치와 높이를 기준으로 계산하고, 다음 페이지로 넘길 요소 앞에 패딩을 삽입해 구현할 수 있습니다.
- CSS의 `break-inside: avoid`를 활용하면 차트처럼 페이지 중간에서 잘리면 안 되는 요소를 통째로 다음 페이지로 보낼 수 있습니다.
- PDF 생성 시에만 필요한 레이아웃은 React Context로 모드를 전달해 일반 화면의 동작과 분리하세요.
- React Query의 `useIsFetching`으로 진행 중인 쿼리를 확인하면, 콘텐츠별 로딩 상태를 일일이 관리하지 않아도 됩니다.
소개
리액트 컴포넌트를 PDF 파일로 생성할 수 있게 하는 기능을 개발했습니다. 파일 생성 시 페이지 단위로 픽셀을 맞추기 위해 다양한 스타일링 기술을 활용했으며, 그 과정에서 겪은 어려움과 해결 방법을 소개합니다. #frontend 카카오헬스케어에서 파스타 서비스의 프론트엔드 개발을 담당하고 있는 Zero입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-42 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
비슷한 학습 자료
컨퍼런스 if kakao
선물하기 프론트엔드 성능 개선기 / if(kakaoAI)2024
컨퍼런스 if kakao
선물하기 프론트엔드 성능을 개선하면서 고민 했던 것들 그리고 적용한 기술들에 대해 공유하고자 합니다. #front-end #angular #웹 성능 선물하기 서비스에서 프론트엔드 개발을 하고 있는 Fleek입니다. 유저에게 더 나은 서비스 경험을 선사하기 위해 늘 노력합니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-35 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
웹 개발 프론트엔드
컨퍼런스 if kakao
공공데이터를 활용한 RAG 기술 구현 및 프레임워크 소개 / if(kakaoAI)2024
컨퍼런스 if kakao
LLM 응답의 신뢰도를 높이기 위한 방법론인 RAG를 효과적으로 구현하기 위해 필요한 구조 및 데이터 가공방식을 소개합니다. #RAG #청킹 #검색 #대화형 인터페이스 검색 모델을 고도화하기 위해 인공지능 기술을 접목한 랭킹 모델과 신규 Feature를 개발하고 있는 Ian입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-10 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
AI에이전트 개발 자연어 처리 로드맵 6개에 담김
컨퍼런스 if kakao
광고 웹 SDK 개편기 with Preact / if(kakao)2022
컨퍼런스 if kakao
광고 웹 SDK(AdFit Web SDK)는 AdFit 플랫폼을 이용하여 광고를 게재하고 수익을 창출하기 위해 웹사이트 등에서 사용하는 라이브러리입니다. 기존 프로젝트의 문제점을 분석하고 개선하고자 개편을 진행하였고 그 과정에서 얻은 소중한 경험들을 공유하려 합니다. 그리고 React의 이웃사촌, Preact를 소개하고 광고 SDK에 어떻게 도입하고 활용했는지도 이야기하고자 합니다. #리팩토링 #Preact 카카오 FE플랫폼팀의 비즈FE파트에서 광고 SDK를 개발하고 있는 제이크 입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-78 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
프론트엔드
컨퍼런스 if kakao
사진편집기! 이것DOM 적용해볼GL? / if(kakao)2022
컨퍼런스 if kakao
새로운 사진편집기에 WebGL을 적용하고, 공용 컴포넌트를 개발하면서 마주했던 선택과 문제 해결과정을 공유합니다. #WebGL 더 멋진 카카오의 에디터를 위해 노력합니다. 카카오 FE플랫폼팀 스카이입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-79 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
웹 개발 프론트엔드
컨퍼런스 if kakao
Sentry를 이용한 에러 추적기, React의 선언적 에러 처리 / if(kakao)2022
컨퍼런스 if kakao
카카오페이 프론트엔드에서 선언적 에러처리를 통한 사용자경험과 개발자경험 증대 및 Sentry를 통한 웹뷰환경에서의 에러 추적, 장애 대응, 사용자 경험 개선기 (axios interceptor와 에러바운더리를 이용해 에러핸들링을 개선해 나가고, sentry를 통해 에러데이터를 쌓아 사용자 경험을 개선해나간 스토리로 풀어볼 예정입니다.) #React #Sentry #선언적에러처리 사용자 경험을 소중하게 생각하는 카카오페이 FE개발팀의 클로이, 나나입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-84 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
프론트엔드 소프트웨어 테스트
컨퍼런스 if kakao
My구독은 보이지 않은 개선을 진행하고 있는데요. 그 중에서 Redux에서 React-Query로 전환했던 그 이유와 과정을 소개하고 그 과정에서 만났던 이슈를 어떻게 해결했는지 공유합니다. 이번 발표를 통해서 React 16과 React 18에서 React-Query를 도입하거나 기존 Redux 구조를 개선하려고 시도하실 때 참고가 되었으면 좋겠습니다. #React #React-Query #Tanstack-Query #Redux #리팩토링 #React16 #React18 카카오 FE플랫폼팀의 톡FE파트에서 프론트 앤드 개발자로 일하고 있는 프레드입니다. My구독과 이모티콘 스토어 프로젝트를 담당하고 있습니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-77 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #...
프론트엔드 로드맵 1개에 담김