[javascript] SweetAlert와 이미지 크롭 기능

24 Nov 2023

javascript

이번에는 SweetAlert 라이브러리와 이미지 크롭 기능을 함께 사용하는 방법에 대해 알아보겠습니다. SweetAlert는 사용자에게 예쁜 알림 창을 보여주는데 사용되는 JavaScript 라이브러리이며, 이미지 크롭은 사용자가 이미지를 잘라내는 기능입니다.

SweetAlert 라이브러리 설치

우선, SweetAlert를 사용하기 위해서는 해당 라이브러리를 프로젝트에 설치해야 합니다. npm을 사용한다면 아래 명령어를 사용하세요.

npm install sweetalert

또는, CDN을 사용할 수도 있습니다. HTML 파일의 <head> 태그 안에 아래 스크립트를 추가하세요.

<script src="https://cdn.jsdelivr.net/npm/sweetalert@2"></script>

SweetAlert로 알림 창 띄우기

SweetAlert를 사용하여 예쁜 알림 창을 띄우려면 아래와 같이 JavaScript 코드를 작성하세요.

Swal.fire('알림', '메시지 내용', 'success');

위 코드에서 첫 번째 인자는 알림 창의 제목, 두 번째 인자는 메시지 내용, 세 번째 인자는 알림 타입입니다. ‘success’ 외에도 ‘warning’, ‘error’ 등 다양한 타입을 사용할 수 있습니다.

이미지 크롭 기능 추가하기

이제 이미지 크롭 기능을 추가해보겠습니다. SweetAlert와 함께 많이 사용되는 이미지 크롭 라이브러리는 cropper.js입니다.

먼저, cropper.js를 프로젝트에 설치합니다.

npm install cropperjs

이후, HTML 파일에 이미지를 선택할 수 있는 버튼을 추가하고, 해당 버튼을 클릭하면 SweetAlert 창이 열리도록 합니다.

<button id="select-image-button">이미지 선택</button>

<script>
  document.getElementById('select-image-button').addEventListener('click', function() {
    Swal.fire({
      title: '이미지 선택',
      html: '<input id="image-input" type="file">',
      confirmButtonText: '크롭하기',
      preConfirm: function() {
        const fileInput = document.getElementById('image-input');
        const file = fileInput.files[0];

        if (file) {
          // 여기에서 크롭 기능을 수행합니다. cropper.js를 사용해서 이미지를 잘라내세요.
          // 자세한 사용법은 cropper.js의 공식 문서를 참조하세요.
        }
      }
    });
  });
</script>

위 코드에서 preConfirm 콜백 함수 안에서 이미지 파일을 가져온 뒤, cropper.js를 사용하여 이미지를 크롭할 수 있습니다. 자세한 사용법은 cropper.js의 공식 문서를 참조하세요.

결론

지금까지 SweetAlert와 이미지 크롭 기능을 함께 사용하는 방법에 대해 알아보았습니다. SweetAlert를 사용하여 예쁜 알림 창을 띄우고, cropper.js를 사용하여 이미지를 크롭할 수 있습니다. 이러한 기능은 웹 애플리케이션에서 사용자 경험을 향상시키는 데 도움이 될 것입니다.

더 자세한 내용은 SweetAlert 공식 문서와 cropper.js 공식 문서를 참조하세요.