WIL

프론트엔드의 axios란?? 쉽게 알아보아요 + 5주차 회고

MotherCarGasoline 2022. 6. 9. 08:41

안녕하세요!! 미니프로젝트를 시작하면서 5주차가 마무리 되었습니다!

항해이자 개발을 시작하면서 이렇게 블로그를 꾸준히 써본건 처음인데. 슬슬 틀도 좀 잡히고 매일 써야겠다는 생각이 드는건 처음인것 같습니다!! 좋은 정보 드릴 수 있도록 노력해볼게요~

오늘 알아볼 것은 사이트를 만들면서 백엔드에 필요한 데이터를 요청하는 라이브러리  'axios' 라고 하구요

저도 처음에 사용하려 할 때 되게 당황했으니 모르는 눈높이에서 설명해보겠습니담, 시작하시죠!

 

Axios란?

  • 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.
  • 통신을 쉽게하기 위해 ajax, fetch와 많이 사용했지만 요새는 편리를 위해서 axios의 인기가 많다.

 

그럼 뭐가 더 편리한지 다른 블로그에서 가져와 보았다

 

 

너무 많다. 정리하자면 axios는 별도의 설치가 필요하다는 단점이 있지만, 그것을 커버할 만한 fetch보다 많은 기능지원과 문법이 조금이나마 간소화 된다는 장점이 있다!

따라서, 간단하게 사용할때는 fetch, 확장성을 두고 커질 사이트를 봤을때는 axios를 좋다고 본다.

 

https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9

위 사진과 링크에 문법구성에 대하여 정말 자세히 나와있다! 꼭 링크 들어가서 확인해 보시길 바랍니다

 

 

 

패키지 설치 및 임포트!

설치방법은 먼저 npm 과  yarn 입니다! 

$ npm install axios

$ yarn add axios


import axios from 'axios';

그리고 작성 하실때 axios만의 자동완성과 파라미터 타이핑을 원하시면 아래 변수를 설정해주세요!

const axios = require('axios').default;

// axios.<method>는 이제 자동 완성과 파라미터 타이핑을 제공합니다.

 

인스턴스 만들기

사용자 지정 config로 새로운 Axios 인스턴스를 만들수 있습니다.  =  변수 설정

axios.create([config])

 

instance 안에 값을 넣어 베이스 url을 짜고 조금 더 간단한 문법을 만들 수 있습니다!

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

 

인스턴스 메소드

다음은 사용 가능한 인스턴스 메소드입니다. 지정된 config가 인스턴스 config와 결합됩니다.

여기서 가장 많이 쓰이는 건 get,post,put,delete 가 되겠군여!

 

axios#request(config)

axios#get(url[, config])

axios#post(url[, data[, config]])

axios#put(url[, data[, config]])

axios#delete(url[, config])

axios#head(url[, config])

axios#options(url[, config])

axios#patch(url[, data[, config]])

axios#getUri([config])

 

예제

GET 요청 수행하기

const axios = require('axios');

// 지정된 ID를 가진 유저에 대한 요청
axios.get('/user?ID=12345')
  .then(function (response) {
    // 성공 핸들링
    console.log(response);
  })
  .catch(function (error) {
    // 에러 핸들링
    console.log(error);
  })
  .then(function () {
    // 항상 실행되는 영역
  });

// 선택적으로 위의 요청은 다음과 같이 수행될 수 있습니다.
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // 항상 실행되는 영역
  });  

// async/await 사용을 원한다면, 함수 외부에 `async` 키워드를 추가하세요.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

 

 

위에 요청 예제까지 간단하게 알아보았고 공식문서에 주석처리 까지 잘 되어있어
다른 메소드들은 직접가서 확인해는게 좋아 보입니다!
결국 같은 코드에 위 타입메소드 부분만 바꿔주며
이번에 하면서 리덕스와 연결시키려다 보니까

 

 

참고자료

 

5주차 회고

 

6월 6일 29일차

  심화반 5주차 짜리 강의 중 3-5까지 들었고 뷰를 만들고나서 회원가입을 위해 3주차 완강 그리고 4-5까지 들었다

이제 과제를 시작하는데 다행히 뷰와 라우팅은 조금은 수월해졌다 슬슬 감 잡을때가 됐는데? 아직 이른가

 

6월 7일 30일차

  가자가자~ 회원가입 강의를 보고 하니 다행히 잘했다 아직 오류는 없다!!

그리고 history대신 navigate를 사용해서 페이지 이동을 만들었다. react-router-dom 6버전에서는 히스토리가 사라지고 네비게이트로 쓴다고한다! 이제 확인 이제는 6버전으로 가자! 여기는 Swith대신 Routes 등 사용할 코드가 달라졌을 뿐 사용법은 거의 똑같다! 리덕스를 시작도 못하고 낑낑대다가 다른 분들께 도움을 구해 시작을 할 수 있었다! 덕스 구조 Load부터 시작! 코드마다 주석을 달아두자!

 

6월 8일 31일차

  ㄷㄷ 한달 지나버렸죠 이번주가 어떻게 지나가는지 모르니 순삭.

오늘 뷰를 좀 더 만지고 리덕스 구조 추가하기 까지 만들고 cs발표, 항해톡과 특강을 들으니 뭔가 시간이 순삭 지나가버렸다. 오늘 이미지 미리보기를 했고 내일 이미지 업로드와 수정,삭제기능도 도전!!

 

6월 9일 32일차

  아이쿠 아침에 일어나서 빠르게 리덕스 수정,삭제 기능을 하려 했지만 순탄치 않았다. 이미지업로드 기능은 바로 말해서 <img src={}>로 구현했으나 갑자기 없던 버그가 생겨났다. 그래서 그거 고쳐보려다가 점심먹고 5시쯤 되서야 하 안되겠다 했는데 마지막으로 다른 분께 물어보니 3분만에 고쳐졌따.. onchange={(e)=> {}안에 함수 2개를 넣는데 하나의 함수 안에 e를 안넣어서 그랬던것이다. 7명정도가 붙어서 다같이 내 코드를 봤지만 해결 못했던게 저렇게 단순한 거였다ㅠㅠㅠ

하나 알아가서 다행이고 고마웠다. 결국 마지막까지 수정,삭제는 못하지 않을까 싶다 일단 해보는 거로 하고 새벽 3시까지  공부하려한다 화이팅!! 내일 미니프로젝트 시작 이젠 팀에 민폐가 가기 시작할것이다. 모르면 물어보라 부끄러워말고.

 

6월 10일 33일차

  시작이 되었다~~ 미니프로젝트. 이번에도 팀분들을 잘 만난 것 같다ㅎㅎ 근데 내가 조장이 되었다 참 신기하다.

주제를 간략히 정하고 추후에 방향이나 기능구현에 수정할 가능성을 두었고 SA작성 후 뷰를 만들고 다시 모였는데 스프링분들이 벌써 기능 구현을 하셔서 오 ㅏ 이렇게 백엔드가 빠른건가 싶었다.. 우리 프론트는 갈길이 멀다 멀어

그리고 깃허브를 미리 같이 쓰면 어떨까 싶었는데 한 분이 직접 나서서 깃허브를 통합해 주셨다! 짱이다 다룰줄 몰라서  어떻게 해야했는데 덕분에 통합은 되었다. 근데 다음에 할 때는 내가 확실히 찾아보긴 해야겠다 주변에 다른 프론트분들도 서로 충돌나서 고생중이라고 한다. 어쨋든 얼릉 기능하고  axios 적용해서 데이터 받는게 먼저다!

 

6월 11일 34일차

  오늘 미니프로젝트 2일차!! 오늘은 리덕스로 파이어베이스 연결하려하다가 꼬여서 state로 init 조회만 확인하고 바로 axios를 준비했다! 당근 처음쓰니 무슨 말인지도 모르겠고 어려웠지만 9시 팀 회의 이후 요청이 들어갔다! 다만 이 코드가 맞는지는 모르겠지만 요청이 들어가고 에러가 났다! 그래서 여러 가지 찾아보고 물어보고 proxy 설치 후 다시해도 안되서 전에 빗썸api를 연결했는데 고건 잘되더라! 기분 좋았따 뭔가 개발자 된 느낌?? ㅎㅎㅎ 굿굿

자 좋아좋아 가보자

https://mothercargasoline.tistory.com/90

 

리액트,스프링 axios 연결 CORS 오류 / has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

미니 프로젝트 중에 처음으로 axios를 사용하게 되었는데 리덕스랑 연결해야하나 정말 헷갈리고 일단 파일을 새로 해서 악시오스 미들웨어 코드를 받아 적용 시키고 url, 변수정도 수정해서 요청

mothercargasoline.tistory.com