[Vue] 컴포넌트 팝업창 '오늘 하루 창 열지 않기' 스크립트 만들기 feat. mounted - 포폴

 

 

 

 

예전에 쿠키를 이용해서 이 기능이 적용된 팝업을 레거시로 만들었었는데 이번에 Vue에서 사용하는 팝업창을 만들게 되었다. 라이프사이클을 사용해서 하다보니 만들면서 기억할 겸 정리 한다.

 

 

 

 

[ Vue에서 HTML 팝업창 만들기 적용 ]

<template>
  <div v-if="isOpen" class="popup">
    <div class="popup-content">
      <p>오늘 하루 열지않는 팝업창 만들기</p>
      <button @click="closePopup">닫기</button> <!--팝업창 닫기 버튼 -->
      <!-- checkbox 영역 -->
      <label>
        <input type="checkbox" v-model="doNotShowToday" />
        오늘 하루 열지 않기
      </label>
      <!-- // checkbox 영역 -->
    </div>
  </div>
</template>

 

 

 

 

v-model을 이용하여 데이터 바인딩을 적용.

 

checkbox가 클릭되면,

data에 doNotShowToday = ture

 

checkbox가 해지하면,

doNotShowToday = false

 

 

 

 

[ Vue에서 오늘 열지않기 기능 Script 적용 ]

export default {
  data() {
    return {
      isOpen: true, // 팝업창 여/부 state
      doNotShowToday: false // checkbox on/off
    };
  },
  methods: {
    // 팝업창 닫기 눌렀을 때 기능.
    closePopup() {
      if (this.doNotShowToday) {	// checkbox === true면
        const now = new Date();		// 지금 시간을 변수 now에 적용
        now.setHours(23, 59, 59, 999); // now의 오늘 자정시간 만들기
        localStorage.setItem("expireTodayTime", now.getTime());
        // 로컬스토리지에 'expireTodayTime'를 key값으로 삽입
        // value에 변수now 값(getTime)의 시간을 삽입
      }
      this.isOpen = false;	// checkbox === false 일땐 단순 닫기 
    }
  },
  mounted() { // 화면 그려지고 실행하는 함수
    const savedTime = localStorage.getItem("expireTodayTime");
    // 변수 savedTime에 로컬스토리지에 적용한 key 'expireTodayTime'의 value값 적용
    if (savedTime && new Date().getTime() < parseInt(savedTime)) {
    // savedTime 값이 있고, mounted 될 때 시간이 savedTime 값보다 작으면
      this.isOpen = false;	// 팝업 닫기
    }
  }
};

 

 

 

 

🚀 mounted 란?

- 컴포넌트가 화면 DOM에 완전 추가된 후 실행하는 함수.

컴포넌트 생성 ▶️ 가상 DOM에 렌더링 ▶️ 브라우저에 화면 그려짐 ▶️ mounted 실행 ✨

 

[Vue] 라이프사이클 Mounted 란? 언제 써야할