⚓항해99 5주차를 돌아보자
📌 7.8 ~ 7.15 : 주특기 심화 📌
5주차에는 로그인 사용자용 매거진 어플리케이션을 구현했다.
리덕스 툴킷을 계속 사용하다보니 손에 익어서 정말 너무 편했다. 정말 다시는 깡 리덕스로는 돌아가지 않을 것 같다.
요즘은 시간이 굉장히 빨리간다. 정말 하루하루가 바쁘고 정신없이 흘러간다.
그리고 시간이 지나면서 내가 많이 부족하다는 것을 뼈저리게 느끼곤 한다.
내가 그동안 정말 준비가 덜 되어있었다는 생각이 든다.
여태 내가 공부를 정말 설렁설렁 한 것인가? 라는 생각도 든다.
지난 시간들을 알차게 쓰지 못했다는 생각이 들 정도로 요즘 정말 많은 것을 배우고있다.
다른 사람들과 같이 얘기하면서 알게 되는 것도 상당히 많고, 기술 매니저님들을 통해서 알게 되는 것도 정말 많다.
솔직히 이것저것 배워보고 알게되면서 머리도 많이 아프다. 하지만 하루가 다르게 성장하는게 나도 느껴지기 때문에 정말 뿌듯하다.
앞으로 가면 갈수록 더 바쁠텐데 솔직히 걱정도 되지만 이왕 하는거 열심히 해봐야지,,😀
이번 5주차에는 뭐 배웠어❓
1. axios
nodejs와 브라우저를 위한 promise 기반 HTTP 클라이언트
쉽게 말하면, 프론트에서 서버와 통신하기 위한 라이브러리다. 자바스크립트에 내장되어 있는 fetch를 사용하기도 하는데, fetch와 axios의 공통점과 차이점을 일단 알아보자.
1-1. axios vs fetch
🎇공통점
-
둘 다 웹 서버와의 비동기 통신을 지원한다.
-
promise 기반으로 데이터를 다루기에 편리하다.
🎇차이점
👉 fetch
-
fetch는 네트워크 에러 발생 시 response timeout이 없어 기다려야 한다.
-
응답으로 받은 데이터를 JSON으로 변환해주는 과정이 필요하다.
-
구형브라우저는 지원하지 않는다.
-
ES6부터 자바스크립트의 내장 라이브러리가 되면서 별도로 import 해줄 필요가 없어졌다.
👉 axios
-
axios는 response timeout 처리 방법이 존재한다.
-
구형 브라우저를 지원하고 브라우저 호환성이 뛰어나다.
-
설치가 따로 필요하기 때문에 npm으로 설치 후 import 하여 사용해야한다.
-
interceptor 기능을 제공한다.
위와 같은 이유로 axios를 많이 사용하는 것 같다.
그럼 axios를 어떻게 하면 잘 사용할 수 있을까?
1-2. 기존 사용법
나는 axios를 사용해오면서 정말 잘 사용하고 있는 줄 알았다. 하지만 그렇게 잘 사용하는 것도 아니었고 잘 알지도 못했다는 것을 이번에 알게 되었다. 기존에 내가 사용했던 방법은
import axios from 'axios';
const fetchData = () => {
const res = axios.get(`${endpoint}/todos`,{headers:{'access_token':token}});
console.log(res.data);
}
fetchData();위와 같은 형식으로 사용했었다. 물론 이것이 잘못된 방식은 절대 아니다.
위 처럼 사용하면 axios를 사용할 때 마다 매번 config를 넣어줘야하고, url도 계속 넣어줘야 한다. 이렇게 사용해야 할 때도 있긴 하겠지만, 사용하는 API서버가 하나인 경우에는 이렇게 사용할 필요가 없을 것 같다. 잘 모르겠다 안써봐서,, ㅋㅋ
1-3. 새로 알게된 사용법
axios를 커스텀해서 사용할 수 있다.
// customaxios.js
import axios from 'axios';
export default customaxios = axios.create({
baseURL:`${endpoint}`,
header: {
'access_token':`bearer ${token}`
}
})위와 같이 axios instance를 커스텀해서 만들어놓고 다른 파일에서 import해서 사용하면 된다. 그리고 만약 로그인을 하지 않은 상태라 토큰이 없는 상태라면 아래와 같이 로그인 후 추가할 수도 있다.
import customaxios from './customaxios';
...
customaxios.default.headers.common['access_token'] = token;1-4 customaxios 활용하기
import customaxios from '.....'
const fetchPost = async () => {
const res = await customaxios.get('/user');
}
URL 경로에는 baseURL의 뒷 부분만 삽입을 해도 되고, headers에는 일일이 토큰을 넣어주지 않아도 된다.
1-5. interceptor
인터셉터란 '가로채다' 라는 의미가 있다.
요청(request)과 응답(response)에 대한 통신의 중간에서 특정 로직을 실행시켜주기 위해 존재
🎇 사용방법
// 요청 인터셉터 추가
axios.interceptors.request.use(
function (config) {
// 요청을 보내기 전에 수행할 일
// ...
return config;
},
function (error) {
// 오류 요청을 보내기전 수행할 일
// ...
return Promise.reject(error);
});
// 응답 인터셉터 추가
axios.interceptors.response.use(
function (response) {
// 응답 데이터를 가공
// ...
return response;
},
function (error) {
// 오류 응답을 처리
// ...
return Promise.reject(error);
});5주차를 마치며👨🎓
그리고 리덕스를 이용하여 계속 구현을 하다보니 나만의 고민이 생겼었는데,,,
데이터베이스의 데이터를 가져오는 기능의 thunk와 데이터베이스에 데이터를 추가하는 기능의 thunk가 있다고 가정하면, 데이터베이스에 데이터를 추가하는 thunk를 dispatch하고 새로 갱신된 데이터를 받아오기 위해 리덕스의 state를 비우고, 데이터를 가져오는 기능의 thunk를 dispatch 해서 state를 최신 상태로 갱신하는 식으로 기능을 구현하였다.
근데, 이런 식이면 서버와 비동기로 통신하는 thunk를 하나의 기능을 수행할 때 마다 두 번씩 실행해야하는데 조금 비효율적이라는 생각이 들었다. 그리고 항상 리렌더링이 되기 때문에 더더욱 성능도 저하될 것 같고,, 조금 고민이다. 다른 방법을 찾아봐야하는데 일단 이 점이 고민이다.
다음 프로젝트에는 다른 방법을 고안해서 사용해봐야겠다..
