[javascript] 자바스크립트를 활용한 비동기 로그인 기능 구현하기

08 Dec 2023

javascript

웹 애플리케이션에서 사용자가 로그인할 때 페이지를 다시 로드하지 않고 비동기 방식으로 로그인 프로세스를 처리할 수 있습니다. 이를 통해 사용자에게 더 나은 경험을 제공할 수 있으며, 페이지 이동 없이 로그인 버튼을 클릭하고 로그인 결과를 즉시 확인할 수 있습니다.

XMLHttpRequest를 활용한 비동기 통신

XMLHttpRequest 객체를 사용하여 서버와의 비동기 통신을 수행할 수 있습니다.

const xhr = new XMLHttpRequest();
xhr.open('POST', '/login', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 로그인 성공 처리
    } else {
      // 로그인 실패 처리
    }
  }
};
xhr.send(JSON.stringify({ username: 'user', password: 'pass' }));

Fetch API를 활용한 비동기 통신

Fetch API를 사용하여 더 간편하고 강력한 방식으로 비동기 통신을 수행할 수 있습니다.

fetch('/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ username: 'user', password: 'pass' }),
})
  .then(response => {
    if (response.ok) {
      // 로그인 성공 처리
    } else {
      // 로그인 실패 처리
    }
  })
  .catch(error => {
    // 네트워크 오류 처리
  });

로그인 결과 처리

서버로부터 받은 응답을 기반으로 로그인 성공 또는 실패를 처리해야 합니다. 응답은 JSON 형식으로 받을 수 있으며, 이를 분석하여 적절한 메시지를 표시하거나 사용자를 다른 페이지로 리디렉션할 수 있습니다.

fetch('/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ username: 'user', password: 'pass' }),
})
  .then(response => response.json())
  .then(data => {
    if (data.success) {
      // 로그인 성공 처리
    } else {
      // 로그인 실패 처리
    }
  })
  .catch(error => {
    // 네트워크 오류 처리
  });

이러한 방식으로 자바스크립트를 활용하여 비동기 로그인 기능을 구현할 수 있습니다. 사용자는 페이지를 재로드하지 않고도 즉시 로그인 결과를 확인할 수 있게 됩니다.