왕초보 개인 과제

영화 데이터 가져오는 함수: 

function fetchMovies(query = '') {
    let url = 'https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1';
    if (query) {
        url = `https://api.themoviedb.org/3/search/movie?query=${encodeURIComponent(query)}&language=en-US&page=1`;
    }

 

기존 fetch 에 url 주소를 직접 넣어서 사용했었는데, 새로운 함수를 만들어서 변수 url 을 만들어 주소값을 할당할 수 있다는 걸 알았다.

 

 

• 함수 정의: fetchMovies 함수는 영화 데이터를 가져오는 역할을 합니다. 이 함수는 선택적으로 query 매개변수를 받을 수 있으며, 기본값은 빈 문자열('')입니다.
• url 변수 설정:
  • let url = 'https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1';
    기본적으로 상위 평점 영화 목록을 가져오는 URL을 url 변수에 할당합니다.
  • if (query) { ... }
    query 매개변수가 제공된 경우, 즉 사용자가 검색어를 입력한 경우에는, 영화 검색 API의 URL을 url 변수에 할당합니다. 이때, query는 검색어로, encodeURIComponent(query)는 검색어를 URL에 사용할 수 있도록 인코딩합니다.
• URL 사용: 이후에 fetch(url, options)를 사용하여 설정된 url을 통해 데이터를 가져옵니다.

 

 

기존 데이터 초기화: 검색어가 입력될 때마다 새로운 결과를 표시하기 위해 moviecardContainer.innerHTML = ''; 을 사용하여 이전 결과를 지웁니다.

 

 

fetchMovies (): 이 함수는 영화 데이터를 가져오거나, 검색어가 있는 경우 해당 검색어로 영화를 검색합니다. 기존 코드에서 데이터를 처리하는 방식을 그대로 유지하고, 추가로 검색어에 따라 다른 URL을 사용합니다.

 

검색 버튼 이벤트: 사용자가 검색 버튼을 클릭하면 fetchMovies 함수가 호출되어, 입력된 검색어를 기반으로 영화를 검색합니다.

// 검색 버튼 클릭 이벤트

document.querySelector('button').addEventListener('click', () => {

    const query = document.querySelector('...').value;

    fetchMovies(query);

});

 

Enter 키 이벤트 처리: 

document.querySelector('...').addEventListener('keydown', (event) => {

    if (event.key === 'Enter') {

        event.preventDefault(); // 기본 Enter 키 동작 방지 (예: form 제출)

        const query = event.target.value;

        fetchMovies(query);

    }

});

 

• document.querySelector('.form-input').addEventListener('keydown', (event) => { ... });
   - input 필드에 keydown 이벤트 리스너를 추가하여 키보드 입력을 감지합니다.
• if (event.key === 'Enter') { ... }
   - event.key가 'Enter'인지 확인하여, 사용자가 Enter 키를 눌렀는지 확인합니다.
• event.preventDefault();
   - Enter 키의 기본 동작을 방지합니다. 예를 들어, form이 제출되지 않도록 합니다.
• const query = event.target.value;
   - 입력된 검색어를 가져와 fetchMovies 함수를 호출하여 검색을 수행합니다.

마우스오버 이벤트 처리: 

 

// 마우스오버 이벤트 처리

                movieElements.addEventListener('mouseover', () => {

                    const details = movieElements.querySelector('.movie-details');

                    details.style.display = 'block';

                });

                // 마우스아웃 이벤트 처리

                movieElements.addEventListener('mouseout', () => {

                    const details = movieElements.querySelector('.movie-details');

                    details.style.display = 'none';

                });