axios 2

[React + SpringBoot] 프론트에서 axios로 MultipartFile 을 보내고 백엔드에서 받기

프론트에서 axios로 MultipartFile를 전달해보겠다. 우선 Axios로 MultipartFile을 보내기 위해서는 FormData 객체를 사용해야한다. ❓ FormData를 사용하는 이유파일 업로드에 최적화된 형식이며 텍스트 + 파일을 함께 보낼 수 있기때문에 백엔드에서 @RequestParam으로 받을 수 있다. 그리고 FormData를 사용하면 Axios가 Content-Type header를 자동으로 설정해준다. 이때 multipart/form-data는 boundary라는 하나의 요청안에 여러 개의 데이터를 서로 구분해주는 경계선이 필요하다.이것을 Axios가 FormData객체를 감지해서 자동으로 생성해주는데 직접 headers: { "Content-Type": "multipar..

리액트 2025.06.11

[JavaScript] 비동기 처리를 위한 Fetch 와 Axios 를 동시에 알아보기

🔷 Fetch ❓Fetch란?자바스크립트에서 비동기적으로 HTTP요청을 수행하기 위한 최신 API로XHR 보다 더욱 간결하고 효율적인 기능을 제공한다.Promise를 기반으로 하여 then 또는 async/await 사용 가능하다Response를 두 번에 나눠 받으며 , Json으로 변환은 직접 해주어야한다.  ❓ Fetch를 사용하는 이유Fetch는 브라우저가 기본으로 제공하는 API 이기 때문에 간편하게 사용할 수 있으며간단한 네트워크 요청의 경우 가벼운 코드로 활용이 가능하다.  ✏️ Fetch 기본 구조fetch("요청 보낼 서버의 url") .then((response1) => { //첫번째 response 처리 }).then(response2) => { //두번째 response 처..

JavaScript 2025.02.11