[TIL] 24.01.09

[구현한 것]

• TMDB API를 이용해 영화 검색 사이트 만들기
• center에 있는 main과 more div에 가져온 정보 넣기

[코드]

1. 랜덤으로 선택하는 함수만들기

const divCount = 5;
const usedIndices = [];

function getRandomIndex(data) {
    let index = Math.floor(Math.random() * data.results.length);

    while (usedIndices.includes(index)) {
        index = Math.floor(Math.random() * data.results.length);
    }

    usedIndices.push(index);
    return index;
}

// getRandomIndex라는 함수를 사용해서 데이터를 랜덤으로 선택하는데,
// usedIndices라는 변수에 처음 가져온 데이터 값을 넣고,
// 반복문을 통해 처음 선택된 데이터값과 비교해서 같으면,
// 다시 랜덤으로 데이터를 선택하도록 한다.

for (let i = 1; i <= divCount; i++) {
    const mainDivId = `main${i}`;
    const moreDivId = `more${i}`;

2. API에서 값을 가져와서 넣어주기

fetch('https://api.themoviedb.org/3/movie/upcoming?language=ko-KR&page=1', options)
   .then(response => response.json())
   .then(data => {
       const randomIndex = getRandomIndex(data);
       const movieData = data.results[randomIndex];
            
// 데이터 결과를 랜덤인덱스에 넣어준다.

const imageElement = document.createElement("img");
imageElement.src = 'https://image.tmdb.org/t/p/original' + movieData.backdrop_path;

// img 태그를 만들고, 이미지 데이터 값을 변수에 넣어준다.


const moreInfoDiv = document.getElementById(moreDivId);
moreInfoDiv.querySelector(".title").textContent = movieData.title;

// 아이디가 more를 찾아서 
// 예를 들어 more안에 title이라는 요소가 있는데
// 데이터값에서 제목을 찾아서 텍스트값으로 만들어 해당 div에 넣어준다.


const mainDiv = document.getElementById(mainDivId);
mainDiv.appendChild(imageElement);

// main을 찾아서 이미지를 넣어준다.

const posterElement = document.createElement("img");
posterElement.src = 'https://image.tmdb.org/t/p/original' + movieData.poster_path;
moreInfoDiv.querySelector(".poster_path").appendChild(posterElement);

// 똑같이 데이터에서 포스터를 찾아 이미지값을 저장 후 해당 div에 넣어준다.

[배운점]

이렇게 TIL에 작성하려고 가져와보니.. 너무 복잡한 느낌이다.
내가 너무 코드를 길게 작성을 한건지, 값이 많아서 이렇게 길어진건지 모르겠다.
그래도 여기서 더 적게 줄일 수는 없겠지만,
다음에는 간결하고 알아보기 쉽도록!! 작성해보겠다.