리액트 네이티브 파일 삭제: Back4app 클라우드 연동
리액트 네이티브 앱에서 파일 삭제하기
소개
이 가이드에서는 리액트 네이티브 앱에서 back4app 클라우드의 파일을 삭제하는 가장 좋은 방법을 배울 것입니다.
Back4app에서 애플리케이션 파일을 관리하기 위해 우리는 Parse.File 유틸리티 클래스를 사용합니다. 이 클래스를 사용하여 저장, 검색 및 삭제 작업을 수행할 수 있습니다. 이전 섹션에서는 파일 저장, 데모 갤러리 앱을 생성하여 파일을 저장하고 검색하는 방법을 다루었습니다.
이 시점에서, 생성하고 저장한 후 Parse.File을(를) 다른 데이터 객체와 항상 연결하는 것이 최선의 방법이라는 것을 알고 있어야 합니다. 이는 프로젝트에서 고아 파일이 생성되는 것을 방지하고 Back4app 클라우드에서 파일을 찾고 삭제할 수 있게 해줍니다.
Parse.File은 파일 삭제 방법을 제공하지만, 이는 보안에 민감한 작업이므로 클라이언트 측에서 수행해서는 안 됩니다. 이 튜토리얼에서는 애플리케이션 파일을 제거하는 최선의 방법을 배울 것입니다.
목표
리액트 네이티브 갤러리 데모 앱에 이미지 삭제 작업 추가하기
전제 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
- Parse >= 4.2.0
1 - 애플리케이션 설정
이전 섹션에서, 파일 저장, 우리는 사용자 사진을 업로드하고 표시하기 위해 데모 갤러리 앱을 만들었습니다. 이번 튜토리얼에서는 Gallery.js 컴포넌트의 각 이미지 항목에 삭제 버튼을 추가하여 이 앱을 확장하고 삭제 작업을 수행할 것입니다.
데모 갤러리 앱의 코딩을 이미 완료했다면 다음 단계로 넘어갈 수 있습니다.
대안으로, 이 튜토리얼을 따라가기 위해 앱의 코드 베이스를 클론할 수 있습니다.
프로젝트를 클론하려면 다음을 실행하세요:
git clone https://github.com/templates-back4app/react-native-demo-gallery-app
그런 다음, 프로젝트 종속성을 설치하세요:
실행하기 전에, Back4app 자격 증명을 설정하는 것을 잊지 마세요, 앱 ID 및 JavascriptKey, initialize 메서드에서. 앱 자격 증명 설정에 대한 정보는 Parse SDK 설치를 참조하세요.
마지막으로, React Native 애플리케이션을 실행하세요:
2 - 삭제 버튼 만들기
갤러리 앱에서 Gallery.js 컴포넌트는 Back4app 클라우드 프로젝트에서 이미지 목록을 렌더링합니다. 다음으로, 현재 목록의 모든 이미지 항목에 버튼을 생성하고 추가할 것입니다.
다음 내용을 추가하려면 Gallery.js 파일을 엽니다:
1 import React, {useState, useEffect} from 'react';
2 import {Text, View, Image, FlatList, StyleSheet, Button, Alert} from 'react-native';
3 import Parse from 'parse/react-native.js';
4
5 const Gallery = () => {
6 const [images, setImages] = useState([]);
7
8 useEffect(() => {
9 const fetchImages = async () => {
10 let query = new Parse.Query('Gallery');
11 const results = await query.find();
12 setImages(results);
13 };
14
15 fetchImages();
16 }, []);
17
18 async function onDeleteImage(image_id) {
19 // TODO: implement this function
20 }
21
22 return (
23 <FlatList
24 style={styles.container}
25 contentContainerStyle={styles.listContent}
26 data={images}
27 horizontal={false}
28 numColumns={3}
29 ListEmptyComponent={() => <Text>No images uploaded.</Text>}
30 renderItem={({item}) => (
31 <View>
32 <Image
33 source={ {uri: item.get('picture').url()} }
34 style={styles.imageItem}
35 />
36 <Button
37 title="Delete"
38 color="red"
39 onPress={() => onDeleteImage(item.id)}
40 />
41 </View>
42 )}
43 keyExtractor={(item) => item.id}
44 />);
45
46 };
47
48 const styles = StyleSheet.create({
49 container: {
50 flex: 1,
51 backgroundColor: '#f5f5f5',
52 },
53 listContent: {
54 justifyContent: 'center',
55 alignItems: 'center',
56 },
57 imageItem: {
58 width: 100,
59 height: 100,
60 resizeMode: 'cover',
61 marginHorizontal: 5,
62 marginVertical: 5,
63 },
64 });
65 export default Gallery;우리는 renderItem 함수를 리팩토링하여 모든 렌더링된 이미지에 삭제 버튼을 추가했습니다. 그러나 버튼 클릭 이벤트는 여전히 기능이 구현되지 않았습니다. 다음 단계에서 이를 수행할 것입니다.
3 - 사진 삭제 클라우드 함수 만들기
파일은 항상 파일 저장소와 데이터 객체에 연결되어야 한다는 것을 배웠습니다. 파일을 데이터 객체에 연결하지 않으면 고아 파일이 생성됩니다. 이러한 파일은 앱 내에서 접근할 수 없습니다. 파일을 찾을 수 없으면 앱에서 삭제할 수도 없습니다. Back4App 대시보드의 Purge Files 옵션을 사용하여만 삭제할 수 있습니다.
삭제 과정은 파일을 찾고 삭제하는 것으로 구성됩니다. Parse에서는 destroy 메서드를 사용하여 참조된 파일을 삭제합니다. 그러나 클라이언트 측에서 사용하는 것은 안전하지 않으며 masterKey가 필요합니다.
React Native 앱을 빌드할 때 모든 키가 함께 번들로 묶이므로, 누구나 앱을 리버스 엔지니어링하거나 디컴파일하거나 자신의 장치에서 네트워크 트래픽을 프록시하여 masterKey를 찾을 수 있습니다. 마스터 키를 사용하면 클래스 수준 권한 및 ACL과 같은 앱의 모든 보안 메커니즘을 우회할 수 있습니다. Parse 보안 모범 사례에 대한 자세한 내용은 여기에서 확인할 수 있습니다.
파일을 삭제하는 가장 좋은 방법은 클라우드 코드 함수를 사용하여 서버 측에서 수행하는 것입니다. 우리의 갤러리 앱에서는 이를 위한 클라우드 코드 함수를 만들 것입니다.
다음 클라우드 함수를 사용하여 main.js 파일을 생성합시다:
1 Parse.Cloud.define('deleteGalleryPicture', async (request) => {
2 const {image_id} = request.params;
3 const Gallery = Parse.Object.extend('Gallery');
4 const query = new Parse.Query(Gallery);
5 try {
6 const Image = await query.get(image_id);
7 const picture = Image.get('picture');
8
9 await picture.destroy({useMasterKey: true});
10 await Image.destroy();
11 return 'Image removed.';
12 } catch (error) {
13 console.log(error);
14 throw new Error('Error deleting image');
15 }
16 });간단하게 하기 위해, 우리는 대시보드를 사용하여 클라우드 함수를 직접 업로드할 것입니다:
- 루트에 main.js 파일을 업로드합니다.cloud/ 폴더에.
- 함수를 Back4app 서버에 배포합니다.
몇 초 후에 클라우드 코드 함수가 REST 또는 Parse SDK를 통해 호출할 수 있게 됩니다.
4 - 앱에서 클라우드 함수 삭제 호출하기
Back4app Cloud Code 함수를 성공적으로 배포한 후, 갤러리 앱에서 사용자가 삭제 버튼을 누를 때의 동작을 구현하세요:
1 // Triggers on hitting delete
2 async function onDeleteImage(image_id) {
3 try {
4 const params = {image_id};
5 const result = await Parse.Cloud.run('deleteGalleryPicture', params);
6 Alert.alert(result);
7 } catch (error) {
8 console.log('Delete Error: ', error);
9 }
10 }
11이제 삭제를 클릭하면, 앱이 deleteGalleryPicture 클라우드 함수를 트리거하여 이미지를 성공적으로 삭제합니다:
5 - 파일 정리하기
어떤 상황에서는 애플리케이션 파일을 잃어버린 경우 대시보드에서 파일을 삭제해야 합니다. 이는 이 기사에서 언급한 고아 파일을 생성할 때 주로 발생합니다.
애플리케이션 파일을 정리하는 방법에 대한 정보:
완료!
이 시점에서 클라우드 코드 함수를 성공적으로 배포하고 React Native 애플리케이션에서 이미지를 삭제하는 방법을 배웠습니다.