리액트 네이티브 파일 삭제: Back4app 클라우드 연동

리액트 네이티브 앱에서 파일 삭제하기 소개 이 가이드에서는 리액트 네이티브 앱에서 back4app 클라우드의 파일을 삭제하는 가장 좋은 방법을 배울 것입니다 back4app에서 애플리케이션 파일을 관리하기 위해 우리는 parse file parse file 유틸리티 클래스를 사용합니다 이 클래스를 사용하여 저장, 검색 및 삭제 작업을 수행할 수 있습니다 이전 섹션에서는 파일 저장 https //www back4app com/docs/js framework/react native files , 데모 갤러리 앱을 생성하여 파일을 저장하고 검색하는 방법을 다루었습니다 이 시점에서, 생성하고 저장한 후 parse file parse file 을(를) 다른 데이터 객체와 항상 연결하는 것이 최선의 방법이라는 것을 알고 있어야 합니다 이는 프로젝트에서 고아 파일이 생성되는 것을 방지하고 back4app 클라우드에서 파일을 찾고 삭제할 수 있게 해줍니다 parse file parse file 은 파일 삭제 방법을 제공하지만, 이는 보안에 민감한 작업이므로 클라이언트 측에서 수행해서는 안 됩니다 이 튜토리얼에서는 애플리케이션 파일을 제거하는 최선의 방법을 배울 것입니다 목표 리액트 네이티브 갤러리 데모 앱에 이미지 삭제 작업 추가하기 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 파일 저장 튜토리얼을 완료하세요 parse >= 4 2 0 1 애플리케이션 설정 이전 섹션에서, 파일 저장 https //www back4app com/docs/js framework/react native files , 우리는 사용자 사진을 업로드하고 표시하기 위해 데모 갤러리 앱을 만들었습니다 이번 튜토리얼에서는 gallery js gallery js 컴포넌트의 각 이미지 항목에 삭제 버튼을 추가하여 이 앱을 확장하고 삭제 작업을 수행할 것입니다 데모 갤러리 앱의 코딩을 이미 완료했다면 다음 단계로 넘어갈 수 있습니다 대안으로, 이 튜토리얼을 따라가기 위해 앱의 코드 베이스를 클론할 수 있습니다 프로젝트를 클론하려면 다음을 실행하세요 git clone https //github com/templates back4app/react native demo gallery app git clone https //github com/templates back4app/react native demo gallery app 그런 다음, 프로젝트 종속성을 설치하세요 실행하기 전에, back4app 자격 증명을 설정하는 것을 잊지 마세요, 앱 id 앱 id 및 javascriptkey javascriptkey , initialize initialize 메서드에서 앱 자격 증명 설정에 대한 정보는 parse sdk 설치 https //www back4app com/docs/js framework/react native cli 를 참조하세요 마지막으로, react native 애플리케이션을 실행하세요 2 삭제 버튼 만들기 갤러리 앱에서 gallery js gallery js 컴포넌트는 back4app 클라우드 프로젝트에서 이미지 목록을 렌더링합니다 다음으로, 현재 목록의 모든 이미지 항목에 버튼을 생성하고 추가할 것입니다 다음 내용을 추가하려면 gallery js 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&#x9; 5 const gallery = () => { 6 const \[images, setimages] = usestate(\[]); 7&#x9; 8 useeffect(() => { 9 const fetchimages = async () => { 10 let query = new parse query('gallery'); 11 const results = await query find(); 12 setimages(results); 13 }; 14&#x9; 15 fetchimages(); 16 }, \[]); 17&#x9; 18 async function ondeleteimage(image id) { 19 // todo implement this function 20 } 21&#x9; 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&#x9; 46 }; 47&#x9; 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 사진 삭제 클라우드 함수 만들기 파일은 항상 파일 저장소 https //www back4app com/docs/js framework/react native files 와 데이터 객체에 연결되어야 한다는 것을 배웠습니다 파일을 데이터 객체에 연결하지 않으면 고아 파일이 생성됩니다 이러한 파일은 앱 내에서 접근할 수 없습니다 파일을 찾을 수 없으면 앱에서 삭제할 수도 없습니다 back4app 대시보드의 purge files 옵션을 사용하여만 삭제할 수 있습니다 삭제 과정은 파일을 찾고 삭제하는 것으로 구성됩니다 parse에서는 destroy destroy 메서드를 사용하여 참조된 파일을 삭제합니다 그러나 클라이언트 측에서 사용하는 것은 안전하지 않으며 masterkey masterkey 가 필요합니다 react native 앱을 빌드할 때 모든 키가 함께 번들로 묶이므로, 누구나 앱을 리버스 엔지니어링하거나 디컴파일하거나 자신의 장치에서 네트워크 트래픽을 프록시하여 masterkey masterkey 를 찾을 수 있습니다 마스터 키를 사용하면 클래스 수준 권한 https //docs parseplatform org/js/guide/#class level permissions 및 acl https //docs parseplatform org/js/guide/#object level access control 과 같은 앱의 모든 보안 메커니즘을 우회할 수 있습니다 parse 보안 모범 사례에 대한 자세한 내용은 여기 https //blog back4app com/parse server security/ 에서 확인할 수 있습니다 파일을 삭제하는 가장 좋은 방법은 클라우드 코드 함수 https //www back4app com/docs/get started/cloud functions 를 사용하여 서버 측에서 수행하는 것입니다 우리의 갤러리 앱에서는 이를 위한 클라우드 코드 함수를 만들 것입니다 다음 클라우드 함수를 사용하여 main js 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&#x9; 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 }); 간단하게 하기 위해, 우리는 대시보드를 사용하여 클라우드 함수를 직접 업로드할 것입니다 앱 대시보드 대시보드 를 열고 back4app 웹사이트 https //www back4app com/ 로 가서 core core , 그 다음 cloud code functions cloud code functions 을 클릭합니다 루트에 main js main js 파일을 업로드합니다 cloud/ 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 deletegallerypicture 클라우드 함수를 트리거하여 이미지를 성공적으로 삭제합니다 5 파일 정리하기 어떤 상황에서는 애플리케이션 파일을 잃어버린 경우 대시보드에서 파일을 삭제해야 합니다 이는 이 기사에서 언급한 고아 파일을 생성할 때 주로 발생합니다 애플리케이션 파일을 정리하는 방법에 대한 정보 다음 시도하세요 back4app 파일 관련 자주 묻는 질문 https //help back4app com/hc/en us/articles/360002327652 how to delete files completely 또는 앱 설정 문서 https //www back4app com/docs/parse dashboard/app settings 완료! 이 시점에서 클라우드 코드 함수를 성공적으로 배포하고 react native 애플리케이션에서 이미지를 삭제하는 방법을 배웠습니다