Vue | life cycle을 활용하여 scroll event를 적용해보자

Post 계기 팀프로젝트를 진행하던 도중 페이지의 메뉴바와 검색창을 마우스 스크롤에 따라 숨기거나 드러나게 하는 기능을 구현하기 위해 적용했던 방법을 기록하려고 한다. 구현 기능 - router-link 전환시에 페이지의 위치를 최상단으로 오게한다. - 마우스 스크롤에 따라 header를 숨기기도 하고 나타나게도 한다. 구현 방식 - Vue의 life cycle중 mounted, unmounted를 활용 - addEventListener를 사용하여 scroll 이벤트를 감지 - classList에 add 또는 remove를 통해 CSS 속성 적용 JavaScript Code mounted 인스턴트 컴포넌트들을 mount한 다음 호출된다. 이 경우에는 window.scrollTo(0, 0) 을 통해 화면전..