LEVEL 36 QUEST

데이터베이스 설계와 사용자 데이터 관리

무료 웹 도구의 데이터베이스를 설계하고, 사용자 데이터를 안전하게 저장·관리하는 방법을 학습합니다.

Stage 11-3 — 데이터베이스 설계와 사용자 데이터 관리

데이터베이스가 필요한 경우

무료 도구에 데이터베이스(DB)가 필요한지는 데이터 영속성이 필요한지로 결정됩니다.

DB 불필요 — 로컬 스토리지로 충분:

사용자 설정 저장 (다크모드, 언어 등)
최근 계산 기록 (개인만 사용)
임시 데이터 (세션 중에만 필요)

DB 필요:

사용자 간 데이터 비교 ("상위 N%"를 계산하려면 전체 데이터 필요)
사용자 인증이 필요한 경우
관리자 통계/분석이 필요한 경우
결과 영구 저장/공유 링크가 필요한 경우
리더보드/랭킹 기능이 있는 경우

MVP 원칙 복습

MVP 단계에서는 가능하면 DB 없이 시작하세요. 로컬 스토리지(localStorage)만으로 대부분의 기본 기능을 구현할 수 있습니다. 사용자가 늘어나고 데이터 비교/통계 기능이 필요해지면 그때 DB를 추가해도 늦지 않습니다.

로컬 스토리지 활용법

LocalStorage로 기본 데이터 저장

데이터베이스 없이도 브라우저의 localStorage를 활용하면 기본적인 데이터 저장이 가능합니다:

// 결과 저장
function saveResult(result) {
    const history = JSON.parse(localStorage.getItem('calcHistory') || '[]');
    history.unshift({
        ...result,
        timestamp: new Date().toISOString()
    });
    // 최근 10개만 유지
    if (history.length > 10) history.pop();
    localStorage.setItem('calcHistory', JSON.stringify(history));
}

// 결과 불러오기
function loadHistory() {
    return JSON.parse(localStorage.getItem('calcHistory') || '[]');
}

// 사용자 설정 저장
function saveSetting(key, value) {
    const settings = JSON.parse(localStorage.getItem('userSettings') || '{}');
    settings[key] = value;
    localStorage.setItem('userSettings', JSON.stringify(settings));
}

// 다크모드 예시
function toggleDarkMode() {
    const isDark = document.body.classList.toggle('dark-mode');
    saveSetting('darkMode', isDark);
}

// 페이지 로드 시 설정 복원
function restoreSettings() {
    const settings = JSON.parse(localStorage.getItem('userSettings') || '{}');
    if (settings.darkMode) document.body.classList.add('dark-mode');
}
            

localStorage 주의사항:

용량 제한: 약 5MB (대부분의 경우 충분)
문자열만 저장 가능 (JSON.stringify/parse 필요)
시크릿/인코그니토 모드에서는 세션 종료 시 삭제될 수 있음
민감한 정보(비밀번호, 결제 정보 등)는 절대 저장 금지

🔒

여기까지는 미리보기입니다

데이터베이스 설계와 사용자 데이터 관리
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

Google로 3초 만에 시작 →🧵 Threads로 시작 무료 공개 강의 둘러보기 (Lv.1~3)