클라이언트와 서버연결 -axios

React는 효율적인 UI 구현을 위한 라이브러리입니다. HTTP Client(HTTP 상에서 커뮤니케이션 하는 자바기반 컴포넌트)
를 내장하고 있는 Angular와 다르게, 리액트에는 따로 내장하는 내장클래스가 존재하지 않습니다.

 

따라서 리액트에서 AJAX(비동기 웹 애플리케이션) 를 구현하기 위해서 Javascript 내장 객체인 XMLRequest를 사용하거나, 다른 HTTP Client를 사용해야 합니다.

 

그렇다면 어떤 HTTP Client 라이브러리를 사용하는게 좋을까요? React와 함께 쓰면 좋은 HTTP Client라이브러리는 많지만, 여기서는 현재 리액트에서 가장 많이 사용하고 있는 Fetch API를 비교하면서 Axios라이브러리가 무엇인지 알아봅시다.

1-1. AJAX (Asynchronous Javascript And XML)

 AJAX란, Javascript의 라이브러리중 하나로 Asynchronous(비동기) Javascript(자바스크립트) And 
 Xml(비동기식 자바스크립트와 xml)의 약자입니다. 브라우저가 가진 XMLHttpRequest객체를 이용한 

 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이며,

 Javascript를 사용한 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.

 =>정리하면, 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다.

 

  # axios VS Fetch API

일반적으로 자바스크립트에서 API를 연동하기 위해서는 보통  Fetch API를 사용하곤 했습니다. 리액트도 자바스크립트

bulit-in 라이브러리중 하나인 Fetch API라는 훌륭한 API 연동 모듈을 사용합니다.

 

하지만 Fetch API 에서는 자바스크립트 built-in 라이브러리라는 특성 때문에 많은사람들이 axios를 사용하는 것을 선호합니다.

 

# Fetch API

// fetch API
const url = 'http://localhost:3000/test'
const options = {
  method: 'POST',
  header: {
     'Accept' : 'application/json',
     'Content-Type':'application/json';charset=UTP-8'
  },
  body:JSON.stringify({
     name: 'jungho',
     age: 23
  })
  
  fetch(url.options)
     .then(response => console.log(response))
}
출처: https://koras02.tistory.com/48 [Koras02코딩웹:티스토리]

# axios 

// axios
const option = {
   url = 'http://localhost:3000/test'
   method:'POST',
   header: {
     'Accept':'application/json',
     'Content-Type': 'application/json';charset=UTP-8'
   },
   data: {
      name: 'jungHo',
      age: 23
   }
   
   axios(options)
      .then(response => console.log(response))
}
출처: https://koras02.tistory.com/48 [Koras02코딩웹:티스토리]

Axios는 브라우저, Node.js를 위해서 만들어진 Promise API를 활요하는 HTTP 비동기 통신 라이브러리 입니다.

(백엔드와 프론드엔드간에 통신을 위해서 만들어진 AJAX도 더불어 사용하기도 합니다.)

# Axios의 특징

• Axios는 운영환경에 따라서 브라우저간 XMLHttpRequest 객체 또는 Node.js의 HTTP API를 사용한다.
• Promise(ES6) API를 사용
• 요청(Request) 응답 (reply)을 JSON 형태로 자동 변경

# HTTP Methods

클아이언트가 웹서버에게 사용자 요청의 목적/종류를 알려주는 수단

 

이 Method중에서 Axios로 통신하면서 가장 많이 사용되는 메소드들을 정리해보았습니다.

1. GET

   
   GET: 입력한 url이 존재하는 자원에 요청을 보낸다.

문법 코드

axios.get(url,[,config])

 Q) Get 방식은 데이터를 받아오는 방식인데, 로그인 구현할때도 Get을 사용하는가?

 

 GET 방식으로 로그인을 구현했을때 웹 사이트 주소창의 형태를 보면 이러한 형태가 나옴

www.server.com/login?id=Jung&pw=12345  // 실제로 없는 서버이고 예로 추가한 사이트

웹 사이트 뒤에 쿼리스트링이 붙여진 것을 확인할 수 이싿.

 

GET방식은 서버에서 어떤 데이터를 가져와서 보여줄것인가를 정하는 용도로 쓴다.

주소에 있는 쿼리스트링을 활용해 정보를 전달하는 것이고 GET 메서드는 값이나 상태등을 직접 바꿀수 없다.

 

// 예로 만든 axios 구조
import axios from "axios"

axios.get('https://localhost:3000/login/user')
  .then((Response)=>{console.log(Response.data)})
  .catch((Error)=>{console.log(Error)})

[
  { id: 1, pw: '12345', name: 'jungho' },
  { id: 2, pw: '12345', name: 'sungJun' },
  { id: 3, pw: '12345', name: 'hyunJi' },
]

응답은 json 형태로 넘어온다.

 

2. POST

  POST : 새로운 리소스를  생성(create)할 때 사용한다.

문법 

axios.post("url주소",{
  data객체
},[,config])

POST 메서드의 두 번째  인자는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달한다.

  

 Q) POST 방식은 데이터를 받아오는 방식인데, 로그인 구현할때도 Get을 사용하는가?

 

로그인, 회원가입 등  사용자가 생성한 파일을 서버에다가 업로드할때 사용한다.

Post를 사용하면 주소창에 쿼리스트링이 남지 않고 GET보다 안전하다.

 

예제 코드

axios.post( 'url', 
 {
   contact: 'JungHo',
   email: 'wjdgh0727@gmail.com'
 },
 {
   headers: {
      'Content-type': 'application/json',
      'Accept': 'application/json'
   }
  }
 ) 
   .then((response) => {console.log(response.data); })
   .catch((response) => {console.log('Error!') });

3. Delete

 
   REST 기반 API 프로그램에서 데이터베이스에 저장된 내용을 삭제하는 목적으로 사용된다.   

문법

axios.delete(url,[,config]);

Delete메서드는 HTML Form태그에서 기본적으로 지원되는 HTTP 메서드가 아니다.

 

Delete메서드는 서버에 있는 데이터베이스의 내용을 삭제하는 것을 주 목적으로 하기에 두 번째 인자를 아예 전달하지 않는다.

 

예제 코드

axios.create('/thisisExample/list/30").then(function(response){
  console.log(response);
   }).catch(function(ex) {
    throw new Error(ex)
 }

4. PUT

  
   REST 기반 API 프로그램에서 데이터베이스에 저장된 내용을 갱신하는 목적으로 사용된다.

문법

 

axios.put(url[, data[, config]])

PUT 메서드는 HTML Form 태그에 기본적으로 지원하는 HTTP 메서드는 아니다.

 

PUT 메서드는 서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적으로 한다.

 

---

실습해보기

 

1.axios 라이브러리 설치

npm i axios --save

2.proxy 설정 하기

포트가 다른 부라우저 끼리 통신을 하기위한 방법(3000포트의내용을 5000포트에 보내기)

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

=>/api 요청 같은 경우에는 5000번 포트로 보내겠다 라는뜻

proxy middleware 설치해주기

 

3.클라이언트 -서버 연결후 요청해보기

서버에있는 text를 클라이언트로 옮겨줘 보았습니다

 

4.body - parsor 사용해서 클라이언트 -서버 데이터 보내기

 

client 에서 server보낸 body를 추적하기 위해서 body - parsor 가 필요함

 

app.use(express.json())
app.use(express.urlencoded({extended:true}));

서버위에 코드를 입력 해주면 됩니다

 

5.몽고 db에서 데이터 만들기

스키마만들기

 DB내에 어떤 구조로 데이터가 저장되는가를 나타내는 데이터베이스 구조를 스키마라고 합니다.

const mongoose = require("mongoose")

const postSchema = new mongoose.Schema({
    title : String,
    content : String,
  });

  const Post = mongoose.model('Post', postSchema);

 

 

데이터베이스 이름 변경 가능

컬렉션 이름 변경 가능