ν”Όλ“œλ‘œ λŒμ•„κ°€κΈ°
Why do scheduling apps need my email? I built a 100% Client-Side Timetable Builder instead πŸ“…πŸš€
Dev.toDev.to
Frontend

Zero-Backend 섀계λ₯Ό ν†΅ν•œ 데이터 ν”„λΌμ΄λ²„μ‹œ 확보 및 μ„œλ²„ λΉ„μš© 0원 달성

Why do scheduling apps need my email? I built a 100% Client-Side Timetable Builder instead πŸ“…πŸš€

admin@adawati.app2026λ…„ 4μ›” 27일3λΆ„beginner

AI μš”μ•½

Context

κΈ°μ‘΄ μŠ€μΌ€μ€„λ§ μ„œλΉ„μŠ€μ˜ κ³Όλ„ν•œ User Authentication μš”κ΅¬μ™€ Backend μ˜μ‘΄μ„±μœΌλ‘œ μΈν•œ μ‚¬μš©μž μ§„μž… μž₯λ²½ 및 데이터 ν”„λΌμ΄λ²„μ‹œ μΉ¨ν•΄ 문제 λ°œμƒ. λ‹¨μˆœ μ‹œκ°„ν‘œ μž‘μ„± κΈ°λŠ₯에 λΆˆν•„μš”ν•œ μ„œλ²„ λ¦¬μ†ŒμŠ€μ™€ λ„€νŠΈμ›Œν¬ Latencyκ°€ κ²°ν•©λœ λΉ„νš¨μœ¨μ  ꡬ쑰 뢄석.

Technical Solution

  • localStorage APIλ₯Ό ν™œμš©ν•œ μƒνƒœ κ΄€λ¦¬λ‘œ μ„œλ²„ 없이 데이터 Persistence κ΅¬ν˜„ 및 μ‚¬μš©μž κΈ°κΈ° λ‚΄ 데이터 μ™„κ²°μ„± 확보
  • 'Minutes from midnight' λ‹¨μœ„ λ³€ν™˜ λ‘œμ§μ„ ν†΅ν•œ μ‹œκ°„ 좩돌 검증 μ•Œκ³ λ¦¬μ¦˜μ˜ Browser-side 처리둜 λ„€νŠΈμ›Œν¬ Latency 제거
  • Canvas API 기반의 DOM μŠ€λƒ…μƒ· λ Œλ”λ§ 방식을 λ„μž…ν•˜μ—¬ Client-side 이미지 생성 κ΅¬ν˜„
  • Retina λ””μŠ€ν”Œλ ˆμ΄ λŒ€μ‘μ„ μœ„ν•΄ Canvas λ Œλ”λ§ 해상도λ₯Ό 3배수둜 κ°•μ œ μ„€μ •ν•¨μœΌλ‘œμ¨ 고해상도 PNG 좜λ ₯ ν’ˆμ§ˆ 확보
  • JSON Stringify 및 Parse 과정을 ν†΅ν•œ UI Hydration으둜 ν΄λΌμš°λ“œ μ•± μˆ˜μ€€μ˜ Auto-save κ²½ν—˜ 제곡

μ‹€μ²œ 포인트

1. λ‹¨μˆœ CRUD μ€‘μ‹¬μ˜ μ†Œκ·œλͺ¨ 툴 개발 μ‹œ Serverlessλ₯Ό λ„˜μ–΄μ„  Zero-Backend μ•„ν‚€ν…μ²˜ κ²€ν† 

2. μ‹œκ°„ 데이터 처리 μ‹œ ν‘œμ€€ μ‹œκ°„ 포맷보닀 계산 효율이 높은 μ •μˆ˜ν˜•(λΆ„ λ‹¨μœ„) λ³€ν™˜ 적용 κ³ λ €

3. DOM-to-Image λ³€ν™˜ μ‹œ Device Pixel Ratioλ₯Ό κ³ λ €ν•œ 배수 λ Œλ”λ§μœΌλ‘œ 이미지 λΈ”λŸ¬ ν˜„μƒ 방지

νƒœκ·Έ

#Zero-Backend#State Persistence#LocalStorage#Canvas API#Client-side Rendering
원문 읽기