Back4app에 파일을 업로드하는 방법
사용자 파일 업로드가 필요한 웹 애플리케이션을 개발할 때는 효과적인 파일 관리가 중요합니다.
Back4app은 Parse를 기반으로 쉽고 효율적인 파일 저장, 관리 및 검색 솔루션 메커니즘을 제공합니다.
이 가이드에서는 Back4app의 파일 저장 기능을 React 앱과 통합하여 파일을 저장하는 방법에 대해 알아봅니다.
Contents
Back4app에서 파일 저장소 작동 방식
Back4app은 Parse.File 클래스를 사용하여 파일 업로드 및 저장을 관리합니다.
Parse.File 클래스를 사용하면 이미지, 동영상, 문서 및 기타 바이너리 데이터와 같이 Parse.Object에 저장하기에는 너무 큰 파일을 저장할 수 있습니다.
Back4app의 클라우드 스토리지에 파일을 업로드하려면 파일 데이터로 Parse.File 인스턴스를 생성하고 인스턴스를 저장해야 합니다. Parse.File의 새 인스턴스에는 파일 이름, 파일, 콘텐츠/파일 유형(선택 사항)이 필요합니다.
파일 이름에 파일 확장자가 포함되어 있는지 확인하여 Parse가 적절하게 처리할 수 있도록 하는 것이 중요합니다.
하지만 업로드할 때마다 고유 식별자가 부여되기 때문에 이름이 반드시 고유할 필요는 없으므로 example.jpeg라는 이름의 파일을 여러 개 업로드해도 이름 충돌이 발생하지 않습니다.
파일을 업로드하면 Parse.File은 파일 이름의 파일 확장자를 기준으로 파일 유형을 자동으로 감지합니다. 그러나 Content-Type 매개변수를 지정하여 자동 감지를 재정의할 수 있습니다.
Back4app에서 업로드한 파일에 액세스하려면 파일을 업로드한 후 데이터 객체와 연결해야 합니다.
그런 다음 연결된 데이터 객체를 쿼리하여 파일을 검색할 수 있습니다. 업로드되었지만 데이터 객체와 연결되지 않은 파일은 ‘고아 파일’이 되어 액세스할 수 없게 됩니다.
이제 Back4app에서 파일 저장소가 어떻게 작동하는지 이해했으니, React로 갤러리 애플리케이션을 만들어 Back4app에서 파일을 저장하고 검색하는 방법을 시연해 보겠습니다.
React 애플리케이션 만들기
React로 Back4app의 파일 저장 기능을 구현하려면 먼저 Back4app과 통합할 React 애플리케이션을 만들어야 합니다. 이를 위해 웹 애플리케이션을 빠르게 구축할 수 있는 프런트엔드 도구인 Vite를 사용합니다.
터미널에서 다음 명령을 실행하여 Vite로 React 애플리케이션을 만들 수 있습니다:
npm init vite
위의 명령을 실행하면 Vite는 프로젝트 이름을 입력하라는 메시지를 표시한 후 웹 애플리케이션을 빌드하는 데 사용할 프레임워크를 선택할 수 있는 옵션 목록을 제공합니다.
위 이미지에서 볼 수 있듯이 프로젝트 이름은 gallery-app입니다. React 옵션을 선택한 후 React 애플리케이션을 개발할 프로그래밍 언어를 선택합니다.
이 프로젝트의 경우 JavaScript 옵션을 선택합니다. 이제 프로젝트가 준비되었습니다.
다음으로 프로젝트에 몇 가지 필수 종속 요소를 설치해야 합니다. 종속 요소를 설치하려면 프로젝트 디렉터리로 전환하고 아래 명령을 실행합니다:
# Switch to the project directory
cd gallery-app
# Install dependencies
npm install
이 명령은 프로젝트에 필요한 모든 종속성을 설치하며, 이제 IDE에서 애플리케이션 빌드를 시작할 수 있습니다.
React 애플리케이션 구축하기
IDE로 React 프로젝트를 열고 src 디렉토리에 컴포넌트 폴더를 생성합니다. 컴포넌트 폴더 안에 FileUpload 컴포넌트를 추가합니다.
FileUpload 컴포넌트에서 다음 코드 줄을 추가합니다:
//FileUpload.jsx
import React from "react";
function FileUpload({updateData}) {
const [file, setFile] = React.useState("");
const handleFIleUpload = (event) => {
setFile(event.target.files[0]);
};
return (
<form>
<label htmlFor="file-upload" className="custom-file-upload">
Choose File
</label>
<input
id="file-upload"
type="file"
style={{ display: "none" }}
onChange={handleFileUpload}
/>
</form>
);
}
export default FileUpload;
위의 코드 블록은 로컬 파일을 선택할 수 있는 FileUpload 컴포넌트를 나타냅니다. 여기에는 파일 상태가 포함되어 있습니다. 이 컴포넌트는 파일 유형의 입력 요소를 사용하여 장치에서 로컬 파일에 액세스하고 선택합니다.
코드 블록에는 handleFileSelect 함수가 있습니다. 이 함수는 setFile 메서드를 사용하여 사용자가 선택한 첫 번째 파일로 파일 상태를 업데이트합니다.
이제 아래 코드 블록에 코드 줄을 추가하여 앱 컴포넌트의 코드를 수정합니다:
//App.jsx
import FileUpload from "./components/FileUpload";
function App() {
return (
<main className="container">
<h1 className="title">My Gallery</h1>
<>
<FileUpload />
</>
</main>
);
}
export default App;
위의 코드 블록은 FileUpload 컴포넌트를 가져와서 기본 요소 안에 렌더링합니다. 이 컴포넌트에는 “내 갤러리”라는 텍스트를 렌더링하는 h1 요소도 포함되어 있습니다 .
컴포넌트가 준비되었습니다. 다음으로 애플리케이션의 스타일을 지정해야 합니다. 이렇게 하려면 index.css 파일에서 코드를 바꾸고 대신 이 코드를 추가합니다:
/*index.css*/
@import url('<https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap>');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #F2F2F2;
color: #333333;
font-family: "Montserrat", sans-serif;
}
.container{
inline-size: 60%;
margin: auto;
}
.title{
text-align: center;
margin-block-start: 1rem;
margin-block-end: 6rem;
}
.custom-file-upload {
display: inline-block;
font-weight: 500;
padding: 6px 12px;
cursor: pointer;
background: #FFFFFF;
border: none;
border-radius: 4px;
}
.custom-file-upload:hover {
background-color: #333333;
color: #FFFFFF;
}
Back4app 애플리케이션 설정
Back4app 애플리케이션을 설정하려면 Back4app 계정에 로그인해야 합니다. 계정이 없는 경우 무료로 계정을 만들 수 있습니다.
로그인하면 Back4app AI 에이전트를 사용하여 새 앱을 만들 수 있습니다. AI 에이전트는 프롬프트를 사용하여 Back4app 애플리케이션과 상호 작용하고 관리할 수 있는 Back4app 서비스입니다.
아래 이미지와 같이 계정 대시보드의 탐색 모음에서 AI 상담원 링크를 클릭하여 액세스할 수 있습니다.
AI 에이전트로 Back4app 애플리케이션을 만들려면 아래 프롬프트와 유사하게 AI에 애플리케이션을 만들도록 요청하는 메시지를 작성합니다:
Create a new Back4app application named gallery-app위의 프롬프트는 AI가 새로운 Back4app 애플리케이션을 생성하도록 합니다. AI가 애플리케이션을 생성하면 애플리케이션의 자격 증명과 함께 애플리케이션 생성을 확인하는 응답을 보냅니다.
이렇게요:
이제 Back4app 애플리케이션이 준비되었습니다. 나중에 필요하므로 앱 ID와 JavaScript 키 자격 증명을 복사하세요.
애플리케이션에 액세스하려면 탐색 표시줄의 ‘내 앱’ 링크를 클릭하여 애플리케이션 대시보드를 방문하세요.
이제 AI 에이전트를 사용하여 Back4app 백엔드를 성공적으로 생성했으므로, 다음으로 React 앱을 백엔드에 연결해야 합니다.
React 앱을 Back4app에 연결하기
React 앱을 Back4app에 연결하려면 아래 명령을 실행하여 Parse SDK를 설치해야 합니다:
npm install parse
다음으로, 축소된 버전의 Parse을 앱 컴포넌트로 가져온 다음, 아래 코드 블록을 앱 컴포넌트에 추가하여 앞서 저장한 자격 증명으로 초기화합니다:
//App.jsx
import Parse from 'parse/dist/parse.min.js';
Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = "<https://parseapi.back4app.com/>";
'YOUR_APPLICATION_ID ‘와 'YOUR_CLIENT_KEY ‘를 Back4App에서 얻은 자격 증명으로 바꿉니다. 환경 변수를 사용하는 등 자격 증명을 안전하게 저장해야 합니다.
Back4app에 파일 업로드하기
Back4app의 클라우드 스토리지에 파일을 저장하려면 먼저 Parse.File 인스턴스를 생성해야 합니다. 그런 다음 Parse.File 인스턴스에서 저장 메서드를 호출하여 저장해야 합니다.
그런 다음 저장된 파일을 데이터 객체와 연결해야 파일을 검색할 수 있습니다.
이렇게 하려면 Parse.Object의 새 하위 클래스를 만들고, 새 하위 클래스의 프로퍼티에 파일을 추가한 다음 Back4app에 저장합니다.
위의 로직을 구현하려면 FileUpload 컴포넌트의 handleFileUpload 함수를 아래 코드 블록과 일치하도록 수정합니다:
//FileUpload.jsx
const handleFileUpload = async (event) => {
event.preventDefault();
try {
let name = "image.jpg";
const File = new Parse.File(name, event.target.files[0]);
const photo = await File.save();
const Gallery = Parse.Object.extend("Gallery");
const gallery = new Gallery();
gallery.set("photo", photo);
await gallery.save();
console.log("File saved:", File);
updateData();
} catch (error) {
console.error("Error saving file:", error);
}
};
handleFileUpload 함수는 로컬 디바이스에서 서버로 사진을 업로드하는 로직을 담당합니다. 이 함수는 새로운 Parse.File 인스턴스를 생성합니다.
Parse.File 메서드는 사진의 이름을 나타내는 이름 변수와 사용자가 선택한 첫 번째 파일이라는 두 가지 인수를 받습니다.
이 함수는 File 인스턴스에서 저장 메서드를 호출하여 파일을 서버에 저장합니다. 그런 다음 갤러리 클래스에 대한 새 Parse 객체를 생성합니다.
set 메서드를 사용하여 사진 파일을 갤러리 객체의 사진 속성 값으로 설정합니다. 마지막으로 gallery.save() 함수를 사용하여 갤러리 객체를 서버에 저장합니다.
Back4app에서 파일 가져오기
Back4app의 클라우드 스토리지에서 파일을 가져오려면 파일이 저장된 Parse Object를 검색해야 합니다. 이 작업은 Parse Object를 사용하여 클래스를 대상으로 하는 새 쿼리를 생성하여 수행할 수 있습니다.
위의 로직을 구현하려면 피드 컴포넌트를 만들고 아래 코드 블록을 추가합니다:
//Feed.jsx
import React from "react";
import Parse from "parse/dist/parse.min.js";
function Feed({data}) {
const [gallery, setGallery] = React.useState([]);
React.useEffect(() => {
const fetchFiles = async () => {
let query = new Parse.Query("Gallery");
const results = await query.find();
setGallery(results);
};
fetchFiles();
}, [data]);
return (
<div className="photos">
{gallery.map((item) => (
<img src={item.get("photo").url()} key={item.id} />
))}
</div>
);
}
export default Feed;
위의 코드 블록은 갤러리 상태를 생성하고 빈 배열을 할당합니다. 사용효과 훅을 사용하여 fetchFiles 함수를 실행합니다.
사용효과 훅은 컴포넌트의 첫 렌더링 이후 데이터 프로퍼티가 변경될 때마다 함수를 실행합니다.
fetchFiles 함수는 Parse.Query 메서드를 사용하여 “Gallery” 클래스를 대상으로 하는 새 쿼리를 생성합니다.
쿼리에서 find 메서드를 호출하면 쿼리 결과가 포함된 배열이 반환됩니다. 마지막으로 fetchFiles 함수는 setGallery 함수를 사용하여 결과 배열을 갤러리 상태에 할당합니다.
마지막으로 맵 메서드를 사용하면 갤러리 배열의 모든 항목에 대해 이미지 요소를 렌더링합니다. 이 코드는 img 요소의 src 속성 값을 각 항목의 사진 속성의 URL로 설정합니다.
아래 코드 블록을 index.css 파일에 추가하여 클래스 사진으로 div 요소의 스타일을 지정합니다:
/*index.css*/
.photos{
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 2rem;
margin-block-start: 4rem;
}
애플리케이션에 피드 컴포넌트를 표시하려면 앱 컴포넌트에서 피드 컴포넌트를 가져와서 호출해야 합니다. 모든 수정이 완료되면 앱 컴포넌트는 다음과 같이 보일 것입니다:
//App.jsx
import React from "react";
import Parse from "parse/dist/parse.min.js";
import FileUpload from "./components/FileUpload";
import Feed from "./components/Feed";
Parse.initialize(PARSE_APP_ID, PARSE_JAVASCRIPT_KEY);
Parse.serverURL = "<https://parseapi.back4app.com/>";
function App() {
const [data, setData] = React.useState(1);
const updateData = (prevState) => {
setData(() => prevState + 1);
};
return (
<main className="container">
<h1 className="title">My Gallery</h1>
<>
<FileUpload updateData={updateData} />
<Feed data={data} />
</>
</main>
);
}
export default App;
애플리케이션 테스트
애플리케이션의 디렉토리에서 아래 코드 블록을 실행하여 애플리케이션을 시작하세요:
npm run dev
위의 명령을 실행하면 http://localhost:5173/ 에서 애플리케이션이 시작됩니다.
http://localhost:5173/ 으로 이동하면 아래 이미지와 유사한 페이지가 표시됩니다:
‘파일 선택’ 버튼을 클릭하고 로컬 디바이스에서 이미지를 선택합니다.
Back4app 애플리케이션의 대시보드를 방문하여 이미지가 성공적으로 업로드되었는지 확인할 수 있습니다.
업로드가 성공하면 Back4app은 아래 이미지와 같이 "갤러리" 클래스 테이블에 행을 추가합니다.
또는 아래 이미지와 같이 화면에 표시되는 이미지를 확인하여 확인할 수도 있습니다.
Back4app 컨테이너에 애플리케이션 배포하기
이 섹션에서는 Back4app 컨테이너에 애플리케이션을 배포합니다. 이렇게 하려면 먼저 애플리케이션을 Docker라이즈하고 GitHub 리포지토리에 푸시해야 합니다.
배포 프로세스는 Back4app UI를 사용하여 수동으로 실행하거나 Back4app AI 에이전트를 사용하여 자동으로 실행할 수 있습니다. 이 튜토리얼에서는 AI 에이전트를 사용하여 배포 프로세스를 실행합니다.
Dockerfile 만들기
애플리케이션의 루트 디렉토리에 Dockerfile을 생성하고 코드 블록을 추가합니다:
FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5173
CMD ["npm", "run", "dev"]
그런 다음 애플리케이션의 루트 디렉터리에 .dockerignore 파일을 생성하고 아래 코드 블록을 추가합니다:
node_modules
.dockerignore 파일에 노드 모듈을 추가하면 Docker가 이미지를 빌드할 때 컨텍스트에서 node_modules 폴더를 제외하도록 합니다.
Vite를 사용하여 React 애플리케이션을 만들었으므로 Docker를 지원하도록 Vite를 구성해야 합니다. Vite를 구성하려면 vite.config.js의 코드를 아래 코드 블록으로 바꾸세요:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// <https://vitejs.dev/config/>
export default defineConfig({
plugins: [react()],
server: {
host: true,
strictPort: true,
port: 5173,
},
})
이 코드 블록은 지정된 포트를 사용할 수 있는 경우에만 Vite가 서버를 시작하도록 하며, 개발 서버가 포트 5173에서 수신 대기할 포트 번호를 지정합니다.
그런 다음 터미널에서 아래 명령을 실행하여 애플리케이션의 Docker 이미지를 빌드하여 모든 것이 작동하는지 확인합니다:
docker build -t gallery-app .
이제 애플리케이션을 성공적으로 Docker화했으며 다음 단계는 애플리케이션을 배포하는 것입니다.
애플리케이션 배포
앱을 배포하기 전에 GitHub 계정을 Back4app Github 앱과 통합하고 배포하려는 리포지토리에 대한 액세스 권한을 부여하세요.
AI 에이전트로 이동하여 아래 프롬프트를 입력하여 애플리케이션을 배포합니다:
Deploy my repository <<repository-url>> on Back4app containers
저장소 URL 을 애플리케이션의 GitHub 저장소 URL로 바꿉니다. 위의 프롬프트가 배포 프로세스를 시작합니다.
위 이미지에서 볼 수 있듯이 AI 에이전트가 배포 프로세스를 시작했습니다. 그 동안 배포 상태는 “배포 중”입니다.
몇 분 후 AI 에이전트에게 애플리케이션의 배포 상태를 문의할 수 있습니다. 애플리케이션이 성공적으로 배포되었다면 배포 상태가 준비됨으로 변경됩니다.
이렇게요:
위 이미지에서 배포 상태가 “ 배포 중 “에서 “준비됨 “으로 변경된 것을 볼 수 있으며, 이는 애플리케이션이 성공적으로 배포되어 현재 라이브 상태임을 나타냅니다.
제공된 앱 URL을 사용하여 브라우저에서 애플리케이션에 액세스할 수 있습니다.
결론
이 글에서는 React로 간단한 갤러리 애플리케이션을 구축하여 Back4app을 사용하여 파일을 업로드하고 가져오는 방법을 배웠습니다.
또한 Back4app AI 에이전트를 사용하여 Back4app에 React 앱을 배포하는 방법도 살펴봤습니다.
Back4app을 사용하면 파일을 효율적이고 안전하게 저장하고 관리할 수 있습니다. 이 튜토리얼에 사용된 코드는 이 GitHub 리포지토리에서 사용할 수 있습니다.
