공공데이터베이스를 사용해 보자

공공 데이터베이스를 이용하여 한글 주소를 영문 주소로 변환하는 웹 페이지를 구축하는 데 사용되고 있습니다. 이제 이 코드를 분석하여 각 부분이 어떤 역할을 하는지 설명하겠습니다.

1코드 분석

HTML 헤더 섹션

<head>
<title>영문주소변환</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="한글주소,영어주소,영문주소,지번주소,도로명주소,신주소,구주소,새주소,영문주소변환기">
<meta name="Description" content="지번주소,신주소 등의 한글주소를 영문주소 변환 해주는 영어주소검색,영문주소변환기 ">
<!-- Open Graph Metadata -->
<meta property="og:type" content="article">
<meta property="og:title" content="영문주소변환">
<meta property="og:description" content="지번주소,신주소 등의 한글주소를 영문주소 변환 해주는 영어주소검색,영문주소변환기">
<meta property="og:url" content="http://www.jusoen.com">
<!-- Twitter Metadata -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="영문주소변환">
<meta name="twitter:description" content="지번주소,신주소 등의 한글주소를 영문주소 변환 해주는 영어주소검색,영문주소변환기">
<meta name="twitter:domain" content="http://www.jusoen.com">
<meta http-equiv="Cache-Control" content="No-Cache">
<!-- Scripts and Styles -->
<script language="JavaScript" src="/common/js/common.js" type="text/javascript"></script>
<script language="javascript" src="/common/js/default.js"></script>
<script src="/common/js/ga.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/common/css/basic.css">
<!-- Google AdSense -->
<script data-ad-client="ca-pub-1372015701075050" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({
          google_ad_client: "ca-pub-1372015701075050",
          enable_page_level_ads: true
     });
</script>
</head>

이 섹션은 페이지 메타데이터, 외부 스크립트 및 스타일시트를 포함합니다. 또한 Google AdSense 광고 스크립트를 포함하여 페이지에 광고를 표시합니다.

2 HTML 바디 섹션

<body>
<div id="wrap">
    <div id="main">
        <!-- Header area -->
        <table width="720px;" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td width="150" class="logo pd_t07 pd_l35"><a href="/" >Jusoen.com</a></td>
                <td style="color:#aeb2be;" class="pd_t07 txt_l"></td>
            </tr>
        </table>

        <!-- Main search area -->
        <table width="720px;" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td height="140" valign="bottom" class="txt_c pd_b20"><img src="/images/logo_main.gif" /></td>
            </tr>
            <tr>
                <td style="background:url('/images/main_search.gif') no-repeat 68px 0; height:48px; padding-left:70px;" class="txt_l">
                    <script language="JavaScript">
				function tipkorea(obj){
					obj.style.backgroundImage="";obj.onkeydown=obj.onmousedown=null;
					if(obj.value=="" || obj.value.length==0){
						obj.style.background = "/images/txt_search.gif";
					}
				}
				</script>
                    <form name="sForm" method="get" action="addreng.asp">
                        <input name="p1" id="p1" type="text"  onkeydown="tipkorea(this)" onmousedown="tipkorea(this)"  style="background:url(/images/txt_search.gif) no-repeat center;width:470px; height:42px; color:#333; font-size:17px; margin-left:10px;" placeholder="도로명주소,지번주소,우편번호에 대해 통합검색이 가능합니다."/><input type="image" src="/images/btn_search.gif" width="67" height="48" />
                    </form>
                </td>
            </tr>
            <tr>
                <td height="49" valign="top" class="txt_c pd_t10 pd_r40">최근검색어 :
                    <a href="addreng.asp?p1=apec로 17">apec로 17</a>
                    , <a href="addreng.asp?p1=안암동4가">안암동4가</a>
                    , <a href="addreng.asp?p1=순화궁로 271">순화궁로 271</a>
                    , <a href="addreng.asp?p1=마포구 노고산동">마포구 노고산동</a>
                    , <a href="addreng.asp?p1=영동대로 612">영동대로 612</a>
                </td>
            </tr>
        </table>
        
        <!-- Footer area -->
        <div align="center">
        </div>
        <div style="padding:20px 0 25px 0; text-align:center"> COPYRIGHTⓒ2024 BY 한글영문주소변환. ALL RIGHTS RESERVE </div>
    </div>
</div>
</body>

이 섹션은 HTML 페이지의 구조를 나타냅니다. 주요 요소는 다음과 같습니다:

헤더: 페이지 로고와 상단 정보가 포함되어 있습니다.
검색 영역: 한글 주소를 입력하고 변환 버튼을 클릭하여 주소를 검색할 수 있는 입력 창이 있습니다. form 태그는 사용자가 입력한 값을 addreng.asp 페이지로 전달합니다.
최근 검색어: 사용자가 최근에 검색한 주소를 보여줍니다.
푸터: 페이지 하단에 저작권 정보를 표시합니다.

추가 스크립트

이 스크립트는 네이버 웹 로그 분석 도구를 사용하여 웹사이트 방문자 데이터를 추적합니다.

로직 분석

HTML 폼 입력: 사용자가 한글 주소를 입력하고 "검색" 버튼을 클릭합니다.
폼 제출: addreng.asp 페이지로 GET 요청을 보냅니다. 이 요청에는 사용자가 입력한 주소가 포함됩니다.
addreng.asp: 서버 측에서 addreng.asp 페이지는 공공 DB를 통해 한글 주소를 영문 주소로 변환하는 작업을 수행합니다.
결과 표시: 변환된 영문 주소를 사용자에게 보여줍니다.

개선 및 구현 방안

이제 실제 블로그 글에서 이 기능을 사용하려면, 클라이언트 측에서 한글 주소를 입력받아 공공 API를 통해 영문 주소로 변환하고 결과를 표시하는 기능을 구현할 수 있습니다. 이를 위해 JavaScript와 외부 API를 사용합니다.

예를 들어, 공공 데이터 포털의 주소 변환 API를 사용할 수 있습니다.

예제 구현

HTML 입력 폼: 한글 주소를 입력받는 폼을 만듭니다.
JavaScript로 API 호출: 한글 주소를 공공 API로 보내고, 영문 주소를 받아옵니다.
결과 표시: 변환된 영문 주소를 페이지에 표시합니다.

html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>한글 주소를 영문 주소로 변환하기</title>
    <script>
        async function convertAddress() {
            const koreanAddress = document.getElementById('koreanAddress').value;
            const response = await fetch(`https://api.example.com/convert?koreanAddress=${encodeURIComponent(koreanAddress)}`);
            const data = await response.json();
            document.getElementById('englishAddress').innerText = data.englishAddress;
        }
    </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>

한글 주소를 영문 주소로 변환하기

한글 주소를 입력하세요:

영문 주소:

이 코드는 입력된 한글 주소를 API로 보내고 변환된 영문 주소를 받아와 페이지에 표시합니다. 실제로 공공 API를 사용하려면, 해당 API의 문서를 참고하여 올바른 URL과 요청 파라미터를 사용해야 합니다.

저작자표시 비영리 변경금지

아지톡, 반려견은 우리의 가족입니다.