피드로 돌아가기
Dev.toFrontend
원문 읽기
3계층 아키텍처와 Pure Function 기반의 고결합성 제거 설계
Building a Portfolio That Actually Demonstrates Software Engineering
AI 요약
Context
단순 기능 구현 중심의 포트폴리오에서 벗어나 소프트웨어 엔지니어링적 사고 과정을 증명하려는 시도. 컴포넌트 내 로직 혼재로 인한 스파게티 코드 발생 가능성을 차단하기 위해 엄격한 계층 분리 구조를 채택함.
Technical Solution
- Presentation-Logic-Data로 이어지는 단방향 의존성 기반 3계층 아키텍처 설계
- Pure Function 기반의 Logic Layer 구축을 통한 Side Effect 제거 및 Mock 없는 테스트 가능성 확보
- TypeScript Strict Mode와 Type Guard 패턴 적용을 통한 런타임 타입 안정성 강화
- Container-Presentational 패턴을 적용하여 상태 관리와 렌더링 책임의 명확한 분리
- React Context 대신 CustomEvent와 localStorage를 조합한 경량 i18n 시스템 구현으로 불필요한 Re-render 방지
- ERD 다이어그램을 프로젝트 데이터와 결합하여 코드-문서 간 동기화 구조 설계
실천 포인트
- 비즈니스 로직을 Pure Function으로 분리하여 테스트 가능성 확인 - Type Assertion(`as`) 대신 Type Guard(`is`)를 사용하여 컴파일 단계에서 타입 검증 - 전역 상태 변경 시 전체 트리 리렌더링 여부를 판단하여 Context 대신 Event 기반 통신 검토 - Presentation Layer에서 데이터 페칭 및 가공 로직 제거 여부 체크