Day10_바닐라JS 를 이용한 개인프로젝트 1(영화검색사이트제작)

정소현·2024년 7월 26일

스파르타

목록 보기

12/50

🌟 영화제작사이트 만들기

⭐️ 1. HTML, CSS 사이트 뼈대+ 디자인 잡기

영화 사이트 예술관련 사이트인 만큼 맨처음에는 팝하고 눈에 많은 것이 들어오기 보다는 눈길을 잡아끌게 디자인하고 싶었다...!
디자인을 생각하고 몇번을 갈아엎었다... 웹디보다는 js가 중요하지만 이것또한 욕심이 났다...! 몇 번을 갈아엎고 만은 HTML + CSS!!!
아래 아이콘을 누르면 페이지가 내려가서 카드와 정보들이 나오게 했다..!
문구가 하트처럼 보이게 하고 싶어서 멘트, 서체, 디자인 많은 것을 고민했다

🥹 하면서 생겼던 문제점들

나는 주로 nth-child()를 많이 썼다 언젠가 nth-of-type()의 필요성이 느낄 때가 온다는 말을 들었던 것 같은데 MovieMakeDream의 색상들을 각자 다르게 주려고 span태그로 묶고 그 사이에 br을 주었다. css에서 nth-child()를 사용하려고 하는데 내가 의도했던 것과 달리 br또한 span:nth-child()에 포함되어서 당황했다...! 이 문제는 nth-of-type()을 쓰면 해결되고 역시 문제를 맞닥뜨리면서 배워야 절대 잊지 않겠구나 했다...!
card를 만들 때 img를 div안에 넣어주었다. div의 사이즈를 정해주고 img의 height과 width 를 100%로 줬는데 사진이 꽉 차지 않아 object-fit: fill;를 추가했더니 해결이 되었다. 부모의 사이즈를 꽉 채워주지만 모니터링 환경에 따라 화질이 깨질 수도 있다고 들어서 주의해야할 것 같았다...!

width: 100%;
  height: 100%;
  object-fit: fill;

Flex를 이용하여 반응형페이지로 만들었고 여기서

justify-content: center;
  align-items: center;
  flex-wrap: wrap;

flex-wrap이 있어 수월하게 페이지를 줄였을 때 아래로 카드가 내려갔다.
4. 카드내용이 많아 스크롤바가 안에 보기 싫게 생겨 스크롤바기능은 남아있으면서 스크롤바는 안보이게 없애주었다.

.movie-content{
   overflow : scroll;
}
.movie-content::-webkit-scrollbar {
  display: none;
}

이모티콘 버튼을 눌렀을 때 다른 페이지로 넘어가는 것이 아닌 슬라이드 처럼 내려가게 하고 싶었다. 어떤 모니터 화면에서 봐도 내가 의도한 세션만 화면에 꽉 찰 수 있게 width와 height를 vh, wh로 주어 꽉 차게 만들어주었다.
텍스트 또한 반응형으로 만들기 위해 px이 아닌 rem으로 작업했다.

⭐️ 2. Javascript 데이터연동, 페이지 이동, 검색기능 구현

여기서 정말정말 많은 오류들이 생겼다... 코드를 몇 번씩이나 갈아끼우고 처음부터 다시 써보기도 하고 어떤 오류인지 찾기 굉장히 힘들었다..
알고보니 정말 별 거 아니었던.. 허무하기도 앞으로 다시는 실수 하지 않을 것 같다 허 허.

🥹 하면서 생겼던 문제점들

데이터를 fetch로 연동하고 페이지 이동하는 것은 쉽게 썼다. 바로 문제는 검색기능 구현(모든 카드들 중 검색한 카드만 남기기)

document.querySelector(".search").addEventListener("click", () => {
  // input 에 넣은 값 소문자로 변환
  const searchInput = document
    .getElementById("searchInput")
    .value.toLowerCase();
  const movieCards = document.querySelectorAll(".movie-card");
  // 모든 카드들의
  movieCards.forEach((card) => {
    const title = card.querySelector("h3").textContent.toLowerCase();

    if (title.includes(searchInput)) {
      card.style.display = "block";
    } else {
      card.style.display = "none";
    }
  });
});

이게 내가 쓴 문제가 된 코드였다.

🔥 첫번째 문제점

나는 검색창의 html코드를 form태그를 이용해 만들어주었다. form은 기본적으로 submit의 기능을 가진다. 새로고침을 하는 특성을 가졌다. 내가 검색한 내용의 카드만 남겨야하는데 새로고침이 자동적으로 되면서 결과가 뜨지 않았다.

☘️ 해결방법

addEventListener()를 click시 반응하도록 하였기 때문에 엔터를 눌렀을 떈 검색이 안되었고 click으로 반응하게 하려면 form을 preventDefault()를 주어 새로고침되는 걸 막아주는 코드를 추가해줘야 했다..!
나는 엔터를 쳤을 때도 검색을 할 수 있게 설정하기 위해 click대신 submit를 사용하였다. form에 대한 새로고침은 정의하지 않고 검색했을 때 새로고침이 되지 않도록 써주었다.

이후 수정한 코드

document.querySelector(".search").addEventListener("submit", (e) => {
  // input 에 넣은 값 소문자로 변환
  e.preventDefault();
  const searchInput = document
    .getElementById("searchInput")
    .value.toLowerCase();
  const movieCards = document.querySelectorAll(".movie-card");
  // 모든 카드들의 제목과 input값 포함시 조건에 따라 display 변화주기
  movieCards.forEach((card) => {
    const title = card.querySelector("h3").textContent.toLowerCase();

    if (title.includes(searchInput)) {
      card.style.display = "block";
    } else {
      card.style.display = "none";
    }
  });
});

🔥 두번째 문제점

(정말 찾아내는데 오래걸렸다.. 배열과 객체에 관한 충분한 이해와 지식이 부족해 이런 일이 일어났던 것 같다. )
나는 내가 만들어 둔 카드를 전부 다 가져와 각각 하나씩을 검사하는 forEach문을 만들었다. 나는 html코드에 카드의 타이틀 부분에도 클래스를 주었기 때문에 forEach함수내에서 아래 잘못쓴 코드란 처럼 작성을 하였다.
나는 지금 forEach문을 돌렸고 내가 생각한 카드 타이틀과 카드의 타이틀은 똑같지만 forEach문을 모든 카드들을 불러와 각각 하나씩 돌아가며 검사를 하는 것이였기 때문에 되지 않는 것이었다.
배열에 대해 잘 이해하지 못했어서 일어난 일이였던 것 같다 ㅠㅠ

  movieCards.forEach((card) => {
    const title = card.querySelector("h3").textContent.toLowerCase();
// 바로 이부분
    // 잘못쓴 코드
    // const title = document.querySelector('.cardTitle').textContent.toLowerCase()
    if (title.includes(searchInput)) {
      card.style.display = "block";
    } else {
      card.style.display = "none";
    }
  });
});

☘️ 해결방법

인수로 받은 card의 h3(제목)을 가져오도록 설정해주었더니 무사히 검색되었다

  // 모든 카드들의 제목과 input값 포함시 조건에 따라 display 변화주기
  movieCards.forEach((card) => {
    const title = card.querySelector("h3").textContent.toLowerCase();

    if (title.includes(searchInput)) {
      card.style.display = "block";
    } else {
      card.style.display = "none";
    }
  });
});

😱 느낀 점!!

하나의 .만 잘못찍어도 돌아가지 않은 것이 코드의 매력이자 아픈 점인 것 같다...! 하지만 해결되지 않던 문제가 해결되었을 때 거기서 오는 쾌감은 힘들었던 걸 싹 잊게 해주는 것 같다 ㅠ
객체지향적인 코드를 추구해야하는 게 이런 점에서 그렇구나를 점점 알아가는 요즘. 연쇄적인 문제를 발생시키지 않고 처음부터 많은 생각을 가지고 큰그림을 가져야겠다는 생각을 많이 한다.
물론 그러기 위해서는 많은 공부와 사용 경험이 필요할 것 같다...! 🥵
문제가 생긴 곳에서 너무 많은 시간을 뺏기게 되어 많은 기능들을 시도해보지 못한 게 아쉽다... 앞으로 더 많은 코드들을 쳐보고 연습해야할 것 같다