Elice) Axios Ajax Api HTTP CRUD

 

---

 

 

1. Axios

 

Axios는 웹 브라우저와 Node.js를 위한 HTTP 비동기 통신 라이브러리이다.

따라서 백엔드와 프론트엔드 간 통신을 쉽게 하기 위해 사용되며, 백엔드와 프론트엔드의 연결을 위하여 아주 중요하다.

 

만약 이 비동기 통신 라이브러리를 사용하지 않으면 모든 코드가 순차적으로 처리되어야 하므로 코드 작성이 복잡해진다.

 

 

Fetch VS Axios

 

1. Fetch는 자바스크립트에 내장되어 있어 별도의 설치가 필요없다

2. Fetch는 일부 예전의 인터넷 익스플로러 버전에서 지원하지 않는다.

3. Fetch에서 지원하지 않는 JSON 자동 변환, 응답 시간 초과 설정 기능 등을 Axios에서 지원해준다.

 

따라서 당장은 Fetch보다는 Axios를 익히지만 경우에 따라 두 가지를 사용해야 할 경우가 생긴다.

 

---

 

 

2. Ajax

 

Asynchronous JavaScript and XML

 

브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 화면 전체를 새로 고침 하지 않고

변경된 일부 데이터만 로드하는 비동기 처리가 가능하다.

 

 

 

---

 

 

 

3. API

 

Application Programming Interface

 

다양한 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스로

프로그램과 프로그램을 연결해 주는 다리의 역할을 한다.

 

따라서 공공기관등의 Open API를 이용하면 여러 프로그램들을 만들 수 있다.

 

 

---

 

 

4. HTTP

 

Hypertext Transfer Protocol

 

Hypertext는 컴퓨터 화면이나 전자 기기에서 볼 수 있는 데이터, 다른 데이터와 연결될 수 있는 주소를 참조

Protocol은 규약, 혹은 규칙

 

따라서 HTTP란 URL을 통해 정보를 요청하고 요청한 정보를 전달 받는것에 있어서 정한 규칙으로

우리는 URL을 통하여 웹페이지를 이동할때 항상 HTTP를 지키고 있다.

 

 

---

 

 

 

5. CRUD

 

C : Create(생성) - POST

R : Read(조회) - GET

U : Update(수정) - PUT

D : Delete(삭제) - DELETE

 

axios.post(url, data 객체) // 새로운 자원을 생성 POST

axios.get(url) // 자원을 요청 GET

axios.get(url) // 자원을 요청 GET

axios.get(url) // 자원을 요청 GET

 

 

---

 

 

 

위의 내용들은 프론트엔드와 백엔드를 연결 시키기 위해 아주 중요한 개념들이므로 간단하게 정리하고 넘어간다.

백엔드 지향으로 프로그래밍을 공부하고 있지만 가능한 프론트엔드의 지식도 넓히고 싶기 때문에

해당 내용들은 추후에 좀 더 깊게 다루도록 한다.