워드프레스 9. WPCode 이용하여 사업자상태 확인하는 API 활용 페이지 만들기

WPCode는 워드프레스에서 사용자 정의 코드를 쉽게 삽입할 수 있도록 도와주는 플러그인이다. 이번에 사업자 상태를 확인하기 위해 매번 이곳저곳 검색하여 찾다가 API이용해서 내 페이지에 하나 만들 수 없을까? 해서 뒤적거리다 알게 되었다. WPCode를 사용하면 PHP, JavaScript, CSS 등을 운영하고 있는 워드프레스 사이트에 안전하게 그리고 쉽게 추가할 수 있다. 특히, 테마나 플러그인에 업데이트에 영향을 받지 않도록 처리되니 초보자도 쉽게 이용하기 좋다.

요약

WPCode 플러그인 설치
워드프레스 관리자 메뉴에 코드 스니펫 메뉴 생성 된 것 확인
새 스니펫 생성 – PHP, JavaScript, HTML 등 유형 선택(선택 후 변경 가능)
API 호출 페이지, API 결과값 페이지 작성
4에서 작성한 페이지를 단축코드로 설정
워드프레스>페이지>새페이지 추가
페이지내 블럭 선택 시 숏코드(단축코드)선택하여 5번에 생성한 코드 삽입
7번의 페이지 호출하여 테스트 후 게시

결과

사업자상태 확인

API 공공 정보 제공처

DATA.GO.KR : 국세청_사업자등록정보 진위확인 및 상태조회 서비스

세부 절차 안내 feat. chatGPT

API 호출과 결과값을 출력하는 WordPress 페이지를 작업하는 데 필요한 절차를 다음과 같이 진행합니다. HTML과 JavaScript를 활용하여 WPCode플러그인으로 사용할 수 있는 코드를 작성합니다.

1. 준비 작업

(1) API 정보 확인

API URL: https://api.odcloud.kr/api/nts-businessman/v1/status
필요한 데이터:
사업자등록번호 배열: b_no
serviceKey (API 키)

(2) WordPress WPCode 설정

WPCode 플러그인 설치 및 활성화
WordPress 관리자 페이지에서 플러그인 > 새로 추가 메뉴에서 WPCode를 설치합니다.
새 코드 추가
WPCode에서 새로운 HTML/Javascript 코드를 추가할 수 있는 Custom Code Snippet을 만듭니다.

2. HTML & JavaScript 코드 작성

(1) HTML

입력 필드와 버튼을 생성하여 사용자가 사업자등록번호를 입력할 수 있도록 합니다.

<div id="business-checker">
  <h3>사업자등록번호 조회</h3>
  <form id="business-form">
    <label for="business-number">사업자등록번호:</label>
    <input type="text" id="business-number" name="business-number" placeholder="예: 1234567890" required>
    <button type="button" id="check-status">조회하기</button>
  </form>
  <div id="result">
    <h4>결과:</h4>
    <pre id="output">결과가 여기에 표시됩니다.</pre>
  </div>
</div>

(2) JavaScript

사용자가 입력한 사업자등록번호를 API로 전송하고, 응답을 처리하여 결과를 화면에 출력합니다.

<script>
document.addEventListener("DOMContentLoaded", function () {
    // 조회 버튼 클릭 이벤트 핸들러
    document.getElementById("check-status").addEventListener("click", function () {
        // 사용자 입력값 가져오기
        const businessNumber = document.getElementById("business-number").value.trim();

        // 유효성 검사
        if (!businessNumber || businessNumber.length !== 10 || isNaN(businessNumber)) {
            alert("올바른 사업자등록번호를 입력하세요. (10자리 숫자)");
            return;
        }

        // API 요청 데이터
        const data = {
            b_no: [businessNumber] // 사용자가 입력한 사업자등록번호 배열로 생성
        };

        // API 호출
        fetch("https://api.odcloud.kr/api/nts-businessman/v1/status?serviceKey=YOUR_SERVICE_KEY", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                Accept: "application/json"
            },
            body: JSON.stringify(data) // JSON 형식으로 데이터 변환
        })
        .then((response) => response.json()) // 응답을 JSON 형식으로 파싱
        .then((result) => {
            // 결과를 화면에 출력
            document.getElementById("output").textContent = JSON.stringify(result, null, 2);
        })
        .catch((error) => {
            console.error("에러 발생:", error);
            document.getElementById("output").textContent = "조회 중 에러가 발생했습니다.";
        });
    });
});
</script>

3. 절차별 설명

HTML 구조 작성

form 요소와 버튼을 이용해 사용자 입력값을 받을 수 있는 UI를 만듭니다.
div#result 영역에 API 호출 결과를 표시합니다.

JavaScript로 사용자 입력값 처리

document.getElementById를 이용해 입력값을 가져오고, 유효성을 검사합니다.

API 호출 구현

fetch 메서드를 사용하여 API에 POST 요청을 보냅니다.
요청 헤더에서 JSON 데이터를 보내도록 설정하고 응답을 JSON 형식으로 처리합니다.

결과 출력

pre#output 태그 안에 API 응답 결과를 출력합니다.
에러 발생 시 적절한 메시지를 표시합니다.

4. WordPress WPCode에 추가

코드 삽입

WPCode에 위의 HTML과 JavaScript 코드를 추가합니다.
HTML 섹션에 HTML 코드를 넣고, Script 섹션에 JavaScript 코드를 추가합니다.

코드 실행 위치

WPCode에서 Code Type을 HTML Snippet으로 선택하고, Auto Insert 옵션으로 실행 위치를 설정합니다 (예: 모든 페이지에서 실행).

테스트

웹페이지에서 사업자등록번호를 입력하고 조회 결과를 확인합니다.

이 코드는 사업자등록번호를 실시간으로 조회하고 결과를 출력하는 간단한 시스템을 WordPress에서 구현할 수 있도록 구성합니다. API 호출 시 YOUR_SERVICE_KEY를 실제 서비스 키로 대체하세요.

마무리

음… 처음 API 호출을 해보았고, 워드프레스에 적용해보게 되었는데 chatGPT의 도움을 받아 하루하고 반나절 만에 완성하게 되었다. 처음에는 API 정보 찾느라 시간이 걸리고, 이후 WPCode를 처음 알게 되어 설치해보고 그리고, 페이지 생성해서 숏코드를 넣어 페이지를 로드해보는 등 여러 시행 착오를 거쳤다. 결국은 위 [세부절차안내]의 정보로 깔끔하게 마무리 되었다. 부가적으로 스타일을 입히거나 하는 것은 부수적인 것이지만, 이것저것 시도해봤지만 WPCode에서 HTML 스넷핏 생성하여 HTML 폼과 자바스크립트 코드를 같이 작성한 후 스넷핏 단축코드를 생성하여 워드프레스 페이지에 넣어 완성하였다.

지니의 작업실