- 터보링크를 사용하여 자바스크립트 앱의 다중 파일 업로드 기능 구현하기

09 Nov 2023

javascript

파일 업로드는 많은 웹 애플리케이션에서 필수적인 기능입니다. 자바스크립트를 사용하여 파일 업로드 기능을 구현할 때, 터보링크(TurboLinks)를 활용하면 빠른 페이지 전환을 통해 사용자 경험을 향상시킬 수 있습니다. 이번 튜토리얼에서는 터보링크를 사용하여 자바스크립트 앱의 다중 파일 업로드 기능을 구현하는 방법에 대해 알아보겠습니다.

1. 터보링크(TurboLinks)란?

터보링크는 웹 애플리케이션에서 페이지 전환을 더 빠르게 처리하기 위한 자바스크립트 라이브러리입니다. 일반적으로 웹 페이지를 전환할 때는 전체 페이지를 다시 로드해야 하는데, 터보링크는 페이지의 일부만 업데이트하여 빠른 전환을 가능하게 합니다.

2. 다중 파일 업로드 기능 구현하기

자바스크립트를 사용하여 다중 파일 업로드 기능을 구현하기 위해서는 먼저 파일 선택(input type=”file”) 요소와 업로드 버튼(submit)을 HTML에 추가해야 합니다. 그리고 이벤트 리스너를 사용하여 파일이 선택되면 서버로 파일을 업로드하는 처리를 구현해야 합니다.

document.getElementById('fileinput').addEventListener('change', function(e) {
  var files = e.target.files;
  var formData = new FormData();

  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    formData.append('files[]', file);
  }

  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(function(response) {
    // 파일 업로드 완료 후 처리 로직
  })
  .catch(function(error) {
    // 에러 처리 로직
  });
});

위 코드는 파일이 선택되면 FormData를 사용하여 선택된 파일을 포함한 폼 데이터를 생성하고, fetch API를 통해 서버로 데이터를 전송하는 예시입니다. 여기서는 POST 메소드를 사용하여 ‘/upload’ 엔드포인트에 데이터를 전송하고 있습니다. 업로드가 성공적으로 완료되면 then 블록의 코드가 실행되며, 실패할 경우 catch 블록의 코드가 실행됩니다.

3. 터보링크와 다중 파일 업로드 기능 통합하기

터보링크를 사용하여 파일 업로드 기능을 구현하기 위해서는 터보링크의 페이지 전환 이벤트를 적절히 활용해야 합니다. 터보링크는 ‘turbo:before-fetch-request’, ‘turbo:before-cache’, ‘turbo:before-render’, ‘turbo:load’, ‘turbo:submit-started’ 등의 이벤트를 제공하고 있으므로 이를 활용하여 파일 업로드 기능을 구현할 수 있습니다.

document.addEventListener('turbo:submit-started', function() {
  var files = document.getElementById('fileinput').files;
  var formData = new FormData();

  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    formData.append('files[]', file);
  }

  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(function(response) {
    // 파일 업로드 완료 후 처리 로직
  })
  .catch(function(error) {
    // 에러 처리 로직
  });
});

위 코드는 ‘turbo:submit-started’ 이벤트가 발생하면 FormData를 사용하여 선택한 파일을 포함한 폼 데이터를 생성하고 서버로 전송하는 예시입니다. 파일 업로드 완료 후에는 then 블록의 코드가 실행되며, 실패할 경우 catch 블록의 코드가 실행됩니다.

마무리

터보링크를 활용하여 자바스크립트 앱의 다중 파일 업로드 기능을 구현하는 방법에 대해 알아보았습니다. 터보링크를 사용하면 페이지 전환 속도를 빠르게 유지하면서 파일 업로드 기능을 구현할 수 있습니다. 더 자세한 내용은 터보링크 공식 문서를 참고하시기 바랍니다.

#자바스크립트 #파일업로드