전체 글

maxlength 속성은 주로 텍스트 및 비밀번호와 같은 입력 유형에 사용되어 입력 필드에서 허용되는 최대 문자 수를 지정하는 데 사용됩니다. 그러나 "number" 입력 유형에 대해 maxlength 속성은 지원되지 않습니다. 숫자 입력 필드의 경우 max 속성을 사용하여 허용되는 최대 값을 지정할 수 있습니다. 다음은 예제입니다. 이 예제에서 입력 필드는 100까지의 숫자 값만 허용합니다. 숫자 자체의 값이 아닌 자릿수를 제한하려면 maxlength와 같은 직접적인 속성이 없으므로 JavaScript를 사용하여 이러한 제약을 강제할 수 있습니다. 다음은 숫자 입력의 자릿수를 제한하기 위한 JavaScript를 사용한 간단한 예제입니다. 이 예에서 limitDigits 함수는 사용자가 숫자 입력에 값을..

리액트 컴포넌트에서 받은 숫자값을 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 선호인데 리액트 간만에 하려니 귀찮....... 번거롭다. ....

자바스크립트를 사용하지 않고도 가장 쉽고 간편하게 레이지로딩을 구현할 수 있습니다. lazy attribute loading 브라우저가 이미지를 불러올 때 사용할 방식을 지정합니다. eager: 뷰포트 안에 위치하는지 여부에 상관하지 않고 이미지를 즉시 불러옵니다. (기본값) lazy: 이미지가 뷰포트의 일정 거리 안으로 들어와야 불러옵니다. 거리는 브라우저가 정의합니다. 이미지를 보게 될 것으로 충분히 예상 가능한 상황에만 불러옴으로써, 불필요하게 네트워크와 저장소 대역폭을 낭비하지 않을 수 있습니다. 또한 일반적인 사용처에서는 대개 성능을 향상할 수 있습니다. 찾아본 글 중에 제일 좋았던 글 번역 : 웹 성능 최적화를 위한 Image Lazy Loading 기법 :: 이뇽의세상 (tistory.com..

코로나와 함께 방치되었던 블로그를 심폐소생하려하니 스킨이 마음에 안들어서 커스텀해볼까란 생각만 백년째하다가 개발자 블로그용 스킨이 있지 않을까 싶어서 찾아보이 이걸 가장 많이 쓰고 있었다. https://pronist.tistory.com/5 hELLO 티스토리 스킨을 소개합니다. hELLO 스킨은 초기에 기능이 많이 없었다가, 티스토리 블로거 여러분의 호응에 힘입어 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의 pronist.tistory.com https://github.com/tidory/hello GitHub - tidory/hello: 😎 당신의 멋진 블로그에 걸맞는 최고의 티스토리 스킨 😎 당신의 멋진 블로그에 걸맞는 최고의 ..

갤럭시 폴드4 (Galaxy Fold 4) 가로폭 - 접힌 상태 : 345px - 펼친 상태 : 691px 디바이스에서 아래 URL에 접속하면 직접 테스트 해 볼 수 있습니다. [test] viewport / userAgent (codepen.io) [test] viewport / userAgent ... codepen.io 구글 인스펙터로 접힌 폭이 280px 인줄 알고 작업했는데, 실제 디바이스랑 달라서 확인해봤다. 따라서 폴드 대응을 위해 미디어쿼리를 @media screen and (max-width: 280px) { }로 잡았다면 적용이 안되고 있을 것!!! 처음에 갤폴드 280 이라도 들었을 때, 왜 이딴걸 만들어서 고통을 주나 싶었는데 이제는 반쪽 화면 해상도도 345 라니 다행이다 싶다 ㅋ..

마크업 개발자란?마크업 개발자는 웹 개발 과정에서 주로 HTML, CSS, 그리고 종종 JavaScript를 사용하여 웹 페이지를 만드는 전문가입니다. 이들은 디자이너가 제공한 디자인을 기반으로 웹 페이지의 구조와 레이아웃을 작성하며, 사용자 경험을 향상시키기 위해 웹 페이지에 필요한 시각적인 콘텐츠를 구현합니다. 주요 업무 및 책임에는 다음이 포함될 수 있습니다:HTML/CSS 작성: 마크업 개발자는 웹 페이지의 기본 구조를 정의하기 위해 HTML(하이퍼텍스트 마크업 언어)를 작성하고, CSS(캐스케이딩 스타일 시트)를 사용하여 페이지의 스타일 및 레이아웃을 설계합니다.반응형 웹 디자인: 다양한 디바이스 및 화면 크기에 대응하기 위해 반응형 웹 디자인 기술을 사용하여 웹 페이지를 개발합니다.크로스 브라..