💻 더 나은 개발자 되기 69

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

next 14로 프로젝트를 진행중인데, You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.와 같은 오류가 발생되었다.   useState와 같은 React훅의 경우 클라이언트 컴포넌트에서만 사용할 수 있다고 한다.  그런데, 이걸 사용하는 곳이 서버 컴포넌트인지, 클라이언트컴포넌트인지 판단을 할 수가 없기 때문에.컴포넌트 파일 최상단에서 "use client"를 추가해서 이 컴포넌트가 클라이언트 컴포넌트임을 지정해줘야 한다. 여기서 의문..

자주 쓰이는 기능이지만 할 때마다 귀찮은 비밀번호 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();이메일 스키마를 정의 해준다..