개인 프로젝트: 영화 검색 사이트 - 회고

개인 프로젝트를 마치고

GitHub - parkminjo/Movie-Search: Personal Project 01 - 실시간 영화 검색 기능과 북마크 저장 기능을 제공하는

 

드디어 개인 프로젝트를 어젯밤에 제출하였다.

밤에 예상치 못한 문제를 겪어서 수정할 부분이 조금 있었다.

다행히 팀원분의 도움을 받으면서 무사히 수정을 완료했고, 이후 발생한 오류도 해결하였다.

 

오늘 해설 강의를 들으면서

내가 작성했던 코드에서 수정할 부분들을 정리하였다.

 

 

영화 카드 & 모달창 만들기

📌 Javascript로 HTML 태그 생성하는 방법

const makeMovieCard = function (movieList) {
  movieList.forEach((movie) => {
    // 영화 카드 템플릿
    const cardTemplate = `
      <div class="movie-card" id=${movie.id}>
        <div class="movie-image">
          <img src=${
            "https://image.tmdb.org/t/p/w500" + movie.poster_path
          } alt="영화이미지" />
        </div>
        <div class="movie-card-body">
          <h2 class="movie-title">${movie.title}</h2>
          <p class="movie-rating">평점: ${movie.vote_average}</p>
        </div>
      </div>  
      `;

    // div 태그-movieList에 템플릿 추가하기
    $movieList.insertAdjacentHTML("beforeend", cardTemplate);
  });
};

나는 오로지 innerHTML만 사용하여 동적으로 HTML 태그를 추가했었다.

innerHTML을 사용하면 HTML의 모든 내용을 ``(백틱) 안에 넣게 되어 가독성이 떨어지는 문제가 있었다.

 

const makeMovieCard = function (movieList) {
  movieList.forEach((movie) => {
    // 영화 카드 템플릿
    const movieCard = document.creatElement("div");
    movieCard.classList.add("movie-card")
    moiveCard.innerHTML = `
    	<img src=영화이미지주소 alt"영화 이미지">
        <h3>영화 제목</h3>
        <p>평점:</p>
    `
    document.querySelector(".movie-list").appendChild(movieCard)
  });
};

createElment()로 div 태그를 생성하고

생성한 div 태그에 classList.add()로 클래스명을 지정하는 방법이 있었다.

확실히 이렇게 작성하는 것이 눈에 훨씬 더 들어오고 나중에 수정하는 것도 용이해 보였다.

이렇게 만들면 이벤트를 주는 것이 쉬워진다고 한다.

 

이렇게 하면 되는구나 하고 깨닫고 여기는 따로 코드를 수정하지는 않았다.

해당 내용에 맞춰 코드를 수정했었는데, 작동이 안 되는 문제가 발생했기 때문이다...

다른 부분까지 수정해야 되는 엄청난 작업을 거쳐야 될 것 같아서 그대로 놔뒀다.

 

📌 구조분해 할당 추가

위의 코드를 보면 알 수 있듯이 백틱 안에 들어가는 인자의 형태를

요소 뒤에 원하는 속성의 이름을 붙이는 형태로 작성했었다.

 

놀랍게도 구조분해 할당을 이용하면 속성의 이름만 넣어주면 된다.

const { id, title, poster_path, vote_average } = movie;

// 영화 카드 템플릿
const cardTemplate = `
      <div class="movie-card" id=${id}>
        <div class="movie-image">
          <img src=${
            "https://image.tmdb.org/t/p/w500" + poster_path
          } alt="영화이미지" />
        </div>
        <div class="movie-card-body">
          <h2 class="movie-title">${title}</h2>
          <p class="movie-rating">평점: ${vote_average}</p>
        </div>
      </div>  
`;

구조분해 할당이라는 개념을 배우긴 했는데 자주 사용하지 않으니깐 활용할 생각을 하지 못했다.

나중에 forEach로 요소를 하나하나 가져올 때 유용하게 써먹을 수 있을 것 같다.

 

 

공통

전역 변수 수정

const $movieList = document.querySelector(".movie-list");
const $bookMarkButton = document.querySelector(".book-mark-button");
const $addDeleteBookmarkButton = document.querySelector(".movie-add-delete");
const $banner = document.querySelector(".banner");
const $movieListTitle = document.querySelector(".movie-list-title-text");

HTML 태그를 지정하는 코드를 모두 전역 변수로 만들어 줬었다.

 

해설 강의를 보고 불필요한 행동이었다는 것을 깨닫고 수정해 주었다.

한 번만 사용할 경우, 전역 변수로 만들지 않고 필요한 부분에 바로 붙여 주었고,

여러 번 사용할 경우에만 전역 변수로 만들었다.

 

필요한 부분만 전역 변수로 만들어 주니 오히려 코드가 깔끔해졌다.

 

 

개인 프로젝트를 진행하면서 느낀 점

개인 프로젝트는 처음 진행하는 것이었기 때문에 어려운 점이 정말 많았다. 모르는 개념이 나올 때마다 검색하면서 찾아봤어야 했고, 개념을 이해하더라도 그걸 바로 코드에 적용하는 것은 쉽지 않았다. 여러 번 코드를 실행해 보면서 어디서 잘못 됐는지 콘솔창에 찍어 보면서 확인해야 될 때도 많았다.

그날 정해진 목표를 그날 바로 끝내기 위하여 정해진 학습 시간을 넘어서까지 코드를 짜야 될 때도 많았다. 도전 기능(북마크 추가, 실시간 검색 기능)을 구현할 때에는 하루를 전부 써도 구현하지 못한 채 다음 날로 넘긴 경우도 있었다.

 

이런 수많은 과정을 거치면서 결국 구현하지 못했던 기능을 구현해 냈을 때 엄청난 성취감을 느꼈다. 그날의 기분이 여전히 생생하다. 혼자 침대에 누워서 속으로 소리를 질렀다.

 

프로젝트를 진행하면서 그날에 있었던 트러블 슈팅이나 TIL을 작성하는 습관도 길렀다. 최근에 들었던 특강에서 튜터님께서 이런 말씀을 해주신 적이 있다. "번아웃이 오지 않는 방법은 오늘 해야 될 일을 내일로 미루지 않는 거예요." 그 말을 듣고 매일 목표를 설정하고 오늘 안에 끝내려고 노력했다. 그러지 못한 날도 존재했지만 대부분은 목표를 모두 달성하고 잠자리에 들었다. 늦은 시간에 잠들긴 하더라도 밤에 깔끔한 기분으로 하루를 마무리할 수 있었다.

 

이번 프로젝트를 통해 프론트엔드 개발에 대한 재미를 확실하게 느꼈다. 아침에 눈 뜨자마자 얼른 의자에 앉아 코드를 짜고 싶은 마음이 들 정도였다. 5개월 후의 나의 마음도 여전했으면 좋겠다.