I T H

moment.js는 날짜와 시간을 조작할 수 있도록 도와주는 라이브러리다. 현재시간을 출력할 수 있고, 시간을 원하는 형식으로 format하거나 원하는 시간을 추출할 수 있다. 그리고 날짜를 더하거나 뺄 수 있다. [ 설치 ] npm install moment [ 사용법 ] 1. 현재 시간 출력 const time = moment(); 2. Format - 원하는 형식에 맞게 format을 지원한다. const time = moment(); const formatData = time.format(); - 커스텀도 가능함. const formatData2 = moment().format("YYYY년 MM월 DD일 hh시 mm분 ss초"); 3. 시간 하루 전 , 시간 하루 후 - 현재날짜 기준으로 하루 전..

modal라이브러리 또는 직접 modal을 만드는 경우 pc버전에서는 잘 뜨는데, 모바일 버전에서 안뜨는 경우가 있다. - pc에서는 잘먹히는 더블클릭 이벤트가 모바일에서 더블클릭이 먹히지 않았다. - modal 라이브러리로는 mui의 modal을 사용했는데, mui/material에서 제공해주는 onRowClick(), onRowDoubleClick() 이 있기에 onRowDoubleClick() 에서 onRowClick() 으로 바꿔서 사용했다. - grid 테이블에서 클릭 이벤트시 modal이 뜨게 했다. - onRowClick 이벤트로 바꾼후 모바일에서도 잘 먹히는 것을 볼수있다. - 화면 사이즈를 불러와서 다르게도 처리 할 수 있지만, 이번에는 간단하게 클릭 이벤트만 바꿔서 처리했다.

- 아래와 같이 input태그에서 onChange 이벤트와 에서의 onChange 이벤트를 handleChange함수로 호출할때 각각의 타입이 다르기에 에러가 뜬다. - 이렇게 태그가 다른경우에서 onChange 공통함수를 호출 하고 싶을때는 " 타입 | 타입 " 으로 지정하면 된다. - input 태그에서의 onChange 함수실행 - input태그에서의 onChange이벤트의 타입 - select , option 태그에서의 onChange 함수실행 - input태그와 select 태그에서의 onChange이벤트의 타입 2가지 e: ChangeEvent | ChangeEvent

styled-components 는 javaScript나 typeScript 환경에서 스타일을 작성하기 위한 CSS-in-JS 라이브러리다. 1. 설치 npm install styled-components@latest npm install --save react-toastify 2. import import { ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; import styled from "styled-components"; 3. styled components를 이용한 스타일이 적용된 컴포넌트를 생성. export const StyledToastContainer = styled(ToastCo..

1. onClick 이벤트의 타입 e: React.MouseEvent 2. onSubmit 이벤트의 타입 event: React.FormEvent 3. onChange 이벤트의 타입 e: ChangeEvent