Ella 프론트엔드일지

0. 글을 쓰게 된 이유 오픈마켓 프로젝트에서 서버데이터를 기존에 Redux-Toolkit 의 createAsyncThunk 로 다뤘었다. 서버데이터를 캐싱,동기화가 잘 되는 React-Query 로 리팩토링 했었다. 나는 단지... React-Query 의 저런 장점이 있어서 리팩토링을 했었는데.. 얼마전에 개발자 시니어분께서 동기화가 정말로 되는지 확인을 했냐고 물어보셨다. 머리를 땅 하고 맞은 기분이었다!! 동기화가 되겠거니..하고만 생각하고 있었는데...확인을 안했던 것이다...ㅎㅎㅎ 그리고 새로운 데이터가 서버에 등록이 되는데 그걸 클라이언트가 어떻게 알아차리고 데이터를 업데이트 시키는지 물어보셨는데 대답을 하나도 하지 못했다!! 이제 그걸 알아보도록 하겠다 1. 쇼핑몰 페이지를 통해 데이터가 ..

1. 라이트하우스 성능 분석 - 라이트 하우스 성능 분석을 했더니 이미지 관련 최적화를 할 필요성을 느꼈다. - 이미지의 렌더링된 크기는 377*377 이었는데 실제 고유 크기는 1500px*1500px 이 넘었다. (이미지 요소를 클릭해서 개발자 도구에서 확인해보면 아래와 같이 나온다) - 예제 - 렌더링된 크기: 120 × 120 px 렌더링된 가로세로 비율: 1∶1 고유 크기: 1200 × 1200 px 기본 가로세로 비율: 1∶1 파일 크기: 175 kB 현재 소스: https://images.unsplash.com/photo-1542435503-956c469947f6?w=1200&h=1200&q=80&fm=jpg&fit=crop - 이 엄청 큰 사진(리소스) 들을 몇십개 불러온다고 생각해보자. ..

0. 버그 현황- 리액트쿼리로 리팩토링 도중 상품을 장바구니에 담았을때 TotalPrice 컴포넌트의 총 상품금액과 배송비가 업데이트가 안되는 문제가 발생했다.const useFetchCartItems = (token: string) => { const { data: cartList } = useFetchCartList(token); // console.log(cartList); const productIds = cartList.results.map((item: any) => { return item.product_id; }); // console.log("Product IDs:", productIds); const queryInput = productIds.map((productId: string) =..

0. 버그 현황 - 이틀째 시달리는 에러.....어떻게 해결하면 좋을지 모르겠음 - redux-toolkit 의 createAsyncThunk 에서 react-query 로 장바구니 항목을 불러오는 페이지 리팩토링 하는 중 고난이도의 문제가 생김 - 장바구니 정보를 가져오는 API 를 불러오고 거기서 product_id 값을 반환 받으면 그 product_id 값을 이용해서 상세 상품 정보를 불러오는 API 를 통신해야했다. 장바구니 불러오는 API 에서 product_id 를 빼오기 위해서 결국 반복문을 쓸 수 밖에 없었다. // 장바구니 불러오는 API 응답값 { "count": Int, "next": String, "previous": String, "results": [ { "my_cart": I..

0. useParams undefined|string 반환 - useParams 는 undefined|string 을 반환한다. - useParams 가 어째서 undefined를 반환하는지 궁금해졌다. 챗지피티 선생님께 여쭤봤다. 1) 매개변수가 경로에 없는 경우: 예를 들어, 경로가 /products/:productId로 정의되어 있지만 사용자가 /products만 방문한 경우, productId는 undefined가 됩니다. 2) 잘못된 경로 정의: 경로 정의를 잘못하여 매개변수를 포함하지 않는 경로에서 useParams를 호출하면, 해당 매개변수는 undefined가 됩니다. 3) TypeScript 타입 정의의 문제: useParams의 반환 타입을 정의하는 TypeScript 타입이 올바르게 ..

0. 버그 현황 - React-Query 로 리팩토링 하는 도중에 페이지네이션의 버튼을 클릭하면 화면이 렌더링 되지 않는 문제를 겪었다. 분명 createAsyncThunk 리덕스 툴킷으로 할때는 잘 되었는데...? 왜그런걸까 기존 createAsyncThunk 로 할때의 코드는 아래에 첨부한다. https://ella951230.tistory.com/entry/%EC%98%A4%ED%94%88%EB%A7%88%EC%BC%93-%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A6%AC%EB%8D%95%EC%8A%A4%ED%88%B4%ED%82%B7%EC%9C%BC%EB%A1%9C-%ED%8E%98%EC%9D%B4%EC%A7%80%EB%84%A4%EC%9D%B4%EC%85%98-%EA%B5%AC%E..