form 방식 파일 업로드와 Ajax 방식 파일 업로드의 차이점은 무엇인가요? 각각 언제 사용하는 게 좋은가요?

[jern2]

🥸

[jern2]

• form 방식 파일 업로드
• HTML

태그를 사용해 전체 데이터를 서버로 전송.
• 전송 후 서버에서 응답을 받아 새 페이지로 이동하거나 리다이렉트함.
• 파일은 POST 방식으로 전송되며, 페이지 전체가 새로고침됨.
• 장점: 간단한 구현.
• 단점: UX가 떨어짐(파일 업로드 후 페이지 이동).
• Ajax 방식 파일 업로드
• JavaScript나 jQuery, 최근에는 Axios 등을 이용해 비동기적으로 파일을 업로드.
• 서버에 요청을 보내면서도 현재 페이지는 유지되고, 부분만 업데이트 가능.
• 주로 FormData 객체를 이용해 파일과 데이터를 함께 전송함.

const formData = new FormData();
formData.append("file", fileObject);
axios.post("/upload", formData);

•	장점: UX 향상, 빠른 반응.
•	단점: CORS, 파일 사이즈 처리 등 추가 설정 필요할 수 있음.

•	사용 기준
•	빠른 개발, 단순한 경우: form 방식
•	실무 대부분(대규모 서비스, UI/UX 중요할 때): Ajax 방식

[jern2]

[모범 답변]

form 방식은 페이지 전체를 새로고침하면서 파일을 전송하는 방법입니다.
Ajax 방식은 새로고침 없이 비동기로 파일을 업로드해 사용자 경험을 높일 수 있습니다.
실무에서는 주로 Ajax 방식을 선호하며, 파일 업로드 상태를 표시하거나 페이지를 유지하면서 작업을 진행할 때 유리합니다.