닥터 후 데이터베이스

제 1단계 프로젝트는 Doctor Who 에피소드의 시각적 데이터베이스입니다. 내 웹사이트를 보려면click here . 에피소드에 대한 정보는 시즌, 닥터, 감독 또는 작가별로 검색할 수 있습니다. 이것은 Doctor Who 시리즈의 컴패니언 앱으로 간주될 수 있습니다. 이 프로젝트를 진행하는 동안 내가 직면한 몇 가지 문제에 대한 창의적인 솔루션을 찾아야 했습니다.


첫 번째 과제는 정보를 보기 위해 스크롤해야 하는 것을 방지하는 것이었습니다. 예를 들어 카테고리를 처음 클릭할 때; 계절, 의사, 감독 또는 작가(위의 예에서는 계절을 보고 있음) 해당 범주에 대한 끝점을 가져오고 해당 범주에 대한 모든 항목(이 예에서는 모든 계절)을 페이지에 렌더링합니다. 39개 이상의 시즌이 있기 때문에 목록이 길어질 수 있습니다. 시즌을 클릭하면 해당 시즌의 모든 에피소드를 볼 수 있습니다. 이제 마지막 시즌의 에피소드를 보고 싶다고 가정해 보겠습니다. 해당 시즌을 클릭하면 아무 일도 일어나지 않습니다... 해당 정보를 보려면 맨 위로 다시 스크롤해야 하기 때문입니다. 그래서 페이지의 어느 위치에 있든 정보가 화면에 표시되도록 하고 싶었습니다. 에피소드 목록을 포함하는 컨테이너에 position: fixed;를 설정하여 CSS에서 이 문제를 해결했습니다. 이제 정보가 화면에 고정된 상태로 유지되지만 시즌 목록과 겹치게 되었습니다. 이 문제를 해결하기 위해 컨테이너를 옮겼습니다. 최종 CSS는 다음과 같았습니다.

#episodes-container {
    position: fixed;
    top: 260px;
    left: 25%;
}

top: 260px;는 컨테이너가 내 250픽셀 헤더 아래에 10픽셀을 표시하도록 했고 left: 25%;는 컨테이너가 창 왼쪽에서 25%를 표시하도록 만들었습니다.

두 번째 문제는 해결하기가 더 어려웠습니다. API의 구조상 에피소드 세부 정보를 쉽게 표시할 수 없었습니다. 각 카테고리에는 내가 사용한 API 내에서 자체 엔드포인트가 있습니다catalogopolis. 끝점에는 범주의 각 항목에 속한 에피소드를 볼 수 있는 방법이 있었지만 에피소드 세부 정보는 표시하지 않았습니다. 에피소드 세부 정보를 보려면 에피소드 끝점 내에서 찾아야 했습니다. 두 끝점은 에피소드 이름을 제외하고는 데이터를 공유하지 않았습니다. 그래서 에피소드 이름을 가져와서 에피소드 끝점을 가져와서 에피소드 이름이 일치하는 위치를 찾는 방법을 찾아야 했습니다. 코드를 분해해 드리겠습니다. 먼저 끝점을 변수에 저장했습니다. const allEpisodesURL = 'https://api.catalogopolis.xyz/v1/episodes' 거기에서 끝점에서 가져오기를 실행했습니다.

function fetchAllEpisodes(episodeName) {
    fetch(allEpisodesURL)
    .then(r => r.json())
    .then(episodes => findEpisode(episodes, episodeName))
}

fetchAllEpisodes에서 episodeName를 전달하여 findEpisode에 전달할 수 있도록 했습니다. findEpisode에서,

function findEpisode(episodes, episodeName) {
    for (let episode of episodes) {
        if(episode.title === episodeName) {
            renderEpisodeDetails(episode)
            break;
        } else {
            renderNoEpisodeDetails(episodeName)
        }
    }
}

에피소드 배열을 반복하고 있습니다. 각 에피소드를 보고 episodeName 가 episode.title 와 정확히 같은지 확인하고 있습니다. 일치하는 에피소드를 찾으면 renderEpisodeDetails 에 전달합니다. 일치하는 에피소드를 찾지 못하면 renderNoEpisodeDetails 에 전달합니다. 렌더 에피소드 세부 정보에서

function renderEpisodeDetails(episode) {
    episodeDetailsContainer.innerText = ''
    let title = create('p')
    let airDate = create('p')
    let runtime = create('p')
    let viewers = create('p')
    let rating = create('p')
    title.innerText = episode.title
    airDate.innerText = `Aired: ${episode.originalAirDate.slice(5)}-${episode.originalAirDate.slice(0, 4)}`
    runtime.innerText = `Runtime: ${episode.runtime}`
    viewers.innerText = `Viewers: ${episode.ukViewersMM} million `
    rating.innerText = `Rating: ${episode.appreciationIndex} / 100`
    episodeDetailsContainer.append(title, airDate, runtime, viewers, rating)
}

각 세부 정보에 대해 p 태그를 만들고 API에서 반환된 데이터로 각 세부 정보의 innerText를 채우고 에피소드 세부 정보를 포함하는 컨테이너에 모두 추가합니다. 참고로 create는 파일 맨 위에 추가한 도우미 기능입니다.

const create = el => document.createElement(el)

이제 조금 백업하면 findEpisode에서 에피소드 세부 정보를 찾을 수 없으면 episodeName를 renderNoEpisodeDetails에 전달합니다.

function renderNoEpisodeDetails(episodeName) {
    episodeDetailsContainer.innerText = `${episodeName} is not in the database`
}

renderNoEpisodeDetails에서 innerText의 episodeDetailsContainer를 episodeName가 데이터베이스에 없다고 설정하고 있습니다.

이 두 가지 문제에 대한 솔루션을 찾아 프로젝트를 더 쉽게 탐색하고 추가 정보를 제공했습니다.