티스토리 뷰
[서론]
인터넷상에서 정보가 존재하는 위치는 URL을 사용하여 접근하게 된다. 접근하고자 하는 URL의 길이가 길어지게 되면 URL Shortener를 사용하여 줄여서 사용 할 수 있게 된다. URL Shortener API를 제공하는 곳은 많지만 이번 포스팅에서는 구글을 사용하여 포스팅을 진행 할 것이며, 이번 포스팅에서는 URL Shortener의 동작 원리와 사용법에 대해서 설명한다.
[URL Shortener 원리]
https://goo.gl/ 해당 URL에 접근하여 Short URL을 발급 받으면 https://goo.gl/UeyLrd 과 같은 형식의 짧은 URL을 받게 된다. 해당 URL은 나의 블로그로 연결 해놓았기 때문에 해당 URL로 접근하게 되면 해당 블로그로 접근하게 된다. 그렇다면 동작 원리는 어떻게 되는 것일까?
동작 원리를 이해 하기 위해서는 먼저 https://goo.gl/UeyLrd로 접근했을 때 응답결과를 curl명령어를 통해서 알아보면 다음과 같다.
위 이미지에서 네모도형이 표시된 부분을 보면 301응답 결과와 Location에 http://jodu.tistory.com/이라는 URL을 확인 해볼 수 있고 해당 응답 결과는 구글의 GSE서버에서 온 것을 알 수 있다. 301은 영구적 리다이렉트로 해당 URL로 접그하면 GSE서버에서 Location에 명시된 URL로 리다이렉트 시켜주게 된다.
아래에는 위에서 설명한 내용을 간략하게 그림을 이용해서 설명한다.
[URL Shortener 사용법]
구글의 URL Shortener를 사용하는 법은 아주 간단하다. 먼저 google api console로 접근하여 로그인을 하고 URL Shortener를 사용하기 위한 API key를 발급 받는다. 발급 받은 API key는 URL Shortener API 호출 URL끝에 key라는 param에 설정을 해주면 동작하게 된다. https://www.googleapis.com/urlshortener/v1/url?key=*********************과 같은 URL형식이 된다. 아래에서 소스 코드를 보고 설명을 한다.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>URL Shortener Test Page</title>
</head>
<div>
URL <input id="test" type="text">
<button onclick="shortener()">변환</button>
</div>
<div id="shortener_result">
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function shortener() {
var googleShortUrlAPI = "https://www.googleapis.com/urlshortener/v1/url?key=(발급받은API Key)";
var inputUrl = $("#test").val();
var urlData = {"longUrl" : inputUrl};
var googleApiData = JSON.stringify(urlData);
$.ajax({
type: 'post',
url : googleShortUrlAPI,
data : googleApiData,
contentType: "application/json",
success: function(result) {
var shortURL = result.id;
$("#shortener_result").append("<a href='" + shortURL + "'>" + shortURL + "</a>");
}
});
}
</script>
해당 소스를 보게 되면 Ajax를 통해서 API를 호출 하게 되는데 파라미터의 형식이 JSON이라는 것을 확인 할 수 있다. 여기서는 간단한 테스트 페이지이기 때문에 longUrl이라는 파라미터만을 넘겼지만 도큐멘트를 확인해보면 5개의 추가적인 설정을 위한 파라미터들이 존재한다.
[소스를 실행 한 결과]
'FrontEnd' 카테고리의 다른 글
| IndexedDB 사용시 주의 사항 (0) | 2018.11.23 |
|---|---|
| Angular Router getting param (0) | 2018.06.28 |
| Angular Deployment (0) | 2018.06.26 |
| Angular Component간의 연결(Angular Each Component relation) (0) | 2018.03.06 |
| Angular guard 사용법[1] (0) | 2018.02.27 |