후니의 개발 기록

이번 스프린트 작업 중에 useRef를 사용하면서 ref를 통해 언제 DOM 요소에 접근하는지에 대해 명확한 이해가 되지 않았었습니다. 먼저 React의 동작을 크게 두 단계로 나누어 설명해보겠습니다. 렌더링 단계 (Rendering Phase) 렌더링 단계에서 계산된 변경사항들을 실제 DOM에 적용하는 단계입니다. 이 단계에서는 Virtual DOM을 구성하고, 컴포넌트의 업데이트 여부를 판단합니다. 커밋 단계 (Commit Phase) 렌더링 단계에서 계산된 변경사항들을 실제 DOM에 적용하는 단계입니다. 💡 만약 렌더링 단계에 dom에 접근한다면 ? 첫 렌더링 시 DOM 생성 전: 실제 dom이 아직 생성되지 않았기에 ref.current의 값은 null이 됩니다. 업데이트 중 DOM 변경 전: 렌..

1. 타입스크립트의 template literal를 사용하면 다양한 타입을 만들수 있다.type T4Numbers = `${number}${number}${number}${number}`; type T3Numbers = `${number}${number}${number}`; type T2Numbers = `${number}${number}`; const n:T4Numbers ="123" //Type '"123"' is not assignable to type '`${number}${number}${number}${number}`'. typescript는 아직 regex를 활용한 타입 추론을 지원해 주고 있지 않고 있다.https://github.com/microsoft/TypeScript/issues/4..

[TIS] react event의 stopPropagation이 예상한 대로 작동하지 않는다. (React 이벤트 위임, 캡처링과 버블링)1.문제점💡React 컴포넌트에 event를 등록했을때 stopPropagation이 예상한 대로 작동하지 않았다. 테이블 내에서 날짜를 드래그해서 선택되는것은 테이블전체(Container)에 mousedown이벤트가 사용되어 작동한다. 💡이때 테이블전체(Container)에 등록한mousedown 핸들러의 경우 ref를 활용해 실제 dom에 등록하였다.즉 이는 날짜를 입력할 수 없는날에도 mousedown이 작동되어 시간이 입력되었다. 이벤트 버블링을 활용하면 문제를 해결할 수 있을것 같아 다음과 같은 계획을 세웠다. (1) NotAvailableDate컴포넌트에서 ..