AJAX, Axios

yunjeong·2021년 9월 29일

Today I Learned

목록 보기

1/4

210929 TIL

만들고있는 프로젝트에서 라이브러리를 바꾸면서 서버 연결 방식이 axios에서 ajax로 바뀌었다. (라이브러리가 ajax 방식의 서버 업로드를 기본 지원함)

새로 사용하는 라이브러리는 FilePond(https://github.com/pqina/react-filepond)라는 건데, css 디자인과 애니메이션을 모두 제공하여 예쁘고 사용성이 좋다. 각종 props도 잘 정의되어 있어서 그대로 쓰기 좋았다. 더 잘 사용하기 위해 업로드 방식을 알아봤다.

FilePond 라이브러리 업로드 방식

POST 방식으로 URL에 config와 form data를 담아서 보냈음
- 헤더 타입 : multipart/form-data
공식 Docs에서 제공하는 업로드 프로세스
1. FilePond는 POST 요청을 사용하여 my-file.jpg 파일을 multipart/form-data로 업로드합니다.
2. 서버는 파일을 고유한 위치에 저장합니다.
  tmp/12345/my-file.jpg
3. 서버는 text/plain 응답에서 고유한 위치 ID12345를 반환합니다.
4. FilePond는 숨겨진 입력 필드에 고유 ID 12345를 저장 합니다.
5. 클라이언트는 고유 ID를 가진 숨겨진 입력 필드가 포함된 FilePond 상위 양식을 제출합니다.
6. 서버는 고유 ID를 사용하여 tmp/12345/my-file.jpg를 최종 위치 로 이동 하고 tmp/12345 폴더를 제거 합니다.

ajax와 Flask의 연결성도 괜찮은 것 같아 더 조사해보려고 한다. 이에따라 ajax, axios의 특징, 차이를 정리해보았다.

그전에.. 기존에 사용했던 코드도 같이 기록해둔다. axios도 모듈만 설치하면 아주 간단하게 사용할 수 있어서, 다른 프로젝트에서도 사용해보려고 한다.

기존에 사용했던 코드 - axios 방식

const [selectedFiles, setSelectedFiles] = useState(null);

//파일 전송 핸들러
  function submitFileHandler() {
    const formData = new FormData();

    formData.append(
      //"uploadFile", //name값으로 string 메시지
      selectedFiles, //value값은 파일 정보
      selectedFiles.name // filename값은 파일명
    );

    const config = {
      headers: {
        "content-type": 'multipart/form-data'
      }
    };

    axios.post(UPLOAD_URL, formData, config)
     .then(res => {console.log('send ok', res)})
     .catch(err => {console.log('send fail', err)})
  }