[TIL42_23.2.26.] [2차 프로젝트] axios 코드 뜯어보기

Axios란?

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트다. axios는 동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있다. 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용한다. 쉽게 말해서, 백엔드와 프론트엔드가 쉽게 통신을 할 수 있도록 하기 위해서 사용한다.

axios 공식문서
inpa Dev 블로그

내 코드로 보기

const kakaoLogin = async (authCode) => {
  const getKakaoToken = await axios.get('https://kauth.kakao.com/oauth/token', {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    params: {
      grant_type: 'authorization_code',
      client_id: process.env.REST_API_KEY,
      redirect_url: process.env.REDIRECT_URI,
      code: authCode,
    },
    withCredentials: true,
  });

content-type헤더로 요청 본문의 유형을 나타냄

• application/x-www-form-urlencoded: &으로 분리되고, "=" 기호로 값과 키를 연결하는 key-value tuple로 인코딩되는 값입니다. 영어 알파벳이 아닌 문자들은 percent encoded 으로 인코딩됩니다. 따라서, 이 content type은 바이너리 데이터에 사용하기에는 적절치 않습니다.
• multipart/form-data: 바이너리 데이터에 사용
• text/plain: 일반 요청

MDN문서 HTTP 요청 메서드-POST
Difference Between form-data, x-www-form-urlencoded and raw ins Postman

grant_type: grant는 승인하다, 부여, 허가의 의미를 가진다. OAuth2 승인 방식의 종류를 의미하는듯 하다. 이건 어디서 레퍼런스를 얻어야 하지..

withCredentials: 서로 다른 도메인(크로스 도메인)에 요청을 보낼 때 요청에 credential 정보를 담아서 보낼 지를 결정하는 항목.
(credential은 신임장이라는 뜻을 지님)
여기서, credential 정보가 포함되어 있는 요청은 아래 두 가지 경우를 의미한다.

• 쿠키를 첨부해서 보내는 요청
• 헤더에 Authorization 항목이 있는 요청

따라서, 보내고자 하는 요청이 위 두 가지 항목 중 한 가지라도 포함하고 있다면 withCredentials 옵션을 true로 설정해야만 합니다.

참고링크-블로그