JK
프로젝트
JK
>로딩 중 // 로딩 중
뷰 초기화 중
제작 및 디자인:JK
JK
>로딩 중 // PROJECT DETAILS
PARSING ARCHITECTURE, DIAGRAMS & API ENDPOINTS
프로젝트 목록으로 돌아가기
라이브 데모GitHub에서 보기
LaTeX 이력서 생성기
완료reacttypescriptvitetailwindgogindocker

LaTeX 이력서 생성기

프라이버시를 완벽히 보호하며 ATS에 최적화된 LaTeX 이력서를 출력하는 모듈식 이력서 빌더.

문제 및 해결책

기존 온라인 서비스는 민감한 개인정보를 클라우드에 저장하고 ATS 통과율이 낮은 PDF를 생성합니다. 본 솔루션은 로컬 저장과 정밀한 LaTeX 조판을 제공합니다.

기능

  • ATS 채용 시스템에 최적화된 9개 LaTeX 템플릿
  • 개인정보 유출 걱정 없는 브라우저 로컬 저장
  • Go 백엔드를 통한 실시간 PDF 컴파일 및 미리보기
  • 엄격한 A4 용지 1페이지 규격 자동 유지
  • LaTeX 원본 소스 및 완성형 PDF 다운로드

기술 스택

기술버전목적선택 이유
React19UI frameworkLatest concurrent features, lazy loading
TypeScript~6.0Type safetyPrevents runtime errors on complex resume data model
Vite8.xBuild tool & dev serverFast HMR, native ESM, code splitting via glob imports
Tailwind CSSv4Utility-first stylingRapid UI development, consistent design tokens
Zustand5.xState managementMinimal boilerplate, built-in persist middleware
@dnd-kitcore 6, sortable 10Drag-and-dropAccessible, performant sortable lists
Go1.25+Backend runtimeFast startup, small binaries, excellent concurrency
Gin1.12HTTP frameworkHigh performance, middleware ecosystem
Tectonic0.16.9LaTeX→PDF compilerSelf-contained, no TeX distribution needed
Docker—ContainerizationReproducible builds, production parity
SQLitemodernc.org/sqlite 1.54Stats persistenceNo CGO dependency, cross-compilation
Sentry10.xError tracking & monitoringSession replay, performance monitoring, feedback widget

아키텍처

React 19 SPA

Zustand Store

localStorage

Live HTML Preview

LaTeX Generator

9 Template Engine

Gin Server

:8080

Rate Limiter

API Key Auth

Compile Handler

Tectonic

SQLite Stats

Prometheus

Grafana

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

Frontend (React SPA)

  • React 19 SPA with Zustand state management
  • 9 pluggable template strategy pattern (config + preview + LaTeX generator)
  • Live A4 page simulation with zoom and pagination
  • WebSocket-based real-time compilation streaming
  • Vite 8 with code splitting via import.meta.glob

Backend (Go Microservice)

  • Go/Gin HTTP server with single concern: LaTeX compilation
  • Tectonic subprocess management with --untrusted sandboxing
  • Per-IP token bucket rate limiting (5 rps, burst 10)
  • API key authentication on compile endpoints
  • SQLite for aggregate visit/download statistics

Infrastructure

  • Docker Compose orchestration (backend + Prometheus + Grafana)
  • Multi-stage Docker builds (golang → alpine + tectonic)
  • Vercel deployment for frontend, Render for backend
  • Prometheus metrics with Grafana dashboards

프로젝트 구조

backend
cmd
server
main.goGin server setup, routes, middleware
internal
compiler
handlers
middleware
websocket
frontend
src
components
editor
preview
hooks
stores
templates

API 엔드포인트

Go Backend (포트 8080)

메서드경로목적
POST/api/compileCompile LaTeX to PDF (HTTP)
GET/api/compile/wsWebSocket compile with progress streaming
POST/api/stats/visitRecord page visit
POST/api/stats/downloadRecord PDF download
GET/api/statsGet aggregate stats
GET/api/healthHealth check (Tectonic + DB status)
GET/metricsPrometheus metrics

데이터베이스 설계

stats

2 cols
keyPK
TEXT
value
INTEGER
Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

stats

컬럼유형비고
keyPKTEXTCounter name: 'visits' or 'downloads'
valueINTEGERCounter value, default 0

Single table with 2 key-value rows. WAL mode enabled. Used only for aggregate visit/download statistics — no user data stored.

No relationships. Single table with 2 counter rows.

주요 설계 결정

Frontend-First Architecture

결정: All resume data, editing, preview, and LaTeX generation happen in the browser

이유: Privacy-first: all data stays in browser with localStorage persistence

이점: Zero server costs for editing, user privacy, offline-capable editing

트레이드오프: No cloud sync, no cross-device access, localStorage size limits

Tectonic for LaTeX Compilation

결정: Use Tectonic instead of pdflatex or other TeX distributions

이유: Self-contained binary, no TeX distribution needed on the server

이점: Simple Docker image, reproducible builds

트레이드오프: Slower than pdflatex for complex documents

Zustand over Redux/Context

결정: Use Zustand for state management with built-in persist middleware

이유: Minimal boilerplate, built-in localStorage persistence

이점: Simple state management, easy persistence

트레이드오프: Less ecosystem than Redux

WebSocket for Compile Streaming

결정: Use WebSocket instead of HTTP polling for PDF compilation

이유: Real-time progress feedback improves UX during 5-60s compilation

이점: User sees compilation stages (validating → writing → compiling → done)

트레이드오프: More complex than HTTP polling

Strategy Pattern for Templates

결정: Each template implements a Template interface with config, Preview, and generateLatex

이유: Multiple visual styles with shared data model

이점: Extensible, each template self-contained, lazy-loadable via import.meta.glob

트레이드오프: Code duplication across templates

SQLite for Stats Only

결정: Use SQLite for aggregate visit/download counters only

이유: Zero-config embedded DB adequate for 2 counter rows

이점: No external database dependency, simple deployment

트레이드오프: Write contention under concurrent access

테스트

None configured•단위 테스트 0개

테스트 항목

    부족한 커버리지

    • Unit tests for escapeLatex, generateLatex functions
    • Unit tests for template rendering and LaTeX generation
    • Integration tests for compile handler
    • Integration tests for WebSocket compilation flow
    • E2E tests for critical user flows (edit → preview → export)

    주요 과제

    • 서버리스 환경에서 500ms 미만의 고속 LaTeX 컴파일 구현
    • 동적 콘텐츠 입력 시 A4 1페이지 영역 초과 방지

    주요 학습

    • LaTeX 조판 엔진과 웹 마이크로서비스의 효율적 연동
    • 로컬 퍼스트 아키텍처 기반의 개인정보 보호 설계