[Challenge / day-22] class diagram 실습

오늘의 공부범위 : 강의 30강(Part3. ch1. 7강)

 

목차

1. React component 생성 팁

2. class diagram 실습

 

 

솔직히 챌린지 초반에는 의무적으로 하는 기분도 많이 들었는데, 저번에 sequence diagram 실습 이후로 점점 뿌듯한 기분도 들고 새로 배우는 것들이 많아서 기분이 좋은 것도 있어서 더욱 열심히 참여하게 되었다.

 

오늘은 클래스 다이어그램을 그려보자. 그러기에 앞서서 컴포넌트를 만드는 법을 알려주시면서 디자인패턴도 소개해주시고 🥹🥹🥹 이번 시간도 명강이다 명강!! 집중해서 따라가보자~!!!

오늘의 블로깅 모습

#1. React component 생성 팁

페이지 별로 컴포넌트를 정의하는데, UI 디자인을 살펴보면서 공통적인 요소가 있는지 파악해서 반복적으로 사용할 수 있는 요소를 파악하는데 중점을 둔다. 이 때 DRY(Don't Reapeat Yourself) 원칙이라는 것에 입각해서 한다고 한다.

 

그리고 여러가지 패턴을 추천해주셨는데,

 

(1) Container 패턴

첫 번째로 강사님도 자주쓰시는 관심사분리에 유리한 패턴이라고 하시며 소개해주셨다. business 로직과 UI로직이 너무 길어진다면 이 패턴으로 다시 구조화 할 수 있다고 하셨다.

 

(2) Provider 패턴

이 패턴은 props drilling을 방지하기 위한 패턴으로 유용하게 사용할 수 있는 패턴이다.

 

이런 패턴을 사용하는 것 외에도 단일 책임 원칙을 잘 지키고 있는지 역시 주요한 요소라고 하셨다. 한 컴포넌트가 하나의 책임만 가지고 있는지 확인하는 것인데 마무리로는 역시 리엑트 공식문서를 추천해주셨다.

 

#2. Class diagram 그리기

 

클래스 다이어그램을 그리는 자세한 과정은 생략한다. 코드가 대략적으로 이런식으로 진행이 되는데 이렇게 꼭 해야하는 것은 아니고 재량껏 디테일한 설계를 함에 따라 달라질 수가 있다.

 

@startuml

object CreateGroup
object AddMembers
object ExpeneseMain

object CenteredOverlayForm
object CenteredOverlay

object AddExpenseForm
object ExpeneseSummary
object ExpeneseList

CreateGroup *-- CenteredOverlayForm
AddMembers *-- CenteredOverlayForm
CenteredOverlayForm *-- CenteredOverlay

ExpeneseMain *-- AddExpenseForm
ExpeneseMain *-- ExpeneseSummary
ExpeneseMain *-- ExpeneseList

ExpeneseList *-- CenteredOverlay

@enduml

위의 코드를 프리뷰로 보면 이렇게 생겼다.

 

그 후에는 속성이나 상태관리에 관해서도 추가해줬는데 코드를 전부 공개하는 것은 조금 그렇고 대략적인 상황은 이렇다.

 

물론, 이 코드를 공개해도 그대로 쓰긴 어려울 것이다. 왜냐하면 상태관리 라이브러리도 하나도 적용되지 않았고, 지금 설계자체도 중간에 상태관리 라이브러리를 쓸 것을 고려하여 한 번 방향이 틀어진거라 깔끔하게 다시 다듬어야한다. 다만, 지금상황에서는 이 정도 그린 것만으로도 충분히 설계가 됐으므로 다음 챕터로 넘어갈 것이다.

 

다음 시간에는 새로 배우게 될 기술들을 잔뜩 소개해주실텐데 너무 기대된다. 얼른 만나고싶다.

 

 

 

관련링크

패스트캠퍼스 : http://bit.ly/3Y34pE0

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

 

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

 

#패스트캠퍼스 #패캠챌린지 #수강료0원챌린지 #환급챌린지 #직장인인강 #직장인자기계발 #패캠인강후기 #패스트캠퍼스후기 #오공완 #사이드프로젝트10개기술스택으로구현하는풀스택서버리스프로젝트withReact