I T H

- 이 에러는 null 유형이 string 유형에 할당할 수 없다는 에러이다. [ 해결방법 ] - 해당 string 타입에 ' | null ' 을 추가해주면 된다. [에러 해결 전 코드] [ 에러 해결 후 코드] authorizationCode: string | null;

관리자용 페이지중에서 사용자 데이터를 관리하는 페이지를 만들려고 한다. 먼저 db에 저장되있는 사용자 데이터들을 조회해 오고, 조회해온 데이터를 수정, 삭제하는 기능과 사용자를 등록하는 기능까지 구현할 것이다. 사용 라이브러리는 mui/x-data grid 를 사용해서 테이블을 구현했고, row를 클릭할 경우 modal 이 뜨게 할 것이다. modal 라이브러리는 mui/material의 modal을 사용했다. Frontend - 구현에 들어가기 앞서, 필요한 라이브러리( mui )를 먼저 다운로드 받아준다. https://mui.com/material-ui/getting-started/installation/ Installation - Material UI Install Material UI, the ..

이 에러는 타입간의 불일치 에러다. - 전달되는 state의 타입과 받는 컴포넌트의 파라미터의 타입이 일치한지 확인해 봤다. 보내는 쪽의 state에 modalData로 타입을 불러와서 사용했고, - 이건 props로 전달받는 쪽의 컴포넌트의 props의 타입이다. 둘다 일치하는데도 에러는 계속 났다. - 혹시나 하는 마음에 데이터가 안들어가있는 경우의 수도 에러가 날수 있기에 코드를 조금 수정해 봤다. - 수정 전 코드 modalData쪽에 빨간줄이 계속 뜨고 타입 불일치 에러가 계속해서 떴다. 에러를 찾던 중에 전달하는 데이터중에서 데이터의 일부를 못받아 온다는 것을 알았고, 바로 수정하였다. - 수정 후 코드 modalData가 있을 때 아래의 컴포넌트를 타게 하였더니 에러가 없어졌다.

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