제네레이터(generator) 의 실무 적용

개요

사이트 처음 접속시 레이어 팝업을 4개 open 합니다.

그런데 무작정 띄우는게 아니라 첫번째 레이터 팝업 닫으면 그다음 레이어 팝업 뜨고 또 닫으면 그다음 팝업이 떠야 합니다.

알고리즘을 어떻게 구현할까 생각하다 generator 를 사용하여 팝업 닫으면 그 다음 레이어 팝업을 뜨게 구현합니다.

실제 코드는 아래코드보다는 많이 복잡하지만 제네레이터 사용 방법을 알고자 간단한 코드로 처리했습니다.

html

<div id="pop1">
	~~~ 팝업 1 내용
    <button @click="closePopup()">닫기</button>
</div>

<div id="pop2">
	~~~ 팝업 2 내용
    <button @click="closePopup()">닫기</button>
</div>

<div id="pop3">
	~~~ 팝업 3 내용
    <button @click="closePopup()">닫기</button>
</div>

<div id="pop4">
	~~~ 팝업 4 내용
    <button @click="closePopup()">닫기</button>
</div>


<script setup>
import { ref, onMounted } from 'vue';

const popupIds = ['pop1', 'pop2', 'pop3', 'pop4'];
const currentPopup = ref(null);
let popupGenerator;

function* popupSequence() {
  for (const id of popupIds) {
    yield id;
  }
}

function openNextPopup() {
  const next = popupGenerator.next();
  if (!next.done) {
    currentPopup.value = next.value;
  } else {
    currentPopup.value = null; // 모든 팝업이 닫힘
  }
}

function closePopup() {
  openNextPopup();
}

function startPopupSequence() {
  popupGenerator = popupSequence();
  openNextPopup();
}

onMounted(() => {
  startPopupSequence();
});
</script>

위 코드는 다음과 같이 작동합니다:

1. popupIds 배열에 모든 팝업의 ID를 저장합니다.
2. currentPopup은 현재 열려있는 팝업의 ID를 저장하는 반응형 참조(ref)입니다.
3. popupSequence 제네레이터 함수는 popupIds 배열의 각 ID를 순차적으로 yield합니다.
4. openNextPopup 함수는 제네레이터에서 다음 팝업 ID를 가져와 currentPopup에 설정합니다.
5. closePopup 함수는 현재 팝업을 닫고 다음 팝업을 엽니다.
6. startPopupSequence 함수는 제네레이터를 초기화하고 첫 번째 팝업을 엽니다.
7. onMounted 훅에서 startPopupSequence를 호출하여 컴포넌트가 마운트될 때 팝업 시퀀스를 시작합니다.
8. 템플릿에서는 v-for로 모든 팝업을 렌더링하지만, v-show를 사용하여 현재 팝업만 표시합니다.

이 방식을 사용하면 팝업의 순서를 쉽게 관리할 수 있으며, 새로운 팝업을 추가하거나 순서를 변경하는 것도 간단합니다.

또한, 제네레이터를 사용함으로써 팝업 시퀀스의 상태를 효과적으로 관리할 수 있습니다.