최근 뷰 프로젝트를 마무리하면서 주위의 좋은개발자들과 대화를 하면서 

현재 프로젝트의 문제점에 대해서 그리고 쓰기 어렵게 설계된 이유에 대해서 논의 하였다.

 

모듈: 결재모듈

 

1.함수를 전부 emit으로만 올려줬는데. 이부분이 아쉽다는 애기가 나왔다.

=> 이부분에서 GPT 랑 같이 논의 하였는데. 결재관련 데이터 함수는 스토어 , 페이지흐름  UI상태 등 UI관리는 컴포저블 

그 컴포넌트 자체 동작은 해당컴포넌트에서 사용하는게 좋을것 같다는 애기가 나왔다.

 

2.데이터관리도 많이 아쉬웠다. 스토어를 잘 활용하지 못했다. 거의 대부분이 props 로 올려줬다.

그러다보니 너무 많은 상태값을 하위컴포넌트에서 매번 똑같이 올려줘야했고 추적관리가 힘들었다. 

=>이부분을 pinia를 써서 통합관리 했으면 좋을것같다.

emit는 “결재 전에 호출”, “결재 완료 후 알림” 정도만 보내고,
구체적인 액션(UI 처리)은 부모가 담당한다.

 

구조가 중요

도메인 데이터는 Pinia 스토어(one source of truth)
화면별 묶음/다이얼로그 상태는 컴포저블
컴포넌트는 얇게(그리기 + 이벤트만)

1. 폴더/컴포넌트 구조부터 먼저 정리

2. Pinia로 도메인 상태 한곳에 모으기

Approval 상세에서 공통으로 쓰는 데이터들만 스토어에 모아둬.

 

  • “승인 상세 도메인에서 필요한 모든 데이터”는 여기 한 군데.
  • 댓글 추가/전달/라인 수정 같은 비즈니스 액션도 여기서 처리.
  • 컴포넌트는 store를 사용하는 소비자일 뿐.

 

3. 컴포저블로 “화면 레벨” 로직/다이얼로그 상태 관리

데이터는 스토어에 있지만,
다이얼로그 open/close나,
어떤 버튼 클릭 시 어떤 다이얼로그 띄울지 같은 UI 플로우는 컴포저블로 분리.

 

+ Recent posts