✅ 압박면접 대응 시리즈 19편: 프론트엔드 코드 유지보수성과 확장성을 높이는 설계 패턴

✅ 압박면접 대응 시리즈 19편: 프론트엔드 코드 유지보수성과 확장성을 높이는 설계 패턴

압박면접에서 “유지보수성과 확장성을 위해 어떤 설계 방식을 사용하시나요?”라는 질문은
단순한 코드 구조를 넘어 ‘설계 철학’을 보는 질문입니다.
면접관은 “이 지원자가 코드만 짜는 사람인지, 시스템을 설계할 줄 아는 사람인지”를 확인합니다.

이번 편에서는 프론트엔드 설계 패턴, 상태 관리 전략, 확장 가능한 폴더 구조까지
실무 중심으로 정리했습니다.

---

📌 1. 유지보수성과 확장성의 핵심 개념

구분 유지보수성 확장성

정의	기존 기능을 안전하게 수정할 수 있는 능력	새로운 기능을 쉽게 추가할 수 있는 능력
지표	코드 일관성, 재사용성, 테스트 용이성	의존성 최소화, 모듈화, 인터페이스 설계

✅ 핵심 문장
“확장 가능한 코드는 새로운 기능을 ‘추가’할 때 기존 코드의 ‘수정’을 최소화한다.”

---

📌 2. 설계 패턴 3대 축 (프론트엔드 중심)

✅ ① Container-Presenter 패턴

• Container Component: 데이터 로직 (API 호출, 상태 관리)
• Presenter Component: UI 렌더링

// Container
function UserContainer() {
  const { data } = useQuery("user", fetchUser);
  return <UserProfile user={data} />;
}

// Presenter
function UserProfile({ user }) {
  return <div>{user.name}</div>;
}

📌 장점: UI와 비즈니스 로직 분리 → 재사용성↑, 테스트 용이↑

---

✅ ② Custom Hook 패턴

반응형

로직 중복을 제거하고, 기능 단위로 분리

function useFetch(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);
  return data;
}

📌 실무 포인트:

“데이터 로딩, 에러 처리 로직을 커스텀 훅으로 통합해
컴포넌트 크기를 평균 30% 줄였습니다.”

---

✅ ③ Atomic Design 패턴

UI를 원자 단위로 분해하여 재사용 가능한 컴포넌트 체계 구축

단계 예시

Atom	Button, Input
Molecule	SearchBar
Organism	Header, CardList
Template	Layout
Page	DashboardPage

📌 장점: 디자인 시스템화 가능, 일관된 UI 확장 용이

---

📌 3. 폴더 구조 설계 예시

src/
 ├── components/
 │    ├── atoms/
 │    ├── molecules/
 │    ├── organisms/
 │    └── templates/
 ├── hooks/
 ├── contexts/
 ├── pages/
 ├── services/
 └── utils/

📌 면접 포인트:

“컴포넌트, 훅, 서비스 계층을 분리해 기능별로 독립 배포가 가능하도록 구성했습니다.”

---

📌 4. 실무 적용 사례

상황:

• 유지보수 중 기능 수정 시 예상치 못한 사이드이펙트 발생
• 코드 중복 많고, 비즈니스 로직이 UI에 섞여 있음

해결:

1. Container-Presenter 구조로 역할 분리
2. 중복 로직을 Custom Hook으로 이동
3. Atomic Design으로 UI 체계화

📈 결과:

• 코드 중복 40% 감소
• 신규 페이지 개발 속도 30% 향상
• QA 버그 발생률 절반 이하로 감소

---

📌 5. 압박면접 예상 질문 & 답변 포인트

• ❓ Q. “유지보수성을 수치로 표현할 수 있나요?”
  → “코드 라인 수, 중복 비율, 신규 페이지 개발 소요 시간 등으로 측정했습니다.”
• ❓ Q. “Atomic Design의 단점은 없나요?”
  → “구조가 깊어지면 오히려 복잡해질 수 있어, 팀 규모와 프로젝트 크기에 맞게 조정했습니다.”
• ❓ Q. “협업 시 코드 일관성을 어떻게 유지하셨나요?”
  → “ESLint + Prettier + Git Hook을 적용해 코드 스타일을 자동화했습니다.”

---

📌 6. 면접에서 활용할 한 줄 정리

“프론트엔드의 확장성과 유지보수성을 위해 Container-Presenter, Custom Hook, Atomic Design 패턴을 병행했습니다.
이를 통해 코드 중복을 40% 줄이고, 신규 기능 개발 속도를 30% 이상 개선했습니다.”

---

압박면접,프론트엔드,설계패턴,유지보수성,확장성,AtomicDesign,CustomHook,ContainerPresenter,코드리팩토링,면접준비

---