[JavaScript] 개인 과제 수행 - 5일차 (module화, api 한글화)

크게 두가지 기능으로 js 파일을 분리했는데 하나는 api 를 가져오는 js, 하나는 ui 부분을 조작하는 js였다.

 

이제 이 두개를 모듈화 시켜서 연결해줘야한다!!!

 

먼저 냅다 html에 불러온 script파일을 모듈화 해주기!!

<script src="./JS/api.js" type="module"></script>

<script src="./JS/ui.js" type="module"></script>

 

이렇게 했을 때 무슨일이 생기나 보자...

 

타라~~~ 카드가 없어졌구요,,, 콘솔을 확인해보쟈,,

 

fetchMovies가 정의되지 않았대... 이거는 api.js에 있는 함수거등여...

그렇다면 api.js에 있는 fetchMovies 함수를 ui.js에 불러와야 함다!!!

 

그럴때 쓰는 기능이 export(내보내기), import(가져오기)!!!

 

글타면 내가 해야되는것은 fetchMovies를 내보내고( export )  ui.js에서 가져와야( import ) 된다!

 

export function fetchMovies() {

  fetch(

    "https://api.themoviedb.org/3/movie/popular?language=en-US&page=2&language=ko",

    options

  )

    .then((response) => response.json())

    .then((data) => displayMovies(data.results)) // 영화 데이터의 results 부분을 사용

    .catch((err) => console.error(err));

}

 

먼저 fetchMovies를 export해준다. 함수 앞에 냅다 export 붙여주면 됨!!!

import {fetchMovies} from "./api.js"

 

그리고 ui.js 제일 윗쪽에 import를 해준다! 

import {함수 또는 전역변수 이름} from "./파일경로"

 

 

 

자 이제 잘 됐나 보자보자

 

 

 

 

이번엔 또 displayMovies가 말썽이다

 

그럼 이번엔 반대로 ui.js에 있는 displayMovies를 api.js로 가져오기!!

 

export function displayMovies(movieList) {

  // movies 배열을 초기화해 중복된 데이터 추가 방지

  if (movies.length === 0) {

    movies = movieList; // 처음 데이터만 저장

  }

  const movieContainer = document.getElementById("movies-container");

  movieContainer.innerHTML = ""; // 기존 카드 초기화

  movieList.forEach((movieData) => {

    // 카드 생성

    const card = document.createElement("div");

    card.classList.add("movie-card");

    // 포스터 이미지, 제목, 출시일, 평점 추가

    card.innerHTML = `

      ${movieData.poster_path}" alt="${movieData.title}" />

      <h3>${movieData.title}</h3>

      <p>개봉일 : ${movieData.release_date}</p>

      <p>평점 : ${movieData.vote_average}/10</p>

    `;

    // 카드 클릭 시 모달 창 표시

    card.addEventListener("click", () => {

      createModal(movieData); // 클릭된 영화 정보를 모달에 표시

    });

    // 컨테이너에 카드 추가

    movieContainer.appendChild(card);

  });

}

 

export해주고,

import {displayMovies} from "./ui.js"

 

import해주기!!

 

두르두르구드루구르두구근

타라~~~

 

 

 

됐다 됐어!!!!!!!!!! 이제 다했다!!!!!!!!!

 

길고 길었던 나의 첫번째 프로젝트여 고생했다!!!! 챗지피티도 고생했고 구글도 고생했고 손가락도 고생했고.. 내 머리만 고생을 안했네... 이제 코드 뜯어보면서 찬찬히 공부를 해보쟈...

 

---

 

맞다 이거 내가 한 2일차때였나 찾게된건데 리뷰를 안해서 까먹을까봐 적어놓는 $$팁$$

 

api 한글로 가져오기

 

처음에 api를 가져왔을때 정보가 모두 영어여서 놀랬더란다... 

fetch(

    "https://api.themoviedb.org/3/movie/popular?language=en-US&page=2",

    options

  )

 

fetch를 가져왔을 때 이 상태였는데 영어가 디폴트였다. 그래서 막 막 찾아보던중에 아주 쉽고 간단한 방법을 발견!!!

fetch(

    "https://api.themoviedb.org/3/movie/popular?language=en-US&page=2&language=ko",

    options

  )

 

걍 주소 뒤에 &language=ko 만 붙여주면 되는거였씀!!!!!!!

 

리뷰 끄읏-!!