정기 업데이트 소식을 전해드려요. [업데이트 확인하기]
Flextudio
릴리즈노트
Flextudio 가이드
Flextudio 가이드
  • 플렉스튜디오 처음 시작하기
    • GETTING STARTED
      • 0. 플렉스튜디오 준비하기
      • 1. 워크스페이스 시작하기
      • 2. 시나리오 개발하기
      • 3. 앱 배포하기
      • 4. 앱 사용하기
    • 플렉스튜디오 로드맵
    • 튜토리얼(Tutorial)
      • 메모장 앱 만들기(필수)
        • 1. [Design] 디자인하기
        • 2. [Event] 화면 이동 구현하기
        • 3. [Data] 컴포넌트에 데이터 연결 하기
      • 템플릿을 활용해 앱 만들기(초급)
        • 0. 시나리오 생성하고 사용하기
        • 1. [Design] 디자인 템플릿 사용하기
        • 2. [Event] 클릭 시 스텝(Step) 이동하기
        • 3. [Data] 컴포넌트에 데이터 연결하기
        • 4. [Data] 이벤트 스크립트로 게시물 삭제 구현하기
      • 약속잡기 앱 만들기(중급)
        • 0. 시나리오 생성하기
        • 1. [Data] Firestore 준비
        • 2. [Event] 약속 만들기
        • 3. [Data] 약속 데이터 생성
        • 4. [Event]약속 조회하기
        • 5. 사용자 SNS로그인
        • 6. 앱 배포/링크
        • 7. [Event] 약속 회신하기
        • 8. 배포하고 확인하기
        • 9. 추가 상세 가이드
  • 개념 학습하기
    • 시나리오의 구성요소
    • 컬렉션(Collection)과 섹터(Sector)
    • 사용자 입력에 의한 데이터 변화
    • 이벤트와 서비스 구동 방법
    • 대체 텍스트 사용하기
    • [심화] Filter - 섹터(Sector) Status, Condition
    • [심화] Step의 구성과 생애주기
    • [심화] 컬렉션의 카테고리
    • [심화] 데이터의 상태관리(Sector Status)
    • [심화] 카테고리 연결관계
  • 워크스페이스 콘솔 가이드
    • 워크스페이스 콘솔 인터페이스
      • 앱
        • 시나리오 관리
        • 레이아웃관리
        • 데이터연결
        • 고객관리
        • 링크앱팩설정
        • 링크관리
        • 서비스오류로그
        • SDK설정
        • 앱정보설정
      • 앱팩
      • 개발
        • 시나리오
        • 권한키관리
        • 패키지설치
      • 데이터
        • API 연동
        • 호스팅 폴더
        • FlexSQL
      • 고객 관리
        • 설정 페이지
      • 에뮬레이터
      • 워크스페이스 설정
        • 기본정보
        • 개발자 관리
        • Flex API Key관리
  • 시나리오 개발하기
    • 시나리오 스튜디오 인터페이스
      • 상단영역
      • 시나리오 관리
      • 시나리오 설정
      • 시나리오 배포
      • 테마색 설정
      • 하단패널-Collection
      • 하단패널-DataBase
      • 하단패널-Authkey
      • DB 연결하기
    • 디자인 모드 (Design Mode)
      • 디자인 템플릿
      • 고정 레이아웃
      • 너비 높이
      • 디스플레이
      • 마진
      • 패딩
      • 배경
      • 보더
      • 색상
      • 스크롤 타입
      • 스타일 유형
      • 아이콘
      • 절대값 위치 설정
      • 컨트롤 명
      • 캡션
      • 텍스트
      • 투명도 설정
      • 힌트
      • 인풋 컨트롤 변경
    • 개발 모드 (Dev Mode)
      • 컴포넌트(Component)
        • 컴포넌트 상태
        • 로드스크립트
        • 데이터(Data)
        • 이벤트(Event)
        • 컴포넌트 동적 활용(컴포넌트 아이디)
      • 이벤트
        • 이벤트 서비스 스크립트 API 액션 추가
        • API 호출
        • 함수 자동 생성
        • 스크립트 에디터
      • 서비스
        • FlexSQL
        • FlexAutoQuery
        • Firestore
        • GoogleSheet
        • Flextudio API - User
      • 데이터소스
      • Etc
        • Collections
        • Language
        • Scenario
    • 컴포넌트
      • 스텝
      • 그룹
      • 레이아웃
      • 컨트롤
        • Approval
        • Button
        • CalendarNavigator
        • Calendar Schedule
        • Checkbox
        • ComboBox
        • DatePicker
        • Embed
        • FileUpload
        • Image
        • InputDate
        • InputMask
        • InputNumber
        • InputSearch
        • InputText
        • Line
        • MultiInputBox
        • Radio
        • Sheet (Beta)
        • Signature
        • Tab
        • Text
        • TimeTable
        • Tree
      • 스텝 버튼
  • 디버거
    • 디버거 인터페이스
    • 실행 내역 확인하기
    • 콘솔
    • 데이터 상태 확인하기
    • 서비스 테스트
      • Test-API
      • Test-SQL
  • 참고
    • FAQ
      • 시나리오에서 앱을 배포했는데, 라이브에 적용이 안되요.
    • 단어집
      • 권한키 (AuthKey)
      • 이너블럭
      • 컬렉션 키
      • FlexDB
      • 공개앱(오픈앱)
      • ParamBlock/ResultBlock
      • _SUID(suid)
    • 단축키
    • 개발 예제
      • 스크롤 페이징 샘플
    • 심화 실습
      • Google Map 그려주기
        • 1. Google Map 생성영역 생성
        • 2. 이벤트 구성하기
        • 3. 이벤트 연결하기
      • Naver Map 그려주기
        • 1. Naver Map 생성영역 생성
        • 2. 이벤트 구성하기
        • 3. 이벤트 연결하기
      • QR코드 생성하기
        • 1. 화면구성하기
        • 2. 이벤트 구성하기
        • 3. 이벤트 연결하기
      • 목적지 경로 거리 및 시간 Google Map
        • 1. Google Map Distance Matrix API 추가하기
        • 2. 화면 구성하기
        • 3. 이벤트 구성 및 연결하기
        • 4. API 호출 결과 후처리하기
    • 데이터 연동 방법
      • 자사 API 백엔드 시스템
      • 외부 DB 연동
      • Firestore 연동
      • GoogleSheet 연동
      • K-System 연동
      • Airtable 연동
    • 앱 출시하기 (SDK)
      • Android SDK
      • iOS SDK
Powered by GitBook

ⓒ flextudio

On this page
  • Active 상태 관리
  • 변경여부에 대한 상태 관리
  • 삭제된 데이터

Was this helpful?

  1. 개념 학습하기

[심화] 데이터의 상태관리(Sector Status)

섹터(Sector)에 대한 설명이 필요하다면 이 페이지가 도움이 될 수 있습니다.

Previous[심화] 컬렉션의 카테고리Next[심화] 카테고리 연결관계

Last updated 1 year ago

Was this helpful?

컬렉션 내부 섹터는 사용자이 동작에 따라 상태값이 자동으로 관리됩니다. 어떤 섹터를 사용자가 선택했는지, 어떤 데이터들이 추가되었고 수정 되었는지 등을 상태값을 통해서 추적하고 가공 할 수 있습니다.

Active 상태 관리

사용자가 실제 사용하면서 상호작용하고 있는 섹터(Sector)를 항상 Active 한 상태로 관리합니다. 사용자가 선택한 항목, 입력하거나, 변경하고 있는 섹터를 Active 상태로 변경 시켜줍니다. Active는 마지막(현재) 사용중인 단 하나의 섹터만이 부여되고, 새로운 섹터가 Active가 될 경우 이전 Active 상태 섹터는 해제 됩니다.

사용자 시나리오 중심으로 개발할 경우 Active 상태 섹터는 사용자가 선택하거나 상호작용중인 데이터를 다음 스텝에서 이어서 작업 변경 하기에 매우 용이하게 쓰입니다.

다음은 알림 리스트를 보여주는 화면입니다. 각 알림 메시지는 섹터에 연결되어서 생성 되었습니다.

사용자가 알림 메세지를 선택하게 되면 해당 알림영역이 연결된 섹터의 상태가 Active 가 됩니다.

다음 스텝에서는 Active 섹터와 연결하여 사용자가 선택한 알림에 대한 상세한 내용을 보여주도록 합니다.

변경여부에 대한 상태 관리

사용자가 특정 동작을 통해 데이터를 추가하거나 수정, 삭제 여부를 알 수 있도록 별도의 상태값을 관리 해줍니다.

다음과 같은 팀원 정보를 서버에서 조회해 왔습니다. 조회해 온 데이터에 대해서는 별도의 상태 값이 부여되지 않습니다.

사용자가 멤버를 추가하기 위한 버튼을 눌러서 새 사용자를 직접 등록하게 되면 해당 섹터에 대해서 Added(추가됨) 여부의 상태가 부여됩니다.

아래는 조회해온 멤버의 정보를 수정하였을 경우 해당 섹터에 대해서 Updated(수정됨) 여부의 상태가 부여됩니다.

추가 수정된 정보를 서버에 반영하고 새로 데이터를 조회하게 된다면 모든 상태값은 다시 초기화가 됩니다.

삭제된 데이터

다음과 같이 멤버를 수정하는 화면이 있습니다. 여기서 위에 두 멤버를 삭제를 해봅니다.

삭제를 하게 되면 해당 멤버는 화면에 나오지 않지만 섹터에 Deleted(삭제됨) 상태가 부여되게 됩니다. Deleted 상태의 섹터는 화면에 반영되지 않습니다.

삭제한 데이터가 컬렉션에 남아있는 이유는 삭제된 데이터를 서버에도 반영하기 위해서 입니다. 함수(Function)를 이용해 직접 삭제도 가능합니다.