우아한 테크캠프 4주차 코드리뷰 시간에 크롱님께서 언급하신

쿠팡 메인사이트 메뉴 UX 개선에 대해 흥미가 생겼습니다.

뷰티 → 헤어. 다이렉트로 가고싶다...

하지만 쿠팡 개발자가 아닌데 어떻게 쿠팡 사이트를 개선할 수 있을까요?

우선 메뉴에서 마우스가 돌아다닐때 어떤 일이 벌어지는지 알아봐야겠습니다.

카테고리 위에 마우스가 올라가는 순간 'category-2depth-active' 라는 클래스가 생깁니다.

querySelector로 이 클래스를 찾아서 이 클래스가 있을때만 이벤트를 처리하면 될 것 같은 느낌이 듭니다.

document.body.addEventListener('mousemove', function (event) {
    const menu = document.body.querySelector('.category-2depth-active');
    if (menu) {
        // Todo...
    }
});

아니 그 전에 작성한 코드를 어떻게 실행시켜야 할지 먼저 생각해 봐야겠네요.

🤔🤔🤔

문득 크롬 확장 프로그램이 떠올랐습니다. 코드만 실행시키면 되니 간단히 설정하는 방법을 찾아보았습니다.

폴더 구조