maxlength 속성은 주로 텍스트 및 비밀번호와 같은 입력 유형에 사용되어 입력 필드에서 허용되는 최대 문자 수를 지정하는 데 사용됩니다. 그러나 "number" 입력 유형에 대해 maxlength 속성은 지원되지 않습니다. 숫자 입력 필드의 경우 max 속성을 사용하여 허용되는 최대 값을 지정할 수 있습니다. 다음은 예제입니다. 이 예제에서 입력 필드는 100까지의 숫자 값만 허용합니다. 숫자 자체의 값이 아닌 자릿수를 제한하려면 maxlength와 같은 직접적인 속성이 없으므로 JavaScript를 사용하여 이러한 제약을 강제할 수 있습니다. 다음은 숫자 입력의 자릿수를 제한하기 위한 JavaScript를 사용한 간단한 예제입니다. 이 예에서 limitDigits 함수는 사용자가 숫자 입력에 값을..
개발일지/Error
리액트 컴포넌트에서 받은 숫자값을 CSS 변수로 지정하고 싶은데, style={{'--box-gap': `${gap}`px} 이렇게 넣으니, Warning이 떴다. 해결책은 as React.CSSProperties를 넣어주면 된다. style={{'--box-gap': `${gap}`px} as React.CSSProperties}
Error React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return? ✅ function component은 본문의 최상위 수준에서 호출하세요 . ✅ custom Hook은 본문의 최상위 수준에서 호출하세요 . ❌ 조건이나 루프 내에서 Hook을 호출하지 마세요. ❌ 조건문 다음에 Hooks를 호출하지 마세요 return. ❌ 이벤트 핸들러에서 Hooks를 호출하지 마세요. ❌ 클래스 구성 요소에서 Hooks를 호출하지 마세요. ❌ ..
Error Module not found: Error: Can't resolve '@utils/~~~' in '~~~~~~~~~' 리액트 프로젝트에서 이미 path alias를 사용할 수 있도록 설정이 되어있었다. 그런데 스토리북에서는 모듈을 찾을 수 없다고 나오는게 아닌가? ㅠㅠ 찾아보니 스토리북은 별도의 빌드환경을 사용하기 때문에 webpack 설정을 따로 해주는 것이 필요한 것으로 보인다. 웹팩 설정해주면 된다는 건 알겠는데 뭔가 찾아보는 코드마다 조금씩 달라서 계속 안되서 하루종일 삽질...ing 뭔가 될듯 말듯 하는게 더 짱나........... tsconfig.json { "compilerOptions": { { ..... }, // 당신의 기존 설정값들... "include": ["src"]..
History 뷰에서 리액트 컴포넌트로 옮기는 중이라 타입스크립트 에러부터 시작해서 자잘하게 계속해서 크고 작은 에러들을 마주하고 있다. 위 에러의 원인은 input 안에 다른 태그를 포함할 수 없다는 내용이다. 당연한 소리인데 옮기다가 태그 여닫는 걸 잘못한 모양이다. 이런걸로 에러떠서 시간 낭비할때 진짜 현타온다 ㅎ Problem .... Solution 리액트는 label for 대신에 htmlFor 를 사용한다. checked 도 그냥 쓸 수 없고 defaultCheck={isCheck} 로 만들어서 useState, useEffect 엮어서 쓴다. 아......... svelt >>>> vue >>>>>>>>>>> react 선호인데 리액트 간만에 하려니 귀찮....... 번거롭다. ....
