[javascript] textarea 의 마지막 글자 뒤에 커서가 위치하도록 하기 (set cursor at the end)
element.selectionStart = element.value.length 참고 https://stackoverflow.com/questions/10158190/how-to-set-cursor-at-the-end-in-a-textarea
Author Archives: itpsolver
[react] 특정 html element의 값을 수동으로(programmatically) 셋팅 (el.value = newValue)하는 데 완벽하게 되지 않을 경우에 대한 해결 샘플.
개요 react로 wrapping한 메신저 라이브러리 (sendbird)의 메시지 입력창 (textarea)에 set value를 해야 하는 상황 textarea.textContent = newValue 식으로 값을 셋팅한 후 textarea.dispatch(new Event(‘input’)); => 처음 한 번은 잘 됨. 이후로는 계속 안됨. 검색 끝에 아래의 방법으로 해결함. 유틸함수 선언 const inputTypes = [ window.HTMLInputElement, window.HTMLSelectElement, window.HTMLTextAreaElement, ]; /** * 특정 html element의 value를 set 하는… Read More »
[react] input text – placeholder 처럼 생긴 레이블(label, 라벨)이 인풋박스의 좌상단으로 이동하는 애니메이션(animation) 기능 구현 샘플. (floating label)
repl 아래 참고 링크중 하나를 복붙하여 구현 참고 https://blog.stackfindover.com/animated-floating-input-labels-using-css/ https://dev.to/rafacdomin/creating-floating-label-placeholder-for-input-with-reactjs-4m1f https://jacobruiz.com/blog/2021/2/11/how-to-transition-placeholder-text-into-a-label-in-react-floating-label-inputs
[windows] 메모리(ram) 정리/최적화 도구(tool) – RAMMap
다운로드 https://learn.microsoft.com/ko-kr/sysinternals/downloads/rammap 참고 https://blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=coding-&logNo=221568777737
[링크] 간단한 javascript 수행시간 검사(check time elapsed, stopwatch, console.time…)
console.time() 쓸만하네 https://developer-talk.tistory.com/286
[react-query/useQuery] fetch를 분명히 했는데도 캐시(cache data)를 덮어쓰지(overwrite) 않았던 현상.
생각해 보면 좀 멍청한 이야기인데… -__-; ajax promise가 reject 되지는 않았는지 확인해 보자.
[react] html 엘리먼트 (real dom element) 에 리액트 컴포넌트 (react component) 삽입(insert)하기
환경 react ^18.2.0 import React, { useEffect, useState } from "react"; import { createPortal } from "react-dom"; import TestExt from "./TestExt"; /** * TestExt 컴포넌트를 특정 DOM 노드에 선택적으로 삽입하기 위해 wrapping한 컴포넌트 */ const TestExtWrap = ({ isOpen }: { isOpen: boolean }) => { const wrap = document.getElementById("div-sample")!; return <>{isOpen && createPortal(<TestExt />,… Read More »
[css] 두 개 이상의 클래스가 존재하는 엘리먼트에 한해서만 적용되는 css 정의 (CSS rule to apply only if element has BOTH classes)
css 작성시 단순히 두 개의 클래스를 나열해 주면 된다. <div class="abc xyz">블라블라</div> .abc.xyz { /* rules go here */ }
[react] react-device-detect 라이브러리의 단점
라사이즈(resize) 이벤트에 대응하지 못한다.
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 를 바인딩 하는 샘플
<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 »