axios method
충격적이게도 잊고있었지만... 메서드별 들어가는 인자가 다르다!
axios.get(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.delete(url[, config])
- get 같은 경우 request를 넣을수 없으므로 url에 파라미터로 값을 넣는다.
Ex)/article?username=${user_name}
JWT
- package 설치
yarn add jwt-decode // 토큰의 payload 내용을 디코딩해주는 패키지.
yarn add universal-cookie // 쿠키 관련 동작을 할수 있게 해주는 패키지. 이거 없으면 직접 js로 짜야함;;// module
import Cookies from "universal-cookie";
import jwt_decode from "jwt-decode";
...
const cookies = new Cookies();
...
// action creator
const loginSV = (user_name, pw) => {
return function (dispatch, getState, { history }) {
instance
.post("/user/login", {
username: user_name,
password: pw,
})
.then((res) => {
cookies.set("refresh_token", res.data, { sameSite: "strict" });
const token = cookies.get("refresh_token");
const decoded = jwt_decode(token);
dispatch(logIn(decoded.sub));
history.replace("/");
})
.catch((err) => {
console.log("login error!", err);
});
};
};
const loginCheckCK = () => {
return (dispatch, getState, { history }) => {
const token = cookies.get("refresh_token");
const decoded = jwt_decode(token);
dispatch(checkLogin(decoded.sub));
};
};
const logoutSV = () => {
return (dispatch, getState, { history }) => {
dispatch(logOut());
history.push("/login");
};
};// /shared/Request.js
import axios from "axios";
import Cookies from "universal-cookie";
const cookies = new Cookies();
const instance = axios.create({
baseURL: "http://118.67.134.8",
});
// 가지고 있는 토큰 넣어주기!
// 로그인 전이면 토큰이 없으니 못 넣어요.
// 그럴 땐 로그인 하고 토큰을 받아왔을 때 넣어줍시다.
const USER_TOKEN = cookies.get("refresh_token");
instance.defaults.headers.common["Authorization"] = USER_TOKEN;
export default instance;프로젝트 회고
-
잘했던 점 : crud 기능 구현이 손에 익었고, 백엔드 서버와 연동하여 로그인, 회원가입 기능을 구현했다. 팀원과 역할분배를 잘 할 수 있게 어레인지를 잘 했다.
-
아쉬웠던 점 : 백엔드 팀이 api 설계를 할때 함께 했더라면 좋았을거 같다. 백엔드에서 api를 일방적으로 만들어 넘겨준 기능이 몇몇개 있었는데 이해하고 활용하는데 문제가 조금 있었다. 팀원과 서로 기본적인 코드 컨벤션을 맞추고 코드 리뷰를 진행했더라면 더 생산적인 프로젝트가 될 수 있었을 것이다. 백엔드 팀에 api 구현이 바르게 됐는지를 묻기 전에 한번 더 내 코드를 확인하자... 너무 즉흥적으로 모든 질문을 넘겼던것 같다.
빠굥