WIL Part 1 - 내가 새롭게 알게된 핵심 부분
Axios
- Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 이다.
- 백엔드와 프론트엔드와 통신을 쉽게하기 위해 AJAX도 더불어 사용하기도 한다.
- 한 마디로 서버와의 통신을 위해 사용하는 라이브러리이자, 서버와 클라이언트를 연결하는 다리라고 생각할 수 있다.
Axios의 특징
- 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 HTTP API를 사용한다.
- Promise(ES6) API를 사용한다.
- 요청과 응답 데이터의 변형을 일으킬 수 있다.
- HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변경한다.
Axios 사용방법
- npm이나 yarn으로 먼저 설치해야 사용할 수 있다.
- 기본 문법:
axios({
method: 'post', // get, post, patch, put, delete 등
url: '/user/12345', // 서버 주소
data:{ // 전송되는 데이터
firstName: 'Fred',
lastName:'Flintstone'
}
});- axios는 기본적으로 promise 객체를 사용한다.
- 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다.
- 프로미스는 시작하고 동작이 완료될때까지 총 3가지의 상태를 가질 수 있다.
pending: 대기 상태이고, 비동기 처리 로직이 아직 완료되지 않은 상태를 의미한다.fulfilled: 이행 상태이고, 비동기 처리가 완료되어 프로미스가 결과 값을 반환한 상태이다.rejected: 실패 상태이고, 비동기 처리가 실패하거나 오류가 발생한 상태를 의미한다.
Async, await
- 자바스크립트의 비동기 처리 패턴으로, promise를 더 편하게 사용할 수 있도록 돕는다.
- async를 사용하게 되면 함수를 항상 Promise 를 반환하게 된다.
- await 키워드는 async 함수 안에서만 사용할 수 있고, 해당 키워드를 만나면 Promise가 처리(Settled) 될 때까지 대기하게된다.
- await를 이용하게 된다면 콜백함수 처리 없이 비동기 처리를 해줄 수 있는 것이고, 처리될때까지 다음 액션이 대기하기 때문에, 비동기를 동기적으로 처리할 수 있게 된다.
Redux Toolkit과 함께 사용하기
- Redux Toolkit과 함께 사용했기 때문에, 리덕스 툴킷에서 제공하는 `ThunkAPI`라는 친구와 axios를 함께 사용했다.
- Redux Toolkit에는 내부적으로 thunk를 내장하고 있어서, 다른 미들웨어를 사용하지 않고도 비동기 처리를 할 수 있다.- 물론 Redux Toolkit의 비동기 처리 기능을 사용하지 않고, 컴포넌트 내부의 useEffect()에서 API 호출을 하는 것도 가능하다. 실제로 지금까지 그렇게 해왔다. 다만,
- Redux Toolkit의 비동기 기능을 사용하면 컴포넌트 외부에서 비동기 처리를 할 수 있기 때문에 관심사 분리가 가능하다는 장점이 있다.
- createAsyncThunk와 createSlice를 사용하여 Redux Toolkit만으로 비동기 처리를 쉽게 할 수 있으며, redux-saga에서만 사용할 수 있던 기능(이미 호출한 API 요청 취소하기 등)까지 사용할 수 있다
ThunkAPI 사용하기
- createAsyncThunk:
- 액션 타입 문자열, 프로미스를 반환하는 비동기 함수이다.
- 추가되는 옵션 순서대로 인자를 받고, 입력 받은 액션 타입 문자열을 기반으로 프로미스 라이프사이클 액션 타입을 생성하고 thunk action creator를 반환한다.
- thunk action creator는 프로미스 콜백을 실행해서 액션을 디스패치한다.
- 리듀서를 생성해주는 기능은 없기 때문에 extra reducer 로직을 직접 따로 작성해야 한다.
- 예시:
// axios + thunkAPI
export const getReply = createAsyncThunk(
"reply/getreply",
async (payload, thunkAPI) => {
try {
const response = await axios.get(`http://localhost:3003/replyList`);
console.log("get api확인", response);
return thunkAPI.fulfillWithValue(response.data);
} catch (error) {
console.log("get api", error);
return thunkAPI.rejectWithValue(error);
}
}
);
// createSlice + extra reducers
export const replySlice = createSlice({
name: "replyList",
initialState,
reducers: {},
extraReducers: {
[getReply.fulfilled]: (state, action) => {
console.log("get action.payload", action.payload);
state.replyList = action.payload;
},
[getReply.rejected]: (state, action) => {
state.error = action.payload;
},
},
});- 이런 방식으로 Redux Toolkit과 Axios를 함께 사용했다.
- Action dispatch -> 서버와 연결하고 결과값을 전역상태관리하기위해 extra reducer에 보냄 -> extra reducer에서 전역상태를 관리.
- 이 사이클로 이번 주차엔 mock db와 연결하는 작업을 진행했다.
WIL Part 2 - 일주일을 끝내고 쓰는 일기
리액트 심화주차의 팀과제는 Axios와 리덕스 툴킷을 이용한 CRUD 구현이었다.
get, post, delete 요청은 어떻게 잘 되었고 흐름도 이해가 되었지만, 가장 어려운 부분은 update였다.
이미 있는 상태값을 가져와서... 그 상태값을 변경하고... 변경된 상태값이 저장되면 되는거 아닌가? >> 그리고 그 아닌가?가 절대 수행이 안돼서 너무너무너무너무너무너무 힘들었다.
토요일과 일요일인 오늘을 통해 react 기술 매니저님과의 특별 면담 시간을 이용해서 조금이나마 이해할 수 있었다.
남에게 지금까지 잘 물어보지 않았던 내가 남들에게 가장 많이 물어본 시기기도 했다.
물론 다들 너무 바빠서 물어보지 못 했지만, 다른 사람이 물어본 내용에 대한 해답을 같이 듣기도 했고...
특히 기술 매니저님들을 많이 괴롭혔다.
덕분에 이해하고 넘어갈 수 있어서 매우 기뻤고, 재밌기도 했다. 이제 백엔드와의 첫협업을 통해서 미니 프로젝트를 진행하는데, 솔직히 너무 걱정이 앞선다...
알고리즘 주차엔 뭔가 함수 안에 들어갈 로직을 어떻게든 생각할 수 있었는데, 리액트를 배우면서 코드로 사고 하는 방식을 많이 잊은 것 같다.
전부 휘발된 것은 아니지만... 그래도 열심히 풀고 공부했던 시간이 무색하게 느껴질 정도였다.
강의만 보고 기능을 구현한 자의 말로일까 😭 과제만으로 벅차서 따로 공부를 못 했는데, 어떻게든 더 했어야 한다는 생각이 든다. 하지만 지금도 나는 기능 구현에 급급해서 공부를 하고 있지 못 한다...🫠
정말 기술 매니저님들 덕분에 이해하고 넘어가는 부분이 있어서 다행이다.
코드를 분석하며 주석을 다는 것이 나름의 공부기도 했고... 특히 지금은 혼자서 집안일을 다 신경써야 하니까 심신이 피로하고 피폐해진다...
개발 공부에만 몰두하고 싶은데... 왜 이렇게 신경쓸게 많은지 ㅠ 다 부셔 진짜...
그래도 역시 기능 구현은 재밌다. 시간만 더 있었으면 좋겠다..⏰
진짜.. 너무.. 너무너무 힘들다 ㅠㅠ 사람 살려... 🙋♀️
출처:
