KEEP GOING
[자바스크립트] API 개념 및 구현하기 본문
Spring을 이용한 챗봇 개발 프로젝트를 완성시키고자 여러 사이트를 뒤지던 중에
아주 좋은 영상을 발견했습니다.
참고한 영상은 조코딩님의 자바스크립트 api 구현 영상입니다.
https://www.youtube.com/watch?v=QPEUU89AOg8
해당 영상은 api에 대해 갓벽한 설명을 하고 있습니다.
(조코딩님 정말 최고신듯)
2019년 영상이라 실습을 진행하면서 조금씩 바뀐 정보들이 있길래 글을 작성해봅니다.
먼저 영상을 참고하여 json, api, jQuery, ajax 등이 무엇인지 이해 바랍니다.
이전 html 실습을 위해 설치해둔 프레임워크인 atom이 있어서
저는 atom 위에서 실습을 진행하였습니다.
참고로 atom에서의 코드 정렬 단축키는 영상에 있는 프레임워크와는 다른데
https://dasima.xyz/atom-beautify/
ATOM beautify 소스코드 자동 줄 정렬 기능 설치 및 사용법 | dAsImA
Atom-beautify 패키지는 어떤 기능일까요? ATOM 에디터에서 코드를 자동 줄바꿈 해주는 기능입니다. 설치는 쉽고 기능은 아주 좋기 때문에 필수 설치 패키지입니다. 개별 언어별 정렬 설정은 setting에
dasima.xyz
해당 사이트를 참고하여 아톰 위에 beautify 패키지를 설치해주면
코드 정렬 단축키를 사용할 수 있습니다.
코드정렬 단축키 : Ctrl + Alt + b
실습을 진행함에 있어서 위 패키지를 굳이 설치하실 필요는 없습니다. (선택사항입니다!)
하지만 프론트 개발을 진행하는데 너무 편리한 단축키인 것 같아 적어봅니다.
저 패키지를 다운받은 뒤 단축키(Ctrl + Alt + b)를 사용하면 이랬던 코드가
이렇게 예쁘게 알아서 자동 정렬됩니다 (goood!!)
서론이 너무 길었네요.
아래는 해당 영상에 대한 소스 코드 파일입니다.
1. useApi.html
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<p></p>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script type="text/javascript">
$.ajax({
method: "GET",
url: "https://dapi.kakao.com/v2/translation/translate",
data: {
query: "안녕하세요 금융 it 취준생 블로그 입니다.",
src_lang: "kr",
target_lang: "en"
},
headers: {
Authorization: "KakaoAK 603d2b2b9bf882957b994648f204f315"
}
})
.done(function(msg) {
alert("Data Saved: " + msg);
console.log(msg);
console.log(msg.translated_text[0]);
$( "p" ).append( "<strong>"+msg.translated_text[0]+"</strong>" );
});
</script>
</body>
</html>
파일을 저장한 후 저장한 경로로 이동하여 openApi.html 파일을 열어줍니다.
그러면 alert 함수의 동작으로 창이 하나 뜨고
f12를 눌러 콘솔창을 확인해보면 서버상에서 JSON 방식으로 전송된 data를 확인할 수 있습니다.
영상에서 나오는 얘기지만
api에 대해 간단히 설명 드리겠습니다.
클라이언트 상에서는 웹사이트의 url을 통해 서버에 저장된 데이터를 요청하고
서버는 db에 접근하여 데이터를 가져오고 이를 클라이언트 상에 응답으로 전달합니다.
이때 클라이언트와 서버 상에 어떤 규격으로 데이터를 요청/응답하겠다는 약속을 하는데
이를 api (application programming interface)라고 합니다.
이러한 규칙이 뭔데?라고 하신다면
사용자 입장에서는 url에 어떤 경로를 추가적으로 붙여서 데이터 요청 정보를 서버한테 보내고
서버는 url에 매핑된 정보를 알아서 처리하여 응답을 보내줍니다.
따라서, 원하는 정보에 접근할때 매핑된 url로 서버에게 요청을 보낸다!! 는 개념이 일종의 규칙인겁니다.
뿐만 아니라 클라이언트가 서버쪽 데이터에 접근할때 데이터를 단순히 조회할지(GET) 아니면 생성할지(POST) 등의 행위를 선택하는 것도 규칙이라 볼 수 있죠
url과 정보를 매핑하는 처리 코드는 서버의 spring 프레임워크를 통해 구현할 수 있지만
사용자 입장에서는 이러한 정보를 몰라도 데이터에 접근할 수 있습니다.
예를 들어, 서버한테서 사용자 이름값을 알고 싶다면요.
서버가 사용자 이름을 저장한 테이블에 나이, 성별, 지역 등 어떤 정보가 있는지, 이를 어떻게 구현했는지 간에 전혀 알 필요 없고
서버와 이미 약속해둔 url 정보인 http://www.***.com/clientName 이라는 url로 접근하기만 하면 데이터를 받을 수 있습니다.
위 소스코드에서는
url: "https://dapi.kakao.com/v2/translation/translate"
의 value 값이 요청 url 정보가 됩니다.
해당 영상 기준에서 달라진 소스코드 정보로는 ajax에 필수 parameter로 src_lang, target_lang이 포함되어 있다는 점입니다. src_lang은 번역 대상 언어, target_lang은 번역 결과 언어를 의미합니다.
그래서 각각 "ko"와 "en"으로 세팅해주시면 됩니다.
참고해야 할 사이트 목록
https://api.jquery.com/jquery.ajax/
jQuery.ajax() | jQuery API Documentation
Description: Perform an asynchronous HTTP (Ajax) request. The $.ajax() function underlies all Ajax requests sent by jQuery. It is often unnecessary to directly call this function, as several higher-level alternatives like $.get() and .load() are available
api.jquery.com
https://developers.kakao.com/docs/latest/ko/translate/dev-guide
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
https://api.jquery.com/append/
.append() | jQuery API Documentation
Description: Insert content, specified by the parameter, to the end of each element in the set of matched elements. The .append() method inserts the specified content as the last child of each element in the jQuery collection (To insert it as the first chi
api.jquery.com
'web > html + css + javascript' 카테고리의 다른 글
| 자바스크립트 실습 (0) | 2021.07.01 |
|---|---|
| 자바스크립트(JAVASCRIPT) 기초 : 활용 예시와 특징 알아보기 (0) | 2021.07.01 |
| CSS : 캐스케이딩 스타일 시트(CASCADING STYLE SHEET) 알아보기 (0) | 2021.06.30 |
| HTML 기초 실습 -- (3) CSS 적용 (0) | 2021.06.30 |
| HTML 기초 실습 -- (2) 감자빵 주문 사이트 만들기 (0) | 2021.06.30 |
