안티패턴 목록 | Smelly.dev

Today's Antipattern All Posts

테마

GitHub Today's Antipattern All Posts

안티패턴을 통해 더 나은 코드를 작성하는 방법을 배워보세요. 개발자들이 실수하는 패턴들을 분석하고 개선방안을 제시합니다.

연결하기

© 2025 Smelly.dev All rights reserved.

총 22개의 안티패턴이 검색되었습니다.

💥 CSS !important의 남용: 예측 불가능한 스타일의 늪

`!important` 키워드를 남용하면 CSS 캐스케이드 규칙을 무시하여 스타일 간의 우선순위 충돌을 야기하고, 디버깅을 어렵게 하며, 재사용성과 유지보수성을 심각하게 저해합니다. 대신 CSS 우선순위 규칙을 이해하고, 시맨틱하고 명확한 클래스 구조를 사용하며, 필요한 경우 CSS Custom Properties나 CSS-in-JS와 같은 스코프 기반 솔루션을 활용하여 예측 가능하고 관리하기 쉬운 스타일을 구축해야 합니다.

🧱 커스텀 컴포넌트의 ARIA 속성 누락: 접근성의 벽 쌓기

일반 HTML 요소로 만든 커스텀 컴포넌트(탭, 모달 등)에 WAI-ARIA `role`, `state`, `property`를 누락하면 보조 기술 사용자가 목적과 상태를 이해하기 어려워 접근성을 저해합니다. 적절한 ARIA 속성을 추가하고 키보드 접근성을 확보하여 모든 사용자를 위한 포용적인 UI를 구축해야 합니다.

🔄 useEffect의 과도한 남용: 의도치 않은 재실행과 복잡한 의존성 관리

React `useEffect` 훅을 사용할 때, 실제 로직 수행에 필요 없는 의존성을 추가하거나 사용자 액션에 의해 트리거되어야 할 로직을 `useEffect`에 묶어두면 불필요한 재실행, 성능 저하, 예측 불가능한 동작을 유발합니다. 최소한의 필수 의존성만 포함하고, 이벤트 기반 로직은 이벤트 핸들러에서 직접 처리하며, `useCallback` 등으로 함수 참조 안정성을 확보하여 효율적인 데이터 흐름을 만들어야 합니다.

비동기처리

🎯 키보드 포커스 관리 미흡: 접근성 사각지대 생성

키보드 포커스 관리를 소홀히 하면 키보드 및 보조 기술 사용자의 접근성을 심각하게 저해하고, 사용자 경험을 악화시킵니다. 시맨틱 HTML 요소, `tabindex`의 적절한 사용, 동적 UI에서의 포커스 트래핑 및 복원, SPA 라우트 변경 시 포커스 이동, 그리고 명확한 시각적 포커스 표시를 통해 모든 사용자가 원활하게 애플리케이션을 탐색할 수 있도록 해야 합니다.

🖼️🐢 미적용 이미지 최적화: Core Web Vitals의 저해

불필요하게 큰 이미지 파일, 비효율적인 형식, 반응형 이미지 미적용, 지연 로딩 부재는 웹 성능 저하와 Core Web Vitals 점수를 낮추는 주범입니다. WebP/AVIF, `srcset`/`sizes`, `loading="lazy"`, `rel="preload"` 등의 최적화 기법을 적용하여 빠르고 효율적인 이미지 로딩을 구현해야 합니다.

빌드&번들링

빌드&번들링

📈 과도한 이벤트 핸들러 호출: 디바운스/쓰로틀링의 부재

잦은 빈도로 발생하는 이벤트에 아무런 제약 없이 핸들러를 연결하면 성능 저하와 사용자 경험 악화를 초래합니다. 디바운싱(Debouncing)과 쓰로틀링(Throttling)을 사용하여 이벤트 핸들러 실행 빈도를 최적화함으로써 성능을 개선하고 부드러운 사용자 경험을 제공해야 합니다.

비동기처리

🙈 TypeScript `any` 타입 남용: 타입스크립트를 쓰지 않는 것과 다름없는 코드

`any` 타입은 단기적인 편의를 제공하지만, 결국 타입스크립트 사용의 의미를 퇴색시키고 잠재적인 버그를 유발하며 코드 품질을 떨어뜨립니다. 적극적인 타입 추론과 명시적인 타입 정의, 그리고 제네릭 및 `unknown` 타입을 통해 타입 안정성을 확보해야 합니다.

🖼️ `alt` 속성 누락 또는 오용: 이미지 접근성의 맹점

`alt` 속성(대체 텍스트)은 시각 장애 사용자, 검색 엔진, 그리고 이미지 로딩 실패 시 중요한 역할을 합니다. 의미 있는 이미지에는 간결하고 정확한 설명을 제공하고, 장식용 이미지에는 `alt=""`를 사용하여 웹 접근성과 SEO를 향상시켜야 합니다.

💀 eval() 또는 new Function()으로 동적 코드 실행하기: 보안과 성능의 무덤

`eval()` 및 `new Function()`은 문자열을 코드로 실행하여 웹 애플리케이션에 심각한 보안 취약점(XSS)을 야기하고, 성능 저하 및 디버깅의 어려움을 초래합니다. 대신 `JSON.parse()`, 템플릿 엔진, 또는 함수 콜백과 같은 안전하고 효율적인 대안을 사용하여 보안과 코드 품질을 확보해야 합니다.

👻 Promise 에러 무시하기: 조용한 실패와 혼란스러운 UI

비동기 작업(Promise)에서 발생하는 에러를 명시적으로 처리하지 않으면, 애플리케이션이 조용히 실패하고 사용자에게 혼란스러운 UI나 잘못된 상태를 보여줄 수 있습니다. 이는 디버깅을 어렵게 하고 사용자 경험을 크게 저해합니다. 모든 Promise에는 `.catch()`를 붙이거나 `async/await` 구문에서 `try...catch`를 사용하여 에러를 잡고, 사용자에게 적절한 피드백을 제공해야 합니다.

비동기처리

비동기처리

Previous
Next