Home
home
버블박스
home
😒

Custom Event를 왜 쓰는거야?

중요 공지

“버블박스”가 “노코더스”라는 이름으로 변경됐어요

현재 사이트는 더 이상 운영하지 않으니 노코더스 사이트로 이동해주세요

목차

1. custom event 사용하기

워크플로우에서 제공하는 액션 이벤트 중에서 [custom event]가 존재합니다. custom event는 reuseable workflow라고 생각하면 됩니다. 즉, reusable element(재사용 요소)처럼 워크플로우를 재사용할 수 있는 기능입니다. 사실 커스텀 이벤트보다 커스텀 워크플로우가 더 직관적이지 않나 생각하지만…
커스텀 이벤트를 만들려면, 워크플로우에서 새로운 트리거 이벤트를 생성해야 합니다. 이때 [Custom] 탭에 있는 [Create a custom event]를 선택합니다. 그러면 아래처럼 커스텀 이벤트가 생성됩니다.
그리고 커스텀 이벤트에 종속되는 액션 이벤트를 아래처럼 생성할 수 있습니다. 그러면, 해당 커스텀 이벤트가 동작할 때, 종속된 액션 이벤트들이 실행됩니다. 사실 워크플로우를 만드는 것과 차이가 없습니다.
이렇게 등록한 커스텀 이벤트는 워크플로우의 액션 이벤트에서 사용할 수 있습니다. [custom event]라고 검색을 하면, 2가지 선택지가 나옵니다. 여기서 [Trigger a custom event]를 선택하면 됩니다. 그러면 현재 페이지에 존재하는 커스텀 이벤트를 선택해 실행할 수 있습니다.
1.
Trigger a custom event
2.
Schedule a custom event

2. 근데 왜 필요한거죠?

custom event를 사용하지 않아도 버블에서 서비스를 빌드하는 데 큰 문제가 되지 않습니다. 다만, custom event를 제대로 사용할 줄 안다면, 아래의 장점이 있습니다. 왜 이러한 장점이 있는지 조금 더 상세히 뜯어봅시다. 해당 부분까지 이해해야 커스텀 이벤트를 제대로 쓸 수 있으니 꼭 읽어주세요!
1.
워크플로우의 편리한 유지 보수
2.
복잡한 변수 값 불러오기
3.
병렬적으로 액션 처리하기
버블박스만 믿으라구! (출처 : 나무위키 <너굴맨>)

a. 워크플로우의 편리한 유지 보수

예를 들어, 유저가 문의를 남기는 팝업을 만든다고 합시다. 우선 유저의 이메일 및 문의 내용을 입력하는 인풋 요소와 문의하기 버튼을 우선 만듭니다. 그리고, 버튼 클릭 이벤트가 발생했을 때 작동하는 워크플로우를 만듭니다. 워크플로우의 액션 이벤트로 (1) 이메일 혹은 문의 내용 입력란이 비어있으면 ‘경고 문구’를 적은 요소를 보여주고 (2) 비어있지 않았다면 ‘성공 문구’를 적은 요소를 보여주게 설정했다고 합시다. 그러면, 워크플로우는 아래와 같은 식으로 구성이 됩니다.
트리거 이벤트
Event : [문의하기] 버튼 클릭
액션 이벤트 1
Event : show [경고 문구] 요소
When : [이메일] 요소의 값이 비어있음 or [문의 내용] 요소의 값이 비어있음
액션 이벤트 2
Event : show [성공 문구] 요소
When : [이메일] 요소의 값이 비어있음 or [문의 내용] 요소의 값이 비어있음
위와 같은 경우에는 사실 커스텀 이벤트를 사용할 필요가 없습니다. 다만 문제는 하나의 페이지에 [문의하기]라는 버튼이 2개가 존재하는 경우입니다. custom event를 모르는 뉴비라면, 새로운 문의 버튼을 생성하고 동일한 워크플로우를 하나하나 만들 겁니다. 물론 귀찮아도 시간만 들이면 해결할 수 있습니다.
하지만, 만약 워크플로우를 변경해야 하는 경우가 있으면 어떻게 해야 할까요? 또 다시 귀찮게 2개의 독립적인 워크플로우를 하나하나 수정해야 합니다. 해당 페이지 작업을 완료하고 시간이 많이 지난 상태라면, 이전 작업이 기억이 나지 않을 수 있습니다. 결국, 문의 관련 워크플로우가 2개가 있는 걸 까먹어서 1개만 바꿀 수도 있습니다.
귀찮음의 굴레 (출처 : 나무위키 <대략 정신이 멍해진다>)
Custom Event는 재사용이 가능한 워크플로우입니다. 반복적으로 사용해야 하는 문의 관련 워크플로우를 커스텀 이벤트로 처리한다면 어떻게 될까요? 번거롭게 여러 워크플로우를 하나하나 수정할 필요 없이, 커스텀 이벤트에서 한 번에 수정하면 됩니다.
역시 커스텀 이벤트는 신이야! (출처 : <무한도전>)

b. 복잡한 변수 값 불러오기

워크플로우에서 복잡한 수식을 통해 변수 값을 불러와 활용해야 하는 경우가 있습니다. 여러 테이블이 복잡하게 얽혀 있는 값을 불러와야 한다면, 하나의 액션 이벤트에 Do a search for이 여러 번을 쓰이는 등이 발생합니다. 이러한 경우에도 커스텀 이벤트를 사용할 수 있습니다. Custom Event는 동작을 완료한 후에 Return 값을 반환합니다. 복잡한 수식은 Custom Event에서 처리를 시키고, Return 값으로 반환해서 사용하면 됩니다. 그러면 워크플로우를 더 깔끔하게 유지할 수 있습니다.
예를 들어, 특정 유저 레코드를 찾아서 워크플로우에서 사용한다고 합시다. 이때, 해당 유저 레코드를 커스텀 이벤트에서 반환해 사용할 수 있습니다. 아래를 보면 [Return values]로 [user_id]라는 Label을 추가했고, 데이터 타입으로 [User]을 선택했습니다. 이제 해당 커스텀 이벤트는 “user_id”라는 변수를 반환합니다.
이제 앞서 생성한 “user_id” 변수에 들어갈 값을 설정해야 합니다. 커스텀 이벤트 내 액션 이벤트로 [Return data]를 생성하면, 저희가 등록한 “user_id” 변수가 보이는 걸 볼 수 있습니다. 여기서 저희가 찾아야 하는 user 레코드를 설정합니다.
이제 해당 커스텀 이벤트를 동작하는 워크플로우를 확인하겠습니다. 아래를 보면 step 1이 위에 설정한 커스텀 이벤트입니다. [Make change to user] 액션 이벤트를 뒤에 추가하고, 커스텀 이벤트가 반환한 “user_id”를 아래처럼 사용할 수 있습니다.

c. 병렬적으로 액션 처리하기

Custom Event를 동작하는 방식은 (1) 즉시 실행과 (2) 스케줄링 실행이 있습니다. 주의할 점으로, 스케줄링 실행을 “backend API”처럼 생각하면 안 됩니다. 즉, Custom Event는 Front workflow처럼 유저가 현재 페이지에 있을 때만 실행이 됩니다. 만약 Custom Event가 동작하는 와중에 유저가 페이지를 이탈하면, Custom event도 종료됩니다.
버블 공식 문서 : Schedule a custom event This action runs the selected custom workflow at a set time in the future. If the user changes the page before the workflow is scheduled to run, it will not happen. Unlike 'Trigger a custom event,' workflows run by this action run independently from and possibly in parallel with the workflow that initiated it.
그러면, 스케줄링 실행을 왜 쓰는 걸까요? 바로 병렬 처리 때문입니다. 하나의 워크플로우에 존재하는 액션 이벤트는 순차적으로 진행이 됩니다. 예를 아래의 워크플로우가 있다고 합시다. 여기서 Custom Event를 (1) 즉시 실행으로 등록했다면, Custom Event가 모두 종료되야 후속 액션 이벤트가 실행됩니다.
워크플로우 : Action Event → Trigger Custom Event → Action Event
반면 (2) 스케줄링 실행으로 등록했다면, Custom Event가 종료와 관련 없이, 후속 액션 이벤트가 실행됩니다. 즉, 후속 액션 이벤트와 독립적으로 실행 및 처리가 됩니다. 만약 [Delay] 값을 0으로 설정한다면, 후속 액션 이벤트와 트리거 이벤트가 동시에 독립적으로 작동되는 셈입니다.
워크플로우 : Action Event → Schedule Custom Event → Action Event
쉽게 말해 아래처럼 처리가 된다고 보면 됩니다. 베이지색 박스가 액션 이벤트고, 보라색 박스가 커스텀 이벤트라고 보면 됩니다. 좌측이 [Trigger custom event]를 설정한거고 우측이 [Schedule custome event]를 설정 했다고 보면 됩니다.
(출처 : <네이버 호이돌님 블로그 - JAVA Chapter16 스트림과 병렬처리(4/4) - 병렬 처리>)

3. 버블 노하우부터 이론, 개념 등 모르는 게 많다면?

아래 링크에서 버블박스에게 물어봐주세요! 상세히 다뤄서 버블박스에서 설명드릴게요!
https://tally.so/r/3qbo6d
중요 공지

“버블박스”가 “노코더스”라는 이름으로 변경됐어요

현재 사이트는 더 이상 운영하지 않으니 노코더스 사이트로 이동해주세요

버블박스가 버블을 주제로 책을 발행할 예정입니다. 출간 알림을 등록하면 추후에 안내 드릴게요! + 알림 신청자 중 일부에게 책을 무료로 드릴 예정입니다.
필요한 플러그인이 있다면, 버블박스에게 요청해주세요
햇갈리거나 잘 모르는 이론 및 개념이 있다면 아래에 남겨주세요.
버블 크레딧으로 더 저렴하게 시작하기
버블박스 l BubbleBox
Enterprise