Rest Countries API를 이용 세계 국가별 인구수 순위 표시하는 JS 파일 만들기

2023. 5. 2., 1976s

블로그 글 작성 중 우연히 알게 된 무료 API를 이용하여 나라별 인구수와 그 순위를 보여주는 자바스크립트를 만들어 보았습니다.

소스

https://restcountries.com/ 의 무료 API :https://restcountries.com/v3.1/all

fetch('https://restcountries.com/v3.1/all')
  .then(response => response.json())
  .then(data => {
    // 데이터 처리
  })
  .catch(error => console.error(error));

를 이용하여 밑에 소스 추가합니다.

<style>
.imgFlag{width:4rem;height:auto}
</style>
<h1>국가별 인구수</h1>
<p id="world-population"></p>
<table id="population-table" class="table">
<thead>
<tr>
<th>순위</th>
<th>국기</th>
<th>국가</th>
<th>인구</th>
</tr>
</thead>
</table>
<script>
let worldPopulation = 0;
fetch('https://restcountries.com/v3.1/all?fields=name,population,translations,flags')
  .then(response => response.json())
  .then(data => {
    const sortedData = data.sort((a, b) => b.population - a.population);
    const populationTable = document.getElementById('population-table');
    sortedData.forEach((country, index) => {
      const row = populationTable.insertRow();
      const rankCell = row.insertCell(0);
      rankCell.innerHTML = index + 1;
      const flagImgCell = row.insertCell(1);
      const flagImg = document.createElement("img");
      flagImg.src = country.flags.png;
      flagImg.alt = `${country.name.common} flag`;
      flagImg.classList.add('imgFlag'); // img에 class명 추가
      flagImgCell.appendChild(flagImg);
      const countryCell = row.insertCell(2);
      countryCell.innerHTML = country.name.common + ' (' + country.translations.kor.common + ')';
      const populationCell = row.insertCell(3);
      populationCell.innerHTML = country.population.toLocaleString();
      worldPopulation += country.population;
    });
    const populationElement = document.getElementById("world-population");
    populationElement.innerText = `전체 인구수 : ${worldPopulation.toLocaleString()} 명`;          
  })
  .catch(error => console.error(error));
</script>

실행화면

국가별 인구수

순위	국기	국가	인구

Rest Countries API v3.1

이 Rest Countries API v3.1에서 데이터가 마지막으로 업데이트 날짜를 확인할 수 있는 키 값은 존재하지 않습니다.

API 문서에서는 API 데이터가 실시간으로 업데이트되는 것이 아니며, 일정 시간마다 업데이트될 수 있다고 언급하고 있습니다. 따라서 API에서 제공하는 데이터가 항상 최신인 것은 보장할 수 없으며, 필요한 경우 국가 정보를 직접 확인하는 것이 좋습니다.

나머지 예로 JSON 파일의 "South Korea" 부분을 보면서 키값을 불러와 여러 형태로 가공할 수 있습니다.

나라이름은 name.common 이고, 수도는 capital이고 배열입니다. 또, 인구수는 population, 국기는 flags.png 또는 flags.svg 등 여러가지 값을 찾을수 있습니다.

참고로 https://restcountries.com/v3.1/all?fields=name,population 하여 국가이름과 인구수 만 불러올수도 있습니다.

{
  "name":
  {
    "common": "South Korea",
    "official": "Republic of Korea",
    "nativeName":
    {
      "kor":
      {
        "official": "대한민국",
        "common": "한국"
      }
    }
  },
  "tld": [".kr", ".한국"],
  "cca2": "KR",
  "ccn3": "410",
  "cca3": "KOR",
  "cioc": "KOR",
  "independent": true,
  "status": "officially-assigned",
  "unMember": true,
  "currencies":
  {
    "KRW":
    {
      "name": "South Korean won",
      "symbol": "₩"
    }
  },
  "idd":
  {
    "root": "+8",
    "suffixes": ["2"]
  },
  "capital": ["Seoul"],
  "altSpellings": ["KR", "Korea, Republic of", "Republic of Korea", "남한", "남조선"],
  "region": "Asia",
  "subregion": "Eastern Asia",
  "languages":
  {
    "kor": "Korean"
  },
  "translations":
  {
    "ara":
    {
      "official": "جمهورية كوريا",
      "common": "كوريا الجنوبية"
    },
    "bre":
    {
      "official": "Republik Korea",
      "common": "Korea ar Su"
    },
    "ces":
    {
      "official": "Korejská republika",
      "common": "Jižní Korea"
    },
    "cym":
    {
      "official": "Republic of Korea",
      "common": "South Korea"
    },
    "deu":
    {
      "official": "Republik Korea",
      "common": "Südkorea"
    },
    "est":
    {
      "official": "Korea Vabariik",
      "common": "Lõuna-Korea"
    },
    "fin":
    {
      "official": "Korean tasavalta",
      "common": "Etelä-Korea"
    },
    "fra":
    {
      "official": "République de Corée",
      "common": "Corée du Sud"
    },
    "hrv":
    {
      "official": "Republika Koreja",
      "common": "Južna Koreja"
    },
    "hun":
    {
      "official": "Koreai Köztársaság",
      "common": "Dél-Korea"
    },
    "ita":
    {
      "official": "Repubblica di Corea",
      "common": "Corea del Sud"
    },
    "jpn":
    {
      "official": "大韓民国",
      "common": "韓国"
    },
    "kor":
    {
      "official": "대한민국",
      "common": "한국"
    },
    "nld":
    {
      "official": "Republiek Korea",
      "common": "Zuid-Korea"
    },
    "per":
    {
      "official": "جمهوری کره",
      "common": "کرهٔ جنوبی"
    },
    "pol":
    {
      "official": "Republika Korei",
      "common": "Korea Południowa"
    },
    "por":
    {
      "official": "República da Coreia",
      "common": "Coreia do Sul"
    },
    "rus":
    {
      "official": "Республика Корея",
      "common": "Южная Корея"
    },
    "slk":
    {
      "official": "Kórejská republika",
      "common": "Južná Kórea"
    },
    "spa":
    {
      "official": "República de Corea",
      "common": "Corea del Sur"
    },
    "srp":
    {
      "official": "Република Кореја",
      "common": "Јужна Кореја"
    },
    "swe":
    {
      "official": "Republiken Korea",
      "common": "Sydkorea"
    },
    "tur":
    {
      "official": "Kore Cumhuriyeti",
      "common": "Güney Kore"
    },
    "urd":
    {
      "official": "جمہوریہ کوریا ",
      "common": "جنوبی کوریا"
    },
    "zho":
    {
      "official": "大韩民国",
      "common": "韩国"
    }
  },
  "latlng": [37.0, 127.5],
  "landlocked": false,
  "borders": ["PRK"],
  "area": 100210.0,
  "demonyms":
  {
    "eng":
    {
      "f": "South Korean",
      "m": "South Korean"
    },
    "fra":
    {
      "f": "Sud-coréenne",
      "m": "Sud-coréen"
    }
  },
  "flag": "\uD83C\uDDF0\uD83C\uDDF7",
  "maps":
  {
    "googleMaps": "https://goo.gl/maps/7ecjaJXefjAQhxjGA",
    "openStreetMaps": "https://www.openstreetmap.org/relation/307756"
  },
  "population": 51780579,
  "gini":
  {
    "2016": 31.4
  },
  "fifa": "KOR",
  "car":
  {
    "signs": ["ROK"],
    "side": "right"
  },
  "timezones": ["UTC+09:00"],
  "continents": ["Asia"],
  "flags":
  {
    "png": "https://flagcdn.com/w320/kr.png",
    "svg": "https://flagcdn.com/kr.svg",
    "alt": "The flag of South Korea has a white field, at the center of which is a red and blue Taegeuk circle surrounded by four black trigrams, one in each corner."
  },
  "coatOfArms":
  {
    "png": "https://mainfacts.com/media/images/coats_of_arms/kr.png",
    "svg": "https://mainfacts.com/media/images/coats_of_arms/kr.svg"
  },
  "startOfWeek": "monday",
  "capitalInfo":
  {
    "latlng": [37.55, 126.98]
  },
  "postalCode":
  {
    "format": "SEOUL ###-###",
    "regex": "^(?:SEOUL)*(\\d{6})$"
  }
},

추출할 수 있는 주요 데이터

Rest Countries API v3.1에서 추출할 수 있는 주요 데이터는 다음과 같습니다.

국가 이름(name): 국가의 공식 이름을 가져옵니다.
국기(flag): 국가의 국기 이미지 URL을 가져옵니다.
국가 코드(alpha2Code, alpha3Code): ISO 3166-1 alpha-2 코드와 alpha-3 코드를 가져옵니다.
국가 수도(capital): 국가의 수도 이름을 가져옵니다.
국가 지역(region): 국가가 위치한 대륙을 가져옵니다.
국가 부분 지역(subregion): 국가가 위치한 지역을 가져옵니다.
인구수(population): 국가의 인구수를 가져옵니다.
통화(currency): 국가에서 사용하는 통화와 통화 코드를 가져옵니다.
언어(languages): 국가에서 사용하는 공식 언어와 언어 코드를 가져옵니다.
국가 도메인(topLevelDomain): 국가의 인터넷 도메인을 가져옵니다.
국가 시간대(timezones): 국가에서 사용하는 시간대 정보를 가져옵니다.
국가 번호(phone calling code): 국가의 전화 국가 번호를 가져옵니다.

fetch('https://restcountries.com/v3.1/all?fields=name,currencies')
  .then(response => response.json())
  .then(data => {
    data.forEach(country => {
      if (country.currencies) {
        const currencyKeys = Object.keys(country.currencies);
        console.log(country.name.common + ": " + country.currencies[currencyKeys[0]].name + " (" + country.currencies[currencyKeys[0]].symbol + ")");
      } else {
        console.log(country.name.common + ": No currency found");
      }
    });
  })
  .catch(error => console.error(error));

참고

https://blog.naver.com/wonnho71/223015825491

https://restcountries.com/

https://www.worldometers.info/world-population/population-by-country/

Rest Countries API를 이용 세계 국가별 인구수 순위 표시하는 JS 파일 만들기

소스

실행화면

국가별 인구수

Rest Countries API v3.1

추출할 수 있는 주요 데이터

참고

티스토리툴바