[WIL] Axios

WIL KEYWORD - Axios

axios instance,  axios intercepter,  fetch vs axios

import axios from 'axios'

// axios 인스턴스를 생성합니다.
const instance = axios.create({
    baseURL: 'https://api.hnpwa.com',
    timeout: 1000
  });

/*
    1. 요청 인터셉터
    2개의 콜백 함수를 받습니다.
*/
instance.interceptors.request.use(
    function (config) {
        // 요청 성공 직전 호출됩니다.
        // axios 설정값을 넣습니다. (사용자 정의 설정도 추가 가능)
        return config;
    }, 
    function (error) {
        // 요청 에러 직전 호출됩니다.
        return Promise.reject(error);
    }
);

/*
    2. 응답 인터셉터
    2개의 콜백 함수를 받습니다.
*/
instance.interceptors.response.use(
    function (response) {
    /*
        http status가 200인 경우
        응답 성공 직전 호출됩니다. 
        .then() 으로 이어집니다.
    */
        return response;
    },

    function (error) {
    /*
        http status가 200이 아닌 경우
        응답 에러 직전 호출됩니다.
        .catch() 으로 이어집니다.    
    */
        return Promise.reject(error);
    }
);

 

2022.12.10 - [⛵ 부트캠프, 항해99/TIL] - [TIL] 나 6시간만 더 줘요 221210

 

https://velog.io/@skyepodium/axios-%EC%9D%B8%ED%84%B0%EC%85%89%ED%84%B0%EB%A1%9C-API-%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0

axios 인터셉터로 API 관리하기

https://axios-http.com/docs/instance

The Axios Instance | Axios Docs

https://ghost4551.tistory.com/185

[React] React(9)

 

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

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

 

http status code는 어떤 것들이 있고, 각 code는 어떤 의미로 약속됐을까?

• 1xx(정보) : 요청을 받았으며 프로세스를 계속 진행합니다.
• 2xx(성공) : 요청을 성공적으로 받았으며 인식했고 수용하였습니다.
• 3xx(리다이렉션) : 요청 완료를 위해 추가 작업 조치가 필요합니다.
• 4xx(클라이언트 오류) : 요청의 문법이 잘못되었거나 요청을 처리할 수 없습니다.
• 5xx(서버 오류) : 서버가 명백히 유효한 요청에 대한 충족을 실패했습니다.

404 Not Found
The server cannot find the requested resource. In the browser, this means the URL is not recognized. In an API, this can also mean that the endpoint is valid but the resource itself does not exist. Servers may also send this response instead of 403 Forbidden to hide the existence of a resource from an unauthorized client. This response code is probably the most well known due to its frequent occurrence on the web.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

HTTP response status codes - HTTP | MDN

https://www.whatap.io/ko/blog/40/

 

request headers와 response headers의 정보들은 각각 어떤 정보들일까?

• Request header: 페치될 리소스나 클라이언트 자체에 대한 자세한 정보를 포함하는 헤더. = 내가 보내는 메세지의 헤더
• Response header: 위치 또는 서버 자체에 대한 정보(이름, 버전 등)와 같이 응답에 대한 부가적인 정보를 갖는 헤더. = 내가 받은 메세지의 헤더

https://developer.mozilla.org/ko/docs/Web/HTTP/Headers

HTTP 헤더 - HTTP | MDN

https://goddaehee.tistory.com/169

[HTTP 기초_1] 헤더 (요청(Request) 헤더, 응답(Response)헤더)

 

https://ltvw.tistory.com/entry/HTTP-%ED%8A%B8%EB%9E%9C%EC%9E%AD%EC%85%98%EA%B3%BC-%EC%9A%94%EC%B2%AD%EC%9D%91%EB%8B%B5-%ED%97%A4%EB%8D%94requestresponse-header

HTTP 트랜잭션과 요청/응답 헤더(request/response header)

Axios Instance 만들어보기 - teamsparta.notion.site.pdf

0.09MB

Optional chaining

?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다.

등장배경 : 우리가 . 으로 접근할 때 그 값이 없으면 에러가 나는데 ?. 이렇게 쓰면 undefined를 반환해서 에러가 나지 않음. 

https://ko.javascript.info/optional-chaining

옵셔널 체이닝 '?.'

 

오늘 한 일

header component 수정

4:30 ~ 6:30 기술매니저님 면담

WIL 쓰기

개인 공부 및 재정비

 

느낀 점

요 며칠 마음이 힘들어서 글을 쓰고 싶지 않았다. 살면서 과제를 제출하지 못한 적은 이번이 처음이었다. 정말 잘하고 싶었는데 월요일에 프로젝트를 시작한 게 잘못이었나, 내가 잠을 줄이고 더 노력했다면 제 때 끝낼 수 있었지 않았을까, 나는 왜 이거밖에 이해를 못 해서 코드를 못 쓸까, 같이 코드를 붙잡고 끙끙거린 팀원한테 진심으로 너무 미안했다. 내가 고작 이 정도인가 자존감이 떨어졌었다. 지금도 완전히 나아지지는 않았지만 그래도 다시 힘을 내야겠다. 이렇게 별 거 없는 나를 믿어주고 응원해주고 격려해주는 사람들이 있으니까 열심히 노력해야겠다. 미뤄둔 일이 너무 많다.

 

칭찬

다시 마음 다잡기

 

아쉬운 점

더 일찍 시작할 걸..!

 

내일 할 일

미니 프로젝트 View 작업 완료

리덕스 개인 공부