안티패턴 목록 | Smelly.dev

Today's Antipattern All Posts

테마

GitHub Today's Antipattern All Posts

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

연결하기

© 2025 Smelly.dev All rights reserved.

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

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

빌드&번들링

빌드&번들링

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

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

비동기처리

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

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

프레임워크 내부에서 직접 DOM 조작하기: 선언적 UI의 파괴 💥

프레임워크가 관리하는 UI 컴포넌트 내부에서 `document.querySelector`와 같은 네이티브 DOM API를 직접 사용하는 것은 예측 불가능한 버그, 심각한 성능 저하, 그리고 유지보수성 저하를 야기합니다. 대신 프레임워크의 상태 관리와 선언적 렌더링 방식을 활용하여 UI를 제어해야 합니다.

과도한 클라이언트 측 데이터 처리: 비효율적인 성능과 UX 📉

대용량 데이터를 클라이언트에서 필터링, 정렬, 페이지네이션하는 것은 네트워크 대역폭 낭비, 메모리 사용량 증가, 그리고 심각한 UI 성능 저하를 야기합니다. 대신 서버 측 API를 적극 활용하여 필요한 데이터만 가져오고, 점진적 로딩 전략을 도입해야 합니다.

프로젝트 규모를 키우는 프롭 드릴링 (Prop Drilling) 🐛

불필요하게 많은 컴포넌트 계층을 통해 데이터를 전달하는 프롭 드릴링은 코드 가독성, 유지보수성, 재사용성을 심각하게 저해하고 컴포넌트 간 강한 결합도를 유발합니다. 대신 React Context API나 전역 상태 관리 라이브러리, 또는 컴포넌트 합성 패턴을 활용하여 깨끗하고 효율적인 데이터 흐름을 만들어야 합니다.

CSS 체크박스 해킹: 유지보수 지옥 ⛓️

CSS만으로 복잡한 UI 상태를 제어하는 것은 접근성과 유지보수성을 심각하게 해치며, 궁극적으로 더 많은 개발 비용을 초래합니다. 시맨틱 HTML, WAI-ARIA, 그리고 JavaScript를 통한 명확한 책임 분리가 올바른 해결책입니다.

텍스트만 있는 `div`를 버튼으로 사용하기 🚫

`div`를 버튼처럼 사용하면 키보드 접근성, 스크린 리더 지원 등 웹 접근성을 심각하게 저해하며 불필요한 개발 공수를 야기합니다. 대신 시맨틱 `button` 또는 `a` 요소를 사용하여 내장된 접근성 이점을 활용하고 코드의 견고함을 높여야 합니다.

배열 인덱스를 React `key`로 사용하기 🤦‍♂️

React에서 목록을 렌더링할 때 배열 인덱스를 `key`로 사용하면 비효율적인 렌더링, 컴포넌트 상태 손실, 예측 불가능한 UI 버그를 유발합니다. 대신 각 목록 항목의 고유하고 안정적인 ID를 `key`로 사용해야 합니다.

🚀 레이아웃을 유발하는 CSS 애니메이션

CSS 애니메이션 시 `width`, `height`, `top`, `left` 등 레이아웃을 유발하는 속성 대신 `transform`과 `opacity`를 사용하여 성능 저하 없이 부드러운 애니메이션을 구현해야 합니다.

애니메이션/UI

애니메이션/UI

Previous
Next