개인 프로젝트(클론 코딩) 회고록

민수·2022년 12월 5일

CSS JavaScript clone coding html 프로젝트 회고록

1. 프로젝트 설명

1.1 프로젝트 설명

HTML/CSS, Javascript를 배우고 처음 하는 개인 프로젝트입니다.
클론한 사이트는 HMG 드라이빙 익스피리언스 센터로 국내 최대 드라이빙 센터입니다.

1.2 진행 기간

22.11.28 ~ 22.12.04

1.3 기술 스택

HTML CSS Javascript

2. KPT

2.1 Keep

실제 페이지
구현 페이지

페이지 상단에 위치한 슬라이드를 살펴보면 다른 슬라이드로 이동할 때 애니메이션이 순차적으로 일어나고 있었습니다.
그래서 수업시간에 배운 setTimeout을 이용해 순차적으로 코드가 실행되도록 구현해 보았습니다.

const animation = (animationName) => `animation: 1s ease 0s 1 alternate forwards running ${animationName}`;
const slide1Display = (animationName = "slideIn") => {
    renderStatus = "rendering";

    slide2.style = `${img2} opacity:0; ` + animation("slideDisplay");
    setTimeout(() => {
      slide2TxtHide();
      setTimeout(() => {
        slideCircleBtnList[0].classList.add("active");
        slideCircleBtnList[1].classList.remove("active");

        timer = setTimeout(() => {
          slide2.style = `${img2} left:100%; opacity:0; ` + animation("slideOut");
          slide1.style = `${img1} left:0; opacity:1; ` + animation(animationName);
          setTimeout(() => {
            slide1TxtDisplay();
            renderStatus = "finish";
          }, 1000);
        }, 2000);
      }, 1000);
    }, 0);
  };

구현 페이지

고차함수를 이용해 해당 엘리먼트의 인덱스를 전달해 주고 이를 이용해 클래스를 추가해 사진이 변경 될 수 있도록 구현해 보았습니다.

const slideBtnHandler = (i) => {
  return (e) => {
    otherActiveDel(i, swiperSlideBtnList);
    swiperSlideBtnList[i].classList.add("active");
    swiperSlideList[i].style = "opacity: 1";
    otherImgDel(i, swiperSlideList);
  };
};

for (let i = 0; i < swiperSlideBtnList.length; i++) {
  swiperSlideBtnList[i].addEventListener("click", slideBtnHandler(i));
}

2.2 Problem

구현하고 싶었던 것은 헤더에서 GNB 부분에 마우스를 가져다 대면 LNB가 생기고 LNB 부분을 지나면 사라지게 만드는 것이었습니다.
mouseout 이벤트만을 가지고 헤더 이벤트를 구현하려고 했더니 다음과 같이 GNB를 지나 t-layout 바깥으로 나가도 LNB가 사라지지 않는 문제가 발생하였습니다.

그래서 처음에는 console.log로 mouseout 이벤트가 발생하는 대상 객체를 찍어서 예외처리를 진행하였습니다.
하지만 그 이후에는 GNB에서 LNB로 마우스를 이동하면 LNB가 사라지는 문제가 발생하였습니다.
MDN에 mouseout을 검색해 해당 이벤트가 어떻게 동작하는지 다시 확인해 보려고 했는데 우연히 옆에 mouseleave를 보았습니다.

설명을 읽어보니 mouseleave 이벤트를 사용하면 문제가 쉽게 해결될 것 같았습니다.

2.3 Try

헤더에서 GNB 부분에 마우스를 가져다 대면 LNB가 생기고 LNB로 마우스를 이동시키면 유지할 수 있게 코드를 구현해야 했습니다.
그래서 mouseleave 이벤트를 사용해 GNB 부분에서 왔다면 그냥 넘어가고 아니면 LNB를 숨길 수 있도록 다음과 같이 코드를 구현해 위에서 발생한 문제를 해결할 수 있었습니다.

const innerLeaveHandler = (e) => {
  if (header.classList.contains("hover")) {
    return;
  } else {
    removeActive(headerOneDepList);
    tLayoutRemoveFlex();
  }
};
inner.addEventListener("mouseleave", innerLeaveHandler);