8기 페이먼츠 1단계에서 본 안티패턴 7선
Q1~Q8 카드가 고민을 다뤘다면, 이 섹션은 실제로 작성된 코드 안에서 일부 PR이 반복하고 있는 패턴을 기록한다.
분석 대상은 8기 1단계 PR 25건 (#497~#524, 중복 재제출 제외). 4개 분석 팀이 Component 재사용 / Storybook / State 관리 / Hooks 설계 4축으로 전수 검토하여, 미션 학습 목표 — 재사용 컴포넌트, Storybook 시각 테스트, 상태 관리 — 에 학습이 일어나는 패턴만 카드로 추렸다.
🔍 이 섹션의 사용법
“내가 같은 함정에 빠진 건 아닐까?” — 자기 PR을 다시 열고 각 안티패턴 카드의 AS-IS 코드와 비교해본다. 비슷한 형태가 보이면 그 카드의 리뷰어 피드백을 읽고 자기 코드를 다시 본다.
한눈에 보기
| 카드 | 안티패턴 | 빈도 | 연결되는 학습 목표 |
|---|---|---|---|
| anti-01 | 한 칸 에러가 다른 칸을 덮어쓴다 | 8/25 | ”유효하지 않은 입력 시 피드백” + 에러 가독성 + 상태 관리 |
| anti-03 | Number()/isNaN() 검증의 함정 | 6+/25 | ”입력은 숫자만 가능” + 에러 가독성 |
| anti-04 | 카드 브랜드를 state로 저장 | 5/25 | 학습 목표 상태 관리 + “실시간 프리뷰” |
| anti-05 | 4칸 고정인데 string[] (단일값을 배열로 감싸는 역방향 전염 포함) | 9/25 | 학습 목표 재사용 가능한 Input Component |
| ✦ anti-06 | Input 컴포넌트가 입력 종류마다 따로 만들어졌다 | 5/25 (변종 9/25) | 학습 목표 재사용 가능한 Input Component (정중앙) |
| ✦ anti-07 | Storybook을 그려놓고 보지 않는다 | 12+/25 | 학습 목표 Storybook 시각 테스트 (정중앙) |
| ✦ anti-08 | state 위치 — 이중 상태이거나 통째 lifting | 8/25 | 학습 목표 상태 관리 + 컴포넌트 분리 |
✦ 표시는 4축 전수 분석으로 새로 추가된 카드.
안티패턴이 모이는 두 가지 단어
7개 카드를 다시 한 줄로 묶으면 두 단어로 모인다.
(1) “같이 변하지 않는 것을 묶었거나, 묶어야 할 것을 흩뜨렸다”
- anti-01 — 4칸의 에러는 각자인데, 한 변수로 묶었다
- anti-04 — 카드 번호에서 브랜드가 파생되는데, 별도로 묶었다
- anti-05 — 고정 길이인 정보를 가변 배열로 다뤘고, 단일값 까지 배열로 끌려갔다
- anti-08 — 같은 입력값을 두 번 들거나, 모든 값을 한 자리에 몰아넣었다
(2) “같은 단어가 두 곳에 있다”
- anti-06 — 카드 도메인이라는 단어가 Input 컴포넌트 안에도 있고 Field에도 있다
- anti-07 — 상태 분기가 Story 이름에도 있고 컴포넌트 useState에도 있는데, 둘이 동기화되지 않는다
- anti-03 — “숫자 문자열” 이라는 의도가 코드에는
Number()변환으로, 명세에는 형태 표현으로 따로 적혀 있다
이 관점은 Q2 — state 구조 카드에서 인용한 React 공식문서 5원칙과 같다. 차이는 고민의 단어에서 코드의 단어로 옮겨진다는 점이다.
“함께 바뀌나요?” — anti-01, anti-04, anti-08 “데이터 형태가 정확한가요?” — anti-03, anti-05 “추상화의 단위가 학습 목표를 충족하나요?” — anti-06, anti-07
카드에서 제외한 패턴
분석 과정에서 발견됐지만 카드로 만들지 않은 신호도 함께 기록한다.
제외 1 — MasterCard 2-series(2221~2720) 누락 (11+/25): 미션 명세가 “MasterCard: 51~55로 시작하는 16자리” 로 한정해두었기 때문에, 이 패턴은 코드의 문제가 아니라 명세를 정확히 옮긴 결과다. 미션 학습 목표(상태 관리·재사용 컴포넌트·에러 처리)에 학습이 일어나지 않는 신호이므로 카드에서 제외했다.
제외 2 — 1줄 wrapper 훅 (2/25): useCardBrand가 useMemo 한 줄만 감싸는 형태 등. 1단계 학습 목표는 컴포넌트 우선이고 hooks API는 2단계 학습 목표라, 1단계 카드로 만들면 학습 흐름과 충돌한다.
제외 3 — submit / preventDefault 누락 (9/25): 빈도는 가장 높지만 form 경계는 1단계 컴포넌트·상태 학습 목표와 결이 다르다. 후속 회차의 form 카드 후보로 별도 보관. anti-01의 비슷하게 따라오는 신호에 짧게만 기록.
(같은 분석이 명세 검증, form 경계, 추상화 단계 결정 같은 메타 학습으로는 흥미로울 수 있다. 그건 다른 회차의 주제다.)
다음으로
- anti-01 — 한 칸 에러가 다른 칸을 덮어쓴다
- Q1 — state location — 같은 주제를 고민 관점으로