02 - 20 일지

특이사항

액시오스

http를 사용해 서버와 통신하기 위한 패키지

 

yarn add axios

 

액시오스는 GET요청을 쉽게 도와주는 패키지일 뿐이므로, 어떤 데이터(path variable 혹은 query)를 어떻게 요청하는지에 대한 방식은 차후 만들어낼 API 명세서를 봐야한다.

 

구조는

GET

  const [Test, setTest] = useState(null);
 
    // axios get을 하는 함수를 생성한다.
    const fetchTest01 = async () =>{
        const { data } = await axios.get("http://localhost:3001/Test01")
        setTest01(data)
    }
    useEffect (() => {
        //마운팅이 될 때
        fetchTest01()}, 
        //의존배열 부분
        [])
    console.log(Test01)

로 가져온다. await는 response를 할 때 까지 기다리는 명령어다. 이걸 잊으면 통신이 꼬여서 어디서 문제인지 파악하기도 힘들어진다.

그렇다면 해당 데이터의 특정 값만 가져오려면 어떻게 해야할까?

 

POST

axios.post(url[, data[, config]]) // POST

해체는 조립의 역순이라지만 통신 쪽에선 해당되는 부분이 아닌 것 같다. POST는 서버에 데이터를 추가할 때 쓰인다. 다만 이 요청방식에 대한 로직은 백엔드에서 만들기 때문에 추가 외에 다른 용도로 쓰일 수도 있다.

  const onSubmitHandler = async(todo) => {
  await axios.post("http://localhost:3001/todos", todo);

의 구조다. 주소를 부르고, 값을 적어넣는 것이다.

 

DELETE

딜리트는 저장된 데이터의 삭제를 요청하는 명령어다. 사용법은

   axios.delete(`http://localhost:3001/todos/${todoId}`);

로 작동한다. 주의할 점은 백틱으로 지정해야한다.

 

PATCH

패치는 보통 데이터를 수정해야하는 상황에서 쓰인다. BE에서 POST를 활용한 수정기능을 만들 수도 있으니 반드시 쓰이는 것은 아니다.

    axios.patch(`http://localhost:3001/todos/${todoId}`, edit);

액시오스 interceptor

프로젝트의 규모가 커짐에 따라 이를 관리하기 위한 추가적 조치이다. 두 상황에서 흐름을 가로채 코드 상의 관여를 해줄 수 있게 해준다. 요청 헤더 추가, 인증 관리, 로그 관련, 에러 체크 등의 부분에서 빛을 발한다.

사용법은 src - axios - api.js를 만들고

 
const instance = axios.create({
  baseURL: "http://localhost:3001",
});
 
instance.interceptors.request.use(
  function (config) {
    // 요청을 보내기 전 수행
    console.log("인터셉트 요청 성공!");
    return config;
  },
  function (error) {
    // 오류 요청을 보내기 전 수행
    console.log("인터셉트 요청 오류!");
    return Promise.reject(error);
  }
);
 
instance.interceptors.response.use(
  function (response) {
    console.log("인터넵트 응답 받았어요!");
    // 정상 응답
    return response;
  },
 
  function (error) {
    console.log("인터셉트 응답 못받았어요...ㅠㅠ");
    return Promise.reject(error);
  }
);
 
 

로 기본 액시오스를 임포트하고 기본 URL인스턴스를 생성한다. 리퀘스트와 리스폰스에 각각 콜백 함수가 2개 들어간다.

 

Thunk

리덕스 미들웨어의 한 종류이다. 우선 미들웨어는 리덕스에서 dispatch를 하고 이를 action이 리듀서로 전달된 다음, 리듀서는 새로운 state로 반환하는 구조를 띄는 작동 방식에서 액션과 리듀서 사이에 끼어들어 추가 작업을 진행하는 장치이다. 예를 들어 +1 버튼을 눌렀을 때 3초 기다렸다가 +1이 진행되게 하려면 미들웨어를 거쳐야한다. 액션은 디스패치를 받자마자 리듀서로 가져가서 작업을 하고 새 state를 반환하기 때문이다.

유니티로 따지면 코루틴같은 존재인가? 그거 비슷한 것이면 좋겠군.