API & 프론트엔드 백엔드 DB 통신과정

# API란 무엇인가요?

: 프로그램간의 소통을 위해 사전에 정의된 "약속"이다

: 프로그램들이 서로 상호작용 할 수 있도록 도와주는 매개체

API는 정의 및 프로토콜 집합을 사용하여 두 소프트웨어 구성 요소가 서로 통신할 수 있게 하는 메커니즘입니다. 예를 들어, 기상청의 소프트웨어 시스템에는 일일 기상 데이터가 들어 있습니다. 휴대폰의 날씨 앱은 API를 통해 이 시스템과 ‘대화’하여 휴대폰에 매일 최신 날씨 정보를 표시합니다.

# API는 무엇을 의미하나요?

API는 Application Programming Interface(애플리케이션 프로그램 인터페이스)의 줄임말입니다. API의 맥락에서 애플리케이션이라는 단어는 고유한 기능을 가진 모든 소프트웨어를 나타냅니다. 인터페이스는 두 애플리케이션 간의 서비스 계약이라고 할 수 있습니다. 이 계약은 요청과 응답을 사용하여 두 애플리케이션이 서로 통신하는 방법을 정의합니다. API 문서에는 개발자가 이러한 요청과 응답을 구성하는 방법에 대한 정보가 들어 있습니다.

# REST API란 무엇인가요?

REST는 Representational State Transfer의 줄임말입니다. REST는 클라이언트가 서버 데이터에 액세스하는 데 사용할 수 있는 GET, PUT, DELETE 등의 함수 집합을 정의합니다. 클라이언트와 서버는 HTTP를 사용하여 데이터를 교환합니다.

REST API의 주된 특징은 무상태입니다. 무상태는 서버가 요청 간에 클라이언트 데이터를 저장하지 않음을 의미합니다. 서버에 대한 클라이언트 요청은 웹 사이트를 방문하기 위해 브라우저에 입력하는 URL과 유사합니다. 서버의 응답은 웹 페이지의 일반적인 그래픽 렌더링이 없는 일반 데이터입니다.

# 오픈 API

Corona, 날씨 정보 API
https://www.data.go.kr/

Naver 지도, papago, Clova API
https://developers.naver.com/

Google 검색엔진, Translate API
https://developers.google.com/

Kakaotalk, Kakaomap API
https://developers.kakao.com/

오픈 API 사용법

예시) kakao map

1. https://apis.map.kakao.com/ 로 접속
2. MAP -> 좌측에 Sample 
-> 호출 가능한 name들이 나열되는데, 여기서 지도 생성하기(예시)
-> javascript + HTML 코드 복사 후 VS CODE에 붙여넣기

-> 코드 중간 부분의  
  <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요">
  </script>
-> 여기서 "발급받은 APP KEY를 사용하세요" 부분에 본인 APP KEY를 입력해줘야 함.
-> APP KEY는 사이트 좌측에 키발급에서 발급 가능
-> 어플리케이션 추가
-> 추가한 어플리케이션에 앱키를 복사해서 위 APP KEY칸에 입력해주면 적용 가능.

# 프론트엔드란 ? (클라이언트)

: 사용자의 눈에 보여지는 것

(HTML = 뼈대, CSS = 살, Javascript = 동적 변화)

# 백엔드란 ? (서버)

: 사용자의 눈에 보이지 않는 것

# 프레임워크란 ? (미리 셋팅되어있는 환경)

: 예시로, 부대찌개를 끓이려면 햄,소시지,당면,소스 등 많은 것을 구매해야 되는 번거로움이 있는데,

패키지로 된 상품을 구매하면, 기본적인 세팅이 되어 있는 걸 구매하기 때문에 간편하게 조리 가능.

# 백엔드 웹 프레임워크

- 정적 사이트 제작가능

- 각 언어마다 다름

1. js : express (javascript의 웹 프레임워크는 express)

2. php : laravel

3. java : spring

4. python : django, flask

# 정적 사이트와 SPA차이

(정적 사이트는 페이지의 일부분을 수정 위해, 기존 데이터 전부를 가져와서 업데이트를 하는 반면에,

SPA는 필요한 부분만 업데이트가 가능하기 때문에, 시간 절약)

# SPA를 위한 JS

** 출처 : https://www.youtube.com/watchv=ED2rOHM1od0&ab_channel=%EA%B0%9C%EB%B0%9C%ED%95%98%EB%8A%94%EC%A0%95%EB%8C%80%EB%A6%AC

# HTTP API 테스트 도구 (Postman, Insomnia)
웹 개발에서 사용하는 대표적인 클라이언트는 브라우저이다.
브라우저는 서버에 HTTP 요청을 보낼 수 있는 훌륭한 도구지만, 주로 웹 페이지를 받아오는 GET 요청에 사용한다.
테스트를 위해 GET이 아닌 다른 요청을 보내려면, 개발자 도구의 콘솔 창에서 내장 함수 fetch를 사용해야 하는

번거로움이 있어서, API를 호출하는 테스트 툴로서 postman, insomnia를 사용하여,

간편하게 REST API 설계, 개발, 테스팅 할 수 있다.

# 실행 순서

백엔드에서 Santino.com/
api주소를 가진다 
백엔드 nest js로 구동 - 호출
cloud서버에서 올리면, IP주소를 가진다.
도메인 받으면 santino.com주소가 생김

----------------------------------------------

프론트
사용자가 웹페이지에 접근했을 때,
포켓몬 목록을 보여주면 됨

백엔드에서 요청한 API명세서를 확인한 후, --- 1번
html css js와 같은 웹 언어를 사용하여
일반적인 사용자가 볼 수 있도록 사용자 인터페이스(User Interface)를 개발함


백엔드
프론트에서 포켓몬 목록을 가져올 수 있도록,
서버 언어(java,python,node)를 통해서 포켓몬 목록 API를 개발함
(API는 http://api.pokemon.co.kr/pokemons와 같은 URL형식의 주소)
API를 호출하면,
배열안의 json형식의 결과값을 반환함
[
 { 
   name: '꼬부기',
   iamage: '꼬부기.png'
  },
 { 
   name: '이상해씨'
   image: '이상해씨.png'
}
]
백엔드 개발자는 이 API를 프론트엔드 개발자에게 제공을 하는데, 
이어서 위의 1번으로.

# WEB 서버 구조와 WAS의 역할 / Web서버, WAS, DB가 하는 일

1. 사용자

[ 2. Web Server

3. Web Application Server (WAS)

4. Database Server ]

- 사용자가 Web Server에 정보를 요청하면,

Web Server가 요청한 파일을 전달 하는 역할

- Web Server가 해결하기 어려운 정보들은 Web Application Server로 토스를 하고,

Web Application Server에서 작업하여 다시 Web Server에 전달(로그인 성공, 실패)

- 로그인 같이 기존 페이지는 같으나, 사용자 데이터가 다른 경우는 WAS가 Database Server에 요청하여

기존 요청 데이터와, Database에 있는 데이터를 비교하여 페이지 응답함(로그인 성공, 실패)

better tmrw