벡엔드와 프론트엔드 통신을 위한 HTTP, API의 개념

😀 HTTP 요청과 응답

• http(hyper text transfer protocol): 벡엔드와 프론트가 통신하기 위한 규약
  -> 클라이언트(프론트엔드)의 http request(요청, API(application programming interface))을 보내게 되면, 서버(백엔드)에서 http response(응답)
  : 클라이언트가 요청 시(사용자의 pc, 스마트폰) 주변의 기지국으로 요청-> 서버로 요청
• http METHOD

1. GET: 정보 보기
2. POST: 정보 입력
3. DELETE: 정보 삭제
4. PUT: 정보 수정

😀 API (Application Programming Interface)

: 프론트가 백한테 정보 요청 시, 규칙에 맞게 해야 함 (그 규칙을 의미)

• Open API: 백엔드에서 API를 만들고 주소, 사용 규칙을 공개한 것
• severless: openAPI를 사용하여 프론트엔드만을 만들어 사용할 수 있는 것
  ex) 지도, 결제(I'mport API), 채팅(socket.io), AI(cloud vision API)
  -> 즉, API는 특정 처리 관련 규칙을 프론트에서 사용할 수 있도록 하는 것
  -> 내가 만드는 프로그램(응용 프로그램)에서 누군가가 만든 기능(운영체제나 프로그래밍 언어가 제공하는 기능)을 제어할 수 있게 하는 매개체

1. 요청(request)

• 주소: api 서버의 주소
• 전송 방식: method (GET: 주소창에 정보 담아서 전송/POST: 내부적으로 정보 전송)
• 보낼 것 (API 요청에 필요한 정보)

2. 응답 (response)

• 형식: json, xml

-> 즉, 클라이언트가 서버에 http 프로토콜에 따라 요청을 보낸다. http는 4가지의 method 요청 방식을 가지고 있다. 그리고 어떤 특정한 처리(ex-결제) 를 하기 위해서 클라이언트가 서버에게 정의된 api에 따라 데이터와 요청방식을 지정해서 요청을 하는 것이다. 그리고 그 중에서 특정 어느 리소스에서 접근할 것인지를 uri를 통해 나타낸다. 그럼 서버에서 처리해서 정의된 API에 따라 응답을 돌려주는 것이다. 그러니까 우리는 API에 따라 요청을 하고, 응답을 받아올 수 있는 것이다.
-> 즉 벡엔드 개발자 (서버 개발자)는 API를 만드는 역할인 것이다. 프론트에서 요청을 어떤 식으로 받아서 어떤 식으로 처리하여 어떤식으로 응답을 반환할 것인지를 만드는 역할인 것이다.

😀 Rest API (Representational State Transfer, Restful API)

: API의 효율을 높이기 위해 만든 약속 (서로 질의 응답을 올바르게 하게 하기 위해)
(프론트엔드와 서버 간의 통신 효율성을 높이기 위해 어떻게 요청할 것인지, 어떻게 응답할 것인지 정해둔 규칙)
-> API요청 시, 서버에 우리의 행동(METHOD)를 미리 전달해주자
-> HTTP기반으로 필요한 리소스를 요청하는 아키텍처로 설계된 어플리케이션 프로그래밍 인터페이스

<특징>

• 서버에 있는 모든 resource는 각 resource 당 클라이언트가 바로 접근 할 수있는 고유 URI가 존재한다.

• 모든 요청은 클라이언트가 요청할 때마다 필요한 정보를 주기 때문에 서버에서는 세션 정보를 보관할 필요가 없다. 즉, 서비스에 자유도가 높아지고 유연한 아키텍쳐 적응이 가능하다.

• HTTP 메소드를 사용한다. 모든 resource는 일반적으로 HTTP 인터페이스인 GET,POST,PUT,DELETE 4개의 메소드로 접근 되어야 한다.

• 서비스 내에 하나의 resource가 주변에 연관 된 리소스들과 연결되어 표현이 되어야 한다.

  ✔️ 즉,API는 나의 프로그램에 누군가가 만들어놓은 기능을 사용하기 위한 매개체. 웹에서는 서버와 클라이언트의 상호작용을 위해 사용됨. 그것이 RestAPi인데, 이는 웹의 특성을 활용하여 클라이언트가 서버에 필요한 리소스를 요청할 때의 데이터와 요청 방식, 응답 방식 등을 정의해놓은 것

  ###❤️ -> 즉, API는 응용프로그램 간의 상호작용을 위한 인터페이스이다. 즉 내가 만든 프로그램에 또 다른 프로그램을 가져오기 위한 매개체(함수, 클래스, 메서드, 데이터 구조 등으로 이루어짐)/ 그 중에서도 웹 특성을 이용하여 웹에서 서버와 클라이언트 간의 통신을 설계하는 방법 (어떤 데이터를 전달, 어떤 형식으로 요청과 응답, 어떤 method 인지를 정의)

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

1. 사용자
2. Web Server: 정적 페이지 처리 (데이터 변경X)
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에 있는 데이터를 비교하여 페이지 응답함(로그인 성공, 실패)

😀

• 정적 사이트: 페이지의 일부분을 수정을 위해, 기존 데이터 전부를 가져와서 업데이트

• SPA는 필요한 부분만 업데이트 -> 시간 절약
  --> SPA를 위한 프론트엔드 프레임워크: REACT, ANGULAR, VUE

  😀 JSP (JavaServer Pages)

  : 서버사이드 웹 개발을 위한 JAVA 기반 기술
  -> Java 웹 애플리케이션을 구축하는데 사용, 웹 페이지 내에서 Java 코드와 HTML을 쉽게 조합할 수 있도록 도와줌
  -> 동적인 콘텐츠를 생성한 후 클라이언트에게 전송

  😀 AJAX (Asynchronous JavaScript And XML)

  : 비동기적으로 서버와 클라이언트 간의 데이터 교환을 수행하는 기술
  -> 웹 페이지를 새로고침하지 않고도 서버로부터 데이터 가져와 페이지의 일부분만 업데이트 할 수 있음
  -> JSON 등 다양한 데이터 형식
  -> 응답이 올 때까지 기다리지 않아도 됨

• 동기식 통신: 웹 브라우저 요청 후 응답 도착할 때까지 이용자와 상호작용 불가

• 비동기식 통신: 웹 브라우저가 이용자와 상호 작용하면서도 내부적으로 서버에 요청 및 응답 처리
  - 응답이 클라이언트에 도달하더라도 화면이 변하지 않음
  - 내부적으로 요청 및 응답을 처리
  - 응답을 조작 가능
  ex) 로그인 시도 후, 성공과 실패에 대한 결과를 비동기적으로 조절하여 alert를 통해 알림창으로 알려줌. 성공 혹은 실패 결과에 따라 바로 로그인 창 자체가 변화하게끔 하면 자원이 낭비됨

  😀 JQUERY

  : JavaScript 라이브러리 (웹 개발 더 쉽고 효율적으로 만들기 위한 도구)
  -> HTML 문서의 조작, 이벤트 처리, 애니메이션, AJAX 요청 등을 간편하게 수행할 수 있는 함수와 메서드를 제공