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

11 분

리액트 네이티브 앱에서 파일 삭제하기 소개 이 가이드에서는 리액트 네이티브 앱에서 back4app 클라우드의 파일을 삭제하는 가장 좋은 방법을 배울 것입니다 back4app에서 애플리케이션 파일을 관리하기 위해 우리는 \parse file\ 유틸리티 클래스를 사용합니다 이 클래스를 사용하여 저장, 검색 및 삭제 작업을 수행할 수 있습니다 이전 섹션에서는 파일 저장 https //www back4app com/docs/js framework/react native files , 데모 갤러리 앱을 생성하여 파일을 저장하고 검색하는 방법을 다루었습니다 이 시점에서, 생성하고 저장한 후 \parse file\ 을(를) 다른 데이터 객체와 항상 연결하는 것이 최선의 방법이라는 것을 알고 있어야 합니다 이는 프로젝트에서 고아 파일이 생성되는 것을 방지하고 back4app 클라우드에서 파일을 찾고 삭제할 수 있게 해줍니다 \parse file\ 은 파일 삭제 방법을 제공하지만, 이는 보안에 민감한 작업이므로 클라이언트 측에서 수행해서는 안 됩니다 이 튜토리얼에서는 애플리케이션 파일을 제거하는 최선의 방법을 배울 것입니다 목표 리액트 네이티브 갤러리 데모 앱에 이미지 삭제 작업 추가하기 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 파일 저장 https //app archbee com/docs/ roxiyumxobue9i7uv49e/nijiqgqoc93tzrlydmcbi 튜토리얼을 완료하세요 parse >= 4 2 0 1 애플리케이션 설정 이전 섹션에서, 파일 저장 https //www back4app com/docs/js framework/react native files , 우리는 사용자 사진을 업로드하고 표시하기 위해 데모 갤러리 앱을 만들었습니다 이번 튜토리얼에서는 \gallery js\ 컴포넌트의 각 이미지 항목에 삭제 버튼을 추가하여 이 앱을 확장하고 삭제 작업을 수행할 것입니다 데모 갤러리 앱의 코딩을 이미 완료했다면 다음 단계로 넘어갈 수 있습니다 대안으로, 이 튜토리얼을 따라가기 위해 앱의 코드 베이스를 클론할 수 있습니다 프로젝트를 클론하려면 다음을 실행하세요 \git clone https //github com/templates back4app/react native demo gallery app\ 그런 다음, 프로젝트 종속성을 설치하세요 1 cd react native demo gallery app 2 3 # yarn 사용 4 yarn install 5 6 # npm 사용 7 npm install 실행하기 전에, back4app 자격 증명을 설정하는 것을 잊지 마세요, \앱 id\ 및 \javascriptkey\ , \initialize\ 메서드에서 앱 자격 증명 설정에 대한 정보는 parse sdk 설치 https //www back4app com/docs/js framework/react native cli 를 참조하세요 마지막으로, react native 애플리케이션을 실행하세요 1 # 안드로이드용 2 npx react native run android 3 4 # ios용 5 npx react native run ios 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 사진 삭제 클라우드 함수 만들기 파일은 항상 파일 저장소 https //www back4app com/docs/js framework/react native files 와 데이터 객체에 연결되어야 한다는 것을 배웠습니다 파일을 데이터 객체에 연결하지 않으면 고아 파일이 생성됩니다 이러한 파일은 앱 내에서 접근할 수 없습니다 파일을 찾을 수 없으면 앱에서 삭제할 수도 없습니다 back4app 대시보드의 purge files 옵션을 사용하여만 삭제할 수 있습니다 삭제 과정은 파일을 찾고 삭제하는 것으로 구성됩니다 parse에서는 \destroy\ 메서드를 사용하여 참조된 파일을 삭제합니다 그러나 클라이언트 측에서 사용하는 것은 안전하지 않으며 \masterkey\ 가 필요합니다 react native 앱을 빌드할 때 모든 키가 함께 번들로 묶이므로, 누구나 앱을 리버스 엔지니어링하거나 디컴파일하거나 자신의 장치에서 네트워크 트래픽을 프록시하여 \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\ 파일을 생성합시다 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 }); 간단하게 하기 위해, 우리는 대시보드를 사용하여 클라우드 함수를 직접 업로드할 것입니다 앱 \대시보드\ 를 열고 back4app 웹사이트 https //www back4app com/ 로 가서 \core\ , 그 다음 \cloud code functions\ 을 클릭합니다 루트에 \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 파일 정리하기 어떤 상황에서는 애플리케이션 파일을 잃어버린 경우 대시보드에서 파일을 삭제해야 합니다 이는 이 기사에서 언급한 고아 파일을 생성할 때 주로 발생합니다 애플리케이션 파일을 정리하는 방법에 대한 정보 다음 시도하세요 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 애플리케이션에서 이미지를 삭제하는 방법을 배웠습니다