그림판매쇼핑몰의 어드민페이지를 구현하고 있는데 명색이 쇼핑몰이다보니 데이터구조가 상당히 복잡하여 get요청 하는데 굉장히 힘들었다..(원래는 백엔드에서 백오피스를 담당하지만 프론트3명 백엔드1명이서 진행하는 프로젝트이고 시간적 압박이 있어 내가 어드민페이지를 하루만에 끝내기로 했었다.. 근데 하루만에 끝낼 수 있는 그런게 아니었다ㅠㅠ) 거기다 이제 막 개발을 시작한 프로젝트다 보니 더미데이터도 없어서 회원가입/로그인 으로 토큰을 가져오고 해당 유저로 그림을 주문한 후 해당 유저의 필드를 어드민으로 바꾸고 그 유저의 어드민토큰으로 주문을 해서 get요청을 끝낼 수 있었다.. 어드민 페이지 굉장히 만만하게 봤다가 진짜 큰코 다쳤다. 프론트개발자도 백에대한 정보와 db에대한 이해를 백엔드 개발자만큼 해야만 한다는걸 다시금 느낀 하루였다.
오늘은 정말 많은 것을 배웠다.
처음으로 타입스크립트로 하는 프로젝트이고 이전에 타입스크립트를 공부해본적이 없어서 무작정 쓰고 배워보려고 했다. useState를 쓰려고 했는데 이 데이터를 배열에 담아야할지 객체에 담아야할지 고민해야 했으며, res로 받아온 데이터의 제네릭은 어떻게 되어야하는지에 대해서도 고민해야 했으며.. axios를 기존엔 요청마다 config와 url을 일일이 써줫던걸
import axios from 'axios';
const baseURL = 'http://localhost:5000/api';
// Set config defaults when creating the instance
const instance = axios.create({
baseURL,
});
// axios 요청을 할때 중간에서 가로챔
instance.interceptors.request.use(
function setConfig(parameter) {
const config = parameter;
const userInfo = localStorage.getItem('lumiereUserInfo');
config.headers = {
'Content-Type': 'application/json',
};
if (userInfo) {
config.headers.Authorization = `Bearer ${JSON.parse(userInfo).token}`;
}
// Do something before request is sent
return config;
},
function getError(error) {
// Do something with request error
return Promise.reject(error);
},
);
export default instance;이런식으로 재사용가능하게 해놨다.
어드민페이지는 토큰이 달라서 따로 파일을 만들어놨다.
분명 하루종일 이것저것 굉장히 열심히 한 것 같은데 막상 개발진도는 눈꼽만큼만 나갔다. 새로운 것을 많이 배우다 보니 js로 개발할때 만큼의 속도는 안나오는 것이 너무 아쉽다. 그래도 나는 러닝커브가 가파른편이라는 위안을 가지고 열심히 화이팅해야겠다! 내 모토는 "괴로움은 잠시, 배움의 즐거움은 영원히" 니까! 내일도 화이팅!!!
