바이트 스트림 - at 파일업로드

개요

파일 업로드 기능 공부하다가 , 바이트 스트림이란걸 알아야 해서 GPT 랑 머리싸매면서 공부해서 정리함.

메모

바이트 스트림이 뭔데요?

수도꼭지에서 물 받는거랑 똑같습니다.

• 수도관 = 데이터 이동하는 통로
• 물 = 파일 데이터
• 수도꼭지 = 데이터 조절하는 부분

실제로 어떻게 쓰는건데요?

프론트엔드에서

// 파일 업로드할 때 이렇게 하면 됨
const formData = new FormData();
formData.append('file', file);
 
// 진행상황도 볼 수 있음
xhr.upload.onprogress = (e) => {
    const progress = (e.loaded / e.total) * 100;
    console.log(`${progress}% 완료`);
};

백엔드에서

// 스프링에서 이렇게 받으면 됨
@PostMapping("/upload")
public String handleUpload(@RequestParam("file") MultipartFile file) {
    // 8KB씩 조금조금 처리함
    byte[] buffer = new byte[8192];
    
    try (InputStream in = file.getInputStream()) {
        // 파일 저장 로직
    }
    return "성공";
}

이렇게 하는 이유가 뭔데요?

1. 메모리 아끼려고

   • 1GB 파일을 한번에 올리면 서버 터질 수 있음
   • 8KB씩 조금조금 올리면 안전함

2. 실패해도 괜찮음

   • 중간에 끊겨도 거기서부터 다시 시작하면 됨
   • 카톡 파일 전송할 때 이어보내기 생각하면 됨

3. 진행상황 보여줄 수 있음

   • 유튜브 동영상 로딩할 때처럼
   • 사용자한테 얼마나 남았는지 보여줄 수 있음

실제로 어디서 씀?

• 유튜브 동영상 스트리밍
• 카톡 파일 전송
• 구글 드라이브 업로드
• 이미지 갤러리 업로드

다 비슷한 원리로 동작합니다.

주의할 점

1. 파일 크기 제한하기

   • 서버 메모리 터지면 안되니까
   • 보통 10MB로 제한함

2. 확장자 검사하기

   • exe 같은거 받으면 큰일남
   • 이미지나 문서만 받도록 처리

3. 임시 저장소 쓰기

   • 클라우드 스토리지 추천
   • 서버 용량 터지면 안되니까

참고자료

• MDN 파일 API 문서
• 스프링 파일 업로드 가이드