[Book Buddy / Function] 전화번호 숫자 길이 제한하기

문제상황: 핸드폰 번호를 입력받는 input을 4자리로 제한하고 싶은데 max, maxLength 모두 의도대로 작동하지 않는다. 알아보니 maxLength는 type이 number일 때 적용할 수 없고, max는 1. 지정한 숫자를 입력받지만 화면에서는 지정한 숫자를 넘은 숫자까지 입력할 수 있고, 2. 지정한 숫자를 넘을 경우 실제 입력받는 값은 지정한 최대값으로 고정된다. 가장 일반적인 방법은 type을 text로 지정한 후 pattern 정규식을 활용해 숫자만 입력받게끔 하고, maxlength를 지정하는 것이라고 한다. 참고자료 https://webisfree.com/2022-04-28/[html]-input-%ED%83%9C%EA%B7%B8-number-%ED%83%80%EC%9E%85%EC%..

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

[Book Buddy / Function] 클릭한 메뉴로 스크롤 이동하기

클릭한 메뉴의 위치로 스크롤이 이동하는 로직을 구현했다. 간단하지만 타입스크립트 사용, 사이드바와 별개의 컴포넌트인 바디, 헤더 높이 등 고려해야 할 여러 조건때문에 은근히 고민하게 만든 친구다. 1. useRef에 이동할 태그 저장하기 // mypage component const navScrollListRef = useRef([]); return( // ...중략 { navScrollListRef.current[0] = el; }}> { navScrollListRef.current[1] = el; }}> { navScrollListRef.current[2] = el; }}> // ...중략 ) 일단 useRef를 사용하여 스크롤을 이동시킬 div의 위치를 저장한다. 사이드바의 메뉴 개수만큼 있어야 하..

• format_list_bulleted BookBuddy - Project/Function
• · 2023. 8. 22.
• textsms

[Book Buddy / Function] hover로 모달 사용하기

문제상황: 나의정보 span에 hover를 주었더니 모달로 마우스를 이동하는 순간 hover가 풀려 모달 메뉴를 사용할 수 없었다. 일단 모달을 감싸는 wrapper와 모달 컴포넌트를 '나의정보' span에 넣어주어 span에 hover를 주었을 때 hover 내용이 모달에도 적용되도록 했다 (마우스가 모달로 넘어가도 모달이 나타나 있도록). // html(with styled-components) 나의정보 // 모달을 감싸는 wrapper // 모달 하지만 나의 경우 디자인상 나의정보 span과 모달 사이에 간격이 있어 마우스가 모달로 넘어갈 수 없었다. 나의정보에서 모달로 마우스를 옮기기 위해서는 간격 부분을 지나가야 하는데 간격에 닿으면 모달이 꺼진다. 이 문제를 해결하기 위해 고민 끝에 모달을 감..

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

[Book Buddy / Error Note] 사용하지 않는 변수 에러 없애기

X is declared but its value is never read. 변수 등을 정의해놓고 사용하지 않으면 자꾸 에러가 나서 불편하다. 에러 문구에 eslint에 대한 힌트가 있어 금방 해결하였다. eslint의 rules에 아래 두 줄을 추가해준다. 나는 에러 대신 경고 정도만 띄워주길 바래서 warn을 입력하였다. "rules": { "no-unused-vars": "off", "@typescript-eslint/no-unused-vars": "warn" } 에러가 경고로 잘 바뀌었다. 아래와 같이 주석을 달아 개별적으로 에러를 막아버릴 수도 있다. // eslint-disable-next-line @typescript-eslint/no-unused-vars 참고자료 https://bobbyh..

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