개념

• ASCII CODE

  • ASCII (American Standard Code for Information Interchange, 미국 정보 교환 표준 부호)
  • 아스키 코드는 1963년 미국 ANSI에서 표준화한 정보교환용 7비트 부호체계이다. 인쇄전신기(Teleprinter)를 통한 전신(통신)에서 사용되기 시작했고, 8비트 컴퓨터에서도 활용되어 오늘날 문자 인코딩의 근간을 이루게 된다.
  • 000(0x00)부터 127(0x7F)까지 총 128개의 부호가 사용된다.

• MIME TYPE (Multipurpose Internet Mail Extension)

  

  • 정의 : Binary Data (이미지, 사진, 동영상 파일 등)인 첨부 파일을 ASCII CODE로 Encoding(암호화)하여 본문에 덧붙이겠다는 뜻이다.
    • 이메일과 함께 첨부할 파일을 텍스트 문자인 ASCII CODE로 전환해서 이메일 시스템을 통해 전달하기 위해 개발되었기 때문에 이름이 Internet Mail Extention이다.
  • Content-Type
    • MIME TYPE으로 변환된 문서의 종류를 알리는 Header type이다.
    • 웹 서버가 보낸 encoding 된 파일의 종류를 알 수가 없어 client browser는 이를 원본 Binary Data로 변환할 때 무슨 파일로 변환해야 하는지 알 수 없다. 이때 필요한 게 Content-Type
  • 종류
    1. 개별 타입
       1. text
          • 특정 문자셋으로 구성된 텍스트 정보나 포스트 스크립트 같은 formatted text 정보 전송에 사용합니다.
          • ex. text/plain, text/html, text/css, text/javascript
       2. multipart
          • 모든 종류의 이미지를 나타내며, 비디오는 포함되지 않습니다.
          • ex. audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav
       3. audio
          • 모든 종류의 오디오 파일을 전송합니다.
          • ex. audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav
       4. video
          • 모든 종류의 비디오 파일을 전송합니다.
          • ex. video/webm, video/ogg
       5. application
          • 모든 이진 데이터(바이너리 데이터)를 전송합니다.
          • ex. application/octet-stream, application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml, application/pdf
    2. 멀티파트 타입
       • 멀티파트 타입은 일반적으로 다른 MIME 타입들을 지닌 개별적인 파트들로 나누어지는 문서의 카테고리를 가리킵니다. 즉 이 타입은 합성된 문서를 나타내는 방법입니다.
       • ex. multipart/form-data, multipart/byteranges

• Stream

  

  • 정의: 시간의 흐름에 따라 발생하는 연속적인 데이터의 흐름 (즉 이런 역할을 맡고 있는 객체)
  • 파일의 경우 데이터 전체가 기록되어있기 때문에 데이터를 처음부터 끝까지 읽으면 되지만, Stream의 경우엔 계속해서 흘러 들어오는 데이터를 의미하기 때문에 실시간으로 들어오는 데이터를 그때 그때 읽고 처리해야 한다.
  • 따라서 대용량 데이터를 서버를 통해 받아서 재생해야 하는 경우 데이터를 모두 받아서 재생하려면 긴 딜레이가 생긴다.
  • 따라서 들어오는 데이터부터 조금씩 메모리의 임시 공간에 저장해서

• Buffer

  • Stream 데이터를 조금씩 읽고, 저장하고, 처리하고, 비우기를 반복하는 메모리 공간이다. 이런 행위를 버퍼링이라고 하며, 임시로 데이터를 저장하는 메모리 공간 혹은 데이터 자체를 버퍼라고 한다.
  • 일반적으로 RAM 메모리의 일부 공간이 버퍼를 위해 사용된다.
  • 즉, Buffer란 특정 용도로 활용하기 위해 임시로 저장하는 Binary 형태의 데이터 저장 객체이다.
  • 스트림은 버퍼를 이용해 흘러 들어오는 데이터를 처리(입력 &출력)하는 객체이고, 버퍼는 스트림을 위해 데이터를 chunk 단위로 쪼개 어 임시로 저장해 두는 객체이다.

• Blob (Binary Large Object)

  • JavaScript에서 Blob(Binary Large Object, 블랍)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용할 수 있습니다.
  • File은 Blob 인터페이스를 상속해 기능을 확장한 것이다.
  • 사용법

    1. 배열을 넣어 Blob 객체를 생성함

       const newBlob = new Blob(array, options);
       

       new Blob([new ArrayBuffer(data)], { type: 'video/mp4' });
       new Blob(new Uint8Array(data), { type: 'image/png' });  
       new Blob(['<div>Hello Blob!</div>'], {
         type: 'text/html',
         endings: 'native'
       });
       

    2. Blob 객체를 URL로 생성한다.

    3. 이 URL을 <a></a>(앵커) 태그에 연결 시키면 다운로드를 받을 수 있습니다. 서버에서 직접 다운로드를 받는 것이 아니라 브라우저 상에 저장되어 있는 blob파일을 다운로드 받게 됩니다. (아래 예제 코드)

코드 예시

1. 여러 Image를 하나의 Image인 Sprite sheet로 만든 후 Download

• Node.js

  const stream = require('stream')
  const fs = require('fs')
  const spritesmith = require('spritesmith')
  
  exports.downloadAllImages = async (req, res, next) => {
    try {
  logger.info('Download sprite sheet called')
      const indexes = req.body.id
      for (let i = 0; i < indexes.length; i++) {
        const id = indexes[i]
        if (!id || id < baseIndex || id > baseIndex + maxCount - 1) {
  logger.error('Invalid parameter image id during download images')
          next(ApiError.REQUEST_PARAMETER_NOT_VALIDATE)
        }
      }
      const imageSrc = await getImagesByIndexes(indexes)
      await spritesmith.run({ src: imageSrc }, (err, result) => {
        if (err) {
          throw err
        } else {
          const readStream = new stream.PassThrough()
          readStream.end(result.image)
          res.writeHead(200, {
            'Content-Type': 'image/png',
            'Content-disposition': 'attachment;filename=sprite-sheet.png',
            'Content-Length': result.image.length
          })
          readStream.pipe(res).on('close', function () {
  logger.info('combine images to one sprite sheet and download file success')
          })
        }
      })
    } catch (e) {
  logger.error(`Error occurred in unity module service during downloading all unity image:\\n${e.toString()}`)
      next(ApiError.GENERAL_ERROR)
    }
  }
  

  • image file들을 불러와서 하나의 sprite sheet으로 변환하기 위해 sprite smith라는 module을 사용하였다.

    https://github.com/twolfson/spritesmith

  • sprite-sheet란 이름을 가진 png 파일로 변환 후 해당 Buffer를 Stream으로 client browser로 전송하였다.

• Nuxt.js

  async download () {
    const response = await this.$axios.post('/unity/image/downloads', { id: [90000000, 90000001, 90000002] }, {
      responseType: 'blob'
    })
    const url = window.URL.createObjectURL(new Blob([response.data]))
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', 'sprite-sheet' + '.png')
  	document.body.appendChild(link)
    link.click()
  	link.remove()
  }
  

2. 여러 Image를 zip file로 압축한 다음 다운로드

• Node.js

  const stream = require('stream')
  const fs = require('fs')
  const AdmZip = require('adm-zip')
  
  exports.downloadAllImages = async (req, res, next) => {
    try {
  logger.info('Download all images called')
      const zip = new AdmZip()
      const imageFilePaths = await getAllImages()
      let missingFilePath = ''
      let missingFileCount = 0
      if (Array.isArray(imageFilePaths) && imageFilePaths.length > 0) {
        imageFilePaths.forEach((v) => {
          if (fs.existsSync(v)) {
            zip.addLocalFile(v)
          } else {
            missingFilePath += `${v}\\n`
            missingFileCount++
          }
        })
        if (missingFileCount > 0) {
  logger.error(`${missingFilePath} file is missing`)
          zip.addFile('missing.txt', Buffer.from(missingFilePath, 'utf8'), '')
        }
        const zipFileName = getZipFileName(imageFilePaths.length, imageFilePaths.length - missingFileCount, missingFileCount)
        const zipBuffer = zip.toBuffer()
        const readStream = new stream.PassThrough()
        readStream.end(zipBuffer)
        res.writeHead(200, {
          'Content-Type': 'application/zip',
          'Content-disposition': `attachment;filename=${zipFileName}`,
          'Content-Length': zipBuffer.length,
          'File-Name': zipFileName
        })
        readStream.pipe(res).on('close', function () {
  logger.info('Download zip file that compress all images success')
        })
      } else {
  logger.error('There is no image file')
        next(ApiError.GENERAL_ERROR)
      }
    } catch (e) {
  logger.error(`Error occurred in unity module service during downloading all unity image:\\n${e.toString()}`)
      next(ApiError.GENERAL_ERROR)
    }
  }
  

  • adm-zip 이란 module을 사용하였다.

    https://github.com/cthackers/adm-zip

• Nuxt.js

  async download () {
    const res = await this.$axios.get('/unity/image/downloads', {
      responseType: 'blob'
    })
    const url =window.URL.createObjectURL(newBlob([res.data]))
    const link =document.createElement('a')
    link.href = url
    link.setAttribute('download', res.headers['file-name'])
  document.body.appendChild(link)
    link.click()
    link.remove()
  }
  

  • 서버 측에서 custom header로 file-name을 set해줬기 때문에 file name을 읽을 수 있었다.