javascript모듈화

module을 활용하여 각 스크립트를 분리했다.

 

// api.js

const options = {
  method: 'GET',
  headers: {
    accept: 'application/json',
    Authorization: 'myId'
  }
};

export async function fetchTopRatedMovies() {
  try {
    const response = await fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options);
    const data = await response.json();
    return data.results;
  } catch (error) {
    console.error('Error fetching top rated movies:', error);
    return [];
  }
}

 

api.js를 만들어서 TMDB의 정보를 가져오는 스크립트를 작성했다. fetchTopRateMovies()를 main에서 사용하기 위해 export를 붙여주었다.

 

// movieCard.js

export function createMovieCard(movie) {
  const { id, title, overview, poster_path, vote_average } = movie;

  const movieCard = document.createElement('div');
  const moviePoster = document.createElement('img');
  const titleElement = document.createElement('h1');
  const voteAvgElement = document.createElement('p');
  const overviewElement = document.createElement('p');
  movieCard.setAttribute('id', id);

  // Class name
  movieCard.className = 'movie-card';
  moviePoster.className = 'movie-poster';
  titleElement.className = 'title';
  voteAvgElement.className = 'vote-average';
  overviewElement.className = 'overview';

  // Get movie information
  moviePoster.src = `https://image.tmdb.org/t/p/w500${poster_path}`;
  titleElement.textContent = title;
  voteAvgElement.textContent = `Vote Average: ${parseFloat(vote_average).toFixed(2)}`;
  overviewElement.textContent = overview;

  movieCard.appendChild(moviePoster);
  movieCard.appendChild(titleElement);
  movieCard.appendChild(voteAvgElement);
  movieCard.appendChild(overviewElement);

  return movieCard;
}

 

 moiveCard.js는 영화의 정보를 가져와서 새로운 카드를 만든다. main에서 사용하기 위해 createMovieCard(영화 정보)를 export해준다.

 

// main.js

import { fetchTopRatedMovies } from './api.js';
import { createMovieCard } from './movieCard.js';

document.addEventListener('DOMContentLoaded', async function() {
  const moviesContainer = document.getElementById('movie_container');
  try {
    const movies = await fetchTopRatedMovies();
    renderMovies(movies);
  } catch (error) {
    console.error('Error loading top rated movies:', error);
  }

  function renderMovies(movies) {
    moviesContainer.innerHTML = '';
    movies.forEach(movie => {
      const movieCard = createMovieCard(movie);
      moviesContainer.appendChild(movieCard);

      movieCard.addEventListener('click', () => {
        const movieID = movieCard.getAttribute('id');
        alert(`영화의 ID는 ${movieID}`);
      });
    });
  }

  // 추가적인 기능 구현
});

 

앞서 만든 2개의 스크립트를 import하여, 필요한 함수를 호출했다.