💻 더 나은 개발자 되기/React 6

앞서 말하자면, 커스텀을 해야 해서 react-datepicker를 사용해야 하고, 해당 css를 사용해야 해서 테일윈드를 사용 하는 분은 가능은 하지만 좋은 방법은 아닐 수 있다.(나는 완료 후 작성하게 된 글이라.. 테일윈드 지원하는 걸로 교체 예정) 캘린더 사용이 되는 input을 공통으로 만들어야 했다. 기본 input에서 type을 date로 주면 이런 모양인데영 예쁘지가 않다.기획상 새로운 달력아이콘과 YYYY/MM/DD형식으로 보여줘야해서 date를 커스텀 해야 하는 상황. input만으로는 어려울 것 같고,라이브러리 없이 만들기엔 시간이 부족할 듯 하여아예 만드는 건 나중에 도전해보기로 했다.  react-datepicker를 많이 쓰고 있어서 사용해보기로 했다.npm install rea..

자주 쓰이는 기능이지만 할 때마다 귀찮은 비밀번호 input에 눈 아이콘 배치하기..이번에는 tailwind로 반영해보았다.이메일 유효성 검증은 이전 글에서 zod 라이브러리를 사용해서 스키마 정의 후 검증해주었고, password는 기준 값과 다른 경우 일치하지 않음 메시지와 input컬러를 바꿔준다. 메시지와 컬러는 useState로 주어서 텍스트 입력중일 때, input에서 벗어날 때 바로 체크해서 반영해주도록 했다.  8자 미만인 경우 검정색으로 8자 이상 입력 하라는 텍스트도 보여준다. 눈 아이콘 켜짐 여부에 따라 비밀번호는 암호화 되거나 그대로 보여준다.   사실 별 건 없지만.. 나중엔 더 빠르게 작업하기 위해 기록해두는 글. const [visibility, setVisibility] =..

이번 프로젝트때 zod를 처음 접하게 되었다. zod를 사용하면 스키마 선언을 해서 유효성 검사를 할 수 있는 라이브러리이다.이메일 검증을 할 때 복잡하게 따로 정규식을 넣지 않고 간편하게 가능한 장점이 있다.  라이브러리다보니 설치는 필요하다. npm install zodnpm i zod react-hook-form @hookform/resolvers공식문서에서 설치는 위에껄로 하면 된다 써있는데, react-hook-form을 사용할 예정이면 아래거 설치 해야한다고 해서 난 결국 둘 다 했다. 사용 방법import { z } from 'zod'; 이렇게 상단에서 zod를 가져와주고 // 이메일 스키마 정의const EmailSchema = z.string().email();이메일 스키마를 정의 해준다..

key는 리액트에서 어떤 항목을 추가, 삭제, 변경 등을 할 때 식별을 위해 사용하게 됩니다. key는 변경되지 않는 유일값으로 설정하는데, 보통 ID가 유일하기에 ID값을 사용하는 경우가 많습니다. key값이 존재하지 않으면 배열 중간의 값이 제거가 되는 등 해당 인덱스에 대한 값이 변하게 됩니다. 이때문에 고유한 값으로 key값을 주게 되면, 배열내 값이 변경이 되어서 리렌더링을 할 때, 값을 재사용 하는 경우 불필요한 렌더링을 줄일 수 있어서 최적화에도 도움을 줍니다.