안티패턴 목록 | Smelly.dev

Today's Antipattern All Posts

테마

GitHub Today's Antipattern All Posts

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

연결하기

© 2026 Smelly.dev All rights reserved.

📉 Silent Failures: 클라이언트 사이드 에러 모니터링 부재

클라이언트 사이드 에러 모니터링 시스템의 부재는 사용자 경험 저하, 유지보수 복잡성 증가, 비즈니스 손실 등 심각한 문제를 초래합니다. `window.onerror`, `unhandledrejection`과 같은 전역 에러 핸들러와 Sentry와 같은 전문 에러 모니터링 서비스를 활용하여 에러를 선제적으로 감지하고 해결함으로써 애플리케이션의 안정성과 사용자 만족도를 크게 향상시킬 수 있습니다.

📦 과도한 서드파티 스크립트 남용: 성능 저하와 보안 위험 증가

웹사이트에 너무 많은 서드파티 스크립트를 추가하거나 비효율적으로 관리하면 성능 저하, 보안 취약점 증가, 유지보수 복잡성 등 심각한 문제를 야기합니다. 필요한 스크립트만 엄선하고, `async`/`defer`를 통한 비동기/지연 로딩, `preconnect`/`dns-prefetch`, SRI, CSP 등을 적용하여 효율적이고 안전하게 서드파티 스크립트를 관리해야 합니다.

빌드&번들링

🕸️ 오래된 브라우저 호환성 무시: 웹 접근성의 장벽과 사용자 이탈

최신 브라우저 기능에만 의존하고 폴리필/폴백 없이 개발하는 것은 웹사이트가 구형 브라우저에서 제대로 작동하지 않게 만들어 사용자 경험과 접근성을 심각하게 저해합니다. 기능 감지, 폴리필, 폴백 CSS, 그리고 트랜스파일링을 통해 모든 사용자에게 안정적이고 포용적인 웹 경험을 제공해야 합니다.

빌드&번들링

📉 Cascading Network Requests (Waterfall Model): 느린 로딩과 사용자 경험 저하

데이터 요청을 순차적으로 처리하는 Waterfall 모델은 불필요한 네트워크 지연을 유발하여 로딩 시간을 증가시키고 사용자 경험을 저해합니다. `Promise.all`을 통한 병렬 처리, 백엔드 Aggregator API/GraphQL 활용, 그리고 SSR/SSG와 같은 초기 렌더링 전략을 통해 효율적인 데이터 로딩을 구현하여 웹 성능을 최적화해야 합니다.

비동기처리

렌더링전략

🧙‍♂️ 마법의 문자열/숫자 남용: 예측 불가능한 코드와 유지보수의 덫

코드 내 의미 없는 문자열/숫자(마법의 리터럴)는 가독성, 유지보수성을 저해하고 버그를 유발합니다. 상수를 정의하고, 열거형 또는 객체로 관리하여 코드의 의도를 명확히 하고 재사용성을 높여야 합니다.

🔑 클라이언트 코드에 민감한 API 키 직접 노출: 보안 침해와 서비스 남용의 지름길

클라이언트 사이드 코드에 API 키나 민감한 설정 정보를 직접 포함하는 것은 심각한 보안 취약점입니다. 공격자가 이를 탈취하여 서비스 남용, 데이터 유출 등의 문제가 발생할 수 있습니다. 가장 안전한 방법은 백엔드 프록시 서버를 통해 키를 관리하는 것이며, 클라이언트 번들에 노출될 수밖에 없는 공개 키의 경우에도 환경 변수를 사용하고 해당 서비스의 보안 설정을 활용하여 오용을 방지해야 합니다.

빌드&번들링

📏 JavaScript로 강제되는 레이아웃 계산: 성능 저하와 유지보수의 늪

JavaScript를 사용해 UI의 크기와 위치를 직접 계산하고 적용하는 것은 잦은 레이아웃 재계산으로 성능을 저하시키고 코드 복잡성을 높여 유지보수를 어렵게 만듭니다. CSS의 레이아웃 기능과 클래스 토글링을 활용하여 책임 분리 원칙을 지키고, 필요시 CSS Custom Properties나 `requestAnimationFrame`을 사용해야 합니다.

애니메이션/UI

👻 리액트에서 DOM 직접 조작: 가상 DOM 불일치와 예측 불가능한 UI

리액트에서 `document.getElementById`와 같은 직접 DOM 조작은 가상 DOM과의 불일치를 야기하여 예측 불가능한 UI 버그와 성능 문제를 초래합니다. 대부분의 경우 상태(state)와 속성(props)을 통해 UI를 선언적으로 관리하고, 예외적인 상황에서만 `useRef`와 `useEffect`를 사용하여 제한적으로 DOM에 접근해야 합니다.

🛡️ 민감한 데이터 클라이언트 스토리지 오남용: XSS 공격의 먹잇감

민감한 데이터를 `localStorage`나 `sessionStorage`에 직접 저장하는 것은 XSS 공격에 취약하여 심각한 보안 위험을 초래합니다. 인증 토큰은 `HttpOnly` 쿠키를 사용하고, 민감한 사용자 정보는 클라이언트 측에 저장하지 않거나 암호화하여 최소한의 필요한 정보만 저장하며, `localStorage`는 비민감성 데이터에만 활용해야 합니다.

🗑️ 이벤트 리스너 누수: 메모리 누수와 성능 저하의 주범

더 이상 필요 없는 이벤트 리스너를 제거하지 않으면 메모리 누수와 성능 저하를 야기합니다. `addEventListener`와 `removeEventListener`를 항상 쌍으로 사용하고, 특히 React에서는 `useEffect`의 클린업 함수를 활용하여 리스너를 체계적으로 관리해야 합니다.

Previous
Next