Kdto parkhyemin naverVIBE 홈페이지 클론코딩 (기존 PR closed 후)

[IAMISTP]

No description provided.

[HOOOO98]

header, main, player 각 구역에 따라서 CSS 파일을 나눠서 관리하셨네요.
음악 스트리밍 사이트 같이 재사용이 잦은 사이트에서는 관리하기 편하겠네요!
저도 앞으로 참고하겠습니다~!

[jungHyeonS]

혜민님 정말로 고생많으셨습니다~ 상세페이지까지 구현해주신 부분 확인하였습니다~
html 구조도 잘 잡으셨고, css 도 파일 분리하여 유지보수 쉽게 구성해주신거같습니다
자바스크립트도 잘작성해주셨고 리뷰드린 내용들만 잘숙지하셔서 다음에 작업할때는 더 깔끔한 코드를 작성해주시면 좋을꺼같습니다

또한 추후에는 readme 작성을 해주셔야 제가 결과물을 확인할수있습니다 참고부탁드리겠습니다~

[jungHyeonS]

해당 코드들을 보시면 함수안에 코드들이 중복되는것을 보실수있습니다~
해당부분을 개선한다면 우선 쿼리 셀렉터로 가져오고있는 엘리먼트를 key 파라미터로 받아서 동적으로 엘리먼트를 가져오고,기존 direction 파라미터는 유지는 함수를 하나 만들수있을꺼같습니다

해당 함수를 사용하는 방법은 아래 코드들에 기입해두었습니다~

function showSlide(key, direction) {
  let slide = slides[key];
  let prevbtn = document.querySelector(`.${key}_prev`);
  if (direction === "next") {
    console.log("next");
    slide.slider.classList.remove("left");
    slide.slider.classList.add("right");
    slide.index++;
    if (slide.index === slide.images.length) {
      slide.index = 0;
    }
    prevbtn.style.visibility = "visible";
  } else if (direction === "prev") {
    prevbtn.style.visibility = "hidden";
    slide.slider.classList.remove("right");
    slide.slider.classList.add("left");
    slide.index--;
    if (slide.index < 0) {
      slide.index = slide.images.length - 1;
    }
  }
}

[jungHyeonS]

해당 부분 보시면 공통된 slider들을 가져오는것이 확인이됩니다 그리고 형식이 마치 key_slider와 같은 형식을 가지고 있어서 이것을 하나의 자구조로 만들고 반복적으로 할당하게 하면 코드가 더 짧아질꺼같습니다

const slides = {
  magazine: { slider: null, images: null, index: 0 },
  news: { slider: null, images: null, index: 0 },
  vibe: { slider: null, images: null, index: 0 },
  pick: { slider: null, images: null, index: 0 },
};
Object.keys(slides).forEach(key => {
  slides[key].slider = document.querySelector(`.${key}_slider`);
});

[jungHyeonS]

마찬가지로 이미지 부분도 반복되기때문에 아래처럼 작성이 가능할꺼같습니다

slides[key].images = document.querySelectorAll(`.img_container_${key} img`);

[jungHyeonS]

여기서도 보시면 반복된 함수 호출이 계속되시는걸 확인하실수 있으실텐데 이부분을 위쪽 개선사항이랑 연관지어서 코드를 줄이면 아래처럼 가능할꺼같습니다~

Object.keys(slides).forEach(key => {
  document.querySelector(`.${key}_next`).addEventListener("click", () => {
    showSlide(key, "next");
  });
  document.querySelector(`.${key}_prev`).addEventListener("click", () => {
    showSlide(key, "prev");
  });
});

[jungHyeonS]

사소하지만 소수점은 최대한 소수점 두번째 자리까지만 표시하는게 좋습니다~

[jungHyeonS]

패딩,마진 에는 rem을 주지 않습니다~ rem 폰트 단위이기때문에 마진을 잡으실때는 px 혹은 % 로 해주시는게 좋습니다

[jungHyeonS]

변수명이 일관적인 형식이 아니면 코드의 가독성이 떨어집니다 프로젝트 전체적으로 카멜 케이스를 쓸껀지, 스네이크 케이스를 쓸껀지 정한후 해당 규칙을 지켜주시면 더욱더 좋은 코드를 완성시킬수 있습니다~

[yeongmins]

레이아웃 구성을 실제 페이지랑 거의 비슷하게 구현 잘 하셨네요!
사이드바 고정, 사운드 조절, 슬라이드 등 참고할 점이 많은 것 같아요~

다음 과제 진행 시 참고 하겠습니다!

[suyeonnnnnnn]

슬라이드 구현해주신 부분 잘 보았습니다~! 멘토님이 리뷰 해주신 부분도 참고해서 제 프로젝트에도 적용해 볼 수 있을 것 같아요!
실제 사이트를 보니 레이아웃 구성이 어려워 보이는데 flex와 grid를 사용해서 완성도 있게 잘 구현해주신 것 같아요!

[NamgungJongMin]

이미지 로딩이 안된 사람들에게 어떤 이미지인지를 알려주기 위해 alt속성을 채워주시는 것이 좋아보입니다.

[JiHongkyu]

서브메뉴의 scroll bar를 서브메뉴가 hover 됐을 때 보이도록 하고, scroll bar를 커스텀 해주시는 것도 좋을 것 같습니다!