암호화된 실시간 일정 관리 앱 Lakron 개발 가이드

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발, DevOps

대상자

• 초보자~중급 개발자
• 암호화 기술 및 실시간 동기화 구현에 관심 있는 개발자
• Supabase 및 GitHub Actions 활용을 원하는 프론트엔드/백엔드 개발자

핵심 요약

• 암호화 기술 강조: CryptoJS.AES를 사용해 데이터를 브라우저에서 암호화하고, DB 관리자도 접근 불가능
• Supabase Realtime 통합: tasks 테이블에 실시간 채널 구독으로 다기기 동기화
• 자동화된 배포: GitHub Actions를 통해 npm ci, SCP, Caddy 재시작을 하나의 커밋으로 배포

섹션별 세부 요약

1. 앱 개요

• 암호화 기능:

- 비밀번호 + ENCRYPTION_SALT로 256-bit AES 키 생성

- CryptoJS.PBKDF2를 통해 암호화 키 유도

• 실시간 동기화:

- Supabase의 Realtime API를 통해 tasks 테이블 변경사항 실시간 전송

- TaskProvider.tsx에서 subscribeToTasks로 이벤트 처리

2. 데이터베이스 설계

• profiles 테이블:

- id, name, password, created_at 컬럼 포함

- password는 VARCHAR(255)로 저장

• tasks 테이블:

- id, title, time, date, completed, type, description, profile_id, priority, recurring 등 12개 컬럼

- recurrence_rule에 daily/weekly/monthly/yearly/custom 제약 조건

3. 배포 프로세스

• GitHub Actions 워크플로우:

- npm ci → npm run build → SCP로 서버에 파일 전송 → Caddy 재시작

- SSH 키는 GitHub Secrets에 저장

• 서버 설정:

- dist 폴더에 정적 파일 저장, Caddy로 서비스

- 배포 시 다운타임 없음

결론

• 핵심 팁: CryptoJS.AES로 브라우저 단에서 암호화, Supabase Realtime으로 실시간 동기화 구현, GitHub Actions로 자동화된 CI/CD 적용
• 실무 적용 시 주의사항: .env 파일의 VITE_SUPABASE_KEY는 절대 공유 금지, recurrence_rule은 ENUM 타입으로 제약 조건 강화 권장