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

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

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d7a34c5d-b982-4a59-8910-d568a5a8c6a6/-.gif

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

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

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

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b0f51da4-1059-4da2-9119-58ae835a7d73/GIF.gif

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

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

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

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

🤔🤔🤔

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

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/411f8d60-9d8b-44f8-a5b9-b59cd2077d42/Untitled.png

폴더 구조