ayaysir/api-read.html

## api-read.html
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
   <div id="loading-status">Loading...</div>
    <div id="container" style="display: none;">
        <h1 id="keyword"></h1>
        <p>
            [<span id="pos"></span>]
            (<span id="type"></span>)
            <span id="definition"></span> <a id="link" href="#" target="_blank">링크</a>
        </p>
    </div>


    <script>
        const q = prompt("검색어 입력?")
        const proxyUrl = "http://yoonbumtae.com/portfolio/apiproxy/?certkey_no=[CERT_KEY]&key=[API_KEY]&type_search=search&req_type=json&q=" + q;

        (async function() {
            try {
                const init = await fetch(proxyUrl, {
                    method: "get"
                })
                const data = await init.json()
                console.log(data)

                const item = data.channel.item[0]
                document.querySelector("#keyword").textContent = item.word
                document.querySelector("#pos").textContent = item.pos
                document.querySelector("#type").textContent = item.sense.type
                document.querySelector("#definition").textContent = item.sense.definition
                document.querySelector("#link").href = item.sense.link

                document.querySelector("#loading-status").style.display = "none"
                document.querySelector("#container").style.display = "block"
            } catch (exc) {
                console.warn(exc)
            }
        })();
    </script>
</body></html>

## apiproxy.php
<?php

// 쿼리 파라미터 텍스트 만들기 함수
function makeQueryParameters($get_parameters) {
    $query_text = "?";
    foreach($get_parameters as $key => $value) {
        $query_text .= $key . "=" . urlencode($value) . "&";
    }

    return $query_text;
}

// 헤더 설정: 컨텐츠 타입 JSON, CORS 허용 권한 설정
header('Content-Type: text/json');
header('Access-Control-Allow-Origin: http://127.0.0.1:52101');

// ** CORS 권한 설정 부분 **
// - 예) header('Access-Control-Allow-Origin: http://example.com');
// - Origin: => 중간에 띄어쓰기 하면 에러
// - Rquest Header의 Origin URL을 그대로 적음, URL 끝에 원래 /이 없는데 /를 붙이면 에러
//  - 예) http://example.com 와 http://example.com/ => 둘은 다른 URL임

$request_url = "https://stdict.korean.go.kr/api/search.do" . makeQueryParameters($_GET);

$ch = curl_init();    // cURL 생성
$options = array(
    CURLOPT_URL            => $request_url,
    CURLOPT_RETURNTRANSFER => true,    // 반환값을 받을 것인가?
    CURLOPT_HEADER         => true,    // 헤더를 표시할 것인가?
    CURLOPT_FOLLOWLOCATION => true,
    CURLOPT_ENCODING       => "",
    CURLOPT_AUTOREFERER    => true,
    CURLOPT_CONNECTTIMEOUT => 120,
    CURLOPT_TIMEOUT        => 120,
    CURLOPT_MAXREDIRS      => 10,
);

// 인증서 에러 해결방법 (SSL certificate problem: unable to get local issuer certificate)
// https://thisinterestsme.com/php-curl-ssl-certificate-error/
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

curl_setopt_array( $ch, $options );    // 옵션 설정
$response = curl_exec($ch); // 실행시키고 반환값은 $response에 저장

// 리스폰스에서 헤더 자르는 방법
// https://stackoverflow.com/questions/5142869/how-to-remove-http-headers-from-curl-response
$header_size = curl_getinfo($ch, CURLINFO_HEADER_SIZE);
$headerstring = substr($response, 0, $header_size);
$body = substr($response, $header_size);
$httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);

// Closing
curl_close($ch);

// httpcode가 0일 경우 에러 원인 보기
//if(curl_error($ch)){
//    echo 'Curl error: ' . curl_error($ch);
//}

if($httpcode == 200) {
    echo $body;
}

?>
	<!DOCTYPE html>
	<html lang="ko">

	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>

	<body>
	<div id="loading-status">Loading...</div>
	<div id="container" style="display: none;">
	<h1 id="keyword"></h1>
	<p>
	[<span id="pos"></span>]
	(<span id="type"></span>)
	<span id="definition"></span> <a id="link" href="#" target="_blank">링크</a>
	</p>
	</div>


	<script>
	const q = prompt("검색어 입력?")
	const proxyUrl = "http://yoonbumtae.com/portfolio/apiproxy/?certkey_no=[CERT_KEY]&key=[API_KEY]&type_search=search&req_type=json&q=" + q;

	(async function() {
	try {
	const init = await fetch(proxyUrl, {
	method: "get"
	})
	const data = await init.json()
	console.log(data)

	const item = data.channel.item[0]
	document.querySelector("#keyword").textContent = item.word
	document.querySelector("#pos").textContent = item.pos
	document.querySelector("#type").textContent = item.sense.type
	document.querySelector("#definition").textContent = item.sense.definition
	document.querySelector("#link").href = item.sense.link

	document.querySelector("#loading-status").style.display = "none"
	document.querySelector("#container").style.display = "block"
	} catch (exc) {
	console.warn(exc)
	}
	})();
	</script>
	</body></html>
	<?php

	// 쿼리 파라미터 텍스트 만들기 함수
	function makeQueryParameters($get_parameters) {
	$query_text = "?";
	foreach($get_parameters as $key => $value) {
	$query_text .= $key . "=" . urlencode($value) . "&";
	}

	return $query_text;
	}

	// 헤더 설정: 컨텐츠 타입 JSON, CORS 허용 권한 설정
	header('Content-Type: text/json');
	header('Access-Control-Allow-Origin: http://127.0.0.1:52101');

	// CORS 권한 설정 부분
	// - 예) header('Access-Control-Allow-Origin: http://example.com');
	// - Origin: => 중간에 띄어쓰기 하면 에러
	// - Rquest Header의 Origin URL을 그대로 적음, URL 끝에 원래 /이 없는데 /를 붙이면 에러
	// - 예) http://example.com 와 http://example.com/ => 둘은 다른 URL임

	$request_url = "https://stdict.korean.go.kr/api/search.do" . makeQueryParameters($_GET);

	$ch = curl_init(); // cURL 생성
	$options = array(
	CURLOPT_URL => $request_url,
	CURLOPT_RETURNTRANSFER => true, // 반환값을 받을 것인가?
	CURLOPT_HEADER => true, // 헤더를 표시할 것인가?
	CURLOPT_FOLLOWLOCATION => true,
	CURLOPT_ENCODING => "",
	CURLOPT_AUTOREFERER => true,
	CURLOPT_CONNECTTIMEOUT => 120,
	CURLOPT_TIMEOUT => 120,
	CURLOPT_MAXREDIRS => 10,
	);

	// 인증서 에러 해결방법 (SSL certificate problem: unable to get local issuer certificate)
	// https://thisinterestsme.com/php-curl-ssl-certificate-error/
	curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
	curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

	curl_setopt_array( $ch, $options ); // 옵션 설정
	$response = curl_exec($ch); // 실행시키고 반환값은 $response에 저장

	// 리스폰스에서 헤더 자르는 방법
	// https://stackoverflow.com/questions/5142869/how-to-remove-http-headers-from-curl-response
	$header_size = curl_getinfo($ch, CURLINFO_HEADER_SIZE);
	$headerstring = substr($response, 0, $header_size);
	$body = substr($response, $header_size);
	$httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);

	// Closing
	curl_close($ch);

	// httpcode가 0일 경우 에러 원인 보기
	//if(curl_error($ch)){
	// echo 'Curl error: ' . curl_error($ch);
	//}

	if($httpcode == 200) {
	echo $body;
	}

	?>