티스토리

zineeworld

검색하기

블로그 홈

zineeworld

zinee-world.tistory.com/m

2013년부터 마크업 개발을 하고 있습니다.

구독자: 27

방명록 방문하기

주요 글 목록

[Error] input type="number" maxlength is not working maxlength 속성은 주로 텍스트 및 비밀번호와 같은 입력 유형에 사용되어 입력 필드에서 허용되는 최대 문자 수를 지정하는 데 사용됩니다. 그러나 "number" 입력 유형에 대해 maxlength 속성은 지원되지 않습니다. 숫자 입력 필드의 경우 max 속성을 사용하여 허용되는 최대 값을 지정할 수 있습니다. 다음은 예제입니다. 이 예제에서 입력 필드는 100까지의 숫자 값만 허용합니다. 숫자 자체의 값이 아닌 자릿수를 제한하려면 maxlength와 같은 직접적인 속성이 없으므로 JavaScript를 사용하여 이러한 제약을 강제할 수 있습니다. 다음은 숫자 입력의 자릿수를 제한하기 위한 JavaScript를 사용한 간단한 예제입니다. 이 예에서 limitDigits 함수는 사용자가 숫자 입력에 값을.. 공감수 0 댓글수 0 2023. 12. 4.
[Warning] Type '{'--box-gap: string;}' has no properties in common with type 'Properties<string | number, string & {}>'. 리액트 컴포넌트에서 받은 숫자값을 CSS 변수로 지정하고 싶은데, style={{'--box-gap': `${gap}`px} 이렇게 넣으니, Warning이 떴다. 해결책은 as React.CSSProperties를 넣어주면 된다. style={{'--box-gap': `${gap}`px} as React.CSSProperties} 공감수 0 댓글수 0 2023. 11. 30.
[Error] React Hook "useState" is called conditionally. 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를 호출하지 마세요. ❌ .. 공감수 0 댓글수 0 2023. 11. 29.
[Storybook] React18+Webpack5+Storybook7 alias 설정 Error Module not found: Error: Can't resolve '@utils/~~~' in '~~~~~~~~~' 리액트 프로젝트에서 이미 path alias를 사용할 수 있도록 설정이 되어있었다. 그런데 스토리북에서는 모듈을 찾을 수 없다고 나오는게 아닌가? ㅠㅠ 찾아보니 스토리북은 별도의 빌드환경을 사용하기 때문에 webpack 설정을 따로 해주는 것이 필요한 것으로 보인다. 웹팩 설정해주면 된다는 건 알겠는데 뭔가 찾아보는 코드마다 조금씩 달라서 계속 안되서 하루종일 삽질...ing 뭔가 될듯 말듯 하는게 더 짱나........... tsconfig.json { "compilerOptions": { { ..... }, // 당신의 기존 설정값들... "include": ["src"].. 공감수 0 댓글수 0 2023. 11. 24.
[Error] input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. History 뷰에서 리액트 컴포넌트로 옮기는 중이라 타입스크립트 에러부터 시작해서 자잘하게 계속해서 크고 작은 에러들을 마주하고 있다. 위 에러의 원인은 input 안에 다른 태그를 포함할 수 없다는 내용이다. 당연한 소리인데 옮기다가 태그 여닫는 걸 잘못한 모양이다. 이런걸로 에러떠서 시간 낭비할때 진짜 현타온다 ㅎ Problem .... Solution 리액트는 label for 대신에 htmlFor 를 사용한다. checked 도 그냥 쓸 수 없고 defaultCheck={isCheck} 로 만들어서 useState, useEffect 엮어서 쓴다. 아......... svelt >>>> vue >>>>>>>>>>> react 선호인데 리액트 간만에 하려니 귀찮....... 번거롭다. .... 공감수 0 댓글수 1 2023. 11. 24.
이미지 최적화 Lazy Loading을 쉽게 구현하는 방법 자바스크립트를 사용하지 않고도 가장 쉽고 간편하게 레이지로딩을 구현할 수 있습니다. lazy attribute loading 브라우저가 이미지를 불러올 때 사용할 방식을 지정합니다. eager: 뷰포트 안에 위치하는지 여부에 상관하지 않고 이미지를 즉시 불러옵니다. (기본값) lazy: 이미지가 뷰포트의 일정 거리 안으로 들어와야 불러옵니다. 거리는 브라우저가 정의합니다. 이미지를 보게 될 것으로 충분히 예상 가능한 상황에만 불러옴으로써, 불필요하게 네트워크와 저장소 대역폭을 낭비하지 않을 수 있습니다. 또한 일반적인 사용처에서는 대개 성능을 향상할 수 있습니다. 찾아본 글 중에 제일 좋았던 글 번역 : 웹 성능 최적화를 위한 Image Lazy Loading 기법 :: 이뇽의세상 (tistory.com.. 공감수 0 댓글수 0 2023. 11. 17.
[모바일 해상도] 갤럭시 폴드4 viewport 사이즈, 모바일 해상도 확인하기 갤럭시 폴드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 라니 다행이다 싶다 ㅋ.. 공감수 0 댓글수 3 2023. 11. 15.
[Vue] SyntaxError: The requested module '/node_modules/lottie-web/build/player/lottie.js?v=b1d5819a' does not provide an export named 'default' (at lottie.vue:6:1) 흠.... vue2.7 + vite (windows 환경) 쓰고 있는데 vue-lottie 쓰려고 예제대로 다 했는데 계속 이 에러가 뜸 검색해도 방법을 모르겠고 미치겠네..... 같은 에러 고치신분 있으면 댓글 좀 달아주세요 ㅠㅠㅠㅠ // package.json { "name": "vue", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite --host", "build": "vite build", "preview": "vite preview", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", "chromatic": "npx.. 공감수 0 댓글수 0 2023. 9. 14.
[윈도우] 세로모니터 화면 분할 설정하기 세로 모니터 화면 분할하는 방법 2분할 가능 (2023년) - 사이트맵 (sightmap.co.kr) 세로 모니터 화면 분할하는 방법 2분할 가능 ([currentyear]년) - 사이트맵 세로 모니터 화면 분할하는 방법을 소개해드리려고 합니다. 평소에 윈도우 기능으로 윈도우키 + 방향키로 화면을 분할해서 사용하시는 분들이 많았을 겁니다. 그러나 이 기능은 가로 모니터일 sightmap.co.kr 공감수 0 댓글수 0 2023. 8. 24.
[Svelte] 스벨트 시작하기 비주얼이 주가 되는 프로젝트를 맡게 되었다. 별도의 프론트엔드 담당자 없이 혼자서 일단은 진행해 볼 예정이라 스벨트를 써보기로 마음 먹었다. 3년 전부터 알고는 있었지만 실제 프로젝트에 써본 적은 없었기 때문에 기대가 됐다. 스벨트(Svelte)란? Svelte는 2016년 출시한 오픈 소스 프론트엔드 웹 프레임워크이다. 기존의 React나 Vue.js 등의 널리 알려진 웹 프레임워크와 달리, 가상 DOM을 사용하지 않으며 빌드 단계에서 구성 요소를 컴파일하여 성능이 향상되었다. Svelte - 나무위키 이 저작물은 CC BY-NC-SA 2.0 KR에 따라 이용할 수 있습니다. (단, 라이선스가 명시된 일부 문서 및 삽화 제외) 기여하신 문서의 저작권은 각 기여자에게 있으며, 각 기여자는 기여하신 부분의.. 공감수 0 댓글수 0 2023. 3. 8.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.