컴포넌트의 재사용성을 위해 width, height에 고정값을 때려넣는 것은 신중해야 한다. 컴포넌트 내부에서 변하지 않을 스타일들은 사이즈에 px을 때려넣어도 아무 상관이 없지만 컴포넌트 자체를 담는 box 등은 부모 컴포넌트에 의해 사이즈나 위치가 변경될 수 있으므로 사이즈를 최대한 보수적으로 건드려야 한다. 픽셀을 절대값으로 때려도 되는 경우 위 컴포넌트에서 보이는 빨간색 바와 파란색 바의 width는 언제나 고정값일 것이다. 이러한 경우에는 width에 고정값을 때려넣어도 아무 상관이 없다. 동적으로 변하기를 원치 않는 값이기 때문. 컨테이너의 width는 보수적으로 건드리는게 좋다 만약 어떤 부모 컴포넌트에서 위의 컴포넌트를 호출했을 때 위 컴포넌트가 부모 컴포넌트의 절반만 차지하거나, 꽉 차는..
회사에서 shadcn/ui를 적극적으로 활용해서 앱을 개발하고 있다. https://ui.shadcn.com/ shadcn/ui Beautifully designed components built with Radix UI and Tailwind CSS. ui.shadcn.com 이미 만들어진 컴포넌트를 앱으로 가져와 직접 커스터마이징 할 수 있고, use-react-form과 같은 편의성 좋은 기능도 함께 딸려오니 작업할 때 굉장히 편리하다. 각설하고 shadcn/ui를 이용해 간단한 signin 컴포넌트를 만든 것을 기록해보려 한다. 사실 form을 다루는 것은 정말 까다롭다. 각 종 유효성 검사, 에러메시지, submit 등 신경쓸 것이 많은 로직이 한번에 모이므로 생각없이 짜다가는 정말 작업의 늪에..
유효성 검증 구현 프론트엔드 개발자는 서버에 올바른 데이터를 전달하기 위해서 유효성 검사를 고려해보아야 합니다. 저의 경우에는 댓글을 다는 기능을 구현했었고, 서버에는 닉네임, 비밀번호, 댓글 내용을 전송해야 했습니다. 저는 유효성 검증을 통해 너무 짧거나 긴 닉네임, 비밀번호, 댓글 내용이 서버로 전달되는 것을 사전에 방지하고자 했습니다. 구상 유효성 검증 기능 구현 자체는 어렵지 않았습니다. 그래서, 어떻게 코드를 도입해야 기존 로직이 깔끔하게 보일 수 있을지 고려 해보았습니다. 코드의 로직을 깔끔하게 하려면 응집도가 있는 코드들끼리 모으는 것을 베스트라고 생각했고, 유효성 검증 기능을 커스텀 훅으로 빼면 좋겠다는 생각을 했습니다. useValidation 원시적인 형태의 훅을 개발했습니다. useV..
