자바스크립트는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나입니다. 이번 글에서는 자바스크립트를 사용하여 파일 처리 및 다운로드 기능을 구현하는 방법에 대해 알아보겠습니다.

파일 선택하기

많은 웹 애플리케이션에서는 사용자가 파일을 선택하고 업로드 할 수 있는 기능이 필요합니다. 자바스크립트를 사용하여 파일 선택하기 기능을 추가해보겠습니다. 다음은 파일 선택 기능을 구현할 수 있는 간단한 코드입니다:

<input type="file" id="fileInput">

<script>
  const fileInput = document.getElementById('fileInput');
  
  fileInput.addEventListener('change', (event) => {
    const selectedFile = event.target.files[0];
    console.log(selectedFile.name);
    console.log(selectedFile.size);
    console.log(selectedFile.type);
  });
</script>

위 코드에서는 input 요소를 사용하여 파일 선택 UI를 생성하고, change 이벤트 리스너를 등록하여 파일 선택이 변경되었을 때 동작하도록 합니다. 선택한 파일은 event.target.files를 통해 접근 가능하며, name, size, type 등의 속성을 통해 파일 정보를 얻을 수 있습니다.

파일 다운로드하기

웹 애플리케이션에서는 사용자에게 파일을 다운로드할 수 있는 기능도 필요할 수 있습니다. 아래 코드는 자바스크립트를 사용하여 파일을 다운로드하는 방법을 보여줍니다:

const downloadButton = document.getElementById('downloadButton');

downloadButton.addEventListener('click', () => {
  const fileContent = 'This is a sample file content.';
  const fileName = 'sample.txt';
  
  const blob = new Blob([fileContent], { type: "text/plain" });
  const url = URL.createObjectURL(blob);
  
  const a = document.createElement('a');
  a.href = url;
  a.download = fileName;
  a.click();
  
  URL.revokeObjectURL(url);
});

위 코드에서는 다운로드 버튼을 클릭했을 때 동작하는 이벤트 리스너를 등록하고, 파일의 내용과 이름을 정의합니다. 그리고 Blob 객체를 사용하여 파일을 생성한 뒤, 생성한 URL을 <a> 태그에 연결하여 다운로드를 수행합니다.

정리

이번 글에서는 자바스크립트를 사용하여 파일 처리 및 다운로드 기능을 구현하는 방법을 알아보았습니다. 파일 선택하기와 파일 다운로드하기는 웹 애플리케이션에서 자주 사용되는 기능이므로, 이러한 기능을 자바스크립트를 통해 구현할 수 있다면 웹 개발에 많은 도움이 될 것입니다.