• Front-end 와 Back-end를 잇는 API의 개념과 활용에 대해서 알아보자.

    2021. 1. 29.

    by. 공상개발

     

    위 본문에서는 JavaScript를 이용해 API를 다루는 법을 살펴보겠다.

     

     

     

    목차

    • Front-end 와 Back-end를 잇는 API의 개념과 활용
    • 구현 UI 와 소스코드 
    • 코드 리뷰 및 사용 방법 
           -앱키 발급 
           -개발 가이드 찾기 
           -응답 데이터의 형식 확인

     

     

     

    • Front-end 와 Back-end를 잇는 API의 개념과 활용

     

     

     

    Front-end는 우리가 보는 화면을 생각하면 된다. 

     

     

     

    Back-end는 화면에 보여줄 정보를 처리하는 곳을 의미한다.

     

     

     

     

    Front-end <------------> Back-end

     

    화면에 어떠한 정보를 나타내기 위해서는 정보가 있어야 한다.

    Front-endBack-end에 요청을 할 때 특정 규칙에 맞게 요청을 해야 한다.

     

     

     

     

     

    이것을 우리는 Application Programming Interface(API)라 부른다.

     

     

    그렇다면 이렇게 생각할 수 있다.

     

    API = 사용 규칙을 제공

     

     

    그렇다면 오픈 API는 무엇일까?

     

     

    만들어진 Back-end에 주소와 사용 규칙을 공개한 것을 의미한다.

    위의 2가지만 안다면 우리의 Front-end에서 얼마든지 정보를 요청하고 데이터를 받아서 활용할 수 있다.

     

    보통 이 같은 방법을 ServerLess라고 부른다.

     

     

    TIP : API는 지도(Naver Maps), 채팅(Socket.io), Ai(Cloud Vision API) 등 여러 기능들이 공개되어 있다.

     

     

     

    API 동작 원리

    프론트 엔드에서 API 서버 주소로 어떤 정보를 달라고 요청-> API 서버에서는 자체의 DB에서 원하는 정보를 다시 전달

     

     

     

     

    • 구현 UI 와 소스코드

     

     

    API 실습 코드

     

     

    위와 같은 코드를 동작했을 때 구현되는 UI는 다음과 같다.

     

     

    구현 UI

     

    요청과 응답은 API마다 정해진 형식에 맞춰 전달된다.

    이런 형식이 작성된 문서를 API 가이드라고 말한다.

     

     

     

    • 코드 리뷰 및 사용 방법 
           -앱키 발급 
           -개발 가이드 찾기 
           -응답 데이터의 형식 확인

     

     

    자바스크립트에서 API 연동을 위해 필요한 양식은 2가지가 필요하다.

     

     

     

    1. jQuery CDN

    2. jQuery Ajax

     

     

     

     

    우선 jQuery CDN 홈페이지에 접속 코드를 예제 코드를 복사하는 방법부터 보겠다.

     

     

    jQuery 홈페이지

     

     

    jQuery core 3.5.1- uncompressed를 누르면 아래와 같은 창이 화면에 나타난다.

     

     

     

    jQuery CDN 코드

     

     

    위의 코드를 복사해서 HTML 파일 body 태그 안에 붙여 넣기 하면 된다.

    혹시 모를까 봐 사진을 첨부한다.

     

     

     

    이렇게

     

     

     

    다음으로는 jQuery Ajax 코드를 복사하는 법을 알아보겠다.

    jQuery CDN과 비슷하다.

     

     

     

     

     

    마찬가지로 홈페이지를 찾아서 스크롤은 쭉 내려주면

    ajax 공식 홈페이지

     

     

     

     

     

    이와 같은 예제 코드를 찾을 수 있다.

     

     

     

    이쯤 되면 이걸 왜 하는 거지?라고 생각하기 때문에 

    ajax 코드의 구성요소에 대해 간략하게 살펴보겠다.

     

     

     

    ajax 코드 상단

    AJAX 코드 상단에는 요청에 대한 정보가 들어간다.

    method : 전송 방식

    url : 전송 주소

    headers : 보낼 데이터

     

     

    TIP :
           GET 방식 : 주소창에 모든 정보를 담아 정보를 전달하는 방식,
           POST 방식 : 주소창이 아니라 외부적으로 정보를 전달하는 방식

     

     

     

     

    ajax 코드 하단

    .done 이후에는 요청에 대한 응답이 오면, 그 응답을 가지고 처리를 하는 코드가 들어간다.

     

    ex) 책 제목에 대한 요청 -> 책 제목 정보 받음 (응답) -> 이 정보를 console 창에 표시 (응답 가지고 처리)

    이런 느낌이다.

     

     

     

    오픈 API는 남용되지 않도록 API 키를 발급받은 사람만 사용할 수 있다.

    우리는 카카오 API로 실습을 할 예정이기 때문에 

     

     

     

    카카오 개발자 홈페이지에 접속해 준다.

     

     

     

     

    카카오 개발자 홈페이지에 들어가서 로그인해준다.

    그리고 내 어플리케이션-> 애플리케이션 만들기

    글만 보면 어려우니 아래의 이미지를 참조해라.

     

     

     

     

    애플리케이션 추가1

     

     

    애플리케이션 추가2

     

     

     

    이렇게 애플리케이션을 만들면 앱키를 받을 수 있는데 다음과 같은 모습을 보인다.

     

     

    앱 키

     

     

    파란색으로 가려놨지만 본인 고유의 앱 키가 할당되었을 것이다.

    이것이 있으면 파란색으로 가려진 소스코드 부분에 복사한다면 프로그램이 정상적으로 동작할 것이다.

     

     

     

    코드에 대해서 왜 저런 형식인가, 궁금한 분들을 위해 개발 가이드 찾는 법

     

     

     

     

     

    카카오 홈페이지 우측 최상단에서 문서를 클릭해준다.

     

     

     

     

    그리고 스크롤을 내려 찾다 보면 검색 API 가이드가 보이는데 

    여기서 개발 가이드를 눌러준다.

     

     

     

    그럼 이와 같은 페이지가 나타난다.

     

    이 페이지를 살펴본다면 요청과 응답의 형식에 대해 감이 생길 것이다.

     

     

     

     

     

    예를 들어 아래의 이미지를 보면

     

     

     

    응답 데이터가 어떤 형식으로 날아오는지를 알 수 있다.

    이런 점들을 개발 가이드 페이지를 통해 우리는 알 수 있다.

     

     

     

     

    소스코드의 경우 아주 기본적인 코드이기 때문에 본인의 앱 키를 발급받았다면,

     

    검색 API 이외에 지도 API나 다른 API로 적용시켜보길 바란다.

     

    댓글