[JS] axios get post 사용하기.... (230214 수정)

Axios

• 브라우저, Node.js를 위해 만들어진 Promise API를 활용하는 HTTP 비동기 통신 라이브러리
• 설치하기
  • npm install axios 또는 yarn add axios
• 사용하기 

import React, { useState } from 'react';
import axios from 'axios';

---

axios.get()

• url, config
  • config 안에 header를 넣으면 됨
• 예시 코드

const config = {
	headers: { 키값 : '보낼 변수' },
};

const 함수명 = async () => {
	await axios
		.get('요청 보낼 백 url', config)
		.then((res) => {
			// 응답 성공 시 실행할 로직
			console.log(res);
		})
		.catch((err) => {
			// 응답 실패 시 실행할 로직
			console.log(err);
		});
};

---

axios.post()

• url, data, config
  • 보낼 데이터가 없을 때도 꼭 빈 문자열을 보내줘야 함
• 서버에 JSON 전송
  • 객체 타입의 data 넣고 const data = { 키: '값', };
  • config에 타입 명시 const config = { "Content-Type": "application/json" };
• 예시 코드

const data = {
	키: '값',
};
const config = { "Content-Type": "application/json" };

const 함수명 = async () => {
	await axios
		.post('요청 보낼 백 url', data, { headers : config })
		.then((res) => {
			// 응답 성공 시 실행할 로직
			console.log(res);
		})
		.catch((err) => {
			// 응답 실패 시 실행할 로직
			console.log(err);
		});
};

---

※ GET과 POST

GET

• 클라이언트에서 서버로 어떠한 리소스로부터 정보를 요청하기 위해 사용 (데이터를 요청할 때만 사용)
  • ex) 게시물 조회
• 방식
  • 요청 : URL 주소 끝에 파라미터로 포함되어 전송됨 (querystring)
  • 서버에서 파라미터 명으로 파라미터 값을 전달받을 수 있음
• 특징
  • 길이 제한 있음 (브라우저마다 다름)
  • 중요한 정보를 다루면 안됨
    • 파라미터에 모두 노출되기 때문
  • 캐시됨
  • 브라우저 히스토리에 남음
  • 북마크됨

POST

• 클라이언트에서 서버로 리소스를 생성하거나 업데이트하기위해 데이터를 보낼 때 사용
  • ex) 게시글 작성
• 방식
  • 전송 : 전송할 데이터를 HTTP 메시지 body 부분에 담아서 보냄
    • type은 Content-Type 으로 지정 가능
    • ex) JSON은 const config = { "Content-Type": "application/json" };
• 특징
  • POST를 통한 데이터 전송은 보통 HTML form을 통해 서버로 전송됨
  • 길이 제한 없음
    • 용량이 큰 데이터 보낼 때 사용
  • 데이터가 외부로 드러나지 않음
    • 보안이 필요한 부분에 사용
    • 그렇지만 데이터를 암호화하지 않으면 body의 데이터도 결국 볼 수 있는 건 똑같음
  • 캐시되지 않음
  • 브라우저 히스토리에 남지 않음
  • 북마크되지 않음