[javascript] SweetAlert와 페이스북 새글 작성 기능

24 Nov 2023

javascript

이번 글에서는 SweetAlert 라이브러리와 페이스북의 새글 작성 기능을 연계하여 사용하는 방법에 대해 알아보겠습니다.

SweetAlert 소개

SweetAlert는 사용자에게 예쁘고 유연한 모달 대화상자를 제공하는 JavaScript 라이브러리입니다.

기존의 일반적인 alert 함수 대신 SweetAlert를 사용하면 좀 더 보기 좋은 메시지 창을 만들 수 있습니다.

페이스북 새글 작성 기능

페이스북의 새글 작성 기능은 사용자가 텍스트를 입력하고 글을 작성할 수 있는 모달 창을 띄워주는 역할을 합니다. 이를 구현하기 위해서는 SweetAlert를 사용해서 모달 창을 만들고, 사용자가 입력한 텍스트를 가져와서 서버로 전송해야 합니다.

다음은 SweetAlert와 페이스북 새글 작성 기능을 연계하여 사용하는 예제 코드입니다.

const Swal = require('sweetalert2');

Swal.fire({
  title: '텍스트 입력',
  input: 'textarea',
  inputAttributes: {
    autocapitalize: 'off'
  },
  showCancelButton: true,
  confirmButtonText: '확인',
  cancelButtonText: '취소',
  showLoaderOnConfirm: true,
  preConfirm: (text) => {
    return fetch('/api/posts', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ text: text })
      })
      .then(response => {
        if (!response.ok) {
          throw new Error(response.statusText);
        }
        return response.json();
      })
      .catch(error => {
        Swal.showValidationMessage(
          `Request failed: ${error}`
        );
      });
  }
})
  .then(result => {
    if (result.value) {
      Swal.fire({
        title: '글 작성 완료!',
        html: `신규 글의 ID는 <strong>${result.value.id}</strong>입니다.`,
        confirmButtonText: '닫기'
      });
    }
  });

위의 코드를 살펴보면, SweetAlert의 fire 함수를 사용하여 모달 창을 띄우고, 입력 필드의 타입을 textarea로 지정하였습니다. 텍스트를 입력하고 확인 버튼을 누르면, preConfirm 핸들러가 호출되어 입력된 텍스트를 서버로 전송합니다.

전송이 성공적으로 완료되면, SweetAlert를 다시 사용하여 “글 작성 완료!” 메시지를 띄워줍니다. 이때 새롭게 작성된 글의 ID는 result.value를 통해 가져올 수 있습니다.

위의 코드를 참고하여 SweetAlert와 페이스북 새글 작성 기능을 함께 사용해보세요!