@psyrenpark/storage v1.0.4

storage

제작이유

amplify를 활용한 인증 파일 업로드 다운로드의 재사용성을 위함 \ s3를 사용 하며 권한 체크하여 클라이언트에서 직접 업로드하는 방식으로 사용

• react 지원
• react-native 지원
• vue.js 지원
• gatsby.JS 지원
• next.js(테스트중)

필요 파일

각 프로젝트의 개발 환경에 맞는 aws-exports.js 요청

React- native는
<project root>/aws-exports.js

web/cms은
<project root>/src/aws-exports.js

설정 및 설치

yarn add @psyrenpark/auth
yarn add @psyrenpark/api
yarn add @psyrenpark/storage
yarn add amazon-cognito-identity-js
yarn add aws-amplify

// react-native 추가 설치
yarn add @react-native-community/netinfo

최신 버전 적용 방법

새버전 공지시 npm에 맞는것 재설치

yarn add @psyrenpark/auth
yarn add @psyrenpark/api
yarn add @psyrenpark/storage

• 이후 최신버전으로 변경되었는지 확인할것.

설정

yarn add @psyrenpark/auth
yarn add @psyrenpark/api
yarn add @psyrenpark/storage
yarn add amazon-cognito-identity-js
yarn add aws-amplify

// react-native
yarn add @react-native-community/netinfo

루트에서 세팅

//--------------------------------------------------
// 각 프로젝트 루트
import { Auth } from "@psyrenpark/auth";
import { Api } from "@psyrenpark/api";
import { Storage } from "@psyrenpark/storage";
import awsmobile from "./aws-exports";
Auth.setConfigure(awsmobile);
Api.setConfigure(awsmobile);
Storage.setConfigure(awsmobile);

//--------------------------------------------------
// 혹 import가 지원 되지 않는 javascript 버전에서 사용시

// aws-exports
// export default awsmobile;
module.exports = awsmobile; // 로 변경

// 각 프로젝트 루트
const { apiObject } = require("./api");
const { Api } = require("@psyrenpark/api");
const { Auth, AuthType } = require("@psyrenpark/auth");
const { Storage } = require("@psyrenpark/storage");
const awsmobile = require("./aws-exports");

Auth.setConfigure(awsmobile);
Api.setConfigure(awsmobile);
Storage.setConfigure(awsmobile);

로딩 콜백 함수 샘플

로딩에 대한 불편함을 해결하기위해 콜백형식의 함수를 주입가능하도록 되어있음

// 아래 auth 함수가 실행될때 로딩함수를 넣으면
// 시작시 isLoading => true
// 종료시 isLoading => false
// 로 주입한 함수가 호출됨
const loadingFunction = (isLoading) => {
  dispatch({ type: "SET_IS_LOADING", payload: isLoading });
  // or
  setIsLoading(isLoading);
};

key 생성 관련 예시

//--------------------------------------

//uuid
import { v4 as uuidv4 } from "uuid";


const file_name = uuidv4();

const file_extension = file.name
      .substring(file.name.lastIndexOf("."), file.name.length)
      .toLowerCase();
    console.log(`profile/${file_name}${file_extension}`);

const key =  `profile/${file_name}${file_extension}`,

// ex) 'profile/12d8496a-1cv6-43a8-b43b-9dcc3fd0b09a.png

put

• 이미지 업로드시 사용
• 업로드후 나오는 data.key를 서버에 전달하여 DB에 저장한다.

//--------------------------------------
import { Storage } from "@psyrenpark/storage";

// image
const putImageFunction = async (inputEvent) => {
  // web
  const file = inputEvent.target.files[0];

  // react-native
  // const response = await fetch(image.uri);
  // const file = await response.blob();

  try {
    var data = await Storage.put(
      {
        key: "profile/ce14f5ae-01c6-4a66-a282-13ede4795ec2.png",
        object: file,
        config: {
          contentType: "image/png", // "image/jpeg",
          //  level: 'public',   //  public, protected, private
        },
      },
      loadingFunction // 로딩이 필요하다면 넣는다.
    );

    console.log(data.key);

    // api 통신
  } catch (error) {
    //  실패
  }
};

// text
const putTextFunction = async (inputEvent) => {
  // web
  const file = inputEvent.target.files[0];

  // react-native
  // const response = await fetch(text.uri);
  // const file = await response.blob();

  try {
    var data = await Storage.put(
      {
        key: "profile/ce14f5ae-01c6-4a66-a282-13efe4795ec7.txt",
        object: file,
        config: {
          contentType: "text/plain; charset=utf-8",
          //  level: 'public',   //  public, protected, private
        },
      },
      loadingFunction /// 로딩이 필요하다면 넣는다.
    );

    console.log(data.key);

    // {
    //   key: "profile/ce14f5ae-01c6-4a66-a282-13ede4795ec7.png"
    // }

    // public
  } catch (error) {
    //  실패 처리
  }
};

get

• 인증이 필요한 이미지를 가져올 경우 사용한다.
• 일반적으로는 사용할 일이 없을듯. // 필요시 문의

//--------------------------------------
import { Storage } from "@psyrenpark/storage";

//--------------------------------------
// get image url

const getFileUrlFunction = async () => {
  try {
    var url = await Storage.get(
      {
        key: "profile/ce14f5ae-01c6-4a66-a282-13ede4795ec7.png",
        config: { level: "public", expires: 60 },
      },
      loadingFunction
    );
  } catch (error) {
    // 실패 처리
  }
};

list

• 인증이 필요한 이미지를 가져올 경우 사용한다.
• 일반적으로는 사용할 일이 없을듯. // 필요시 문의

//--------------------------------------
import { Storage } from "@psyrenpark/storage";

//--------------------------------------
// list

const listFileFunction = async () => {
  try {
    var data = await Storage.list(
      {
        path: "/",
      },
      loadingFunction
    );
  } catch (error) {
    // 실패 처리
  }
};

delete

• 일단 특정 경우를 제외한 삭제 기능 차단
• 필요시 요청 할것

//--------------------------------------
import { Storage } from "@psyrenpark/storage";

//--------------------------------------
// remove

const removeFileFunction = async () => {
  try {
    var data = await Storage.remove(
      {
        key: "profile/ce14f5ae-01c6-4a66-a282-13eae4795ec7.png",
      },
      loadingFunction
    );
  } catch (error) {
    // 실패 처리
  }
};