[html] input text 입력폼에서 원하지 않는 빨간색 밑줄(red underline)이 보일 경우 (spellCheck)
input 태그의 spellcheck 속성을 false로 설정해 보자
Category Archives: Lang
[react] 조건(condition)에 따라 React Element에 속성(attribute, props?)을 추가하는 예시 (조건에 따라 tabIndex 속성을 넣었다 뺐다 하기, 조건부 속성 추가)
소스 예시 let props = condition ? {tabIndex: 1} : {}; let div = <div {…props} /> 출처 https://stackoverflow.com/questions/36523225/dynamic-tabindex-attribute-in-jsx-react
[typescript] object 내에 있는 key를 기준으로 object 내부를 정렬하기 (sort, order by…)
소스 /** * 인자로 받은 object를 key 기준으로 내부 정렬하여 리턴한다. * * – 한계점 * – 1depth 만 되는 것처럼 보인다. */ export const sortByKey = (unordered: any = {}) => { return Object.keys(unordered) .sort() .reduce((obj: any = {}, key: any) => { obj[key] = unordered[key]; return obj; }, {}); }; 참고 https://stackoverflow.com/questions/5467129/sort-javascript-object-by-key
[typescript] 스프레드 연산자 (전개구문, 펼침, spread operator) 를 사용한 배열을 함수의 인자(인수, 매개변수, arguments)로 넘기고 싶을 경우
javascript 라면 그냥 사용하면 되는데, typescript 일 경우 아무 생각 없이 사용하면 다음과 같은 에러가 발생한다. A spread argument must either have a tuple type or be passed to a rest parameter function getObj(name: string, age: number) { return { name, age, }; } // 해결방안 1) as const를 사용하여 배열을 튜플(tuple)로 만든다. const result… Read More »
[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
[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
[링크] 간단한 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 »
[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