MSW(Mock Service Worker) mock API 이미지 파일 (바이너리) 다운로드

 

바이너리 타입의 파일 응답 모킹하기

지금 사내 프로젝트는 백엔드 api와 프런트 개발을 동시에 병행적으로 진행하고있다. 따라서 서버단 API가 완성되고 배포되기 이전에는 msw라는 서버 API 모킹 라이브러리를 사용하고 있는데, 실제 백엔드 api 없이도 프런트단에서 mock 서버를 구현해서 가짜로 네트워크 통신을 할 수 있다. 

json 형식으로 통신을 주고받는 건 공식문서에도 잘 나와있어서 Mocking을 했었는데, 이번에 바이너리 타입의 이미지 파일을 get 해오는 부분에서 목서버를 구현하는데 큰 난관이 있었다.

 

응답 예시

프런트에서 이미지 파일을 get 해올때 서버에서 주는 응답은 아래와 같다.

바이너리 데이터

즉, 서버에서는 이 멀티미디어 데이터를 0과 1 값만 존재하는 이진 데이터로 응답해주는 것이다. 

 

HTTP/1.1 200 OK
Content-Type: image/jpeg;charset=UTF-8
Accept-Ranges: bytes
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
Strict-Transport-Security: max-age=31536000 ; includeSubDomains
X-Frame-Options: DENY

 

 

시도 

일반적인 json 형식의 데이터는 직접 mock data를 넣어두고, 이 목데이터를 응답으로 주니까.. 

const todoList = [
{ id: 'bzte_tfG3k2mh3o-Vf-zX', content: 'book a hotel'}, 
{ id: 'rAFHp_GrutBJzt_5r1Gej', content: 'issue a travel card'},
...
]

이와 마찬가지로 이미지파일도 서버에 있는것 처럼 가짜로 표현하려면...? 

 

 

내 로컬 컴퓨터에 있는 이미지 파일을 src > assets 폴더 안에 넣어두고, 모킹 코드를 쓰는 handler 파일에서 이미지 파일을 import 해와서 바이너리 타입으로 응답을 해준다.

라는 프로세스 이겠지?라고 생각하고 실제 이미지 파일을 바이너리 타입으로 변환해보려고 했으나.. 쉽게 되지 않았다. 

 

따라서 아래의 프로세스로 mock 이미지 파일 데이터를 만들었고, 바이너리 타입으로 응답을 주도록 모킹하였다.

 

1. 로컬 pc에 저장되어있는 이미지가 아닌 base64 형식의 파일을 가져오기
   • base64 파일 가져오는 법
     • 구글링으로 찾은 아무 이미지 링크를 base64 인코딩 사이트를 이용해서 base64로 변환해준다.
   •  base64란?
     • 0과 1로 이뤄진 바이너리 형식으로 인코딩 되어있는 데이터를 텍스트 형식으로 변환한 것
2. 텍스트형식의 base64 데이터를 Binary 데이터로 변환하기
   • js의 내장 함수인 atob()를 사용해서 이진데이터로 변환시킨다.
   • atob(encodedData) 함수는 Base64 (en-US) 인코딩된 문자열 데이터를 디코딩한다.
3. 자바스크립트에서 Binary 데이터를 직접 다룰 수 있도록 ArrayBuffer 객체 만들어주기
   • ArrayBuffer란?
     • 바이트로 구성된 배열
     • Js에서 원시데이터 바이너리 데이터를 저장할 수 있는 메모리 공간
   • new ArrayBuffer(16) //16바이트 크기의 버퍼를 생성
   • 연속으로 고정된 크기의 메모리 공간(16바이트 메모리 공간)에 바이너리 데이터를 저장
   • 초기값은 0으로 채워져있음
4. ArrayBuffer에 저장된 바이너리 데이터에 직접 접근할 수 있는 객체인 Unit8Array를 생성
   • ArrayBuffer는 바이트로만 구성된 배열로 "바이트 배열"이라고도 부름
   • ArrayBuffer에 담긴 정보를 직접 수정하는 것은 불가능
   • 따라서 ArrayBufferView 객체를 통해 버퍼를 특정 형식으로 나타냄으로써 버퍼의 내용을 읽고 쓰기가 가능
     • ArrayBufferView 
       • TypedArray, DataView 2종류의 객체가 있음
       • TypedArray (형식화 배열)
         • Unit8Array, Uint16Array, Float32Array 등이 있음
         • Unit8Array
           • 8비트 = 1바이트로 각 바이트 별로 접근 가능한 view 객체
5. ArrayBuffer -> Blob(Binary Large Object) 형식으로 바꾸기
   • Blob?
     • 이미지, 오디오, 비디오 같은 멀티미디어 파일 바이너리 데이터를 객체 형태로 저장한 것
     • base64가 바이너리 데이터를 텍스트로 저장한다면 Blob은 객체 형식으로 저장한다.
   • 만든 ArrayBuffer를 인수로 넣어주어 new Blob(ArrayBuffer) 객체를 만듬

 

msw handler 전체 코드

const base64mockImg =
  'data:image/jpeg;base64,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';
const mockImg = atob(base64mockImg.split(',')[1]); // data:image/jpeg;base64 떼어내서 바이너리 데이터로 디코딩

export const siteHandler = [
//사진 파일 다운로드
  rest.get(`photos/:photoId/download`, (req, res, ctx) => {
    const arrayBuffer = new ArrayBuffer(mockImg.length);
    const view = new Uint8Array(arrayBuffer);
    for (let i = 0; i < mockImg.length; i++) {
      view[i] = mockImg.charCodeAt(i) & 0xff;
    }
    return res(
      ctx.status(200),
      ctx.set('Content-Type', 'image/jpeg'),
      ctx.body(new Blob([arrayBuffer])),
    );
  }),
];

 

mock 이미지를 응답으로 주기위해 위 프로세스대로 차례대로 코드를 작성하고, 응답 바디에 arrayBuffer를 담은 Blob 객체를 리턴하면, 성공적으로 response가 들어온다.

 

 

response body에 담겨오는 모습 콘솔로 확인

 

 

컴포넌트 코드 

export const downloadSiteImageFile = async (photoId: string) => {
  try {
    const { data }: { data: Blob } = await axios.get(
      `http://localhost:5173/photos/${photoId}/download`,
      { responseType: 'blob' },
    );
    return data;
  } catch (err) {
    console.log(err);
  }
};

export const PhotoCard = () => {

 const [imgUrlFromBlob, setImgUrlFromBlob] = useState<string>();
  
    useEffect(() => {
        if (photoData.id) {
          downloadSiteImageFile(photoData.id)
            .then((res) => {
              console.log(res, 'axios res');
              if (res) {
                const urlFromBlob = URL.createObjectURL(res);
                setImgUrlFromBlob(urlFromBlob);
              }
            })
            .catch((err) => console.log(err));
        }
        return () => {
          if (imgUrlFromBlob) {
            URL.revokeObjectURL(imgUrlFromBlob);
          } //브라우저의 메모리관리를 위해 URL 객체 해제
        };
    }, []);
  
  return (
      <CardMedia
        sx={{
          width: 160,
          height: 160,
          border: 'solid 1px',
        }}
        image={imgUrlFromBlob}>
      </CardMedia>
    );
}

 

실제 Blob 객체를 프런트 화면에 나타내기 위해서 이미지 tag에  URL.createObjectURL 을 사용해서 url 을 생성한다. 

 

컴포넌트 코드에서 사진 파일 다운로드해온 응답 response를 찍어보면 Blob 객체가 잘 들어오는 것을 확인할 수 있다.

 

Reference 

https://www.daleseo.com/mock-service-worker/

https://mswjs.io/docs/recipes/binary-response-type

https://github.com/mswjs/msw/issues/461

https://inpa.tistory.com/m/entry/JS-%F0%9F%93%9A-Base64-Blob-ArrayBuffer-File-%EB%8B%A4%EB%A3%A8%EA%B8%B0-%EC%A0%95%EB%A7%90-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%BD%EA%B2%8C-%EC%84%A4%EB%AA%85  

https://curryyou.tistory.com/441