사이드 프로젝트 with React 26. 클래스 다이어그램 실습

 

 

 

들은 강의: Part 3. 프로젝트 설계하기 07. [실전] 시스템 설계 (3) - Class diagram for 프론트 엔드

 

 

 

 

• Plant UML 사용
• 리액트 컴포넌트/클래스의 구조도 작성

 

1. 자바 설치

https://www.java.com/en/download 

Download Java for Linux

 

2. GraphViz 설치

https://plantuml.com/ko/graphviz-dot 

Test your GraphViz installation

 

3. VS Code marketplace에서 PlantUML 설치

4. 프로젝트 폴더 아래에 docs폴더 생성

5. react_component_diagram.plantuml 파일 생성

6. UI 디자인을 보면서 Component화 할 수 있는 것들을 추려내기

7. Component 간 구조 정의 (e.g. 상속, 조합)

 

 

https://plantuml.com/ko/class-diagram 

클래스 다이어그램 구문 및 기능

 

https://plantuml.com/ko/component-diagram 

구성 요소 다이어그램 구문 및 기능

 

 

리액트에서 클래스로 컴포넌트를 만들 수도 있지만, 함수형 컴포넌트를 만들 수도 있다. (실제로 요새는 함수형 컴포넌트를 더 많이 쓴다.)

그래서 강의에서는 객체 다이어그램을 이용할 것이다.

 

https://plantuml.com/ko/object-diagram 

Object Diagram syntax and features

 

 

실습

 

1. 객체 생성

 

@startuml

object CreateGroup
object AddMembers
object ExpenseMain

@enduml

 

 

아래 두 요소는 굉장히 비슷하다. -> 컴포넌트화할 수 있다.

 

 

 

CreateGroup *-- CenteredOverlayForm
AddMembers *-- CenteredOverlayForm

조합의 관계로 나타낼 수 있다.

 

 

저 하얀색 박스도 CreateGroup이나 AddMembers의 CenteredOverlayForm을 재사용해서 만들 수 있을 것 같다.

하지만 Form의 형태가 아니므로 분리가 필요하다.

 

@startuml

object CreateGroup
object AddMembers
object ExpenseMain

object CenteredOverlay
object CenteredOverlayForm

object AddExpenseForm
object ExpenseSummary
object ExpenseList

CreateGroup *-- CenteredOverlayForm
AddMembers *-- CenteredOverlayForm

CenteredOverlayForm *-- CenteredOverlay

ExpenseMain *-- AddExpenseForm
ExpenseMain *-- ExpenseSummary
ExpenseMain *-- ExpenseList
ExpenseList *-- CenteredOverlay 

@enduml

 

 

강의에서는 이렇게 만들었는데, 내가 보기엔 CenteredOverlay가 CenteredOverlayForm을 포함하는 관계가 더 적절한 것 같다.

CenteredOverlay 안에는 CenteredOverlayForm가 있을 수도 있고 ExpenseList가 있을 수도 있기 때문이다.

 

근데 또 뭐 정확한 위계로 배치했다기보다 CenteredOverlay는 디자인적인 역할만 하는 거라 따로 빼놓은 거면 저게 맞을 수도..

 

완성본

 

@startuml

object CreateGroup {
  state groupName: string
  ' 입력된 값이 조건을 만족하는지 체크 '
  state formValidated: boolean
}
object AddMembers {
  state members: string[]
  state formValidated: boolean
}
object ExpenseMain {
  ' 상태 관리 라이브러리를 사용해서 store에서 get할 수 있기 때문에 '
  ' props는 아닐 수도 '
  groupName: string
  members: string[]
}

object CenteredOverlay
object CenteredOverlayForm {
  ' state와 props는 구별해준다. '
  props title: string
  props inputType: string
  props handleFormSubmitted: function

  state currentValue: string
}

object AddExpenseForm {
  ' members는 계속해서 변하는 상태값이 아님 '
  members: string[]
  state payer: string
  ' 결제 내역 '
  state description: string
  state amount: number
  state paidAt: Date
  state formValidated: boolean
}
object ExpenseSummary {
  expenses: expense[]
  members: string[]
}
object ExpenseList {
  expenses: expense[]
}

CreateGroup *-- CenteredOverlayForm
AddMembers *-- CenteredOverlayForm

CenteredOverlayForm *-- CenteredOverlay

ExpenseMain *-- AddExpenseForm
ExpenseMain *-- ExpenseSummary
ExpenseMain *-- ExpenseList
ExpenseList *-- CenteredOverlay 

@enduml

 

 

다른 다이어그램은 익숙하지도 않고 잘 안 와닿았는데, 리액트를 써본 입장에서 객체 다이어그램은 프로그램을 만들기 전 필수 요소라고 느껴지기까지 한다. 다이어그램을 그려보면서 이미 코드가 어떤 식으로 작성돼야 할지 어느 정도 감을 잡을 수 있고, 큰 그림을 그릴 수 있게 됐다. 작은 프로젝트라도 PlantUML로 도식화해보는 훈련을 자꾸 하자. 화이팅

 

 

 

#패스트캠퍼스 #패캠챌린지 #수강료0원챌린지 #환급챌린지 #직장인인강 #직장인자기계발

#패캠인강후기 #패스트캠퍼스후기 #오공완 #사이드프로젝트10개기술스택으로구현하는풀스택서버리스프로젝트withReact

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

 

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]