2024-05-08 자바스크립트 팀 프로젝트 회고 (영화 검색 페이지)

자바스크립트 팀 프로젝트 회고

구현한 기능

영화 검색 페이지에서 한/영 전환 기능

• 한/영 전환 버튼을 누르면 아래 페이지의 내용이 영문, 한글로 출력되도록 이벤트 리스너 설정
  • index.html : 메인 페이지
  • detail.html : 영화 클릭 시 세부 정보를 보여주는 상세 페이지
  • heart.html : 영화 상세 페이지에서 찜 버튼 클릭시 저장되는 찜 목록을 보여주는 페이지

구현 방법

공통

• 헤더에 한/영 전환 버튼을 만들어 버튼 클릭 시 페이지에 맞는 이벤트 리스너 동작하도록 구성
• html 페이지에 작성된 한글을 조건문을 달아 브라우저 언어 설정에 따라 다르게 출력되도록 전체 수정.

// detail.html 언어변경 기능 (예시) (index.html, heart.html도 동일)
const reviewInput = document.getElementById('review');
const reviewTitle = document.getElementById('review-title');
const submitReviewBtn = document.getElementById('submit-review');
const reviewPageTitle = document.getElementById('review-page-title');
if (currentLanguage === 'ko-KR') {
    reviewInput.placeholder = '감상평을 적어주세요!';
    reviewTitle.textContent = '감상평';
    submitReviewBtn.textContent = '등록';
    reviewPageTitle.textContent = '상세페이지';
} else if (currentLanguage === 'en-US') {
    reviewInput.placeholder = 'Write down your review!';
    reviewTitle.textContent = 'Review';
    submitReviewBtn.textContent = 'submit';
    reviewPageTitle.textContent = 'Review Page';
}

index.html (메인 페이지)

• 이벤트 리스너 (한/영 전환 버튼 클릭 이벤트 발생 시 동작)
  • 현재 브라우저의 기본 언어 설정을 로컬 스토리지에 currentLanguage라는 변수를 만들어 값으로 할당.
  • 현재 브라우저의 기본 언어 설정과 반대되는 언어의 값으로 로컬 스토리지에 재할당함.
    • 예) 브라우저 기본 언어 설정이 'ko-KR'인 경우 버튼 클릭시 currentLanguage의 값이 'en-US'로 재할당
    • 재할당 된 언어정보를 로컬 스토리지에서 꺼내어 fetch 요청을 하는 API 주소 중 언어 정보를 담는 쿼리스트링에 교체.
    • // 예) https://api.themoviedb.org/3/movie/popular?page=1&language=${currentLangauge}&api_key=21ccf5793f9e51cfba0198fa23b3d541
    • index.html에서 인기순(popular), 높은 평점순(top_rated)로 구분하여 보여주는 메뉴가 있고, 해당 메뉴에서 각각 다른 주소로 fetch 하기 때문에 현재 보고 있는 메뉴를 로컬 스토리지에 isViewedNow라는 변수를 만들어 값으로 할당. 이를 쿼리스트링에서 교체하는 방식으로 각각 다른 API 주소 fetch.

    // 예) https://api.themoviedb.org/3/movie/${isViewedNow}?page=1&language=${currentLangauge}&api_key=21ccf5793f9e51cfba0198fa23b3d541

    • TMDB의 API의 특성 중, 영어로 된 API는 정보 누락이 없으나 한국어 API에서는 일부 영화에서 overview(줄거리 요약)의 값이 없는 영화 다수 발견하여, fetch 요청에 응답 받은 API를 화면에 그릴 때 배열을 순회하며 overview의 내용이 빈 값인 경우 출력에서 제외.

detail.html (영화 정보 상세 페이지)

• 이벤트 리스너 (한/영 전환 버튼 클릭 이벤트 발생 시 동작)
  • 현재 브라우저의 기본 언어 설정과 반대되는 언어의 값으로 로컬 스토리지에 재할당하여 API를 fetch함.
• 전체 페이지를 관통하는 movie.js의 ApiFetch 함수에서 베이스 URL에 언어 정보를 포함시키도록 수정하고, detail.js에서는 언어정보를 빼고 쿼리스트링을 붙이도록 수정.

// movie.js
// ApiFetch의 베이스 url
const response = await fetch(`https://api.themoviedb.org${url}${url.indexOf('?') !== -1 ? "&" : "?"}language=${currentLanguage}&api_key=${ApiKey}`, options)

// detail.js
// 영화 정보 상세 페이지 fetch 요청 url
const url = `/3/movie/${movieId}?append_to_response=credits,release_dates`;

• 영화 등급 정보를 가져오는 함수는 기본 영어 버전이지만 한국어 버전으로 객체를 별도로 만들었고, 브라우저 언어 정보가 ko-KR인 경우 조건문으로 치환화여 화면에 출력시킴.

// 미국 기준 영상물 등급 정보는 세분화가 잘 되어 있어 한국의 영상물 등급 정보 4단계와 정확히 치환되지 않음. 따라서 최대한 비슷한 쪽으로 치환하여 객체를 생성함.
const certificationKR = {
    "M": "청소년 관람 불가",
    "B": "청소년 관람 불가",
    "R": "청소년 관람 불가",
    "N-13": "15세 이상 관람가",
    "12": "12세 이상 관람가",
    "12+": "12세 이상 관람가",
    "12A": "12세 이상 관람가",
    "PG-13": "12세 이상 관람가",
    "M/12": "12세 이상 관람가",
    "11": "12세 이상 관람가",
    "PG": "12세 이상 관람가",
    "TP": "전체 관람가",
    "G": "전체 관람가",
};

// 영화 등급 정보를 화면에 출력하는 코드
// 최초 값은 빈 스트링으로 지정. 빈 스트링으로 할당하지 않아도 되지만 앞으로 값이 채워질 것임을 시멘틱하게 알림.
let certificationHTML = '';
// movieCertifications 변수는 영상물 등급 정보 API Fetch의 결과임. 이 객체에서 certification이라는 영상물 등급 정보가 존재하면서, 그 값이 'no information'이 아니면 아래의 조건문을 실행함.
if (movieCertifications && movieCertifications.certification && movieCertifications.certification !== 'No Information') {
    // 로컬스토리지에 저장한 현재 언어 정보를 변수에 할당 (재사용 목적)
    let currentLanguage = localStorage.getItem('currentLanguage');
    // 현재 언어 정보가 영어일 때 TMDB에서 가져온 미국 기준 영상물 등급 정보를 detail 페이지에 출력함.
    if (currentLanguage === 'en-US') {
        certificationHTML = `
            <hr class="certification_hr">
            <h5 class="detail_certifications">${movieCertifications.certification}</h5>
        `;
        // 그러나 현재 언어 정보가 한국어일 때는 직접 한국어로 치환시켜 저장한 객체 certificationKR 에서 일치하는 프로퍼티를 찾아 값을 반환함.
    } else if (currentLanguage === 'ko-KR') {
        const certificationKey = movieCertifications.certification;
        // 치환된 영상물 등급 정보를 다시 변수에 담아서 아래 템플릿 리터럴에서 출력시킴.
        const certificationValue = certificationKR[certificationKey];
        if (certificationValue) {
            certificationHTML = `
                <hr class="certification_hr">
                <h5 class="detail_certifications">${certificationValue}</h5>
            `;
        }
    }
}

heart.html (찜하기 목록 페이지)

• 이벤트 리스너 (한/영 전환 버튼 클릭 이벤트 발생 시 동작)
  • 현재 브라우저의 기본 언어 설정과 반대되는 언어의 값으로 로컬 스토리지에 재할당하여 API를 fetch함.
• 영어 버전에서 영화를 찜하고 한국어로 전환할 시 한국어 정보가 부실한 영화가 그대로 찜 목록에 노출되는 문제가 있어 조건문을 달아 overview가 빈 스트링인 경우 찜 목록에 그려지는 것을 제외시키고, 제외된 영화 목록을 alert창으로 띄워줌.

heartedList.forEach((e) => {
// overview가 빈 스트링이 아닌 경우에만 찜한 목록을 표시하도록 수정 (준혁님 피드백으로 추가 - 김병준)
if (e.overview !== '') {
  const movieItem = document.createElement("div");
  movieItem.classList.add("movie");
  movieItem.dataset.movieId = e.id;
  movieItem.innerHTML = `
    <img src="https://image.tmdb.org/t/p/w500${e.poster_path}" alt="${e.title}">
    <div class="hover">
      <h3 class="title bold">${e.title}</h3>
      <p>${e.overview}</p>
      <span>평점: ${e.vote_average}</span>
    </div>
  `;
  movieItem.addEventListener("click", handleMovieItemClick);
  pickMovie.appendChild(movieItem);
} else {
  // overview가 비어 있으면 제목을 excludedMovies 배열에 추가
  excludedMovies.push(e.title);
}
});
// excludedMovies 배열에 제목이 하나 이상 있으면 alert를 통해 사용자에게 알림
if (excludedMovies.length > 0) {
alert(excludedMovies.join(", ") + " 영화는 한국어 설명이 지원되지 않아 표시에서 제외됩니다.");
}
}

어려웠던 점

모든 팀원의 코드의 흐름을 이해하고 모든 마크업 문서와 js 스크립트를 수정해야 하는 어려움

• 현재 본인의 수준이 베이직 수준이라 모듈화하여 잘 짜여진 코드의 흐름을 읽는 것에 큰 어려움을 겪음. 프로젝트 전체를 관통하는 기능을 구현해야 하는 경우 상당한 수준의 경험이 필요할 것으로 생각됨.
  슈도코딩을 통해 작성한 코드를 넣는 것은 문제가 되지 않았지만, 코드 흐름을 이해하지 못해 스코프에 코드 작동 불능이 상당히 많이 발생함.
• 모듈화가 잘 된 스크립트에서 코드를 재사용하는 경우 코드를 압축할 수 있어 효율적이지만 본인의 수준에서는 코드의 흐름을 잘 파악하지 못해 오는 어려움이 컸음.

팀원 코드 이해 부족으로 발생하는 에러 문제

• 본인의 환경에서 테스트 했을 때는 작동에 문제가 없던 코드가 팀원이 작성한 코드와 merge 후 작동 불능이 된다든지 하는 오류가 매번 발생.
  기능 구현 자체는 며칠 내로 끝났지만 dev 브랜치에서 pull하여 오류를 잡는데 프로젝트의 대부분 시간을 할애함.
• 팀원의 코드 흐름을 이해하지 못해 merge 과정에서도 실수가 생겼고, dev 브랜치의 코드 전체에 에러가 발생하는 대참사가 발생함.

개선 과제

기초 문법 지식 함양

사용된 문법과 코드의 흐름, 스코프를 파악하기 위해선 기초 문법 지식이 더 많이 필요할 것으로 생각됨. 특히 함수와 매개변수의 흐름을 파악하기 어려워 상당 시간을 이를 이해하는 데 소모하였음.

재사용 가능한 함수의 활용

한/영 전환 기능을 만들고, 이를 다른 팀원들의 페이지에서 재사용 할 수 있도록 깔끔하게 작성한다면 개발 과정에서 본인이 직접 팀원이 작성한 코드를 전면 수정하는 것이 아니라, 해당 스크립트를 작성하는 팀원이 본인의 코드를 끌어다 쓸 수 있도록 설계하는 것이 좋겠다는 생각이 들었음.