1. Axios

💡 Axios란 node.js와 Browser를 위한 Promise 기반의 HTTP 클라이언트이다. 
Server-Side 에서는 native node.js의 http 모듈을 사용한다면, 클라이언트 즉 Browser에서는 XMLHttpRequests를 
사용한다.

Axios에 익숙해지려면 먼저 비동기와 Promise에 대한 이해가 필요하다고 생각하여 아래에 정리해보려고 한다.

비동기 함수

대조되는 성격의 함수는 동기 함수 라고 하는데, 이것은 우리가 일반적으로 쓰는 함수 유형이다. 그리고 이 함수는 대개 함수의 선언 순서대로 호출이 된다.
만약에 우리가 서버에 정보를 요청하여, 받아오는 작업을 하려고 한다고 생각해 보자. 만약 데이터의 양이 생각보다 많아, 해당 페이지에서 호출되야하는 하단의 함수들이 데이터 요청 작업이 끝나기까지만을 기다려야한다.

이 문제를 타파할 4번 타자가 바로 비동기 함수 이다.
비동기 함수 즉 비동기로 작업을 해줄 수 있는 비동기 처리 방식 은 해당 함수에 다른 일반함수들의 호출과 상관없이 background 에서 계속 진행되고 있는 느낌이라, 다른 함수들의 진행에 영향을 끼치지 않게 된다.
Axios 가 바로 비동기 처리방식의 함수인 것이다.

Promise

이건 개인적으로 정말 내가 헷갈려서 쓰는거다. Promise 객체 vs promise 방식 / 함수 (?)

Promise 객체

💡 비동기 작업이 맞이할 미래의 완료 or 실패와 그 결과 값을 나타내줌. 
Promise(resolve, reject) 을 비동기 함수 앞에 쓰고 resolve라는 인자로 미래의 결과가 성공이었을 때,
rejcet라는 인자로 미래의 결과가 실패일 때의 return 값을 지정해 줄 수가 있다. 

위의 방식을 사용하여 이전에 계속 callback을 지속해서 내려주고 내려주던 callback hell 현상을 해소할 수 있고, 가독성 및 유지보수력도 좋아지게 된다

근데 계속 생각해보니까 Promise() 나, try - catch 문 .then - .catch문 모두 미래의 결과값에 따른 예외처리를 맡는 것이었다. 이러한 방식을 Promise 함수 / 방식이라고 하는 것 같다... (아니라면 꼭 알려주세요!)
아래의 그림을 보면 미래에 일어날 결과 값에 따라서 예외처리하는 방식을 보여주는데, 방금 내가 정의한 구도를 뒷받침해주는 것 같아 첨부해 본다.

💚 이제 Axios로 다시 넘어가 보자~

Axios는 이전의 Ajax와 fetch와 같은 비동기 통신을 담당하며, 이 친구들의 단점을 보완해주는 비동기 통신 라이브러리이다.
Ajax의 Jquery를 사용해야 진정한 효율을 보여주며, Promise 기반이 아니라는 단점과, fetch의 편협한 호환가능한 브라우저의 수와 일일이 Json으로 변환하고, 네트워크 에러가 발생했을 시 response timeout 이 없어 끝없이 기다리기만 해야된다는 단점을 모두 보안한 친구가 바로 이 Axios 이다.
하지만 내장 함수 fetch와 Ajax와 달리 라이브러리라 설치해야된다는 단점이 있긴한데, 요즘 라이브러리 안쓰는 프로젝트가 어디있는가..!

• Axios 라이브러리 사용하기

1. 설치 : npm install axios or yarn add axios

2. 활용 예제

export const getData = createAsyncThunk("post/getData", async (_, thunkAPI) => {
  try {
    
    /* 대표적으로 CRUD의 Read의 get / Create의 post / Update의 patch / Delete의 delete 가 있다*/
    const res = await axios.get("http://localhost:3002/posts");

    console.log(res);
   
    return thunkAPI.fulfillWithValue(res.data);
  } catch (err) {
    console.log(err);
    return thunkAPI.rejectWithValue(err);
  }
});

Optional Chaining

 {todos?.map((todo) => (
        <TodoListDiv> ...
                    

이번 프로젝트에서 useSelector로 받아온 값이 제대로 출력이 안되는 부분에서 옵셔널체이닝이란걸 쓰면 제대로 출력이 되는 점을 발견할 수 있었다. 결과적으로 된 거지만, 왜 되는지 궁금하여 따로 좀 더 알아보기로 했다.

이번에도 우리들의 문법 교과서 MDN 을 참고하였다.

optional chaining 연산자 (?.) 는 체인의 각 참조가 유효한지 명시적으로 검증 x -> 바로 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다고 한다.

기존에 나는 .연산자를 객체안의 데이터를 따로 명시할 때 무의식적으로 사용해왔었는데, 이 또한 체이닝 연산자라고 한다. 그런데 참조값이 nullish (null or undefined) 라면 에러 대신 undefined를 내뱉는다 한다. 이것 때문에 원래 타입이 지정되어있던 값들이 정상적으로 호출이 되지 않은 듯 하다.
(이래서 미리 타입스크립트로 정의하여 미연에 방지하는 거일지도..)

그래서 이러한 연산자를 사용하면 참조가 누락될 가능성이 있는 경우 연결된 속성으로 접근할 시, 훨신 짧고 간단한 표현식을 생성이 가능하며, 어떤 속성이 필요한지에 대한 보증이 확실하지 않은 경우에 객체의 내용을 탐색하는 동안 도움이 된다.