SweetAlert2 + 외부 연동 & 실무 예제｜API 호출·입력폼·Toast 활용법

글쓴이 /

SweetAlert2는 단순 팝업을 넘어서 서버 요청, 사용자 입력, 토스트 알림 등 다양한 실무 상황에 활용할 수 있습니다. 이 글에서는 Fetch API 연동, 입력폼 처리, Toast 알림 만들기 등 자주 쓰이는 패턴을 정리했습니다. 실제 프로젝트에서도 바로 적용 가능한 코드 예제와 함께 소개합니다.

👉 SweetAlert2 공식 웹페이지 보러가기

Fetch API와 연동하기

👉 상세 가이드는 별도 글: SweetAlert2와 Fetch API 연동｜사용자 입력 후 서버 요청 처리 예제

Swal.fire({
  title: '이메일을 입력하세요',
  input: 'email',
  showCancelButton: true,
  confirmButtonText: '전송'
}).then((result) => {
  if (result.isConfirmed) {
    fetch('/api/subscribe', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: result.value })
    })
    .then(() => Swal.fire('구독 완료!', '', 'success'))
    .catch(() => Swal.fire('실패했습니다.', '', 'error'));
  }
});
JavaScript
  • 사용자 입력값 → 서버로 전송
  • Fetch API와 결합해 구독, 등록, 로그인 등 실무 처리 가능

사용자 입력값 받아오기

👉 상세 가이드는 별도 글: SweetAlert2에서 입력값 받아오기｜사용자 입력 처리 방법과 예제

Swal.fire({
  title: '닉네임을 입력하세요',
  input: 'text',
  inputPlaceholder: '예: 코코글로',
  showCancelButton: true
}).then((result) => {
  if (result.value) {
    Swal.fire(`입력한 닉네임: ${result.value}`);
  }
});
JavaScript
  • input: 'text', 'email', 'password', 'textarea' 등 다양한 타입 지원
  • 입력값을 그대로 확인창에 표시하거나 서버와 연동 가능

Toast 알림 만들기

👉 상세 가이드는 별도 글: SweetAlert2로 예쁜 Toast 알림 만들기｜간단한 JS 코드 예제 포함

const Toast = Swal.mixin({
  toast: true,
  position: 'top-end',
  showConfirmButton: false,
  timer: 2000,
  timerProgressBar: true
});

Toast.fire({
  icon: 'success',
  title: '저장되었습니다!'
});
JavaScript
  • 상단/하단 위치 지정 가능
  • toast: true 옵션으로 미니 알림창 구현
  • 알림성 메시지, 상태 피드백에 최적화

SweetAlert2 실무 활용 포인트

  • 입력값 → 서버 전송 → 응답 결과 팝업으로 표시
  • 로그인/회원가입/구독 폼에 적용하면 UX 개선
  • Toast 알림으로 로직 완료 피드백 제공
  • 비동기 API 요청과 결합하면 더욱 강력

마무리

SweetAlert2는 단순한 알림창을 넘어 실무형 UI/UX 도구로 활용할 수 있습니다.
특히 사용자 입력 → 서버 요청 → 결과 피드백 흐름은 대부분의 웹 서비스에서 공통적으로 쓰이는 패턴입니다.
이 글에서 소개한 예제들을 활용하면 프로젝트에서 더 직관적이고 세련된 사용자 경험을 제공할 수 있습니다.

위로 스크롤