3. 이벤트 연결하기

개발 하기

앞에서 구성한 이벤트를 올바른 스텝 이벤트 시점에 연결해 주는 방법을 배워보겠습니다.

스탭의 이벤트 순서 이해

스탭이 시작할 때 이벤트는 다음 순서로 실행됩니다

1. 최초 시작 전 (init): 최초 시작 전 (init)에 연결한 이벤트가 실행됩니다.

2. 화면 render: 스탭이 렌더링됩니다.

3. 로드 시 (Loaded): 로드 시 (Loaded)에 연결한 이벤트가 실행됩니다.

보다 자세한 스탭의 생애주기에 대해 알고싶다면 [개념학습하기]-[[심화]Step의 구성과 생애주기]를 확인해주세요.

올바른 이벤트 연결 방법

앞서 구성한 Google Map을 로드하는 이벤트 (Load_GoogleMap)는 지도를 표시하는 기능을 포함하고 있으므로, 이 이벤트는 Embed 컨트롤이 <div>를 완전히 생성한 후에 실행되어야 합니다. 따라서, 이벤트를 스탭의 "로드 시 (Loaded)" 단계에 연결하는 것이 적절합니다. 이렇게 하면 Embed 컨트롤이 <div>를 생성하고 난 후에 지도를 로드하는 로직이 실행되어 정상적으로 지도를 표시할 수 있습니다.

스탭에 이벤트 연결하기

스탭의 "로드 시 (Loaded)" 이벤트에 Load_GoogleMapScript 이벤트를 연결합니다.

디버거에서 확인하기

디버거를 실행하여 지도가 로드되는 것을 확인할 수 있습니다.

챕터 마무리

배운 내용

• 스탭 시작시 이벤트 순서와 올바른 시점에 이벤트를 구성하는 방법에 대해 학습하였습니다.