내 소스코드 (trainFetchApi.js)

async function trainFetchApi()  {
    const response = await fetch ('https://api.coinpaprika.com/v1/tickers');
    const conins = await response.json();
    

    for (let i = 0; i < 100; i++){
        console.log(`Num : ${[i+1]} / ${conins.length}`);
        console.log(`Coin Name : ${conins[i].name}`);
        console.log(`Symbol : ${conins[i].symbol}`);
        console.log(`first_data_at : ${conins[i].first_data_at}`);
        console.log(`max_supply : ${conins[i].max_supply}`);
        console.log(`total_supply : ${conins[i].total_supply}`);
        console.log(`==========================================`);
    }
}

trainFetchApi();

• 나는 기초적인 프로그래밍 실력과 같이 API로 호출한 데이터 100개를 for 문을 통해 가져왔다.

리팩토링 소스코드 (trainFetchApi.js)

async function trainFetchApi() {
    try {
        const response = await fetch('https://api.coinpaprika.com/v1/tickers');
        const coins = await response.json();

        // 성능 향상을 위해 필요한 만큼의 데이터만 가져오기
        const topCoins = coins.slice(0, 100);

        topCoins.forEach((coin, index) => {
            console.group(`Coin ${index + 1}`);
            console.log(`Coin Name: ${coin.name}`);
            console.log(`Symbol: ${coin.symbol}`);
            console.log(`First Data At: ${coin.first_data_at}`);
            console.log(`Max Supply: ${coin.max_supply}`);
            console.log(`Total Supply: ${coin.total_supply}`);
            console.groupEnd();
            console.log('==========================================');
        });
    } catch (error) {
        console.error('Error fetching coin data:', error);
    }
}

trainFetchApi();

• 리팩토링을 한 코드를 통해서는 fetch를 통해 호출한 api data 목록 중 slice 메서드를 통해 100개만 우선 호출했다.
• 그리고, forEach 를 통해 각 데이터에 접근하게 하였다.

결과 화면