🤓 What I Learned Today

먼저, API 를 호출하려면 세 가지 방법이 있다. fetch, Ajax, Axios 가 있다.

여기서..Axios가 뭐야?

브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리로 백엔드와 프론트엔드가 통신을 쉽게 하기위해 Ajax와 더불어 사용된다.

그럼 왜 다른 방법도 있는데 Axios를 더 많이 쓸까?

비슷비슷하지만 좀 더 많은 기능을 사용할 수 있게 해주기 때문이다. 예를 들면 타임아웃 기능도 있고 baseURL 기능 등등을 제공해주기 때문이다. 또한 nodeJS에서는 node-fetch 를 써야하기 때문에 백엔드와 통신하려면 Axios를 사용하는 게 좋다!

장점👍?

운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용,요청과 응답 데이터의 변형,HTTP 요청을 취소할수 있고 요청과 응답을 JSON 형태로 자동 변,jquery와 비교하면, 타입스크립트도 사용이 가능하고, 요청 취소도 가능하며, 통신 기능만을 전담하므로 가볍다는 것이 장점!

단점👎?

ES6 버전의 자바스크립트 문법을 사용하므로, 낮은 버전의 브라우저에서는 구동하지 않을 수도 있다는 것(하지만 그것도 바벨, 웹팩 등으로 트랜스파일을 가하면 해결)

(참고사이트)

[AXIOS] 📚 axios 설치 & 특징 & 문법 💯 정리

🤔 Code Snippets

적용해보기🤓

import axios from "axios";

const api = axios.create({
  //서버주소
  baseURl:""
  //요청헤더: 보통 무슨 타입인지 써준다.
  headers:{"Content-type":"aplication/json"}
})

// 요청 인터셉터 추가하기! 인터셉터는 해도되고 안해도 된다~!
// axios 에서 이름을 api 로 바꿔주기
//위에서 선언한 api에 인터셉터를 더해주고 싶으니 이름 바꾸기!
api.interceptors.request.use(function (config) {
  // 요청이 전달되기 전에 작업 수행
  //디버깅:콘솔로 찍어 보내고 싶은 요청을 config 로 봐주고!
console.log("request start", config)
  return config;
}, function (error) {
  // 요청 오류가 있는 작업 수행
  //디버깅:콘솔로 찍어 에러 확인
  console.log("request error",error)
  return Promise.reject(error);
});

// 응답 인터셉터 추가하기
api.interceptors.response.use(function (response) {
  // 2xx 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
  // 응답 데이터가 있는 작업 수행
  //디버깅:콘솔로 찍어 받은 데이터를 확인
  console.log("get response", response)
  return response;
}, function (error) {
  // 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
  // 응답 오류가 있는 작업 수행
//디버깅: 여기서도 콘솔로 에러 확인
console.log("response error", error)
  return Promise.reject(error);
});

export default api;

⇒

import React from "react";
import { useEffect } from "react";
import { movieAction } from "../redux/action/MovieAction";
import { useDispatch } from "react-redux";

//웹페이지가 나타나자 마자 데이터가 뿅!하고 와야할때 써야하는 훅은? useEffect ㄱ하자
const Home = () => {
  //액션을 호출하려면 dispatch가 필요!
  const dispatch = useDispatch();
  // useEffect(() => {}, []); 두 개의 아규먼트 ㄱ하자
  useEffect(() => {
    dispatch(movieAction.getMovies());
  }, []);

  return <div>Home</div>;
};

export default Home;

이렇게 사용!

🚀 Challenges Experienced

+추가 : 환경변수

.env

다른 사람에게 보여주고 싶지 않은 key 값을 넣어주는 파일

REACT_APP_API_KEY=
//공백주의!

⇒ 나중에 .gitignore 파일에 넣어주기

나중에 액션파일에 이렇게 키값을 적용해주면 된다.

import api from "../api"

const API_KEY=process.env.REACT_APP_API_KEY

function getMovies() {
  return (dispatch)=>{
    //Axios 호출
    const popularMovieApi = await api.get('~${API_KEY}~') //.http 함수
    
    //fetch 버전
    // let url =''
    // let response = await fetch(url)
    // let data = await response.json()
    }
}

export const movieAction = {
  getMovies,
};

---

+추가 : Promise.all([])

import api from "../api"

const API_KEY=process.env.REACT_APP_API_KEY
function getMovies() {
  return (dispatch)=>{
    //Axios 호출
    const popularMovie1Api =  api.get('') //.http 함수
    const popularMovie2Api =  api.get('') //.http 함수
    const popularMovie3Api =  api.get('') //.http 함수
    
    //이런식으로 API가 여러개 있을때 데이터를 한꺼번에 보여주고 싶을때
    //(단, 데이터끼리 연관있으면 await으로 기다려야한다.)

    let [popularMovie1Api,popularMovie2Api,popularMovie3Api] = await Promise.all([
      popularMovie1Api,
      popularMovie2Api,
      popularMovie3Api,
    ])

    console.log("promise all 이후에 받는 데이터?",data)
    //fetch 버전
    // let url =''
    // let response = await fetch(url)
    // let data = await response.json()
    }
}

export const movieAction = {
  getMovies,
};