[miniProjects] 37_Pokedex

37_Pokedex

💻주제 : 포키 API를 사용해 포켓몬 도감 만들기

• https://pokeapi.co/

✨JS

150종의 포켓몬 나오게

const fetchPokemons = async () => {
    for(let i = 1; i <= pokemon_count; i++) {
        await getPokemon(i)
    }
}

총 150개의 포켓몬이 나와야 하기 때문에 for 반복문을 써 150개가 나오도록 함

포켓몬 api가져오기

const getPokemon = async (id) => {
    const url = `https://pokeapi.co/api/v2/pokemon/${id}`
    const res = await fetch(url)
    const data = await res.json()
    createPokemonCard(data)
}

const data = await res.json()
res라는 Response 객체에서 JSON 형식의 데이터를 비동기적으로 가져온다.

fetch 함수를 사용하여 서버에서 데이터를 요청하면, fetch 함수는 Promise 객체를 반환한다. 이 Promise 객체는 비동기적으로 서버의 응답을 받으면 실행된다. 그리고 해당 응답 객체를 처리하기 위해 await 키워드를 사용하여 비동기 처리를 기다린다.

res.json()은 Response 객체의 메서드로, 응답 데이터를 JSON 형식으로 변환하는 역할을 한다. 이 메서드도 Promise를 반환하므로, await 키워드를 사용하여 비동기 처리를 기다린다. 그리고 변환된 JSON 데이터는 data 변수에 할당된다.

👍🏻서버의 응답을 JSON 형식으로 변환하여 data 변수에 할당한다. 이후 코드에서는 data 변수를 사용하여 필요한 작업을 수행할 수 있다.

포켓몬 카드 생성

const main_types = Object.keys(colors)

const createPokemonCard = (pokemon) => {
    const pokemonEl = document.createElement('div')
    pokemonEl.classList.add('pokemon')

    //첫번째 글자만 대문자로 + 나머지 문자 그대로 출력
    const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1)
    const id = pokemon.id.toString().padStart(3, '0')

    const poke_types = pokemon.types.map(type => type.type.name)
    const type = main_types.find(type => poke_types.indexOf(type) > -1)
    const color = colors[type]

    pokemonEl.style.backgroundColor = color

    const pokemonInnerHTML = `
    <div class="img-container">
        <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png"" alt="${name}">
    </div>
    <div class="info">
        <span class="number">#${id}</span>
        <h3 class="name">${name}</h3>
        <small class="type">Type: <span>${type}</span> </small>
    </div>
    `

    pokemonEl.innerHTML = pokemonInnerHTML

    poke_container.appendChild(pokemonEl)
}

• const main_types = Object.keys(colors)
  colors 객체의 키를 배열로 반환하여 main_types 변수에 할당한다.

Object.keys()는 JavaScript에서 내장된 메서드로, 객체의 속성(프로퍼티) 이름들을 배열로 반환한다. 여기서는 colors 객체의 속성 이름들, 즉 타입(예: fire, grass, electric 등)들을 배열로 반환하여 main_types 변수에 저장하고 있다.

이렇게 반환된 배열은 main_types 변수에 할당되므로, 이후 코드에서 main_types 변수를 사용하여 각 타입에 접근할 수 있다.

👍🏻이 배열은 주로 포켓몬의 타입을 정의하고, 타입에 따라 적절한 스타일을 적용한다.

- const id = pokemon.id.toString().padStart(3, '0')
포켓몬의 ID를 3자리 문자열로 변환한다.

toString() 메서드를 사용하여 숫자를 문자열로 변환하고, padStart(3, '0') 메서드를 사용하여 문자열의 길이를 3자리로 만들고, 부족한 자리에 '0'을 채운다.

👍🏻예를 들어, pokemon.id 값이 7이라면, id 변수에 할당되는 값은 '007'이 된다.

• 포켓몬의 타입에 따라 적절한 색상 넣기

	const poke_types = pokemon.types.map(type => type.type.name)
    const type = main_types.find(type => poke_types.indexOf(type) > -1)
    const color = colors[type]

pokemon.types 배열에서 각 타입의 이름을 추출하여 poke_types 배열을 생성한다.
👍🏻예를 들어, 포켓몬이 불과 풀 타입을 갖는 경우 poke_types는 ['fire', 'grass']가 될 것이다.

main_types 배열에서 poke_types에 포함된 첫 번째 타입을 찾는다.
main_types 배열은 사전에 정의된 주요 타입을 포함하고 있다. 이를 통해 포켓몬의 주요 타입을 결정한다. 예를 들어, main_types 배열이 ['fire', 'water', 'grass']라고 가정하면, poke_types 배열에서 첫 번째로 매칭되는 타입을 찾아서 type 변수에 할당한다.

poke_types.indexOf(type) > -1는 poke_types 배열에서 type 값을 검색하여 인덱스를 반환하는데, 이 값이 -1보다 크다는 것은 type 값이 poke_types 배열에 존재한다는 의미다.

find() 메서드는 주어진 조건을 만족하는 배열의 첫 번째 요소를 반환

colors 객체에서 type 변수에 해당하는 색상을 찾아 color 변수에 할당한다. 이를 통해 각 포켓몬의 타입에 따라 적절한 색상을 지정하여 포켓몬 카드의 배경색을 설정한다.