Nextjs, TypeScript 프론트에서 직접 이미지 올리는 방법 (feat. Lamda 이미지 리사이징) -4-

지난 1편부터 3편까지
로컬, s3 에 올리는 것에 이어, lamda 로 이미지 리사이징을
하는데 까지 진행해보았다.

오늘은 프론트에서 직접 이미지를 올리는 방법에 대해 기록하겠다.

보통

프론트 => 서버 => s3 => 서버 => 프론트로 진행되며,
서버를 이용해야하는 부분이 있는데,

프론트에서 직접 보내게 되면
프론트 => s3 => 프론트 => 서버(db 저장등) 을
해줄 수 있어 장점이 있다고 할 수 있다.

장점에 대한 설명은
https://www.youtube.com/watch?v=yGYeYJpRWPM&t=269s

이 유튜브는 바닐라js 에서의 예를 들기때문에
Nextjs 혹은 리액트 환경에서, 타입스크립트일 경우 어떻게
작업을 할 수 있는지를 기록해둔다.

작업은 크게, 2가지

s3Config.ts

const s3Config = {
      bucketName: "cultureplace",
      dirName: "original",
      region: "ap-northeast-2",
      accessKeyId: String(process.env.NEXT_PUBLIC_S3_ACCESS_KEY_ID),
      secretAccessKey: String(process.env.NEXT_PUBLIC_S3_SECRET_ACCESS_KEY),
    };

/ imgup2.tsx /

import ReactS3Client from "react-aws-s3-typescript";
import React from "react";
 import { s3Config } from './s3Config.ts';

export default function imgup2() {
  const handleFileInput = async (e: any) => {
    const file = e.target.files[0];
    const fileName = file.originalname;
    console.log(file);

    

    const s3 = new ReactS3Client(s3Config);
    const filename = "filename-to-be-uploaded"; /* Optional */

    try {
      const res = await s3.uploadFile(file, fileName);

      console.log(res);
    } catch (exception) {
      console.log(exception);
    }
  };;
  return (
    <div>
      <input
        type="file"
        id="upload"
        className="image-upload"
        onChange={handleFileInput}
      />
    </div>
  );
}

s3 에서 권한에서 cors 설정을 해줘야한다.
(다른 설정들은, 1편, 2편, 3편을 진행하며, 설정되어있다.)

[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"PUT",
"HEAD",
"GET",
"POST"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]

이렇게 프론트엔드에서 서버 api 나 multer 없이 바로 보낼 수 있고,
한번 설정해둔 람다는 s3의 버킷에 파일이 올라갈때 작동되므로,

서버에서 올리나
프론트에서 올리나
관계없이 이미지 리사이징을 잘해준다.

개인적으로는, 프론트에서 올리는 게 좀 더 편하다고
생각되며, 이점이 많다고 하니, 이 방법도 잘 알아두도록 하자.