플렉스튜디오에서 파이어스토어 연동을 마쳤다면 이제 애플리케이션에서 메모 데이터를 직접 다루는 기능도 구현할 수 있어요. 이번 글에서는 플렉스튜디오 시나리오에서 파이어스토어를 연동해 CRUD 작업을 처리하는 방법을 소개할게요.
설명을 위해 예시로 간단한 메모앱을 준비했어요. 사용자가 새로운 메모를 등록하고 작성된 메모를 목록에서 조회하며 메모 내용을 수정하거나 삭제할 수 있도록 구성했어요. 각 단계를 순서대로 따라와 주세요.
플렉스튜디오 유튜브에서 영상 강의 보러 가기👇
1단계 : 새로운 메모 등록하기
① 저장 버튼에 이벤트 연결
1. Dev 모드로 전환 후, ‘저장’ 버튼 선택
%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/C/2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_01.jpg?width=800&height=385&name=2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_01.jpg)
2. 우측 프로퍼티 영역에서 이벤트 연결(이벤트명 : 저장) → 파란 링크 버튼 클릭
%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/C/2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_02.jpg?width=800&height=331&name=2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_02.jpg)
3. 편집 탭으로 이동해 서비스 추가
%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/C/2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_03.jpg?width=800&height=210&name=2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_03.jpg)
4. 서비스 종류 : Firestore
%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/C/2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_04.jpg?width=800&height=263&name=2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_04.jpg)
5. 모듈명 : Save
%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/C/2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_05.jpg?width=800&height=450&name=2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_05.jpg)
6. 시스템 정보 - Firestore 컬렉션명 : MemoList
%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/C/2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_06.jpg?width=800&height=450&name=2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_06.jpg)
7. 보내는 데이터 - 카테고리 : memo
%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/C/2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_07.jpg?width=800&height=450&name=2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_07.jpg)
8. '필터설정' 버튼 클릭 → '필터 사용' 활성화 → 필터 종류 : 상태 필터 / Status 필터 : Active
%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/C/2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_08.jpg?width=800&height=450&name=2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_08.jpg)
9. 받는 데이터 - 카테고리명 : memo / '병합' 체크
*파이어스토어 컬렉션에 데이터를 저장하게 되면 고유한 아이디(문서 아이디, _docID)가 발급
*수정 및 삭제를 위해 아이디값이 필요하므로 받는 데이터 설정 필요
%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/C/2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_09.jpg?width=800&height=450&name=2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_09.jpg)
② 디버깅 실행
1. 시나리오 우측 상단의 화살표 (▶) 클릭%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/C/2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_10.jpg?width=800&height=450&name=2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_10.jpg)
2. 애플리케이션에 메모 제목과 내용을 입력 후 ‘저장’ 버튼을 클릭
%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/C/2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_11.jpg?width=800&height=450&name=2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_11.jpg)
3. 저장 이벤트가 실행되며 로그에 서비스 호출 내용 확인
%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/C/2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_12.jpg?width=800&height=450&name=2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_12.jpg)
4. 파이어스토어에 MemoList 컬렉션이 생성되고 데이터가 저장된 상태 확인
%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/C/2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_13.jpg?width=800&height=450&name=2-2%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_C_13.jpg)
2단계 : 저장된 메모 목록 조회하기
① 스텝 시작 시 조회 이벤트 설정
1. Dev 모드 → step1 선택
%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/R/2-3%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_R_01.jpg?width=800&height=450&name=2-3%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_R_01.jpg)
2. ‘스텝 이벤트 사용’ 체크하기 → 이벤트 발생 시점 : 최초 시작 전(Init) / 이벤트명 : 조회
%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/R/2-3%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_R_02.jpg?width=800&height=450&name=2-3%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_R_02.jpg)
3. 편집 탭에서 서비스 추가
4. 서비스 종류 : Firestore / 모듈명 : Query
5. 시스템 정보 - Firestore 컬렉션명 : MemoList
6. 보내는 데이터 기본 설정 유지
7. 받는 데이터 - 카테고리명 : memo
%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/R/2-3%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_R_03.jpg?width=800&height=450&name=2-3%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_R_03.jpg)
② 디버깅 실행
1. 시나리오 우측 상단의 화살표 (▶) 클릭
2. 스텝이 시작될 때 조회 이벤트 실행
*파이어스토어 서비스 실행
*메모가 화면에 정상 표시되는지 확인
%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/R/2-3%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_R_04.jpg?width=800&height=450&name=2-3%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_R_04.jpg)
3단계 : 특정 메모 수정하기
① 수정 버튼에 이벤트 연결
1. Dev 모드 → ‘수정’ 버튼 클릭
%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/U/2-4%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_U_01.jpg?width=800&height=450&name=2-4%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_U_01.jpg)
2. 우측 프로퍼티에서 이벤트 연결(이벤트명 : 수정) → 파란 링크 버튼 클릭
3. 편집 탭에서 서비스 추가
4. 서비스 종류 : Firestore / 모듈명 : Update
5. 시스템 정보 - Firestore 컬렉션명 : MemoList
6. 보내는 데이터 - 카테고리명 : memo
7. ‘필터설정’ 버튼 클릭 → 필터 사용 활성화 → 필터 종류 : 상태 필터 / Status 필터 : Active
8. 받는 데이터 제거
*수정 일자 등 추가 정보가 필요할 경우 병합 등 추가 설정 가능
%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/U/2-4%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_U_02.jpg?width=800&height=178&name=2-4%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_U_02.jpg)
② 디버깅 실행
1. 시나리오 우측 상단의 화살표 (▶) 클릭
2. 수정할 메모 선택 후 값 변경
%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/U/2-4%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_U_03.jpg?width=800&height=450&name=2-4%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_U_03.jpg)
3. ‘수정’ 버튼 클릭 → 로그에서 이벤트 실행 확인 → 파이어스토어 서비스 실행 확인
%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/U/2-4%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_U_04.jpg?width=800&height=450&name=2-4%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_U_04.jpg)
4. 파이어스토어에서도 수정된 내용 확인
%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/U/2-4%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_U_05.jpg?width=800&height=450&name=2-4%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_U_05.jpg)
4단계 : 특정 메모 삭제하기
① 삭제 버튼에 이벤트 연결
1. Dev 모드 → ‘삭제’ 버튼 클릭2. 우측 프로퍼티에서 이벤트 연결(이벤트명 : 삭제) → 파란 링크 버튼 클릭
3. 편집 탭에서 서비스 추가
4. 서비스 종류 : Firestore / 모듈명 : Delete
5. 시스템 정보 - Firestore 컬렉션명 : MemoList
6. 보내는 데이터 - 카테고리명 : memo
7. ‘필터설정’ 버튼 클릭 → 필터 사용 활성화 → 필터 종류 : 상태 필터 / Status 필터 : Active
8. 받는 데이터 - 카테고리명 : memo
② 디버깅 실행
1. 시나리오 우측 상단의 화살표 (▶) 클릭
2. 삭제할 메모 선택 후 ‘삭제’ 버튼 클릭
%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/D/2-5%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_D_01.jpg?width=800&height=450&name=2-5%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_D_01.jpg)
3. 로그에서 이벤트 및 파이어스토어 서비스 실행 확인
*시나리오 내 섹터에서도 해당 데이터가 사라졌는지 확인
%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/D/2-5%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_D_02.jpg?width=800&height=450&name=2-5%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_D_02.jpg)
4. 파이어스토어에서도 삭제 여부 확인 가능
%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4/%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4%20%ED%99%9C%EC%9A%A9/D/2-5%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_D_03.jpg?width=800&height=450&name=2-5%20%ED%8C%8C%EC%9D%B4%EC%96%B4%EC%8A%A4%ED%86%A0%EC%96%B4_%EC%8B%9C%EB%82%98%EB%A6%AC%EC%98%A4_D_03.jpg)
다음 강의 : 파이어스토어 연동 시 발생할 수 있는 오류와 해결 방법
지금까지 파이어스토어 데이터를 플렉스튜디오 시나리오에서 어떻게 활용할 수 있는지 알아봤어요. 다음 글에서는 연동 과정에서 발생할 수 있는 오류와 해결 방법들을 안내해 드릴게요! Google Firestore 연동 자주 발생하는 오류와 해결 방법에서 확인해 보세요!