1. 전체 구조 요약

프론트엔드(app.js)에서 생성한 기록 데이터를
JSON 형태로 API 서버에 전달(POST) 하고,
백엔드는 이를 DB에 저장하는 구조입니다.

Frontend (app.js)
    ↓ POST /ranking
Backend API Server
    ↓ INSERT
Database (MariaDB/MySQL)

프론트는 단순히 JSON 객체를 API로 전송하면 되고,
데이터 처리·저장은 모두 서버가 담당합니다.

2. 프론트엔드에서 전송하는 데이터(JSON)

문장 타이핑 완료 후 프론트에서 서버로 보내는 데이터 예:

{
  "userId": "testUser",
  "sentenceId": 3,
  "time": 12.55,
  "date": "2025-12-03T15:30:21.000Z"
}

필드 설명

  • userId : 로그인 후 받은 사용자 아이디\
  • sentenceId : 오늘의 챌린지 문장 ID\
  • time : 걸린 시간(초 단위 또는 ms 단위)\
  • date : 기록 생성 시간

3. 프론트엔드(app.js)에서 API 호출 예시

async function saveRankingToDB(record) {
  const response = await fetch('https://your-api.com/ranking', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(record)
  });

  return await response.json();
}

사용 예:

saveRankingToDB({
  userId: currentUserId,
  sentenceId: todaySentence.id,
  time: finalTime,
  date: new Date().toISOString()
});

4. 랭킹 목록 가져오기(GET 방식)

async function loadRankingFromDB(sentenceId) {
  const response = await fetch(`https://your-api.com/ranking?sentenceId=${sentenceId}`);
  const rankingList = await response.json();
  return rankingList;
}

5. 백엔드(예: Node.js)에서 DB에 저장하는 방식

1) DB 테이블 구조 예시 (MariaDB)

CREATE TABLE typing_ranking (
  id INT AUTO_INCREMENT PRIMARY KEY,
  user_id VARCHAR(50),
  sentence_id INT,
  time_ms FLOAT,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

2) API 저장 예시 (Express)

app.post("/ranking", async (req, res) => {
  const { userId, sentenceId, time, date } = req.body;

  await db.query(
    `INSERT INTO typing_ranking (user_id, sentence_id, time_ms, created_at)
     VALUES (?, ?, ?, ?)`,
    [userId, sentenceId, time, date]
  );

  res.json({ success: true });
});

6. 랭킹 계산 방식 (동일 랭킹 처리)

랭킹은 Dense Ranking 방식 사용:

예시 데이터:

사용자 기록

A 10.20 B 11.00 C 11.00 D 12.50

정렬 + 랭크:

사용자 기록 랭킹

A 10.20 1 B 11.00 2 C 11.00 2 D 12.50 3

7. 전체 흐름도

1) 프론트에서 타이핑 완료
2) 기록(JSON) 생성
3) fetch POST 요청
4) 백엔드 라우터에서 데이터 검증
5) DB에 insert
6) GET /ranking 요청 시 DB에서 정렬 조회 후 전달

8. 개발 시 주의사항

  1. 프론트와 백엔드의 JSON 필드 구조를 반드시 동일하게 유지\
  2. 날짜는 ISO 문자열 형태로 저장하면 DB/서버/프론트 모두 편리\
  3. DB 저장 시 time은 ms 단위로 저장하면 정렬 정확도가 올라감\
  4. 랭킹 정렬 시 ASC (오름차순) 기준\
  5. 프론트는 fetch 성공 여부를 체크해 실패 시 오류 메시지 표시

9. 결론

프론트는 JSON만 만들어 POST 하면 되고,
백엔드는 저장·조회·랭킹 계산만 하면 됩니다.

이 구조는 개발 난이도가 낮고
나중에 시스템 확장(DB 교체·로그인 연동)에도 매우 유리합니다.