DAY 20 - TIL

HTTP

Hypertext Transfer Protocol

• Web에서 서버와 클라이언트 간의 통신하는 방법을 정하는 것
• 클라이언트는 웹 브라우저 등 서버로 요청을 보내는 대상
• 서버는 클라이언트가 요청을 보내기 전까지 대응하지 않음
• 서버와 클라이언트 사이에는 무수히 많은 요소가 존재
• HTTP는 이런 존재들 사이의 통신 방법을 규정

• Hypertext: 컴퓨터 화면이나 전자 기기에서 볼 수 있는 데이터이며, 다른 데이터와 연결될 수 있는 주소를 참조
• Transfer: 사람들이 브라우저를 통해 확인하는 웹 상의 데이터는 HTTP에 의해 전달
• Protocol: 규칙 혹은 규약

-브라우저 주소창에 URL을 입력하면 그 데이터를 요청하고 보여주는 것은 브라우저의 역할

-요청 받은 데이터를 가져오는 것은 웹 서버의 역할

-HTTP는 바로 그 클라이언트와 서버 간의 규칙

-클라이언트의 요청을 HTTP Request

-서버의 응답을 HTTP Response라고 합니다.

 

 

HTTP Methods

HTTP 통신을 위해 아래와 같은 Methods를 제공

Method설명

GET	암호화되지 않은 형태의 데이터를 서버로 전송하는데 사용되는 가장 일반적인 방법
HEAD	GET과 유사한 방법으로 Response Body를 포함하지 않고 사용
POST	특정 양식의 데이터를 암호화하여 서버로 전송하는데 사용
PUT	특정 대상의 데이터를 갱신(Update)하는데 사용
DELETE	URL에 지정된 대상을 삭제(DELETE)하는 데 사용됩니다.

 

HTTP status code

HTTP status code(응답 상태 코드)는 특정 HTTP 요청이 성공적으로 완료되었는지 알려주는 코드

총 응답은 5개의 그룹으로 나누어진다. (상태 코드는 section 10 of RFC 2616에 정의)

• 응답: 100
• 성공적인 응답: 200
• 리다이렉트: 300
• 클라이언트 에러: 400
• 서버 에러: 500

 

API/REST API

API

Application Programming Interface의 줄임말로 다양한 응용 프로그램에서 사용할 수 있도록,

운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스

REST API 

HTTP의 요청 메서드에 응하는 서버 API와 클라이언트 간 통신의 구조가 지켜야할 좋은 방법을 명시한 것

요청 메서드의 의미, URI설계, 클라이언트의 상태에 대한 동작 등을 정의

 

요청 메서드의 의미

• GET : 리소스 정보를 얻음
• POST : 리소스를 생성
• PUT : 리소스를 생성하거나 업데이트
• DELETE : 리소스를 제거

 

Axios

• Axios는 웹 브라우저와 Node.js를 위한 HTTP 비동기 통신 라이브러리
• 백엔드와 프론트엔드 간 통신을 쉽게 하기 위해 사용되는 것으로 Ajax처럼 사용되는 것
• Axios는 Promise를 기반으로 만들어진 라이브러리
• Promise는 자바스크립트 ES6에서 비동기 처리를 위해 주로 사용되는 객체

Ajax

• Ajax란 비동기 자바스크립트란 의미로 Asynchronous JavaScript and XML의 약자
• Ajax는 브라우저가 가지고 있는 XMLHttpRequest객체를 이용하여 화면 전체를 새로 고침 하지 않고                   변경된 일부 데이터만 로드하는 비동기 처리가 가능

Axios는 Ajax와 유사하며 API를 이용한 통신을 할 때 주로 사용

 

Fetch vs Axios

Fetch와 Axios 둘 다 HTTP 요청을 처리하기 위한 자바스크립트의 라이브러리이지만 몇 가지 차이점이 존재

1. Fetch의 경우 자바스크립트에 내장되어 있기 때문에 별도의 import나 설치가 필요하지 않음. 하지만 Axios의 경우 간단하지만,  외부 모듈로 따로 패키지 설치를 해줘야 사용
2. Fetch는 일부 예전의 인터넷 익스플로러 버전에서 지원하지 않는 경우가 있어 Axios가 Fetch보다 브라우저 호환성이 뛰어남
3. Fetch에서는 지원하지 않는 JSON 자동 변환, 응답 시간 초과 설정 기능 등을 Axios에서 지원

 

Axios와 CRUD

CRUD가 Create, Read, Update, Delete의 제일 앞 문자를 하나씩 따와 만든 줄임말로 각각은 아래처럼 매칭

C : Create(생성) - POST
R : Read(조회) - GET
U : Update(수정) - PUT
D : Delete(삭제) - DELETE

 

index.html에 아래 두 스크립트를 추가해주면 axios 라이브러리를 손쉽게 사용

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 

POST

axios.post(url, data 객체)

 

GET

axios.get(url)

 

PUT

axios.put(url, data 객체)

 

DELETE

axios.delete(url)