[React] URL을 이용하여 동영상 다운로드 기능 구현 (feat. fetch)

AWS에 저장되어 있는 동영상 url을 받아오고 그 url을 이용하여 동영상을 다운받을수 있는 기능을 구현해야 했다.

인터넷에 찾아보니 동영상은 fetch api를 사용하여 다운을 받을 수 있었다.

fetch('url here', {
    method: 'GET',
    // content-type은 따로 지정하지 않았습니다. 
  })
  .then((response) => response.blob())
  .then((blob) => {

    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    
    link.setAttribute(
      'href',
      url,
    );
    link.setAttribute(
      'download',
      'video.mp4',
    );

    document.body.appendChild(link);

    link.click();

    link.parentNode.removeChild(link);
    
    window.URL.revokeObjectURL(url)
  });

response.blob()

• 응답을 Blob형태로 반환

window.URL.createObjectURL(blob);

• 특정 파일 객체나 로컬 파일 또는 데이터의 참조를 가리키는 새로운 객체 URL을 생성. 새 객체 URL은 특정 File 객체나 Blob개체로 표현 할 수 있다.

• 매개변수로 전달한 blob은 url을 생성할 file객체나 blob객체이다.
  생성된 url은 해당파일의 전체 내용을 url 텍스트로 변환할 값이다.

link.setAttribute

• href : 경로 설정
• download : 파일 이름 설정

window.URL.revokeObjectURL(url)

• 생성된 객체를 해제하는 역할