[WIL] Week 17

1. FACTS

최종 프로젝트 프론트엔드 진행 : 추억을 공유하는 커뮤니티 (마이크로 서비스 아키텍처)

• 중간 발표 튜터님 피드백 반영
• S3 적용

---

2. FEELINGS

• 튜터님 피드백 중 프론트엔드에서 수정할 부분을 파악해보니 서비스적인 측면에서 생각하지 못했던 부분이 많았다. 이를 반영해서 팀원들과 같이 수정해나갔다.

---

3. FINDINGS

• S3를 적용하기 위해 기존 JSON 형태로 받아왔던 데이터를 formData 형태로 받아와야 했다. 프레임워크가 있었다면 자동으로 파싱이 되었지만, 사용하고 있지 않기 때문에 multer나 formidable 라이브러리를 이용해 직접 파싱을 해야했다.
• formidable로 파싱하면 텍스트 데이터는 fields에 이미지 같은 파일은 files에 담기게 된다. 이 객체들 안에 담긴 데이터를 뽑아와 기존에 우리가 받아왔던 params라는 객체 안에 담아 파라미터로 넘겼다.

const form = formidable({ allowEmptyFiles: true, minFileSize: 0 });
let fields;
let files;
try {
  [fields, files] = await form.parse(req);
} catch (err) {
  if (err.code === formidableErrors.maxFieldsExceeded) {
  }
  console.error(err);
  res.writeHead(err.httpCode || 400, { 'Content-Type': 'text/plain' });
  res.end(String(err));
  return;
}
if (fields.authorization[0]) {
  const authorization = fields.authorization[0];
  const userId = authmiddleware(req, res, authorization);
  params = { userId };
}
params.bodies = {};
params.bodies.annualCategory = fields.annualCategory[0];
params.bodies.title = fields.title[0];
params.bodies.content = fields.content[0];
if (files.img && files.img[0]) {
  params.bodies.img = files.img[0];
}
if (fields.previousImg[0]) {
  params.bodies.previousImg = fields.previousImg[0];
}

• 기존 S3 업로드를 위해 multer라는 라이브러리를 같이 쓰기로 했는데, formidable과 multer를 같이 사용하면 충돌이 일어날 수 있다고 해서 node.js에 기본으로 내장된 fs를 사용하기로 했다.

import aws from 'aws-sdk';
import fs from 'fs';
import dotenv from 'dotenv';
import sharp from 'sharp';

dotenv.config();

let s3 = new aws.S3({
  accessKeyId: process.env.S3_AWS_ACCESS_KEY_ID,
  secretAccessKey: process.env.S3_AWS_SECRET_ACCESS_KEY,
  region: process.env.S3_AWS_REGION,
});

async function imageUpload(img) {
  if (img.size == 0) {
    return null;
  } else {
    const filename = `${Date.now()}_${img.newFilename}`;
    const resizedFilename = `resized+${filename}`;

    await sharp(img.filepath)
      .resize({
        width: 600,
        height: 500,
        fit: 'contain',
        background: { r: 255, g: 255, b: 255, alpha: 1 },
      })
      .toFile(`${resizedFilename}`);

    let uploadParams = { Bucket: process.env.S3_AWS_BUCKET_NAME, Key: filename, Body: '' };
    let fileStream = fs.createReadStream(`${resizedFilename}`);
    fileStream.on('error', function (err) {
      console.log('File Error', err);
    });

    uploadParams.Body = fileStream;
    uploadParams.ContentType = img.mimetype;
    const result = await s3.upload(uploadParams).promise();
    fs.unlinkSync(`${resizedFilename}`);

    return result.Location;
  }
}

async function imageDelete(key) {
  const params = {
    Bucket: process.env.S3_AWS_BUCKET_NAME,
    Key: key,
  };

  return await s3.deleteObject(params).promise();
}

export { imageUpload, imageDelete };

• 이미지 리사이징을 위해 sharp 라이브러리도 같이 사용하기로 했다.

---

4. FUTURE

• 서버 속도 개선하기
• 사용자 피드백 수용하기