<aside> 💡 서버랑 통신하기 클라이언트는 서버에게 요청을 보내고, 응답을 받아온다.

</aside>

요청을 보낼 땐?

이전에 사용하던 방법

  1. jquery의 ajax로 요청 보내기

    $.ajax({
	url: "", // 미리 약속한 주소
	type: "POST", // 어떤 요청을 보낼 지 (GET, POST, PUT, DELETE 등!)
	data: {cat_name: "perl"}, // 서버가 필요로 하는 데이터를 넘겨주고
	headers: {
		Authorization: 'Bearer ' + token // 누가 요청했는 지 알려준다. (토큰 전달!)
	}
});

앞으로 사용할 방법

<aside> 💡 Axios axios는 HTTP 비동기 통신 라이브러리입니다. React 외에도 굉장히 많이 사용하는 라이브러리예요. 🙂

제가 설명드릴 기본적인 사용법 외에도 많은 기능을 가지고 있으니, docs(링크)도 읽어보면 굳!

</aside>

  1. 설치하기

    yarn add axios

  2. 요청 보내기

    import axios from "axios";

// axios는 axios.요청타입으로 요청을 보낼 수 있어요. 이 방식을 별칭 메서드라고 불러요.
// 예시)
// axios.get(url, config)
// axios.post(url, data, config)

// 어떤 요청을 보낼 지, 별칭 메서드 사용
axios.post('/cat', // 미리 약속한 주소
	{name: 'perl', status: 'cute'}, // 서버가 필요로 하는 데이터를 넘겨주고,
	{headers: { 'Authorization': '내 토큰 보내주기' },} // 누가 요청했는 지 알려줍니다. (config에서 해요!)
).then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

  3. axios 객체를 생성했다면 이를 활용해서 기능별 api 객체도 만들어 관리해보세요.

    export const authApi = {
    // e.g) 회원 가입
    signup: someData =>
        instance.post("api/user", {
					someData: someData,
					someOtherData: someOtherData
        }),

    // e.g) 유저 프로필 변경
    editUserProfile: (someData) =>
        instance.put(`api/user/${userId}`, { 
					someData: someData,
					someOtherData: someOtherData
 }),

+) 조금 더 잘 써먹기

<aside> 💡 axios 객체를 전역으로 만들면, 매번 헤더나 url 전체를 설정해주지 않아도 됩니다!

+) 전역으로 만든 객체에서는 더 다양한 일을 할 수 있어요. 요청을 보내기 전에 같은 요청이 가진 않았나 확인한다거나 요청에 실패하면 잽싸게 가로채서 재요청을 보낼수도 있답니다.(인터셉터라고 해요!) 😉

</aside>

  1. 전역으로 axios 객체 만들기

  2. axios 객체 써먹기

    <aside> 💡 앗, 데이터를 넘겨주는 법은 어떻게 하면 좋을까요? 맞아요! 위에서 .post()를 사용할 때 2번째 인자로 데이터를 넘겨주었죠! 😄  어떤 걸 쓸 때 몇 번째 파라미터로 넘겨줘야 한다같은 정보는 모두 공식문서에 있어요. 공식문서를 꼭 읽고 axios를 잘 써먹어봅시다! (링크)

    </aside>

  3. axios 객체로 작성하는 서버 요청 함수들을 기능별로 묶어서 관리해보세요.

기타 예시

가독성 좋은 코드 구조와 axios intercepter 사용 방법 참고 자료