[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 / Function] TypeScript 사용시 React Quill 이미지 사이즈 조절

React Quill을 선택한 이유 이번 프로젝트에서 에디터를 사용해보고싶은데 어떤 에디터를 쓸지 고민을 많이 했었다. 아무거나 쓰는게 아니라 하나를 사용할 때 정확한 이유를 두고 사용하고싶었다. 아래 메모는 주관적인 견해도 들어가 있고 사실과 다른 부분이 있을 수 있으니 진지하게 참고하지 않기를... 🥲 CkEditor는 살짝 Install 해봤더니 너무 무거웠고 내가 사용할 곳은 1:1 문의란이라 많은 기능이 필요하지도 않았기 때문에 패스. Toast UI랑 Quill 중에 기능적인 부분은 Toast가 마음에 들었었는데 이미지 조절이 안 된다는 사실 하나 때문에 Quill을 선택했다. (내가 이미지 사이즈 조절을 얼마나 중하게 생각하는지 나도 모르던 나를 알게 되었다) 아무튼 본론으로 들어가서 막상 ..

• format_list_bulleted BookBuddy - Project/Function
• · 2023. 9. 5.
• 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 / Function] input 자동 탭 기능 만들기

여러 사이트를 이용할 때 가끔 정말 불편하다고 느끼는 사이트가 있었다. 전화번호 앞번호 뒷번호를 따로 입력하게끔 만들어놓고 자동 탭이 되지 않는 사이트들... 나는 키보드 오른쪽 숫자키들을 애용하기도 하고 아무 생각 없이 외우고 있는 번호를 우다다 누르는데 자동 탭이 되지 않는다? UX적으로 정말 불편하다고 느꼈었다. 그래서 막상 내가 전화번호 입력란을 만들게 되니 반드시 자동 탭을 만들어야겠다 싶었다. 찾아보니 .focus로 해결할 수 있겠다. 간단하게 전화번호 앞 자리 입력이 끝나면 dom 에 접근해서 직접 .focus를 주면 될 듯 하다. 먼저 dom에 접근. useRef를 써야한다. 앞 자리 입력이 끝나면 뒷 자리에 focus 되도록 해야하므로 뒷 자리를 받는 input을 ref에 저장한다. //..

• format_list_bulleted BookBuddy - Project/Function
• · 2023. 8. 26.
• 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