axios를 사용하여 formData 전송하기

Axios는 자바스크립트에서 HTTP 클라이언트로 사용하기 위해 널리 사용되는 라이브러리입니다. 이 라이브러리를 사용하면 서버로 데이터를 보내거나 받을 때 간편하고 유용한 인터페이스를 제공합니다. 이번 글에서는 axios를 사용하여 formData를 전송하는 방법에 대해 알아보겠습니다.

axios 설치하기

먼저 axios를 설치해야 합니다. npm을 사용하신다면 아래 명령어를 사용하여 설치할 수 있습니다.

npm install axios

FormData 생성하기

데이터를 표현하기 위해 FormData 객체를 사용합니다. 이 객체를 사용하면 파일 업로드와 같은 다양한 유형의 데이터를 쉽게 전송할 수 있습니다. FormData 객체는 빈 상태로 초기화되며, append 메서드를 사용하여 데이터를 추가할 수 있습니다.

const formData = new FormData();
formData.append('name', 'John Doe');
formData.append('email', 'johndoe@example.com');

서버로 요청 보내기

axios를 사용하여 서버로 요청을 보내는 것은 매우 간단합니다. post 메서드를 사용하여 요청을 보낼 수 있으며, 첫 번째 인자로 URL을, 두 번째 인자로 데이터를 전달합니다.

axios.post('/api/submit', formData)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

위의 예제에서는 /api/submit URL로 formData를 전송하고 있습니다. 요청이 성공하면 response.data에 서버로부터 받은 응답 데이터가 들어있습니다. 만약 요청이 실패하면 catch 블록이 실행되어 에러를 처리할 수 있습니다.

파일 업로드하기

FormData를 사용하면 파일 업로드를 간단하게 처리할 수 있습니다. 파일 input 요소를 통해 사용자로부터 파일을 선택한 뒤, append 메서드를 사용하여 FormData에 파일을 추가합니다.

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

const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
formData.append('file', file);

위의 예제는 파일 input 요소를 통해 사용자로부터 파일을 선택하고, FormData에 해당 파일을 추가하는 방법을 보여줍니다.

결론

axios를 사용하여 formData를 전송하는 방법에 대해 알아보았습니다. formData는 다양한 유형의 데이터를 전송할 수 있는 강력한 도구입니다. axios를 사용하면 편리하게 서버와 통신할 수 있으므로, 프론트엔드 개발에서 많이 활용됩니다.

참고 자료:

• axios 공식 문서
• FormData MDN 문서