들어가기 전에..
1. Front-end
사용자에게 보이는 화면을 의미한다.
Back-end에 데이터를 요청해 받은 데이터를 사용자 화면에 표시한다.
2. Back-end
사용자 화면에 보여줄 정보를 처리하는 곳을 의미한다.
Front-end가 데이터를 요청하면 DB에서 해당 데이터를 가져와 Front-end에 전달한다.
3. API(Application Programming Interface)
Front-end가 Back-end에 데이터를 요청할 때 특정 규칙에 맞게 요청해야 하는데 이때 사용 규칙을 제공하는 것을 API라고 한다. API에는 지도, 결제, 채팅, AI 등이 있다.
3-1. Open API
누군가 Back-end를 만들어 놓고 주소와 사용 규칙을 공개한 API를 의미한다.
공공 데이터 포털, 네이버, 카카오, 페이스북, 구글 등
3-2. Serverless
Back-end의 주소와 사용 규칙만 알면 Front-end만 만들어도 얼마든지 데이터를 요청하고 가져와서 Front-end에 사용할 수 있다. 이처럼, OPEN API를 이용해 Front-end만 만들어 쓰는 것을 의미한다.
4. API 가이드
API마다 요청(request)과 응답(response)이 정해진 형식에 맞춰서 전달되는데 이런 형식이 작성된 문서를 API 가이드라 한다. API의 요청과 응답을 다루기 위한 기술에는 jQuery, AJAX가 있다.
(1) 요청(request)
- 주소: API 서버 주소
- 전송 방식: GET
- 보낼 것
- query 검색어 (필수)
- sort 정렬 방식 (선택)
- target 검색 대상 (선택)
(2) 응답(response)
- 형식: JSON, XML
- 응답 내용
- title 도서 제목
- contents 도서 소개
- thumbnail 도시 표지 썸네일 url
5. 요청(request)과 응답(response)
Front-end → 요청(request) → Back-end
Back-end → 응답(response) → Front-end
6. 정보 전송 방식
- GET: 주소창에 모든 정보를 담아 정보를 전달하는 방식
- POST: 주소창이 아닌 내부적으로 정보를 전송하는 방식
7. JSON(JavaScript Object Notation)
- JavaScript의 객체(Object)이다.
- 키-값 쌍(이름:값)의 패턴으로 데이터를 나열한다.
- 2개 이상의 값에는 대괄호 안에 요소를 묶는다. (Array)
- json 안에 중괄호 안에 json을 넣을 수 있다.
- 다른 어떤 언어에서도 사용할 수 있어 정보 전송에 많이 사용되고 있다.
data = {
"이름": "홍길동",
"나이": 25
"특기": ["농구", "도술"]
"가족관계": {"#": 2, "아버지": "홍판서", "어머니": "춘섬"}
}- JSON 데이터 Javascript 접근 방법
- data.이름 → 홍길동
- data.특기[0] → 농구
- data.가족관계.아버지 → 홍판서
8. SDK(Software Development Kit)
개발에 필요한 꾸러미
특별히 AJAX 코드를 작성하지 않아도 SDK에서 자체적으로 AJAK 요청을 해준다.
