Author Archives: itpsolver

[react] 특정 html element의 값을 수동으로(programmatically) 셋팅 (el.value = newValue)하는 데 완벽하게 되지 않을 경우에 대한 해결 샘플.

By | 1월 31, 2023

개요 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)

By | 1월 31, 2023

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

[react] html 엘리먼트 (real dom element) 에 리액트 컴포넌트 (react component) 삽입(insert)하기

By | 1월 30, 2023

환경 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 »

yarn dev로 서버를 띄워 브라우저로 테스트를 하는데, vite connected 상태에서 화면에 출력되지 않을 경우

By | 12월 26, 2022

환경 "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 내의 라이브러리 버전 고정의 위험성

By | 12월 14, 2022

환경 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)

By | 12월 14, 2022

로컬 환경 yarn 3.2.3 을 사용하여 라이브러리 설치, build 모두 수행 서버 환경 node 16 (aws codebuild) 항상 아무것도 없는 바닥에서 npm install 부터 시작함. install 시에는 yarn을 사용하지 않고 npm i –force 명령을 사용 (항상 새로 다운로드) build시에는 yarn 1.x 를 사용 이슈 서버 빌드시에만 타입스크립트 오류 발생 정확히 말하면 build 전 수행하는 tsc… Read More »

spring web 에서 파라미터를 전송할 때, 아무 이유 없이 파라미터 바인딩(parameter, bind, bound)이 되지 않았던 경우 (camel case, jackson)

By | 12월 13, 2022

전달되지 않은 파라미터 명: 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 를 바인딩 하는 샘플

By | 11월 30, 2022

<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…)

By | 11월 23, 2022

아래 코드와 같이 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)

By | 11월 18, 2022

다음과 같은 상황이 있었다. A: 투명 div layer B: 버튼(button tag)을 감싸고 있는 div layer A가 B를 가리고 있는데, A가 투명이라 눈으로 보기에는 문제가 없음. 내 생각으로는 B의 z-index가 더 높기 때문에 클릭하는데 아무 문제가 없을 것이라고 생각했는데, 아무리 해도 클릭이 되지 않았다. B 에 position: relative 를 주었더니 해결됨!

[javascript/정규식(regex)] 특정 문자열에서 특정 패턴이 몇 회(몇 번)나 출현하는지 확인하기

By | 11월 15, 2022

/** * 특정 문자열에서 해당 패턴이 발생한 횟수를 리턴 */ 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] 한글 조사 ‘은(는)’, ‘이(가)’ (은는, 이가) 구분해서 붙이는 샘플코드

By | 11월 11, 2022

/** * 인자로 받은 한글의 종성여부를 판단하여 적합한 조사를 리턴한다. */ 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 »