[javascript] 비동기 데이터 요청을 이용한 게임 점수 저장

11 Dec 2023

javascript

이번 글에서는 JavaScript를 사용하여 비동기 데이터 요청을 이용하여 게임 점수를 저장하는 방법에 대해 알아보겠습니다. 이 기능을 구현하기 위해서는 HTML, JavaScript, 그리고 서버측 코드가 필요합니다.

게임 점수를 저장할 API 작성

먼저, 서버에 사용자의 게임 점수를 저장할 API를 작성해야 합니다. 예를 들어, RESTful API를 사용하여 POST 요청으로 사용자의 아이디와 게임 점수를 전달하고, 서버는 해당 정보를 저장하고 응답을 반환합니다.

다음은 간단한 Node.js와 Express를 사용한 예시 코드입니다.

// server.js
const express = require('express');
const app = express();
const bodyParser = require('body-parser');

app.use(bodyParser.json());

app.post('/save-score', (req, res) => {
  const { userId, score } = req.body;
  
  // 게임 점수를 저장하는 로직 (예: 데이터베이스에 저장)

  res.json({ message: '게임 점수가 저장되었습니다.' });
});

app.listen(3000, () => {
  console.log('서버가 3000 포트에서 실행 중입니다.');
});

JavaScript를 통한 비동기 데이터 요청

이제, 클라이언트 측에서 POST 요청을 보내어 게임 점수를 저장할 수 있는 JavaScript 코드를 작성해야 합니다.

// client.js
const saveScore = async (userId, score) => {
  try {
    const response = await fetch('/save-score', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ userId, score }),
    });
    const data = await response.json();
    console.log(data.message);
  } catch (error) {
    console.error('게임 점수 저장에 실패했습니다.', error);
  }
};

// 사용 예시
saveScore('user123', 1000);

결론

이렇게 서버에 API를 작성하고, 클라이언트에서 비동기 데이터 요청을 보내어 게임 점수를 저장할 수 있습니다. 이를 통해 게임 점수 저장 기능을 구현할 수 있으며, 사용자 경험을 향상시킬 수 있습니다.

본문 작성을 위해 다음의 참고자료를 활용하였습니다: