💡 참고 링크
https://any-ting.tistory.com/16
✨ https://github.com/Suyeon9911/TIL/issues/57
https://velog.io/@johnque/React-API-연동-v9k692txn5
https://ji-gwang.tistory.com/76
✨ https://koras02.tistory.com/48

Axios

• Node.js와 브라우저를 위한 Promise 기반 HTTP 비동기 통신 라이브러리

• 비동기로 HTTP 통신을 가능하게 해주고, REST API에 데이터를 요청할 때, promise 객체로 return 해주기 때문에 response 데이터를 다루기도 쉽다.

• 요청(Request) 응답(reply)을 JSON 형태로 자동 변경

• 설치 : npm install axios

• 모듈 불러올 때: import axios from "axios"

  📌 여기서 잠깐,,, Promise란?
  - js에서 제공하는 비동기를 간편하게 처리할 수 있게 도와주는 객체
  - 동기: 이전 작업의 실행이 끝나야 다음 작업 실행 시작 ex) 은행
  - 비동기: 이전 작업의 실행과 무관하게 다음 작업을 실행 ex) 카페 ⇒ 즉, 웹페이지를 리로드 하지 않아도 데이터를 불러와주는 방식 ⇒ 서버에 요청을 한 후 멈추는 것이 아닌 그 프로그램을 계속 돌아간다는 의미
  - promise는 성공할 수도, 실패할 수도 있음.

  • promise 성공할 때는 resolve 함수 호출

    const successPromise = new Promise((resolve, reject) => {
        setTimeout(() => {
        resolve(1);
        }, 1000);
    });
    // resolve를 호출할 때 특정 값을 파라미터로 넣어주면
    // 작업이 끝나고 나서 이 값을 사용할 수 있다.
    // 작업이 끝나고 나서 또 다른 작업을 해야할 때는
    // Promise 뒤에 .then()을 붙여 사용
    sucessPromise.then( n => {
        console.log(n);
    });```

  • promise 실패할 때는 reject 함수 호출

    const failPromise = new Promise((resolve, reject) => {
      setTimeout(() => {
        reject(newError());
      }, 1000);
    });
    failPromise
      .then( n => {       
      console.log(n);
    	});
      .catch( error => {       // 실패했을 시 수행할 작업(.catch)
        console.log(error);
      });```

HTTP Method(get, post, delete, update)

• HTTP method 를 통해 서버와 클라이언트의 통신을 할 경우에 사용해서 상대가 어떤 통신을 요청하는지, 그리고 내가 어떤 통신을 요청해야 하는지 정할 수 있음
• 요청 메소드 명령어 : 명령어 메소드를 사용 시 url, method, data 속성을 config에서 지정할 필요가 없음

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

📌 GET - 데이터 조회

• 입력한 url이 존재하는 자원에 요청을 보냄, 데이터를 받아오는 방식
• 서버에서 어떤 데이터를 가져와서 보여줄 것인가를 정하는 용도
• 주소에 있는 쿼리스트링을 활용해 정보를 전달하는 것
  • GET 메서드는 값이나 상태등을 직접 바꿀 수 없다.

// 문법 코드
axios.get(url, [,config])

import axios from "axios"

// 지정된 ID를 가진 유저에 대한 요청
axios.get('/user?ID=12345')
  .then(function (response) {
    // 성공 핸들링
    console.log(response);
  })
  .catch(function (error) {
    // 에러 핸들링
    console.log(error);
  })
  .then(function () {
    // 항상 실행되는 영역
  });

// 예시 코드
import axios from "axios"

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

// 응답은 json형태로 넘어옴
[
  { id: 1, pw: '12345', name: 'jungho' },
  { id: 2, pw: '12345', name: 'sungJun' },
  { id: 3, pw: '12345', name: 'hyunJi' },
]

📌 POST - 데이터 등록

• 새로운 리소스를 생성(create)할 때 사용
• 로그인, 회원가입 등 사용자가 생성한 파일을 서버에다 업로드할 때 사용
  • POST를 사용하면 주소창에 쿼리스트링이 남지 않고 GET보다 안정

// 문법 코드
axios.post("url주소",{
  data객체
},[,config])

• 두번째 인자[data객체]는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달

// POST 요청 생성
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 여러 동시 POST 요청 생성
function getUserAccount() {
	return axios.get('/user/12345');
}

function getUserPermissions() {
	return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
	.then(function (results) {
		const acct = results[0];
		const perm = results[1];
});

// 예제 코드
axios.post( 'url', 
 {  // 본문으로 보낼 데이터
   username: 'Hayeong',
   id: 'shy8957@naver.com'
 },
 {  // 
   headers: {
      'Content-type': 'application/json',
      'Accept': 'application/json'
   }
  }
 ) 
   .then((response) => {console.log(response.data); })
   .catch((response) => {console.log('Error!') });

📌 DELETE - 데이터 제거

• REST 기반 API 프로그램에서 DB에 저장된 내용을 삭제하는 목적
• HTML Form 태그에서 기본적으로 지원되는 HTTP 메서드가 아니다.
• Delete 메서드는 서버에 있는 DB의 내용을 삭제하는 것을 주 목적으로 두번째 인자 아예 전달X

// 문법 코드
axios.delete(url,[,config]);

// 예제 코드
axios.delete('http://localhost:3000/api/user/delete',{
	params: {
		user_id: 1
	}
})
//성공시 then 실행
.then(function (response) {
	console.log(response);
})
//실패 시 catch 실행
.catch(function (error) {
	console.log(error);
});

📌 PUT, PATCH - 데이터 수정

• REST 기반 API 프로그램에서 데이터베이스에 저장된 내용을 갱신
• 서버 DB 내용 변경하는 것을 주 목적

// 문법 코드
axios.put(url[, data[, config]])

• 전체 데이터 수정

//전체 데이터 수정
axios.put('http://localhost:3000/api/users/update', {
  id: 1,
  name: '개발이 취미인 사람',
})
//성공시 then 실행
.then(function (response) {
	console.log(response);	
})
//실패 시 catch 실행
.catch(function (error) {
	console.log(error);
});

• 특정 데이터 수정

//특정 데이터 수정
axios.patch(`http://localhost:3000/api/user/update/${1}`, {
	name: '개발이 취미인 사람'
})
//성공시 then 실행
.then(function (response) {
	console.log(response);
})
//실패 시 catch 실행
.catch(function (error) {
	console.log(error);
});

---

별첨

요청 Config 설명

다음은 요청을 만드는 데 사용할 수 있는 config 옵션들이다. url은 필수이고, method를 지정하지 않으면 GET 방식이 기본값이다.

{
  // `url`은 요청에 사용될 서버 URL입니다.
  url: '/user',

  // `method`는 요청을 생성할때 사용되는 메소드입니다.
  method: 'get', // 기본값

  // `url`이 절대값이 아닌 경우 `baseURL`은 URL 앞에 붙습니다.
  // 상대적인 URL을 인스턴스 메서드에 전달하려면 `baseURL`을 설정하는 것은 편리합니다.
  baseURL: 'https://some-domain.com/api',

  // `transformRequest`는 요청 데이터를 서버로 전송하기 전에 변경할 수 있게 해줍니다.
  // 이것은 'PUT', 'POST', 'PATCH', 'DELETE' 메소드에서만 적용됩니다.
  // 마지막 함수는 Buffer, ArrayBuffer, FormData 또는 Stream의 인스턴스 또는 문자열을 반환해야 합니다.
  // 헤더 객체를 수정할 수 있습니다.
  transformRequest: [function (data, headers) {
    // 데이터를 변환하려는 작업 수행

    return data;
  }],

  // `transformResponse`는 응답 데이터가 then/catch로 전달되기 전에 변경할 수 있게 해줍니다.
  transformResponse: [function (data) {
    // 데이터를 변환하려는 작업 수행

    return data;
  }],

  // `headers`는 사용자 지정 헤더입니다.
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params`은 요청과 함께 전송되는 URL 파라미터입니다.
  // 반드시 일반 객체나 URLSearchParams 객체여야 합니다.
  // 참고: null이나 undefined는 URL에 렌더링되지 않습니다.
  params: {
    ID: 12345
  },

  // `paramsSerializer`는 `params`의 시리얼라이즈를 담당하는 옵션 함수입니다.
  // (예: https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function (params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

  // `data`는 요청 바디로 전송될 데이터입니다.  
  // 'PUT', 'POST', 'PATCH', 'DELETE' 메소드에서만 적용 가능합니다.
  // `transformRequest`가 설정되지 않은 경우 다음 타입 중 하나여야 합니다.
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 브라우저 전용: FormData, File, Blob
  // - Node 전용: Stream, Buffer
  data: {
    firstName: 'Fred'
  },

  // 바디로 전송하는 데이터의 대안 문법
  // POST 메소드
  // 키가 아닌 값만 전송됩니다.
  data: 'Country=Brasil&City=Belo Horizonte',

  // `timeout`은 요청이 시간 초과되기 전의 시간(밀리초)을 지정합니다.
  // 요청이 `timeout`보다 오래 걸리면 요청이 중단됩니다.
  timeout: 1000, // 기본값은 `0` (타임아웃 없음)

  // `withCredentials`은 자격 증명을 사용하여 사이트 간 액세스 제어 요청을 해야 하는지 여부를 나타냅니다.
  withCredentials: false, // 기본값

  // `adapter`'은 커스텀 핸들링 요청을 처리할 수 있어 테스트가 쉬워집니다.
  // 유효한 Promise 응답을 반환해야 합니다. (lib/adapters/README.md 참고)
  adapter: function (config) {
    /* ... */
  },

  // `auth`는 HTTP Basic 인증이 사용되며, 자격 증명을 제공합니다.
  // `auth`를 사용하면, `Authorization` 헤더가 설정되어 `headers`를 사용하여 설정한 
	// 기존의 `Authorization` 사용자 지정 헤더를 덮어씁니다.
  // 이 파라미터를 통해 HTTP Basic 인증만 구성할 수 있음을 참고하세요.
  // Bearer 토큰 등의 경우 `Authorization` 사용자 지정 헤더를 대신 사용합니다.
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

  // `responseType`은 서버에서 받는 데이터의 타입입니다.
  // 옵션: 'arraybuffer', 'document', 'json', 'text', 'stream'
  // 브라우저 전용: 'blob'
  responseType: 'json', // 기본값

  // `responseEncoding`은 응답 디코딩에 사용할 인코딩입니다.
  // Node.js 전용
  // 참고: 클라이언트 사이드 요청 또는 `responseType`이 'stream'이면 무시합니다.
  responseEncoding: 'utf8', // 기본값

  // `xsrfCookieName`은 xsrf 토큰 값으로 사용할 쿠키의 이름입니다.
  xsrfCookieName: 'XSRF-TOKEN', // 기본값

  // `xsrfHeaderName`은 xsrf 토큰 값을 운반하는 HTTP 헤더의 이름입니다.
  xsrfHeaderName: 'X-XSRF-TOKEN', // 기본값

  // `onUploadProgress`는 업로드 진행 이벤트를 처리합니다.
  // 브라우저 전용
  onUploadProgress: function (progressEvent) {
    // 업로드 진행 이벤트 작업 수행
  },

  // `onDownloadProgress`는 다운로드로드 진행 이벤트를 처리합니다.
  // 브라우저 전용
  onDownloadProgress: function (progressEvent) {
    // 다운로드 진행 이벤트 작업 수행
  },

  // `maxContentLength`는 node.js에서 허용되는 http 응답 콘텐츠의 최대 크기를 바이트 단위로 정의합니다.
  maxContentLength: 2000,

  // `maxBodyLength`는 허용되는 http 요청 콘텐츠의 최대 크기를 바이트 단위로 정의합니다.
  // Node.js 전용
  maxBodyLength: 2000,

  // `validateStatus`는 지정된 HTTP 응답 상태 코드에 대한 Promise를 이행할지 또는 거부할지 여부를 정의합니다. 
  // 만약 `validateStatus`가 true를 반환하면(또는 'null' 또는 'undefined'으로 설정) Promise는 이행됩니다.
  // 그렇지 않으면, 그 Promise는 거부될 것이다.
  validateStatus: function (status) {
    return status >= 200 && status < 300; // 기본값
  },

  // `maxRedirects`는 node.js에서 리디렉션 최대값을 정의합니다.
  // 0으로 설정하면 리디렉션되지 않습니다.
  maxRedirects: 5, // 기본값

  // `socketPath`는 node.js에서 사용될 UNIX 소켓을 정의합니다.
  // 예: '/var/run/docker.sock' 도커 데몬에 요청을 보냅니다.
  // 오직 `socketPath` 또는 `proxy`만 지정할 수 있습니다.
  // 둘 다 지정되면 `socketPath`가 사용됩니다.
  socketPath: null, // 기본값

  // `httpAgent`와 `httpsAgent`는 각각 node.js에서 http 및 https 요청을 수행할 때 사용할 사용자 지정 에이전트를 정의합니다.
  // 이렇게 하면 기본적으로 활성화되지 않은 `keepAlive`와 같은 옵션을 추가할 수 있습니다.
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // `proxy`는 프록시 서버의 호스트이름, 포트, 프로토콜을 정의합니다.
  // 기존의 `http_proxy`와 `https_proxy` 환경 변수를 사용하여
  // 프록시를 정의할 수도 있습니다.
  // 프록시 구성에 환경 변수를 사용하는 경우, 'no_proxy' 환경 변수를 
  // 쉼표로 구분된 프록시가 되지 않는 도메인 목록으로 정의할 수도 있습니다.
  // `false`를 사용하면 프록시를 사용하지 않고, 환경 변수를 무시합니다.
  // `auth`는 프록시에 연결하는데 HTTP Basic auth를 사용해야 함을 나타내며, 
  // 자격 증명을 제공합니다. 그러면 `Proxy-Authorization` 헤더가 설정되고,
  // `headers`를 사용하여 기존의 `Proxy-Authorization` 사용자 지정 해더를 덮어씁니다.
  // 만약 프록시 서버가 HTTPS를 사용한다면, 프로토콜을 반드시 `https`로 설정해야 합니다.
  proxy: {
    protocol: 'https',
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },

  // `cancelToken`은 요청을 취소하는 데 사용할 수 있는 취소 토큰을 지정합니다.
  // (자세한 내용은 요청 취소 섹션 참조)
  cancelToken: new CancelToken(function (cancel) {
  }),

  // `decompress`는 응답 바디의 자동 압축 해제 여부를 나타냅니다.
  //  `true`로 설정하면, 압축 해제된 모든 응답에서 'content-encoding' 헤더도 제거됩니다.
  // Node.js 전용 (XHR은 압축 해제할 수 없습니다)
  decompress: true // 기본값

}

---

응답 스키마

• then() 안에 사용

{
  // `data`는 서버가 제공하는 응답입니다.
  data: {},

  // `status`는 HTTP 상태 코드입니다.
  status: 200,

  // `statusText`는 HTTP 상태 메시지입니다.
  statusText: 'OK',

  // `headers`는 HTTP 헤더입니다.
  // 모든 헤더 이름은 소문자이며, 괄호 표기법을 사용하여 접근할 수 있습니다.
  // 예시: `response.headers['content-type']`
  headers: {},

  // `config`는 요청을 위해 `Axios`가 제공하는 구성입니다.
  config: {},

  // `request`는 이번 응답으로 생성된 요청입니다.
  // 이것은 node.js에서 마지막 ClientRequest 인스턴스 입니다.
  // 브라우저에서는 XMLHttpRequest입니다.
  request: {}
}

axios.get('/user/12345')
  .then(function (response) {
    console.log(response.data);          // 서버가 제공하는 응답 출력
    console.log(response.status);        // HTTP 상태 코드 출력
    console.log(response.statusText);    // HTTP 상태 메시지 출력
    console.log(response.headers);       // HTTP 헤더 출력
    console.log(response.config);        // 
  });

---

에러 핸들링

https://axios-http.com/kr/docs/handling_errors

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 요청이 전송되었고, 서버는 2xx 외의 상태 코드로 응답했습니다.
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 요청이 전송되었지만, 응답이 수신되지 않았습니다. 
      // 'error.request'는 브라우저에서 XMLHtpRequest 인스턴스이고,
      // node.js에서는 http.ClientRequest 인스턴스입니다.
      console.log(error.request);
    } else {
      // 오류가 발생한 요청을 설정하는 동안 문제가 발생했습니다.
      console.log('Error', error.message);
    }
    console.log(error.config);
  });