Ella 프론트엔드일지

0. Redux-toolkit 의 createAsyncThunk -> React-Query 로 리팩토링 🔸리팩토링을 하게 된 배경 - 오픈 마켓 프로젝트에서 전역상태관리로 Redux-toolkit 을 쓰고, 서버 상태관리를 createAsyncThunk 로 관리하고 있었다. 🔸createAsyncThunk - Redux-Toolkit 에서 내부적으로 thunk 를 내장하고 있어서, 다른 미들웨어(ex: Recus-Saga) 를 사용하지 않고도 비동기 처리를 할 수 있다. - 비동기 작업의 성공,실패 및 로딩 상태를 자동으로 처리하는 액션을 생성하므로, 서버 데이터를 편리하게 전역 상태로 관리할 수 있다. - 전역 상태로 관리되는 서버 데이터는 여러 컴포넌트에서 공유될 수 있으며, 필요한 곳에서 사용할 수..

0. 로그인 기능 구현 - 로그인을 하면 서버에서 응답값으로 토큰을 보내준다. - 리덕스 툴킷의 createAsyncThunk 를 이용해서 api 통신을 하고 서버에서 응답값으로 토큰을 받아오면, 토큰을 쿠키에 저장하고, 토큰값을 리덕스 툴킷으로 상태관리를 했다. 지난 팀프로젝트 때는 로컬스토리지에 토큰을 저장했는데 로컬스토리지에 토큰을 저장하는게 편의성(자동로그인)은 좋지만 보안상에 문제가 있는걸 알게되었다. 그래서 쿠키에 저장하기로 했다. 사실, 제공된 api 라서 referesh token 도 없고, access token 만 있기에 이 api 로는 쿠키에 저장해도 보안이슈가 있다. 하지만, 알고 쿠키에 저장하는것과 모르고 쿠키에 저장하는 것은 다를것이라 생각한다. export const fetch..

0. 문제 개요 장바구니에서 상품 정보를 렌더링 하려고 하는데 console.log(cartItems) 가 무한으로 출력되고 있었다. function CartPage() { const dispatch = useAppDispatch(); const TOKEN = useAppSelector((state: RootState) => state.login.token) || ""; const cartItems = useAppSelector( (state: RootState) => state.cartList.cartItems ); console.log(cartItems); const cartStatus = useAppSelector( (state: RootState) => state.cartList.status );..

이번에는 버그라기 보다는..몇일 째 고민을 해도 떠오르지 않아서 헤맸던 로직을 정리하고자 한다. 0. 문제 - 장바구니를 불러오는 api 를 통신했는데, 장바구니 아이템의 응답값이 아래처럼 나와있었다. 나는 화면에 장바구니의 상품목록을 장바구니 페이지에 렌더링 해야하는데, 장바구니를 불러오는 api 의 응답값에는 상품 상세정보(상품 가격, 상품 이미지, 상품명 등등) 가 아니라 단순히 장바구니 정보 들만 나와있었다. 그러면...상품 상세정보를 어떻게 불러와야하지... 계속 고민에 빠졌었다. 1. 문제 해결 과정 - 초반에 생각한 방향은 상품 목록을 가져오는 별도의 API 가 있다면 이 API 를 사용해서 상품 정보를 가져오고, 장바구니에 있는 상품과 일치하는 상품정보를 렌더링 하는 것이었다. 하지만 이것..

0. 버그 현황 - 사실 데이터가 잘 불러와져서 버그(?) 라고 할 수 있을까 싶지만, 사용자 경험에서 이전 데이터가 남아있는 채 다음데이터가 덮여씌워지는거는 불편한 일이다. - 상품 디테일을 리덕스 툴킷을 사용해서 서버와 통신을 하고, 통신 결과를 리덕스 툴킷에 전역상태로 저장한다. 그리고 저장한 것을 useParams 를 이용해서, 상품 디테일을 불러오게 만들었다. 하지만, 새로운 상품을 클릭하면 이전에 클릭했던 상품 정보가 남아있고, 다음 상품이 덮어씌워져 렌더링된다. - 이전 상품 정보가 남아있지 않고, 바로 새로운 데이터를 렌더링 할 수 있게 만들어보자 1. 원인 및 해결 - 이전 상품 정보가 남아있는 걸 해결하기 위해서는 상품 디테일 데이터를 가져오기 전에 상태를 초기화 해주는 과정이 필요하다..

0. 버그 현황 - buyer/seller 유저타입에 따라 navbar 가 달라진다. buyer일 경우에는 왼쪽 그림, seller 일 경우에는 오르쪽 그림으로 렌더링되어야한다. - buyer로 로그인을 하고 홈 페이지로 이동시 navbar 가 렌더링이 되지않음 - 즉, 로그인을 해서 쿠키에 token 과 userType 이 저장되어있는데, 홈페이지로 이동 즉시 렌더링이 되지 않음. 새로고침을 해야지만 렌더링이 제대로 됨. - loginSlice.ts 에서 console.log(typeItem) 과 console.log(tokenItem)을 했을 때 undefined로 나옴. 새로고침을 해야지만 데이터가 출력된다. 1. 버그 코드 및 버그 원인 //Cookies.ts import { Cookies } f..