클라우드 스토리지는 안정성, 확장성, 보안으로 인해 기업, 개발자, 연구원 모두에게 필수적인 솔루션이 되었습니다. 저는 최근 연구 프로젝트의 일환으로 Dropbox API를 React 애플리케이션 중 하나에 통합하여 클라우드 스토리지 처리 방식을 향상시켰습니다.

이 블로그 게시물에서는 Dropbox API를 React 애플리케이션에 성공적으로 통합하는 데 도움이 되는 명확한 지침과 모범 사례를 제공하면서 통합 프로세스를 안내해 드리겠습니다.

Dropbox 환경 설정

React 앱에서 Dropbox를 사용하는 첫 번째 단계는 전용 Dropbox 앱을 설정하는 것입니다. 이 프로세스를 통해 애플리케이션은 Dropbox의 API에 액세스할 수 있고 프로그래밍 방식으로 Dropbox와 상호 작용할 수 있습니다.

1 — Dropbox 앱 만들기

Dropbox 개발자 포털을 통해 Dropbox 앱을 만들어야 합니다. 방법은 다음과 같습니다.

• 계정 생성: 아직 계정이 없다면 Dropbox 계정을 만드세요. 그런 다음 Dropbox 개발자 포털로 이동하세요.

• 앱 생성: 앱 생성을 클릭하고 원하는 앱 권한을 선택하세요. 대부분의 사용 사례에서 '전체 Dropbox' 액세스를 선택하면 앱에서 전체 Dropbox 계정의 파일을 관리할 수 있습니다.

• 구성: 앱 이름을 지정하고 프로젝트 요구 사항에 따라 설정을 구성합니다. 여기에는 API 권한 지정 및 액세스 수준 정의가 포함됩니다.

• 액세스 토큰 생성: 앱을 만든 후 액세스 토큰을 생성합니다. 이 토큰을 사용하면 매번 사용자 로그인이 필요 없이 React 앱이 Dropbox를 인증하고 상호 작용할 수 있습니다.

Dropbox를 React 애플리케이션에 통합

이제 Dropbox 앱이 준비되었으므로 통합 프로세스로 넘어가겠습니다.

2 — Dropbox SDK 설치

먼저 React 앱을 통해 Dropbox와 상호작용할 수 있는 도구를 제공하는 Dropbox SDK를 설치해야 합니다. 프로젝트 디렉터리에서 다음을 실행합니다.

npm install dropbox

Dropbox SDK를 프로젝트에 종속 항목으로 추가합니다.

3 — 환경 변수 구성

보안상의 이유로 Dropbox 액세스 토큰과 같은 민감한 정보를 하드코딩하는 것은 피해야 합니다. 대신 환경 변수에 저장하세요. React 프로젝트의 루트에서 .env 파일을 만들고 다음을 추가합니다:

REACT_APP_DROPBOX_ACCESS_TOKEN=your_dropbox_access_token_here

4 — React에서 Dropbox 클라이언트 설정

환경 변수가 설정되면 SDK를 가져오고 Dropbox 클라이언트 인스턴스를 만들어 React 앱에서 Dropbox를 초기화하세요. Dropbox API 설정의 예는 다음과 같습니다.

import { Dropbox } from 'dropbox';
const dbx = new Dropbox({ accessToken: process.env.REACT_APP_DROPBOX_ACCESS_TOKEN });

Dropbox에 파일 업로드

이제 Dropbox가 통합된 React 앱에서 직접 파일을 업로드할 수 있습니다. 파일 업로드를 구현하는 방법은 다음과 같습니다.

5 — 파일 업로드 예

  /**
  * Uploads a file to Dropbox.
  *
  * @param {string} path - The path within Dropbox where the file should be saved.
  * @param {Blob} fileBlob - The Blob data of the file to upload.
  * @returns {Promise} A promise that resolves when the file is successfully uploaded.
  */
 const uploadFileToDropbox = async (path, fileBlob) => {
     try {
         // Append the root directory (if any) to the specified path
         const fullPath = `${REACT_APP_DROPBOX_ROOT_DIRECTORY || ""}${path}`;

         // Upload file to Dropbox
         const response = await dbx.filesUpload({
             path: fullPath,
             contents: fileBlob,
             mode: {
                 ".tag": "overwrite"
             }, // Overwrite existing files with the same name
             mute: true, // Mutes notifications for the upload
         });

         // Return a success response or handle the response as needed
         return true;
     } catch (error) {
         console.error("Error uploading file to Dropbox:", error);
         throw error; // Re-throw the error for further error handling
     }
 };

6 — UI에서 파일 업로드 구현

이제 업로드 기능을 React 앱의 파일 입력에 연결할 수 있습니다.

const handleFileUpload = (event) => {
  const file = event.target.files[0];
  uploadFileToDropbox(file);
};

return (
  

    
);

Dropbox에서 파일 검색

Dropbox에서 파일을 가져와서 표시해야 하는 경우가 많습니다. 파일을 검색하는 방법은 다음과 같습니다.

7 — 파일 가져오기 및 표시

const fetchFileFromDropbox = async (filePath) => {
    try {
        const response = await dbx.filesGetTemporaryLink({
            path: filePath
        });
        return response.result.link;
    } catch (error) {
        console.error('Error fetching file from Dropbox:', error);
    }
};

8 — Dropbox의 파일 및 폴더 나열

저희가 통합한 주요 기능 중 하나는 Dropbox 디렉터리의 폴더와 파일을 나열하는 기능이었습니다. 우리가 한 방법은 다음과 같습니다.

export const listFolders = async (path = "") => {
    try {
        const response = await dbx.filesListFolder({
            path
        });
        const folders = response.result.entries.filter(entry => entry['.tag'] === 'folder');
        return folders.map(folder => folder.name);
    } catch (error) {
        console.error('Error listing folders:', error);
    }
};

9 — React에서 파일 표시하기

가져온 다운로드 링크를 사용하여 이미지나 동영상을 표시할 수 있습니다.

    import React, { useEffect, useState } from 'react';
    import { Dropbox } from 'dropbox';

    // Initialize Dropbox client
    const dbx = new Dropbox({ accessToken: process.env.REACT_APP_DROPBOX_ACCESS_TOKEN });

    /**
    * Fetches a temporary download link for a file in Dropbox.
    *
    * @param {string} path - The path to the file in Dropbox.
    * @returns {Promise} A promise that resolves with the file's download URL.
     */
     const fetchFileFromDropbox = async (path) => {
      try {
        const response = await dbx.filesGetTemporaryLink({ path });
        return response.result.link;
      } catch (error) {
        console.error('Error fetching file from Dropbox:', error);
        throw error;
      }
    };

    /**
    * DropboxMediaDisplay Component:
    * Dynamically fetches and displays a media file (e.g., image, video) from Dropbox.
    *
    * @param {string} filePath - The path to the file in Dropbox to be displayed.
    */
    const DropboxMediaDisplay = ({ filePath }) => {
      const [fileLink, setFileLink] = useState(null);

      useEffect(() => {
        const fetchLink = async () => {
          if (filePath) {
            const link = await fetchFileFromDropbox(filePath);
            setFileLink(link);
          }
        };
        fetchLink();
      }, [filePath]);

      return (
        

          {fileLink ? (
          
          ) : (
          
Loading media...
          )}
        
      );
    };

    export default DropboxMediaDisplay;

사용자 응답 처리

Huldra 프레임워크 내에서 설문조사나 피드백 양식의 사용자 응답을 저장하는 데에도 Dropbox가 사용되었습니다. 사용자 응답을 저장하고 관리하는 방법은 다음과 같습니다.

10 — 응답 저장

사용자 응답을 캡처하여 Dropbox에 저장하는 동시에 디렉터리 구조를 정리하고 관리하기 쉽게 만듭니다.

export const storeResponse = async (response, fileName) => {
    const blob = new Blob([JSON.stringify(response)], {
        type: "application/json"
    });
    const filePath = `/dev/responses/${fileName}`;

    await uploadFileToDropbox(filePath, blob);
};

11 — 분석을 위한 응답 검색

분석을 위해 응답을 검색해야 하는 경우 Dropbox API를 사용하여 응답을 나열하고 다운로드할 수 있습니다.

export const listResponses = async () => {
    try {
        const response = await dbx.filesListFolder({
            path: '/dev/responses'
        });
        return response.result.entries.map(entry => entry.name);
    } catch (error) {
        console.error('Error listing responses:', error);
    }
};

이 코드는 /dev/responses/ 디렉터리에 있는 모든 파일을 나열하므로 사용자 피드백을 쉽게 가져오고 분석할 수 있습니다.

? 다이빙하기 전에:

? Dropbox API를 React와 통합하는 방법에 대한 이 가이드가 유용했나요? 좋아요를 눌러주세요!
? 프로젝트에서 이미 Dropbox API를 사용하셨나요? 댓글로 여러분의 경험을 공유해주세요!
? React 앱을 개선하려는 사람을 알고 있나요? 이 게시물을 널리 알리고 공유하세요!

? 여러분의 지원은 더욱 통찰력 있는 콘텐츠를 만드는 데 도움이 됩니다!

기술 통찰력 지원