공공 데이터 포털 API에 안전하게 접근하는 과정(1)

Table of Contents

공공 데이터 포털 API에 안전하게 접근하는 과정(1)

프록시 서버를 사용하여 워드프레스에서 공공 데이터 포털 API에 안전하게 접근하는 과정을 자세히 설명하겠습니다. 이 과정은 다음과 같은 단계로 이루어집니다:

Node.js 프록시 서버 설정: Node.js와 Express를 사용하여 프록시 서버를 설정합니다.
워드프레스 플러그인 또는 테마 파일 수정: 워드프레스에서 HTML과 JavaScript를 추가하여 프록시 서버를 통해 API 요청을 보내도록 합니다.

1. Node.js 프록시 서버 설정

a. Node.js 설치

Node.js가 설치되어 있지 않다면, Node.js 공식 사이트에서 LTS(Long Term Support) 버전을 다운로드하여 설치합니다. 설치가 완료되면, 터미널 또는 명령 프롬프트에서 다음 명령을 사용하여 설치된 버전을 확인합니다.

node -v npm -v

b. 프로젝트 초기화

새 디렉토리 생성: 프록시 서버 프로젝트를 위한 새로운 디렉토리를 만듭니다.

mkdir proxy-server cd proxy-server 2 프로젝트 초기화: npm init -y 명령어를 사용하여 기본 package.json 파일을 생성합니다.

npm init -y

c. Express 설치

Express와 node-fetch를 설치합니다.

npm install express node-fetch

d. 프록시 서버 코드 작성

server.js 파일을 생성하고 다음과 같이 코드를 작성합니다.

const express = require(‘express’);
const fetch = require(‘node-fetch’);
const app = express();
const PORT = 3000;

app.get(‘/proxy’, async (req, res) => {
const { currentPage, countPerPage, keyword, confmKey } = req.query;
const apiUrl = `https://business.juso.go.kr/addrlink/addrLinkApi.do?currentPage=${currentPage}&countPerPage=${countPerPage}&keyword=${encodeURIComponent(keyword)}&confmKey=${confmKey}`;

try {
const response = await fetch(apiUrl);
const data = await response.text();
res.set(‘Content-Type’, ‘application/xml’);
res.send(data);
} catch (error) {
res.status(500).send(‘Server Error’);
}
});

app.listen(PORT, () => {
console.log(`Proxy server running on http://localhost:${PORT}`);
});

e. 프록시 서버 실행

프록시 서버를 실행합니다.

node server.js

프록시 서버가 http://localhost:3000에서 실행됩니다.

2. 워드프레스 설정

이제 워드프레스에서 클라이언트 측 코드를 작성하여 프록시 서버를 통해 공공 데이터 포털 API에 접근하는 방법을 설명합니다.

a. HTML 및 JavaScript 코드 추가

워드프레스 관리자 페이지에서 원하는 페이지나 포스트를 편집하여 HTML 및 JavaScript 코드를 추가합니다.

워드프레스 관리자 페이지 접속: 워드프레스 관리자 페이지에 로그인합니다.
페이지 또는 포스트 편집: HTML 코드를 삽입할 페이지나 포스트를 편집합니다.
HTML 편집 모드로 전환: 블록 편집기의 HTML 모드로 전환합니다.

다음 코드를 페이지 또는 포스트의 HTML 편집 모드에 삽입합니다.

<!DOCTYPE html>
<html lang=”ko”>
<head>
<meta charset=”UTF-8″>
<title>한글 주소를 영문 주소로 변환하기</title>
<script>
async function convertAddress() {
const koreanAddress = document.getElementById(‘koreanAddress’).value;
const currentPage = 1;
const countPerPage = 10;
const confmKey = ‘YOUR_API_KEY’; // 공공 데이터 포털에서 발급받은 API 키를 입력합니다
const apiUrl = `http://localhost:3000/proxy?currentPage=${currentPage}&countPerPage=${countPerPage}&keyword=${encodeURIComponent(koreanAddress)}&confmKey=${confmKey}`;

try {
const response = await fetch(apiUrl);
const data = await response.text();

// XML 응답을 파싱하여 결과를 추출하는 부분
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(data, “application/xml”);
const roadAddrEngElements = xmlDoc.getElementsByTagName(“roadAddrEng”);

if (roadAddrEngElements.length > 0) {
const englishAddress = roadAddrEngElements[0].textContent;
document.getElementById(‘englishAddress’).innerText = englishAddress;
} else {
document.getElementById(‘englishAddress’).innerText = ‘변환에 실패했습니다. 다시 시도해주세요.’;
}
} catch (error) {
console.error(‘Error:’, error);
document.getElementById(‘englishAddress’).innerText = ‘오류가 발생했습니다. 다시 시도해주세요.’;
}
}
</script>
</head>
<body>
<h1>한글 주소를 영문 주소로 변환하기</h1>
<p>한글 주소를 입력하세요:</p>
<input type=”text” id=”koreanAddress” placeholder=”도로명주소, 지번주소 등 입력”>
<button onclick=”convertAddress()”>변환</button>
<p>영문 주소:</p>
<p id=”englishAddress”></p>
</body>
</html>

b. API 키 적용

코드에서 YOUR_API_KEY 부분을 실제 공공 데이터 포털에서 발급받은 API 키로 교체합니다

const confmKey = 'YOUR_ACTUAL_API_KEY'; // 실제 발급받은 API 키로 교체

이제 워드프레스 페이지에서 한글 주소를 입력하면 프록시 서버를 통해 공공 데이터 포털 API에 접근하여 영문 주소로 변환할 수 있습니다.

요약

Node.js 프록시 서버 설정: Express와 node-fetch를 사용하여 프록시 서버를 설정하고 실행합니다.
워드프레스 설정: 워드프레스 페이지나 포스트에 HTML 및 JavaScript 코드를 추가하여 프록시 서버를 통해 API를 호출합니다.
API 키 적용: 실제 발급받은 API 키를 코드에 적용합니다.

이제 워드프레스에서 한글 주소를 입력하고 변환 버튼을 클릭하면, 프록시 서버를 통해 공공 데이터 포털 API에 요청을 보내고, 영문 주소를 받아올 수 있습니다. 프록시 서버가 요청을 중계하므로 CORS 문제를 해결할 수 있습니다.

프록시(Proxy)서버 구축하기

또 다른 특이점이 옵니다. 세상은 내러티브다. 메섹톡톡이었습니다. 감사드립니다.