WPGetAPI 플러그인 소개
WPGetAPI는 WordPress에서 외부 API와 통신할 수 있게 해주는 강력한 플러그인입니다. 이를 통해 개발자는 코드 작성 없이도 다양한 API 엔드포인트를 쉽게 설정하고, 데이터를 가져올 수 있습니다. WPGetAPI는 RESTful API를 지원하며, 데이터를 JSON 형식으로 반환하고, 이를 워드프레스 사이트에 표시할 수 있도록 도와줍니다. 주요 기능으로는 간단한 설정, 다중 엔드포인트 지원, 보안 토큰 관리, 디버그 모드 등이 있으며, 특히 비개발자도 쉽게 사용할 수 있도록 설계되어 있습니다. 이 플러그인을 사용하면 외부 데이터를 통합하여 웹사이트 기능을 확장하는 데 큰 도움이 됩니다.
supabase 테이블에 여러 사이트의 최신 뉴스 데이터를 스크래핑한 결과가 저장되어 있습니다. 이 데이터를 워드프레스에서 보여주기 위해 api 연동을 하여 데이터를 보여주려고 합니다. 이를 이위해 몇가지 플러그인을 설치하여 테스트를 진행합니다.
플러그인 설치
Code Snippet 설치
WPGetAPI 설치
WPGetAPI 설정하기
1단계: API 설정하기
WPGetAPI를 설치하고 플러그인을 활성화한 후 사이드바 하단에 있는 WPGetAPI 링크를 클릭합니다. 그러면 첫 번째 API를 추가할 수 있는 설정 페이지로 이동합니다.필수 입력 항목은 3가지입니다:
- API Name – 원하는 대로 입력할 수 있습니다. API의 이름은 ‘supabase news’이므로 같은 이름으로 지정하는 것이 좋습니다.
- Unique ID – 이 역시 원하는 대로 입력할 수 있습니다. 소문자만 사용해야 하며 밑줄(공백 없음)을 포함해야 합니다. 이 ID는 쇼트코드 또는 템플릿 태그 내에서 API를 식별하는 데 사용됩니다. ‘인용 가능’이라고 합니다.
- Base URL – API의 기본 URL을 입력합니다.
3개의 필드를 모두 채우고 나면 저장 버튼을 클릭하면 ”supabase news’이라는 API 이름르로 새 탭이 나타납니다. 이제 이 탭을 클릭하면 이 API의 엔드포인트 설정으로 이동합니다.
2단계: 엔드포인트 설정
API 문서에서 API가 연결할 수 있는 모든 엔드포인트에 대한 정보를 확인할 수 있습니다. 여기서는 무작위 견적을 얻고자 하므로 여기에 표시된 ‘무작위’ 엔드포인트(https://github.com/lukePeavey/quotable#get-random-quote)를 사용합니다.
선택한 엔드포인트에 연결하기 위한 필드를 살펴보겠습니다:
- Unique ID – 엔드포인트의 고유 ID입니다. 이 고유 ID는 이 엔드포인트를 식별하기 위해 단축 코드 또는 템플릿 태그에 사용됩니다.
- Endpoint – 앞서 설정한 기본 URL에 추가될 URL의 실제 엔드포인트입니다.
- Method – 엔드포인트에 대한 요청 방법입니다. GET 요청 메서드를 사용합니다.
- Results Format – – 엔드포인트에서 다시 받는 데이터의 형식입니다.
- 데이터는 JSON 문자열 또는 PHP 배열로 반환될 수 있습니다.
- JSON string 은 쇼트코드 또는 템플릿 태그와 함께 데이터를 표시하는 데 사용할 수 있습니다.
- PHP array data는 템플릿 태그와 함께만 사용할 수 있습니다. 템플릿 태그는 데이터를 PHP 배열로 반환하여 추가 조작이 가능합니다(기본 PHP를 알고 있는 경우).
- 이 API에 필요한 모든 정보를 입력한후 저장 버튼을 누르면 이제 엔드포인트를 테스트할 준비가 됩니다.
3단계: 엔드포인트 테스트
필드를 채우고 엔드포인트를 저장하면 ‘Test Endpoint’ 버튼이 활성화되는 것을 볼 수 있습니다. 이 버튼을 클릭하면 엔드포인트를 호출하고 일부 데이터와 추가 디버깅 정보를 반환합니다. Data Output 과 Response 데이터 내역을 볼수 있습니다.
4단계: API 데이터 표시하기
지금까지는 API가 올바르게 작동하고 있으며 예상한 데이터를 반환하고 있습니다. 이제 이 데이터를 웹사이트의 프런트엔드에 표시하려고 합니다.
데이터를 표시하는 방법에는 템플릿 태그 또는 단축 코드의 두 가지 옵션이 있습니다.
어떤 방법을 선택하든 방금 설정한 엔드포인트 상단에서 템플릿 태그(template tag) 또는 단축 코드(shortcode)를 복사하여 아래와 같이 페이지나 템플릿 파일 내 등 웹사이트의 적절한 위치에 추가하기만 하면 됩니다.
템플릿 태그 사용
왼쪽 메뉴 하단에 설치된 Snippets 를 클릭한후 Add New 로 스니펫을 새로 생성합니다.그리고 위에 탬플릿 테그를 붙혀넣기 합니다.
웹페이지에 추가하기
결과 페이지 조회
맺음말
WPGetAPI 플러그인을 사용하여 Supabase와 성공적으로 연동한 결과, 데이터베이스에서 원하는 정보를 손쉽게 가져올 수 있었습니다. WPGetAPI의 간편한 설정과 사용법 덕분에 복잡한 코딩 없이도 Supabase API와 원활하게 통신할 수 있었으며, 필요한 데이터를 실시간으로 불러와 웹사이트에 표시할 수 있었습니다.
Supabase의 강력한 데이터베이스 관리 기능과 WPGetAPI의 직관적인 인터페이스를 결합하여, 데이터를 조회하고 웹사이트에 반영하는 작업이 크게 수월해졌습니다. 특히, 다양한 엔드포인트를 설정하여 여러 종류의 데이터를 동적으로 불러올 수 있었고, 이를 통해 콘텐츠 업데이트가 자동화되어 유지보수에 드는 시간을 절약할 수 있었습니다.
또한, WPGetAPI의 디버그 모드는 개발 과정에서 발생할 수 있는 문제를 쉽게 파악하고 해결하는 데 큰 도움이 되었습니다. JSON 형식의 데이터를 받아와 필요한 부분만 추출하고, 이를 사용자 친화적으로 표시할 수 있는 유연성 덕분에 데이터 처리의 효율성이 향상되었습니다.
WPGetAPI 플러그인을 활용하여 Supabase와의 연동을 통해, 웹사이트의 데이터 처리 능력이 한층 업그레이드되었음을 실감할 수 있었습니다. 앞으로도 이와 같은 유용한 플러그인들을 적극 활용하여, 웹사이트의 기능성과 사용자 경험을 지속적으로 향상시켜 나갈 계획입니다. 이를 통해 보다 풍부하고 동적인 콘텐츠를 제공할 수 있게 되어 매우 만족스럽습니다.
