과연 혼자도 할 수 있을지 확인해보기 위해 네이버 API 다른거도 도전,,!
XMLHttpRequest 보다 fetch가 간단해서 그거로 해봄
https://developers.naver.com/docs/utils/shortenurl/
단축 URL API 적용 가이드
단축 URL API는 원본 URL을 `https://me2.do/example`과 같은 형태의 짧은 URL로 반환하는 RESTful API입니다.
developers.naver.com
쉬는 시간 틈틈이 해보았다
막 대단한거는 아니었지만 조금 어이없는 실수 끝에 완성했다,, 헤맸던 내용은 아래에 쓰고 일단 완성한거를 작성하자면
node.js로 서버 실행했고 첫 화면은 index.html과 연결해주었다
빈칸에 url 작성하고 '단축 url 생성' 버튼을 누르면
이렇게 아래에 단축url이 나오도록 해주었다. 새로운 url을 쓰고 버튼을 누르면 아래 단축url도 바뀐다!!!
굉장히 허접하지만 api 활용해서 성공시켜봤다는거에 의의를 둔다😢
어이없게 헤맸던 기록
1.
서버로 넘겨줘야 하는 파라미터는 url 하나다.
그래서 app.js에
const body = {
url : originUrl.value
};
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(body),
}넘겨줘야하는 파라미터를 body에 담아주고 server.js도 작성해주고어찌저찌 다 끝내서 실행해보니 단축url도 나오고 되는거다!!!! 그래서 완성한 줄 알았는데 뭔가 내가 넘겨준 body (url) 가 넘어가는거 같지는 않았음,,, 그리고 어떤 url을 입력해도 같은 단축url이 나와서 이상했음
당연함 sever.js에 body 내용을 넣어준적이 없기 때문에,,
var express = require('express');
var app = express();
var client_id = 'YOUR_CLIENT_ID';//개발자센터에서 발급받은 Client ID
var client_secret = 'YOUR_CLIENT_SECRET'; //개발자센터에서 발급받은 Client Secret
var query = encodeURI("https://developers.naver.com/docs/utils/shortenurl");
app.get('/url', function (req, res) {
var api_url = 'https://openapi.naver.com/v1/util/shorturl';
var request = require('request');
var options = {
url: api_url,
form: {'url':query},
headers: {'X-Naver-Client-Id':client_id, 'X-Naver-Client-Secret': client_secret}
};네이버에서 구현 예제를 보여줬는데 그대로 따라 쓰다가 그부분을 바꾸지않은거,,!
const query = encodeURI("https://developers.naver.com/docs/utils/shortenurl");
..
form: {'url':query}이렇게 query가 임시로 들어가있는데 그대로 냅둔거다.. url이 있긴하니까 작동했던거고 저거만 입력되고 있으니까 단축url도 계속 같은 값이 나온거ㅠㅠㅠㅠㅠㅠ
form에 넣어줄 body 다 만들어놓고서는 아예 사용도 안한,,,,,,,,,,,,,,,
아무튼 발견해서 다시 수정해주었다
form: req.body, //{'url':query}이렇게!!!!! body 값 자체를 {url:입력주소} 해줬어서 문자열로 변환되어서 넘어왔을때 {'url' : 입력주소} 이기 때문에 전체 다 없애고 req.body로 해주었음
근데 방금 발견한게 있다 예제에서는 query에 들어가는게 encodeURI(url) 이었는데 나는 url만 넣어준 상황,,, 다시 수정해보고 결과 달라지는지 봐야겠음
실수도 새로 발견하게 되는거 보니까 이렇게 남기는거 굉장히 좋은듯하다
2.
body값 제대로 넣어서 수정해주고 다시 해봤는데 이런 오류가 떴다.
서버도 안끊기고 error 메세지를 내보내는걸 봐서 아예 코드가 틀린거 같지도 않았다
혹시 url을 제대로 입력해야되는건가? 하고 해보니 맞았다,,, 실험해보겠다고 영어를 'asdaf' 이런식으로 막 넣었는데 이게 문제였다ㅠㅠ
url 형식을 제대로 갖추고 있어야 실행되는거였음,, 당연한건데 내가 바보였다
암튼 드디어 완성 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
url 달라질때마다 단축url 다르게 변하는거 확인했고, 같은 주소일때 같은 단축url이 나오는거도 확인했다
끝!!!
++
- 그냥 url 해줬을 떄
- encodeURI(url) 해줬을 때
→ encodeURI를 쓰나 안쓰나 결과는 같았다!!!! 결과에 엄청난 영향을 준건 아니라 다행이었지만 다음엔 더 꼼꼼하게 확인해야겠단 생각을 했다
그래서 encodeURI는 뭐지?
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI
encodeURI() - JavaScript | MDN
The encodeURI() function encodes a URI by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two surroga
developer.mozilla.org
https://opentutorials.org/course/50/189
encodeURI - 생활코딩
요약(Summary) URI를 전달 할 때 문제가 없도록 인코딩 문법(Syntax) encodeURI(encodedURI) 인자(Parameters) 인자명 데이터형 필수/옵션 설명 encodedURI string 필수 인코딩할 문자열 반환값(Return) string, 인코딩된
opentutorials.org
→ 웹을 통해서 데이터를 전송할 때 특정 문자가 다르게 인식될 수 있기 때문에 의도대로 해석될 수 있도록 처리해주는 것. 이런 처리를 이스케이핑(escaping)이라고 부른다고 함!
복잡한 url로 실험했다면 결과가 달라졌을 수도 있었겠다,, 다음엔 조심해야지
참고)
https://www.elancer.co.kr/blog/view?seq=74
URI와 URL, 어떤 차이점이 있나요? | 이랜서 블로그
uri와 url, 비슷한 듯 다른 it 용어, 어떤 차이점이 있는지 확인하기 | uri url 차이, uri 뜻, uri 란, uri url urn, uri vs url
www.elancer.co.kr
참고2) 시작 전 설정
npm init -y
npm i express
npm i request
추가해보고싶은거) 주소 QR code 생성하기
최종 코드
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="app.js"></script>
</head>
<body>
<div>
<input id="url" type="text">
<button>단축 url 생성</button>
</div>
<p id="short"></p>
</body>
</html>
app.js
const originUrl = document.getElementById('url');
const btn = document.querySelector('button');
// btn.addEventListener('click', (event) => {
// console.log(originUrl) //<input id="url" type="text">
// console.log(originUrl.value) // abc(입력값)
// console.log(originUrl.innerHTML) // 안나옴
// });
const result = document.getElementById('short').textContent;
btn.addEventListener('click', (event) => {
const url = '/url';
const body = {
url : originUrl.value
};
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(body),
}
fetch(url, options)
.then(response => response.json())
.then(data => {
console.log(data)
console.log(data.result.url)
document.getElementById('short').textContent = data.result.url
});
});
server.js
const express = require('express');
const app = express();
var client_id = 'uFavFScko6GzcxSjbhTe';//개발자센터에서 발급받은 Client ID
const client_secret = 'dBK0WITxi3'; //개발자센터에서 발급받은 Client Secret
app.use(express.static('public'));
// 역직렬화용 미들웨어 추가
app.use(express.json());
app.get('/', (req, res) => res.sendFile('index.html'));
//const query = encodeURI("https://developers.naver.com/docs/utils/shortenurl");
app.post('/url', function (req, res) {
const api_url = 'https://openapi.naver.com/v1/util/shorturl';
const query = req.body.url;
//console.log(query);
console.log(encodeURI(query));
const request = require('request');
const options = {
url: api_url,
//form :{'url':query}, //form: req.body 로 써줘도 똑같다
form: {'url' : encodeURI(query)},
headers: {'X-Naver-Client-Id':client_id, 'X-Naver-Client-Secret': client_secret}
};
request.post(options, function (error, response, body) {
if (!error && response.statusCode == 200) {
res.writeHead(200, {'Content-Type': 'text/json;charset=utf-8'});
res.end(body);
} else {
res.status(response.statusCode).end();
console.log('error = ' + response.statusCode);
}
});
});
app.listen(3000, function () {
console.log('http://127.0.0.1:3000/url app listening on port 3000!');
});
별거 아닌데 되게 뿌듯하다 다음엔 더 어려운거 도전해봐야지