피드로 돌아가기
Dev.toFrontend
원문 읽기
Serverless 기반 Browser-side Word 문서 생성 및 Drive 자동화 설계
From Raw Text to Formatted Word Doc in Your Drive
AI 요약
Context
기존 메모 앱의 과도한 복잡성과 .docx 포맷 출력 지원 부재로 인한 사용자 불편 발생. 서버와 데이터베이스 없이 클라이언트 사이드에서 모든 프로세스를 처리하는 초경량 아키텍처 요구.
Technical Solution
- Browser 환경의 제약을 고려하여 npm 패키지 대신 CDN 방식으로 docx.js 및 mammoth.js를 로드하는 런타임 전략 채택
- Google Identity Services 및 Drive REST API v3를 통한 Serverless 인증 및 파일 스토리지 통합
- Packer.toBlob() 메서드를 활용하여 Browser Memory 내에서 Word 문서 Blob 객체를 직접 생성하는 최적화 구현
- Multipart upload 및 FormData를 사용한 파일 메타데이터와 바이너리 콘텐츠의 동시 전송 구조 설계
- mammoth.js를 통한 기존 문서 텍스트 추출 후 신규 콘텐츠를 병합하여 재업로드하는 Append 로직 구현
- Google Cloud Console의 OAuth 2.0 Client ID 설정과 Authorized JavaScript Origins 관리를 통한 보안 액세스 제어
실천 포인트
- Browser 환경에서 docx.js 사용 시 Node.js 전용 함수인 toBuffer 대신 toBlob 사용 여부 확인 - Google Drive API 연동 시 drive.file 및 drive.readonly 스코프의 최소 권한 원칙 적용 - Vite 기반 프로젝트의 OAuth 리다이렉트 URI 설정 시 localhost 포트(5173) 일치 여부 검증 - 외부 라이브러리의 런타임 충돌 방지를 위한 CDN 로드 방식과 npm 설치 방식의 호환성 검토