Today's AntipatternAll Posts
테마
GitHubToday's AntipatternAll Posts

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

연결하기

© 2026 Smelly.dev All rights reserved.

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

August 20, 2025

🙈 Mutation Observer 오용: 무한 루프와 성능 저하, 그리고 예측 불가능한 동작

Mutation Observer를 부주의하게 사용하면 무한 루프, 성능 저하, 예측 불가능한 동작을 초래할 수 있습니다. 상태 관리, 비동기 처리, 감시 범위 최소화, disconnect() 호출 등을 통해 이러한 문제를 해결해야 합니다.
JavaScript
React
성능
컴포넌트
렌더링전략
UX
아키텍처
에러처리
JavaScript
React
성능
...
August 19, 2025

🧱 렌더링 콜백 지옥: 불필요한 리렌더링과 예측 불가능한 부작용, 💥 성능 병목

컴포넌트 렌더링 시 과도한 콜백 함수 생성 및 전달은 불필요한 리렌더링과 side effect를 유발하여 성능 저하의 원인이 됩니다. `useCallback`, 컴포넌트 분리, 상태 관리 라이브러리 활용, 함수형 업데이트 등을 통해 해결할 수 있습니다.
React
JavaScript
성능
컴포넌트
렌더링전략
상태관리
UX
비동기처리
React
JavaScript
성능
...
August 18, 2025

🕳️ `querySelector` 체이닝 지옥: 과도한 DOM 탐색과 성능 저하, 유지보수성 악화

`querySelector` 체이닝은 DOM 탐색 성능 저하, 유지보수성 악화, 깨지기 쉬운 코드, 가독성 저하를 야기합니다. CSS 선택자 최적화, `querySelectorAll`, `closest()`, React Refs, 이벤트 위임, 상태 관리 라이브러리 활용 등의 방법으로 해결할 수 있습니다.
JavaScript
React
성능
아키텍처
컴포넌트
웹표준
렌더링전략
UX
JavaScript
React
성능
...
August 17, 2025

🎭 전역 CSS 오염: 예측 불가능한 스타일 충돌과 유지보수 악몽

전역 CSS는 스타일 충돌, 낮은 재사용성, 유지보수 어려움 등을 야기합니다. CSS Modules, Styled Components, Shadow DOM 등의 기술을 사용하여 CSS 스코프를 컴포넌트 단위로 제한하고, CSS 방법론을 적용하여 스타일 구조를 명확하게 정의해야 합니다.
React
CSS
아키텍처
컴포넌트
네이밍
Lint/Formatter
성능
웹표준
React
CSS
아키텍처
...
August 16, 2025

🧟‍♂️ state 끌어올리기(Lifting State Up) 함정: 불필요한 상위 컴포넌트 리렌더링 유발

State 끌어올리기는 상태 공유를 위한 중요한 패턴이지만, 과도하게 사용하면 불필요한 리렌더링을 유발하고 성능 저하를 초래합니다. 필요한 최소 공통 부모까지만 상태를 끌어올리고, 메모이제이션 기법과 컴포넌트 분리를 통해 리렌더링을 최적화해야 합니다.
React
JavaScript
성능
컴포넌트
렌더링전략
상태관리
UX
React
JavaScript
성능
...
August 15, 2025

👻 보이지 않는 성능 하락: CSS `will-change` 오용과 레이어 폭탄

`will-change`를 남용하면 불필요한 레이어가 과도하게 생성되어 성능 저하를 유발합니다. 필요한 속성에만 제한적으로 사용하고, 애니메이션 종료 후에는 초기화하여 리소스를 회수해야 합니다.
CSS
성능
애니메이션/UI
웹표준
렌더링전략
CSS
성능
애니메이션/UI
...
August 14, 2025

🙈 추적되지 않는 클릭 이벤트: UX 혼란과 데이터 분석 오류

클릭 이벤트 리스너를 제대로 관리하지 않으면 UX 저하, 데이터 분석 오류, 메모리 누수, 예기치 않은 동작이 발생할 수 있습니다. `useEffect` 훅, 이벤트 위임, 상태 관리 라이브러리, 테스팅을 통해 이러한 문제를 해결해야 합니다.
JavaScript
React
UX
에러처리
컴포넌트
비동기처리
아키텍처
성능
테스트
JavaScript
React
UX
...
August 13, 2025

🙈 무분별한 `localStorage` 사용: 개인 정보 유출 및 XSS 공격 위험 증가

`localStorage`에 민감한 정보를 저장하거나 XSS 공격에 취약한 데이터를 저장하면 보안 문제가 발생할 수 있습니다. 서버 측에서 관리하거나 데이터를 암호화하여 저장하고, 입력값 검증 및 출력값 인코딩을 철저히 해야 합니다.
JavaScript
보안
UX
에러처리
웹표준
호환성
JavaScript
보안
UX
...
August 12, 2025

🙈 무분별한 console.log 남발: 사용자 환경에 노출되는 민감 정보와 성능 저하

`console.log`를 프로덕션 코드에서 제거하지 않으면 보안 취약점, 성능 저하, 코드 가독성 저하 등의 문제가 발생합니다. 프로덕션 배포 전에 `console.log`를 제거하거나, 환경 변수를 사용하여 제어하고, 린팅 도구를 활용하여 자동화해야 합니다.
JavaScript
성능
보안
디버깅
Lint/Formatter
아키텍처
에러처리
JavaScript
성능
보안
...
August 11, 2025

🎭 과도한 Inline 스타일링: CSS 우선순위 악몽과 스타일 재사용성 저하

Inline 스타일링은 CSS 우선순위 문제, 스타일 재사용성 저하, 유지보수성 악화, 보안 문제 등의 원인이 됩니다. CSS 클래스, CSS Modules, styled-components 등을 사용하여 스타일을 외부에서 관리하고, CSS 변수를 활용하여 스타일 재사용성을 높여야 합니다.
React
CSS
아키텍처
컴포넌트
네이밍
Lint/Formatter
성능
웹표준
React
CSS
아키텍처
...
  • Previous
  • Next