API

카카오 Open API

Front-end
: 화면
EX) 게시판 제목 위치, 내용 위치 색상 등

Back-end
: 화면을 구성하는 정보를 처리하는 곳
EX) 게시판제목 정보, 내용 정보 등

프론트에서 백엔드로 정보를 요청하고
백엔드에서 프론트엔드로 정보를 전달한다.

여기서프론트에서 백엔드로 요청을 할 때 일정한 규칙을 통해 요청을 한다.
이를 , API(Application, Programming Interface) 라고한다.
(= 사용 규칙을 제공하는 것)

Open API
: 백엔드를 미리 만들어두고 주소와 사용 규칙을 공개하는 것

—> 프론트엔드만 만들어 사용할수 있다( Serverless 라고도 함)

프론트에서 백엔드에게 정보를 요청하는 것을 request라고 하며,
백엔드에서 프론트로 값을 처리해주는 응답을 response라고 한다.

API마다 요청과 응답하는 내용을 정리해두는 것이 API 가이드 이다.

---

API 가이드 예시

• 요청 request

1. 주소: http://dapikakao.com/v3/search/book
2. 전송방식:
   GET(주소창에 전체 정보포함 전달),
   POST(주소창이 아닌 내부적으로 정보를 전달)
   (크게 두가지)
3. 보낼것
   query 검색어(필수)
   sort 정렬 방식(선택)
   target 검색 대상(선택)
   …

---

- 응답 response

1.형식 : JSON (가끔 xml형태로 전달)

Json 형태예시
{
“이름” : “홍길동”,
“나이”: 25,
“성별” : “여“,
“주소”: ”서울특별시 양천구 목동“,
“특기” : [“농구”, “댄스”]
”가족관계“ : {”#“: 2, ”아버지“: ”홍판서“, ”어머니“: ”춘심“},
}

중괄호 안에 ,로 이어진 값을 띄는 형식
특기에 두개가 들어있어 대괄호로 묶인 형식을 배열(Array)라고 한다.
가족 관계 처럼 JSON 형식 안에또다른 JSON형식을 가지고 있을 수 있다.
2. 응답 의미 설명
Title 도서제목
Contents 도서 소개

---

• Ajax 사용하기

1. Index.html 작성
2. 익스플로러 동작 확인
3. JQwery CDN 코드를 받아와 안에 추가
4. JQwery AJAX를 들어가 EXAMPLE을 복사해서 CDN코드 밑에 추가

---

• API 사용 (openAPI key 발급)

1. 카카오 developers app 생성
2. 사용할 API 진입하여 가이드 확인후 코드 붙여 사용

---

• 일부 오브젝트를 화면에 표시하기

개발자 콘솔에서 받아온 Object값을 우클릭 Store as Global Variable 선택시
새로운 변수 안에 응답받은 Object를 저장할 수 있다.

---

• 개발자 콘솔에서 html에 이미지를 추가하는 법

구글링 > Jqwery add html 검색
Jqwery 공식 사이트 예시 사용하여 이미지 추가

참조 유투브
조코딩 : https://youtu.be/QPEUU89AOg8?si=ETyLWbz-80N3qbrd