안티패턴 목록 | Smelly.dev

Today's Antipattern All Posts

테마

GitHub Today's Antipattern All Posts

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

연결하기

© 2026 Smelly.dev All rights reserved.

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

키보드 포커스 관리를 소홀히 하면 키보드 및 보조 기술 사용자의 접근성을 심각하게 저해하고, 사용자 경험을 악화시킵니다. 시맨틱 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`를 사용하여 에러를 잡고, 사용자에게 적절한 피드백을 제공해야 합니다.

비동기처리

비동기처리

거대한 라이브러리 통째로 가져오기: 트리 쉐이킹의 저주 🌳📦

불필요하게 거대한 라이브러리 전체를 임포트하면 번들 크기가 커지고 웹사이트 로딩 속도가 느려져 사용자 경험에 악영향을 줍니다. 필요한 모듈만 개별적으로 가져오거나, 트리 쉐이킹이 잘 적용되도록 빌드 설정을 최적화하고 트리 쉐이킹 친화적인 라이브러리를 선택하여 성능을 개선해야 합니다.

빌드&번들링

빌드&번들링

렌더링 중 부수 효과 발생시키기: 예측 불가능한 UI의 시작 🌪️

React 컴포넌트의 렌더링 페이즈(함수 본문)에서 `setState` 호출, 비동기 요청, DOM 직접 조작과 같은 부수 효과를 발생시키면 무한 루프, 예측 불가능한 동작, 성능 저하를 야기합니다. 모든 부수 효과는 `useEffect` 훅이나 이벤트 핸들러 내에서 처리해야 합니다.

비동기처리

localStorage 오남용: 위험하고 비효율적인 상태 관리 🔒

`localStorage`는 단순 문자열 저장소로, 민감한 데이터나 복잡한 객체/배열을 저장하기에 부적합합니다. XSS 공격에 취약하며, 동기적 특성으로 인해 메인 스레드를 블록하여 성능 문제를 야기할 수 있고, 데이터 양이 많아지면 관리가 어렵습니다. 대신 적절한 보안 메커니즘과 비동기 저장소를 활용하거나, 서버에 의존하는 것이 좋습니다.

Previous
Next