웹 개발에서 파일 업로드와 다운로드는 매우 일반적인 작업입니다. 이번 글에서는 자바스크립트를 사용하여 파일 업로드와 다운로드를 구현하는 방법에 대해 알아보겠습니다.

파일 업로드

파일을 업로드하기 위해 HTML의 <input type="file"> 요소를 사용합니다. 이 요소를 통해 사용자는 로컬에서 파일을 선택할 수 있습니다. 자바스크립트를 사용하여 파일을 서버로 전송하려면 다음과 같은 단계를 따릅니다:

1. HTML에서 파일 선택을 위한 <input> 요소를 추가합니다:

   <input type="file" id="fileInput">
   <button onclick="uploadFile()">Upload</button>
   

2. 자바스크립트 함수 uploadFile()을 구현합니다: ```javascript function uploadFile() { var fileInput = document.getElementById(“fileInput”); var file = fileInput.files[0];

// 파일을 서버로 전송하는 로직을 구현합니다. }

세부적인 파일 전송 로직은 서버와의 통신 방식에 따라 달라집니다. AJAX나 fetch를 사용하여 파일을 서버로 전송할 수 있습니다.

## 파일 다운로드

파일을 다운로드하기 위해 자바스크립트를 사용하여 클라이언트에서 서버로 요청을 보내고, 서버는 해당 파일을 응답으로 보냅니다. 자바스크립트를 사용하여 파일 다운로드를 구현하는 방법은 다음과 같습니다:

1. 클라이언트에서 파일 다운로드를 위한 버튼을 생성합니다:
```html
<button onclick="downloadFile()">Download</button>

1. 자바스크립트 함수 downloadFile()을 구현합니다: ```javascript function downloadFile() { // 서버로 다운로드 요청을 보내고, 파일을 응답으로 받는 로직을 구현합니다.

var fileUrl = “http://example.com/path/to/file”; // 다운로드 받을 파일의 URL

var link = document.createElement(“a”); link.href = fileUrl; link.download = “file.txt”; // 다운로드할 파일의 이름 link.click(); } ```

위 예제에서는 클라이언트에서 서버로 요청을 보내서 파일을 받아오는 로직은 생략하였습니다. 실제로는 AJAX나 fetch를 사용하여 서버와 통신하고 파일을 응답으로 받아와야 합니다.

요약

이 글에서는 자바스크립트를 사용하여 파일 업로드와 다운로드를 구현하는 방법에 대해 알아보았습니다. 파일 업로드를 위해 HTML의 <input type="file"> 요소를 사용하고, 파일 다운로드를 위해 자바스크립트를 사용하여 클라이언트에서 서버로 요청을 보내고 파일을 받아왔습니다. 이를 응용하여 웹 애플리케이션에서 파일 관련 기능을 구현할 수 있습니다.

Happy coding!