조건부 스타일 vs 조건부 클래스웹 개발에서 스타일링을 적용하는 방법은 다양한데, 그 중에서도 조건부 스타일과 조건부 클래스는 자주 사용되는 두 가지 접근 방식이다. 이 글에서는 두 방법의 특징과 비교를 해보려 한다.조건부 스타일조건부 스타일은 특정 조건에 따라 인라인 스타일을 적용하는 방식으로,주로 React와 같은 프레임워크에서 사용되며, 동적으로 스타일을 변경할 수 있는 장점이 있다.예시 코드const MyComponent = ({ isActive }) => { return ( {isActive ? '활성 상태' : '비활성 상태'} );}; 위 코드에서 isActive가 true일 때 텍스트 색상이 파란색으로 변경되며, 인라인 스타일을 사용하여 조건에 따라 동적으로 스타..
매년 Ecma International에서는 JavaScript의 표준인 ECMAScript(줄여서 ES)를 개정하여 발표한다.2024년 7월에 발표된 ES2024는 JavaScript에 새로운 기능을 추가하고 기존 기능을 더욱 강화하여 개발자들의 작업을 보다 효율적으로 만들어 주는 다양한 개선 사항을 포함하고 있는데,이번 글에서 다뤄보고자 한다.[JS] ES2024에는 어떤 기능이 추가되었을까?1. Object.groupBy 및 Map.groupByES2024 이전의 불편함: 배열을 특정 기준으로 그룹화할 때, 개발자는 reduce()나 forEach()를 사용해 수동으로 데이터를 그룹화해야 했다. 이 방식은 코드가 길어지고 가독성이 떨어지며, 실수를 유발할 가능성도 있다.이전 코드 (ES2024 이전..
웹 개발에서는 다양한 UI 라이브러리와 프레임워크가 존재하지만,때로는 이러한 라이브러리에 과하게 의존하는 경향이 있다.(대표적으로 내가 그런 사람..)하지만 이는 프로젝트의 복잡성을 증가시키고, 추가적인 의존성 관리 및 번들 크기 증가로 이어질 수 있기에,어느 정도 웹에 대해 공부하신 분들은 아시리라 생각이 들지만,기본 HTML 태그와 CSS를 활용하여 간단한 기능들을 구현할 수 있는 기능들을 소개하고자 한다.라이브러리에 과하게 의존하지 않기1. Select box(Select, OptGroup, Option)각종 디자인 라이브러리(antd, 'bootstrap',mui, shadcn/ui 등)의 Select 컴포넌트나 React Select, Downshift 등의 라이브러리를 사용하지 않고,기본 HT..
이 글을 쓰게 된 배경은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..
