Wikipedia의 API 및 'wikipedia-query'를 사용하여 기사 가져오기

회사, 도시 또는 좋아하는 음식에 대한 정보를 웹사이트에 표시하고 싶다고 가정해 보겠습니다. 물론 직접 작성해도 되지만 변경되거나 더 나은 정보로 업데이트되면 어떻게 될까요? Wikipedia의 API를 사용하여 일반 검색어를 사용하여 웹사이트에서 기사를 찾을 수 있습니다. 이 블로그에서는 이 작업을 수행하는 방법을 알아보겠지만 먼저 fetch() JavaScript 함수에 대해 이야기하겠습니다. 내 프로젝트here를 예로 사용하겠습니다.
fetch()는 비동기 함수로, 다른 코드가 동시에 실행될 때 실행할 수 있음을 의미합니다. 수집된 모든 데이터는 가능한 한 반환하고 나머지 코드는 계속됩니다. HTTP 요청 및 응답에 사용됩니다. 함수here에 대해 자세히 알아볼 수 있습니다. 내 예에서 fetch 함수는 https://freegeoip.app/json/ 에서 사용자의 위치에 대한 정보가 포함된 JSON 응답을 반환하는 데 사용됩니다. 함수가 정보를 수신하면 정보를 반환하고 .then 내의 코드가 실행됩니다.
fetch()에서 가져온 JSON 예

{
"ip": "192.0.2.1",
"country_code": "US",
"country_name": "United States",
"region_code": "PA",
"region_name": "Pennsylvania",
"city": "State College",
"zip_code": "16803",
"time_zone": "America/New_York",
"latitude": 40,
"longitude": -77,
"metro_code": 574
}

여기에서 내 코드는 JSON 응답에서 정보를 가져와 나중에 Wikipedia 쿼리에서 사용할 수 있도록 저장합니다. 나는 특히 쿼리에 도시와 주를 사용합니다.

미디어위키 API

먼저 API 자체를 살펴보겠습니다. 이 API는 다양한 작업을 수행할 수 있으며 사용 사례에 따라 매우 지정된 방식으로 활용되지만 여기서는 작업, 출처 및 형식 매개변수에 중점을 둡니다. API의 전체 문서는 찾을 수 있습니다here.

origin은 쿼리되는 정보의 원래 도메인을 설정합니다. 제 경우에는 인증되지 않은 요청을 나타내기 위해 '*'로 설정되어 여전히 작동하지만 일부 사용자별 기능은 비활성화되어 있습니다.

action은 수행할 작업을 지정합니다. 이 경우 'query'로 설정합니다.

format은 설명이 필요 없으며 정보가 반환될 형식을 지정합니다. 제 경우에는 JSON을 반환하도록 설정되어 있습니다.

action=query를 수행할 때 일부 매개변수를 더 지정할 수 있습니다. 제 경우에는 가져온 페이지의 일반 텍스트와 반환할 페이지 제목을 지정하는 제목을 얻기 위해 prop을 사용하고 '추출'로 설정했습니다. 이것은 wikipedia-query 에서 쿼리되는 용어로 설정됩니다.

위키피디아 쿼리

이제 MediaWiki API를 구현할 차례입니다. 위 그림의 코드는 MediaWiki API를 사용하는 wikipedia-query 태그 내의 블록입니다. API를 통해 쿼리를 보내기 위해 fetch()를 사용하며 쿼리에는 변수로 설정된 제목 매개변수가 있습니다. 세 개의 wikipedia-query 태그를 사용하여 https://freegeoip.app/json/ 에서 이전에 저장된 데이터를 사용하여 도시와 주, 도시만 표시하고 사용자의 상태만 표시합니다. 아래 그림에서 내 코드에서 검색어가 어떻게 구성되어 있는지 확인할 수 있습니다.
따라서 이 예에서 세 개의 쿼리가 MediaWiki API로 전송됩니다. 하나는 제목이 State College, Pennsylvania로, 하나는 State College로, 다른 하나는 Pennsylvania로 설정되어 있습니다. 다음 그림은 MediaWiki API에서 반환된 것의 일부를 보여주고 표시되지 않은 것은 기사의 나머지 부분일 뿐입니다.

'제목'이 검색어이고 추출이 펜실베니아 주립 대학의 Wikipedia 기사 HTML 버전임을 알 수 있습니다. 페이지 ID도 제공됩니다.

요약하면 내 예제는 사용자의 위치 정보가 포함된 JSON 응답을 가져와 저장합니다. wikipedia-query 태그는 MediaWiki API를 호출하고 검색어(내 경우에는 세 개의 개별 쿼리에서 도시 및 주, 도시 및 주)를 사용하고 API '제목' 매개변수를 해당 용어로 설정합니다. 그런 다음 MediaWiki API는 쿼리를 보내고 JSON 형식으로 주어진 제목(검색 용어라고도 함)에 대한 Wikipedia 기사를 검색합니다.