현재화면이 브라우저인지 모바일인지 알려주는 컴포저블 ( CompositionAPI이용 )

export function useWindowSize() {
  const windowWidth = ref(window.innerWidth) // 1.현재 화면의 초기값을 (반응형) 변수로 저장

  function updateSize() {
    windowWidth.value = window.innerWidth // 3. resize이벤트는 화면 크기가 변경될때마다 windowWidth변수에 변경된 화면값을 저장한다
  }

  onMounted(() => {
    window.addEventListener('resize', updateSize) // 2.화면이 렌더링되면 resize이벤트를 등록한다 
                                                  // (컴포지션api의 라이프사이클 mounted함수)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', updateSize) // 5. 화면이 사라지게 될 경우 resize이벤트를 해체해서 메모리 낭비를 막는다 
                                                     // (컴포지션api의 라이프사이클 unmounted함수)
  })

  const isMobile = computed(() => windowWidth.value < 768) // 4.화면 넓이가 768px이상이라면 참(=모바일화면)을 반환한다

  return { isMobile } //4. useWindowSize()함수의 반환형으로 isMobile을 전달한다
}