[react] react-device-detect 라이브러리의 단점
라사이즈(resize) 이벤트에 대응하지 못한다.
Author Archives: itpsolver
yarn dev로 서버를 띄워 브라우저로 테스트를 하는데, vite connected 상태에서 화면에 출력되지 않을 경우
환경 "vite": "2.9.15" "react": "^18.2.0" "typescript": "4.9.4" 현상 browser 콘솔(console) 에서는 ‘vite connected’ 상태 로딩중 동글뱅이 돌고 있음. browser network 탭을 보면 main.tsx 에서 대기(pending)중 해결 yarn build시 컴파일 오류가 나는 부분이 있었는데, 그 부분을 해결하니 다시 잘 됨.
[react] package.json 내의 라이브러리 버전 고정의 위험성
환경 vite 2.9.15 @mui/material ^5.10.5 @mui/material 의 버전업이 너무 빨라서 ‘되던 게 안되는 현상’ 이 발생하여 (minor version 변경임에도 props 구조가 변해 버림) 꺽쇠 ^를 사용하지 않고 버전 숫자만으로 지정하여 고정을 시도했으나, yarn build는 성공했는데 yarn dev 에서 알 수 없는 오류를 계속 뱉어내어 롤백을 했다.
[yarn berry] tsc (typescript compile) 명령시 로컬에서는 정상인데 서버에서만 컴파일 오류가 났던 경험 (ts error only server / aws codebuild)
로컬 환경 yarn 3.2.3 을 사용하여 라이브러리 설치, build 모두 수행 서버 환경 node 16 (aws codebuild) 항상 아무것도 없는 바닥에서 npm install 부터 시작함. install 시에는 yarn을 사용하지 않고 npm i –force 명령을 사용 (항상 새로 다운로드) build시에는 yarn 1.x 를 사용 이슈 서버 빌드시에만 타입스크립트 오류 발생 정확히 말하면 build 전 수행하는 tsc… Read More »
[IntelliJ] 모든 환경설정에서 java 버전(version)을 맞췄는데, 컴파일시 자꾸 구버전 컴파일러(compiler)를 사용하는 경우. (Gradle JVM 설정)
IntelliJ > Settings > Build, Execution, Deployment > Build Tools > Gradle > Gradle JVM 도 java 버전을 맞춰 준다. 참고 Intellij – error: invalid source release: 17 오류
spring web 에서 파라미터를 전송할 때, 아무 이유 없이 파라미터 바인딩(parameter, bind, bound)이 되지 않았던 경우 (camel case, jackson)
전달되지 않은 파라미터 명: fInput 전달된 파라미터 명: ffInput ??? 원인 jackson이 java bean naming convention을 사용하는데, java 표준에는 ‘Don’t capitalize first two letters of a bean property name’ 라는 룰이 있다고 한다. 결국 jackson이 json parsing 하는 각 프로퍼티의 첫 두 글자는 무조건 소문자여야 한다는 것. 참고 https://stackoverflow.com/questions/30205006/why-does-jackson-2-not-recognize-the-first-capital-letter-if-the-leading-camel-c http://futuretask.blogspot.com/2005/01/java-tip-6-dont-capitalize-first-two.html
[react/typescript] 하나의(single) html 엘리먼트(element)에 2개 이상의(multiple) ref 를 바인딩 하는 샘플 (useRef)
<input … ref={(el) => { refA(el); // (1) react-hook-form > controller가 주는 ref (refB as MutableRefObject<HTMLInputElement | null>).current = el; // (2) imask의 useIMask가 주는 ref }} … /> 참고 처음 찾아본 문서에는 (1)의 방식만 소개되어 있어서 일괄 적용해 봤더니 refA는 정상 적용되고, refB는 ‘함수가 아닙니다’ 류의 오류가 발생. 좀 더 찾아보니 위에 기록한 (2)… Read More »
react-hook-form 의 controller 를 사용하여 제어 컴포넌트 input text를 만들었는데, onchange 시점에 스크립트 오류(console warning, 에러는 아님)가 발생했던 경험 (a component is changing an uncontrolled input to be controlled…)
아래 코드와 같이 controller render props의 value를 그대로 사용하지 않고, value ||” 로 처리하여 해결함. <Controller … render={({ field: { onChange, value }}) => { return ( <input type='text' value={value || ''} // 이 부분 … /> }} /> 참고 https://stackoverflow.com/questions/47012169/a-component-is-changing-an-uncontrolled-input-of-type-text-to-be-controlled-erro
[html/css] 분명히 z-index 값이 더 높은데도 불구하고 click 이벤트가 먹지 않았던 사례 (해결 => position: relative)
다음과 같은 상황이 있었다. A: 투명 div layer B: 버튼(button tag)을 감싸고 있는 div layer A가 B를 가리고 있는데, A가 투명이라 눈으로 보기에는 문제가 없음. 내 생각으로는 B의 z-index가 더 높기 때문에 클릭하는데 아무 문제가 없을 것이라고 생각했는데, 아무리 해도 클릭이 되지 않았다. B 에 position: relative 를 주었더니 해결됨!
[링크] [javascript] 물결 연산자 (tilde, bitwise operator) 의 의미 (물결, 느낌표, indexOf…)
https://coolmsd.tistory.com/103 https://stackoverflow.com/questions/12299665/what-does-a-tilde-do-when-it-precedes-an-expression
[javascript/정규식(regex)] 특정 문자열에서 특정 패턴이 몇 회(몇 번)나 출현하는지 확인하기
/** * 특정 문자열에서 해당 패턴이 발생한 횟수를 리턴 */ export const countPattern = (str: string, pattern: RegExp) => { return ((str || '').match(pattern) || []).length; }; // 점이 몇 개나 존재하는지 확인 const cnt = countPattern('aaa.bbb.ccc', /\./g); 출처 https://stackoverflow.com/questions/1072765/count-number-of-matches-of-a-regex-in-javascript
[javascript] 한글 조사 ‘은(는)’, ‘이(가)’ (은는, 이가) 구분해서 붙이는 샘플코드
/** * 인자로 받은 한글의 종성여부를 판단하여 적합한 조사를 리턴한다. */ const getKoreanAffix = (str: string, type: '은는' | '이가' | '과와') => { const lastChar = str.charCodeAt(str.length – 1); const hasLast = (lastChar – 0xac00) % 28; switch (type) { case '은는': return hasLast ? '은' : '는'; case '이가': return hasLast ? '이'… Read More »
[react] children 으로 props 넘기는 방법 샘플코드 (pass props to children)
샘플코드 return ( <> {React.cloneElement(children, { prop1: 'AAA', prop2: 'BBB' })} </> ); 그냥 편리하게 개량해 본 것 return ( <> {React.cloneElement(props.children, { …_.omit(props, ['children']) })} </> ); children을 omit 하지 않아도 잘 작동하는데, 그냥 찝찝해서 넣어 봄
react router v6 에서 path variable parameter 처리 샘플 코드
route <Route path="invoices/:invoiceId" element={<Invoice />} /> page function Invoice() { const { invoiceId } = useParams(); const invoice = fetchBlaBla(`/api/invoices/${invoiceId}`); … }
[react] useEffect 의 deps 변경에 대해 debounce (throttle) 처리하는 샘플코드
import { dc, isNotBlank } from '@/utils/common'; import _ from 'lodash'; import React, { useEffect, useRef, useState } from 'react'; /** * textarea 의 내용이 변할 때 debounce를 걸고 convert 함수를 실행한다. */ const TsxConverter = () => { const [contents, setContents] = useState<string>(''); const debounced = useRef(_.debounce((newVal) => convert(newVal), 1000)); useEffect(() => { if… Read More »
[링크] 개발 관련 참고(공부, 연구, study) 링크
고퀄리티⚡개발 컨텐츠 모음 모든 자바스크립트 개발자가 알아야 하는 33가지 개념
[react/typescript] FC의 Props type을 조건부(conditionally) 필수(required) 처리 하는 샘플코드
react로 select box를 구현하던 중 작성한 코드 type SELECT_기본선택지 = '선택' | '전체'; type Props = { data: any[]; // select box를 구성할 리스트 데이터 labelKeyName?: string; // 리스트(=data)의 요소에서 특정 프로퍼티를 option의 label로 사용하고 싶을 경우 기재 valueKeyName?: string; // 리스트(=data)의 요소에서 특정 프로퍼티를 option의 value로 사용하고 싶을 경우 기재 style?: CSSProperties; } &… Read More »
vite 에서 특정 라이브러리(dependencies)를 버전업 (yarn up [라이브러리명]…) 했는데, 신 버전이 적용되지 않고 계속 구버전으로 로딩되던 현상. 심지어 yarn remove를 했는데도 이전 버전이 작동하던 문제 해결
환경 vite 2.9.15 원인: vite의 캐시(cache)가 문제였다. vite cache clear 방법 (둘 중 선택) node_modules/.vite 폴더 삭제 vite로 로컬 서버 실행하는 명령문에 –force 옵션 추가
[링크] yarn berry 사용법 관련 링크
yarn berry로 React.js 프로젝트 시작하기
yarn 3.x (berry) 가 제대로 동작하지 않을 경우에 대한 체크리스트
1. 안되면 일단 yarn을 재설치 해 보자 npm un yarn –location=global npm i yarn –location=global 2. 그래도 안되면 어딘가에 있을지도 모르는 .yarnrc 파일을 찾아서 삭제해 주자. 3. 프로젝트 루트의 yarn 관련 모든 것을 일단 삭제 해 보자. .yarn 폴더, node_modules 폴더, pnp.* 파일, .yarnrc.yml … yarn.lock 파일은 삭제하지 말고 내용만 clear 한다. 4. yarn -v… Read More »