Promise와 함께 사용하는 웹 사이트의 로그인 로그 기능 개발

13 Sep 2023

Promise

로그인 로그 기능은 웹 사이트에서 사용자의 로그인 활동을 기록하고 추적하는 데 중요한 역할을 합니다. 이 기능은 사용자들의 로그인 기록을 보고, 보안을 강화하거나 사용자들의 행동을 분석하는 데 도움이 됩니다. 이번 기사에서는 JavaScript의 Promise를 사용하여 웹 사이트의 로그인 로그 기능을 개발하는 방법을 알아보겠습니다.

1. 서버 측 로그인 기록 저장

서버에 로그인 활동을 기록하기 위해, Node.js를 사용하는 것이 일반적입니다. 서버에서 로그인 요청을 받으면, 로그 정보를 데이터베이스나 파일 시스템에 저장합니다. 이를 위해 Promise 패턴을 사용하면 비동기적인 작업을 간편하게 처리할 수 있습니다.

const fs = require('fs');

function saveLoginLog(username) {
  return new Promise((resolve, reject) => {
    const log = `${username} 님이 로그인하였습니다. 로그인 시간: ${new Date().toLocaleString()}\n`;
    fs.appendFile('login.log', log, (error) => {
      if (error) {
        reject(error);
      } else {
        resolve();
      }
    });
  });
}

위의 코드에서 saveLoginLog 함수는 로그인 로그를 저장하기 위한 Promise를 반환합니다. fs.appendFile 메서드를 사용하여 로그를 파일에 추가하고, 작업이 완료되면 Promise를 해결합니다. 작업이 실패하면 Promise를 거부합니다.

2. 클라이언트 측 로그인 요청

웹 사이트의 로그인 양식이 제출되면, 클라이언트에서 서버로 로그인 요청을 보냅니다. 이 때 Promise를 사용하여 비동기적으로 요청을 처리하고 응답을 기다릴 수 있습니다.

function loginUser(username, password) {
  return new Promise((resolve, reject) => {
    // 로그인 요청 보내기
    fetch('/login', {
      method: 'POST',
      body: JSON.stringify({ username, password }),
      headers: { 'Content-Type': 'application/json' }
    })
      .then(response => response.json())
      .then(data => {
        saveLoginLog(username)
          .then(() => resolve(data))
          .catch(error => reject(error));
      })
      .catch(error => reject(error));
  });
}

위의 코드에서 /login 엔드포인트로 로그인 요청을 보내고, 응답을 처리하기 위해 Promise 체인을 사용했습니다. 로그인 로그 저장은 saveLoginLog 함수를 호출하여 처리합니다. 성공적으로 처리되면 데이터를 해결된 Promise로 반환하고, 오류가 발생하면 Promise를 거부합니다.

3. 사용자에게 로그인 결과 표시

클라이언트는 서버로부터 받은 로그인 결과를 사용자에게 표시해야 합니다. 이때도 Promise를 사용하여 비동기적으로 처리할 수 있습니다.

loginUser(username, password)
  .then(data => {
    // 로그인 성공
    displayMessage('로그인 성공');
    // 추가 작업 수행
  })
  .catch(error => {
    // 로그인 실패 또는 오류
    displayMessage('로그인 실패');
    console.error(error);
  });

위의 코드는 loginUser 함수를 호출하여 로그인을 시도한 후, 결과에 따라 메시지를 표시하는 예시입니다. 로그인에 성공한 경우 '로그인 성공' 메시지를 표시하고, 실패하거나 오류가 발생한 경우 '로그인 실패' 메시지와 오류 로그를 콘솔에 출력합니다.

마무리

이와 같은 방법으로 Promise를 사용하여 웹 사이트의 로그인 로그 기능을 개발할 수 있습니다. Promise는 비동기적인 작업을 간결하게 처리하고, 코드의 가독성과 유지 보수성을 높일 수 있는 강력한 도구입니다. 로그인 로그를 저장할 때 서버 측에서 Promise를 사용하고, 클라이언트 측에서도 Promise를 활용하여 로그인 요청과 결과를 관리해야 합니다.

#Promise #로그인로그 #웹개발