웹 개발에서는 다양한 UI 라이브러리와 프레임워크가 존재하지만,때로는 이러한 라이브러리에 과하게 의존하는 경향이 있다.(대표적으로 내가 그런 사람..)하지만 이는 프로젝트의 복잡성을 증가시키고, 추가적인 의존성 관리 및 번들 크기 증가로 이어질 수 있기에,어느 정도 웹에 대해 공부하신 분들은 아시리라 생각이 들지만,기본 HTML 태그와 CSS를 활용하여 간단한 기능들을 구현할 수 있는 기능들을 소개하고자 한다.라이브러리에 과하게 의존하지 않기1. Select box(Select, OptGroup, Option)각종 디자인 라이브러리(antd, 'bootstrap',mui, shadcn/ui 등)의 Select 컴포넌트나 React Select, Downshift 등의 라이브러리를 사용하지 않고,기본 HT..
문제 상황Antd의 DatePicker를 활용하는 도중, DatePicker에 hover시 기이한 현상을 식별하였다.(프로젝트 관련 코드가 유출이 불가해서 같은 상황의 사진을 가져와봤다)원인Antd v5를 사용중이었고, 공식문서에 따르면 v4 에서 v5로 upgrade 시에 DatePicker에서 사용하던 날짜 형식에 필요한 라이브러리를 moment에서 day.js로 대체함으로 인해 형식이 맞지 않아 발생한 오류라고 할 수 있다. 해결방안// Not To Do 😒import moment, { Moment } from 'moment';moment().subtract(7, 'days');moment().startOf('day');const handleDateChange = (setter: (date: Mo..
이 글을 쓰게 된 배경은zustand의 z자도 모르고 썼던게 분명한 내가 잘못 사용해왔던 코드에 대한 깨달음과 부끄러움을 담은 글이다.(위 글은 Zustand의 최신 버전인 v5로 작성되었다)여러 상태를 사용할 때 하지말아야 할 것Not To Do: 구조 분해 할당으로 가져오기import { create } from 'zustand'const useEqpStore = create((set) => ({ type: 'printer', state: 'idle', process: 'none', subprocess: 'none', updateType: (newType) => set({ type: newType }), updateState: (newState) => set({ state: newState..
