[Book Buddy / Error Note] 장바구니에 상품이 두 번까지 담기는 문제

직면한 문제 프로젝트를 하면서 장바구니에 한 번만 상품을 담을 수 있도록 했다. 이는 장바구니에서 상품의 id를 사용하기 때문에 두 번 등록되어 id 가 겹치는 상황을 방지하기 위함이다. 그런데 구현 후 동작해보니 상품페이지에서 장바구니 담기 버튼이 두 번까지 작동한다. 아래 영상을 보면 '상품을 장바구니에 추가했습니다' 라는 문구가 두 번까지 나오고 세 번째부터 '이미 추가한 상품입니다' 문구가 나오는 모습을 볼 수 있다. 오른쪽 콘솔에는 장바구니 현재 리스트가 찍히는데 두 번까지 빈 배열로 찍힌 후 세 번째부터 해당 도서가 리스트에 추가되는 모습을 볼 수 있다. 원래 코드 const addCartHandler = () => { getCartList(setCartList); // api 요청을 통해 s..

• format_list_bulleted BookBuddy - Project/Error Note
• · 2023. 9. 20.
• textsms

[Book Buddy / Error Note] 반응형 MediaQuery를 모듈화 해서 styled-components에 사용할 경우 props 타입 에러

메인 프로젝트(Ez to Play)때 해결 못 했던 문제를 이번 프로젝트에서 해결했다. 정말 너무 별 거 없어서 어디 가서 해결했다고 말하기도 창피한 문제긴 하다. 메인때도 반응형 페이지를 만들기 위해 media query를 사용했는데, media query를 모듈화 해서 썼었다. media query를 모듈화 하게 되면 속성을 하나의 파일에서 관리하므로 유지보수가 편리하다. 해결 못 했던 문제 하지만 당시에는 props로 사이즈를 받아오는 경우 만들어둔 media query 모듈을 어떻게 적용해야 하는지 방법을 찾지 못 했고, (아마 저 props 타입 에러를 해결하지 못 했던 것 같다.) interface StyleDivProps { height: 140 | 60; imageurl: string; }..

• format_list_bulleted BookBuddy - Project/Error Note
• · 2023. 9. 4.
• textsms

[Book Buddy / Error Note] react-modal 라이브러리 사용시 앱 요소 정의에 관한 에러

react-modal: App element is not defined. Please use `Modal.setAppElement(el)` or set `appElement={el}`. This is needed so screen readers don't see main content when modal is opened. It is not recommended, but you can opt-out by setting `ariaHideApp={false}`. 모달을 빠르게 만들기 위해 react-modal 라이브러리를 사용했는데 모달을 여는 버튼을 클릭하니 콘솔에 위와 같은 에러가 났다. 앱 요소가 정의되지 않았으니 `Modal.setAppElement(el)`을 사용하거나 `appElement={el}..

• format_list_bulleted BookBuddy - Project/Error Note
• · 2023. 9. 3.
• textsms

[Book Buddy / Error Note] styled-components의 porps의 DOM전송 경고

styled-components: it looks like an unknown prop "iconSize" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.) 요놈시키... 검색창을 만들면서 icon size를 변경할 수 있도록 pro..

• format_list_bulleted BookBuddy - Project/Error Note
• · 2023. 8. 24.
• textsms

[Book Buddy / Error Note] React component에서 forwardRef로 ref prop 적용하기

스크롤 조작 때문에 Dom에 접근하기 위해 useRef 한 번 사용해 보려다가 삽질 좀 했다. 1. ref 적용시 에러 ref를 일반 props로 인식하나보다. 찾아보니 함수형 컴포넌트는 ref를 그냥 사용 할 수 없다고 한다. import React, { useEffect, useRef } from 'react'; const Mypage = () => { const scrollRef = useRef(); useEffect(() => { // (스크롤 조작 관련 코드) }); return ( // ...중략... //ref 사용 // ...중략... ); }; export default Mypage; "ref를 props로 넘기려면 ref를 넘기려는 React component를 forwardRef()로..

• format_list_bulleted BookBuddy - Project/Error Note
• · 2023. 8. 21.
• textsms

[Book Buddy / Error Note] table의 table-layout: fixed; 사용시 하위 cell 너비 변경하는 방법

장바구니를 만드느라 아래와 같은 목업 표를 만들었다. 체크박스 도서 (colSpan 사용) 수량 금액 체크박스 이미지 도서명 수량 금액 도서명의 너비를 이미지보다 넓게 하고싶었으나 말줄임표 기능을 넣기 위해 table 태그에 table-layout: fixed;를 적용했더니 타이틀이 colSpan으로 묶여있는 td태그들(이미지, 도서명)이 동일한 간격으로 고정되어버린다. 아래와 같이 colgroup을 만들어 cell 개수만큼 col 태그를 주고 퍼센테이지로 간격을 조정하면 table-layout: fixed; 상태에서도 간격을 조정할 수 있다. 체크박스 도서 수량 금액 체크박스 이미지 도서명 수량 금액 처음엔 colgroup까지 thead로 감싸버리는 바람에 고생을 좀 했다. 간격이 원하는 만큼 벌려진 ..

• format_list_bulleted BookBuddy - Project/Error Note
• · 2023. 8. 18.
• textsms