이벤트와 서비스 구동 방법

시나리오 스튜디오에서 이벤트, 서비스의 구동방식을 모르거나, 어떻게 이벤트가 발생하고 발생된 이벤트를 서비스와 연결시키는지 알고 싶다면 해당 페이지가 도움이 될 수 있습니다.

[개념 학습하기] 섹션의 첫 번째 챕터 시나리오의 구성요소 에서 이벤트와 서비스의 개념에 대해 다뤘습니다. 이번 챕터에서는 실제 시나리오 스튜디오 UI에서 이벤트, 서비스가 어떻게 구동되는지 알아보겠습니다.

이벤트와 서비스는 플렉스튜디오의 고유한 개념입니다. 이벤트와 서비스에 대한 개념을 모른다면 시나리오의 구성요소을 선수 학습하시길 추천드립니다.

이벤트와 서비스의 관계

플렉스튜디오에서 화면의 동작은 이벤트(Event)로 구현을 하고 서비스(Service)를 통해 외부에 데이터를 보내거나 갖고 올 수 있습니다.

아래 이미지는 이벤트의 발생과 서비스의 호출을 순차적으로 보여줍니다.

자세히 살펴보겠습니다.

우선 사용자(유저)의 행위를 이벤트에 연결합니다.

행위는 '화면을 시작한 것', '특정 요소를 클릭한 것' 등이 될 수 있습니다.

사용자가 이벤트를 트리거 하면 이벤트는 1) 연결된 서비스를 호출하거나 2) 다른 이벤트를 호출하거나 3) 스크립트를 실행합니다. 실행되는 이벤트는 개발자가 어떻게 개발하는지에 따라 다를 수 있습니다.

만약 서비스를 호출하는 이벤트라면 서비스가 호출됩니다. 호출된 서비스는 DB에서 데이터를 가져오고 (필요에 따라 값을 보낼 수도 있습니다), 결과를 컬렉션에 반영합니다.

아래 예시를 통해 스튜디오 내에서 어떻게 동작하는지 살펴보겠습니다.

예시

구현 목표

아래와 같이 게시물 등록하는 화면을 만들어 보겠습니다.

스튜디오 내 개발 모습

디버거 화면 결과 모습

구현을 위해 필요한 이벤트와 서비스 과정에 대해 알아보겠습니다.

필요한 작업

우리가 개발해야 하는 기능을 나열하면 아래와 같습니다.

1. DB에서 게시물 내용 조회하기

2. 조회한 내용을 화면에 나타내기

플렉스튜디오에는 이 과정에서 이벤트와 서비스 설정을 해야 합니다.

우리가 만들어야 하는 기능을 이벤트와 서비스로 변환하자면,

1. 화면이 처음 그려지는 시점에 이벤트 A를 호출한다.

2. 이벤트 A가 서비스 A를 호출한다.

3. 서비스 A는 DB를 조회해온다

4. 조회된 데이터가 화면에 나타난다.

가 됩니다.

이를 설정하는 과정을 순서대로 설명하면 아래와 같습니다.

순서	절차	설명
1	데이터 가져오기 등록	데이터를 가져올 방법을 DB나 API에 따라서 API 연동 혹은 FlexSQL을 만듭니다.
2	서비스 생성	서비스를 생성하여 위에서 만든 방법을 선택합니다. ex) API(Airtable, Firestore), FlexSQL
3	이벤트 생성	서비스를 호출할 이벤트를 생성합니다. - 서비스 호출 시 “보내는 데이터”와 “받은 데이터”를 어디에 저장할지 선택합니다. - 데이터를 받은 후에 화면을 새로 로드하도록 합니다.
4	이벤트 연결	해당 Step이 로드 되는 시점에 이벤트를 연결합니다.

실제 구동 시 과정

디버거나 앱이 실행될 때 어떤 순서로 이벤트와 서비스가 실행되는지 알아보겠습니다.

순서	절차	설명
1	데이터 가져오기 등록	실제 화면(Step)이 로드 될 시에 query라는 Event 가 호출됩니다.
2	서비스 생성	이벤트가 실행되면 이벤트에 등록한 query_memo 서비스가 호출됩니다.
3	이벤트 생성	등록된 서비스 요소를 호출하여 데이터를 받아옵니다.
4	이벤트 연결	받아온 데이터를 memo라는 카테고리명으로 컬렉션에 저장합니다.데이터가 보일 그룹(레이아웃)에 같은 명의 카테고리명으로 연결해 줍니다.
5	Step 리로드	Step을 새로 로드합니다. → 데이터가 반영되어서 화면이 나오게 됩니다.

챕터 마무리

이번 챕터에서는 이벤트와 서비스가 어떤 순서로 구동되는지 알아보았습니다. 플렉스튜디오는 이벤트와 서비스를 활용한 실습들을 제공합니다.

FlexSQL을 활용한 실습이 궁금하다면, 심화 실습

Firestore을 활용한 실습이 궁금하다면, 심화 실습

다음 챕터에서는 텍스트를 동적으로 사용할 수 있는 [대체 텍스트]에 대해 살펴보겠습니다.