내일배움캠프 팀 프로젝트 - 영화 검색 사이트 (상세 페이지 추가)

내일배움캠프 팀 프로젝트 - 영화 검색 사이트 (상세 페이지 추가)

 

 

이번 과제는 팀으로 진행되었습니다. 기존 개인 프로젝트에서 했던 영화 검색 사이트의 심화 버전으로 영화의 상세 페이지와 리뷰 작성 기능이 추가되었습니다. 과제 진행 과정과 발생했던 주요 이슈 및 결과물에 대해 소개하겠습니다.

 

 

영화 검색 사이트의 심화버전

 

이번 과제는 팀으로 진행되었으며, 개인 프로젝트에서 진행한 영화 검색 사이트의 심화 버전으로 이루어졌습니다.

 

내일배움캠프 개인프로젝트 - 최고 평점 영화 검색 사이트

(이전 진행한 개인 프로젝트 글 입니다)

 

이번 과제에는 이전 프로젝트보다 더 많은 요구사항이 있었습니다. 그 중 주요 요구사항은 다음과 같습니다.

 

• TMDB or 영화진흥위원회 오픈 API 사용하기
• 영화정보 상세페이지 구현
• 상세페이지 영화 리뷰 작성 기능 구현
• github PR(Pull Request) 사용한 협업
• UX 고려한 validation check
• 지정한 javascript 문법 사용

 

오픈 API 사용에 있어서 저희 팀에서는 TMDB만 사용했습니다.

 

The Movie Database (TMDB)

 

 

어려웠던 부분

 

필자는 이번 프로젝트에서 '상세 영화정보 조회'와 메인페이지 '오늘의 영화' 부분을 담당하였습니다. 작업 간에 가장 어려웠던 부분은 API를 활용하여 영화 데이터를 가져오는 과정이었습니다. 

 

메인페이지에서는 '오늘의 영화'와 '영화 리스트' 두 개의 다른 조회 API를 사용합니다.

 

메인페이지 - 오늘의 영화

 

메인페이지 - 영화리스트

 

위의 영화 목록에서 클릭 이벤트 발생 시 상세페이지로 넘어가 영화 상세 정보가 나타나는 곳을 필자가 담당하였는데, 여기서 두 API 정보 중 한 곳의 데이터 만을 보기 위해서는 두 API의 상세정보를 조회하여 두 결과값 중 영화 ID 정보가 일치하는 자료만 조회해야 했습니다.

 

상세페이지 - 영화 상세정보

 

그래서 필자가 택한 방법은 다음과 같습니다.

 

• 1) 영화 전체 상세 정보 배열 생성
• 2) 오늘의 영화 상세 정보 조회 후 1) 배열에 결과값 넣기
• 3) 영화리스트 상세 정보 조회 후 1) 배열에 결과값 넣기
• 4) 1) 배열에서 메인페이지 클릭이벤트로 넘어온온 영화 ID 정보만 조회

 

오류점

여기서 문제는 두 곳의 상세 정보를 가져오는 과정에서 async 함수를 사용하였는데 전체 상세 정보 배열에 push를 해도 결과값이 들어가지 않았습니다. 분명 console.log로는 조회가 되는데 전역변수로 있던 전체 상세 정보 배열에 값이 없었습니다.

 

해결점

위의 문제를 해결하기 위해 process라는 async함수를 만들어 오늘의 영화 API 조회와 영화리스트 상세 정보 API 가 끝나고 난 후 영화 ID 조회가 되도록 만들었습니다.

 

async function process() {
  await getMovies(); //오늘의 영화 조회 함수
  await getAllMovieList(); // 영화리스트 조회 함수
  console.log(resultArr);

  const detImage = document.getElementById("detImage");
  const title = document.getElementById("title");
  const overview = document.getElementById("overview");
  const release_date = document.getElementById("release_date");
  const vote_average = document.getElementById("vote_average");

  const foundMovie = findMovieById(movieIdToFind);

  // 검색 id 존재 여부 확인
  if (foundMovie) {
    const newImgPath =
      "https://image.tmdb.org/t/p/w400/" + foundMovie["poster_path"];
    detImage.setAttribute("src", newImgPath);

    const inputTitle =
      foundMovie["title"] + "(" + foundMovie["original_title"] + ")";
    const inputDate = "개봉일 : " + foundMovie["release_date"];
    const inputOverview = foundMovie["overview"];
    const inputAverage = "평점 : " + foundMovie["vote_average"];

    title.innerHTML = inputTitle;
    release_date.innerHTML = inputDate;
    overview.innerHTML = inputOverview;
    vote_average.innerHTML = inputAverage;

    console.log("찾은 영화 정보:", foundMovie);
  } else {
    alert("해당 id를 가진 영화를 찾을 수 없습니다.");
  }
}

// process 함수를 호출하여 작업 실행
process();

 

개선해야 할 점

스파게티 코드 - 위키백과, 우리 모두의 백과사전

 

팀원과의 코드 리뷰 시간에 위 코드에 대해 위 방식으로 코드를 구성하게 되면 추후 '스파게티 코드'로 진전될 가능성이 있다는 평을 들었습니다. 이 점 유념하여 수정방안을 찾아야 할 것으로 보입니다.

 

 

프로젝트 최종 구현 화면

 

무비리스트

 

메인 페이지 (상단)

 

 

 

메인페이지(하단)

 

상세페이지

 

 

끝으로

 

원래는 팀원 4명으로 진행해야 하는 데 1명이 개인 사정으로 프로젝트 기간 중 참여하지 못하였습니다. 그래서 3명으로 작업하였는데 그럼에도 팀장의 원활한 업무 분배와 팀원간의 적극적인 소통으로 기획하던 대로 프로젝트를 수행할 수 있었습니다.

 

 

▼ 아래 글도 읽어보세요! ▼

 

내일배움캠프 공부법 특강 - 개발자가 되기 위한 공부 방식, 태도 소개

 

JavaScript 실시간 시계 - 소스 코드 제공

 

javascript 변수 선언 방법 3가지 특징, 비교 (var, let, const)