Weekly I Learned Week05

👊 서버랑 통신하기

클라이언트는 서버에게 요청을 보내고, 응답을 받아온다.

👊 요청을 보낼 땐?

• 미리 약속한 주소로 (url)
• 어떤 요청을 보낸다. (type)
• 필요하다면 서버가 일하기 위해 필요한 자료와 (data)
• 누가 요청했는 지 알려주면 된다. (auth) → 토큰을 전달해주면 누가 요청했는 지 서버가 알 수 있겠죠!
  
  

👊 이전에 사용하던 방법

1. jquery의 ajax로 요청 보내기

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

    
   

👊 앞으로 사용할 방법

• Axios
  axios는 HTTP 비동기 통신 라이브러리다. React 외에도 굉장히 많이 사용하는 라이브러리
  (더 많은docs기능)참고

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
    }),

axios 객체를 전역으로 만들면, 매번 헤더나 url 전체를 설정해주지 않아도된다!
전역으로 만든 객체에서는 더 다양한 일을 할 수 있다. 요청을 보내기 전에 같은 요청이 가진 않았나 확인한다거나 요청에 실패하면 잽싸게 가로채서 재요청을 보낼수도 있다.('인터셉터'라고 부른다)

1. 전역으로 axios 객체 만들기
   • shared/Request.js

     import axios from "axios";
     
     ...
     
     const instance = axios.create({
     	baseURL: "요청보낼 서버 도메인" 
         // 요청을 www.aa.com/user로 보낸다면, www.aa.com까지 기록
     });
     
     // 가지고 있는 토큰 넣기
     // 로그인 전이면 토큰이 없으니 못 넣는다.
     // 그럴 땐 로그인 하고 토큰을 받아왔을 때 넣어준다.
     instance.defaults.headers.common["Authorization"] = USER_TOKEN; 
     
     export default instance;

2. axios 객체 사용하기
   • redux/modules/someModule.js

     import instance from "../../shared/Request";
     
     ...
     
     // 어떤 미들웨어
     const getSomeData = () => {
     	return function(dispatch){
     
     		// 만들어둔 instance에 보낼 요청 타입과 주소로 요청합니다. 
     		instance.get("/some").then((res) => {
     			//요청이 정상적으로 끝나고 응답을 받아왔다면 수행할 작업!
     		}).catch(err => {
     			// 요청이 정상적으로 끝나지 않았을 때(오류 났을 때) 수행할 작업!
     			console.log("에러 났어!");
     		})
     	}
     }

• 데이터를 넘겨주는 법
  위에서 .post()를 사용할 때 2번째 인자로 데이터를 넘겨줬다
  어떤 걸 쓸 때 몇 번째 파라미터로 넘겨줘야 한다같은 정보는
  (공식문서) 참고

   
   

1. axios 객체로 작성하는 서버 요청 함수들을 기능별로 묶어서 관리
   • src/shared/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
      }),
     
     export const postApi = {
         // e.g) 회원 가입
         getPost: () =>
             instance.get("api/posts"),
     
         // e.g) 유저 프로필 변경
         editPosts: (someData) =>
             instance.put(`api/post/${postId}`, { 
     					someData: someData,
     					someOtherData: someOtherData
      }),
     
     	

출처