[Project] 프로젝트 삽질기39 (feat UML)

들어가며

현재 작성된 코드는 어떤 문제가 있는지 살펴보고 싶었습니다. 그러기 위해 현재 작성된 코드의 의존성은 어떻게 설계되어 있는지 파악해봐야겠다고 생각했습니다. 하지만 어떻게 현재 코드 의존성을 파악해야 할지 몰랐습니다. 그 과정에서 UML을 직접 설계해보면 한눈에 현재 코드의 의존성을 파악할 수 있다고 생각했고, UML을 적용한 과정에 대해 글로 적어봐야겠다고 생각했습니다.

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

UML

UML이란 Unified Modeling Language로서, 프로그램 설계를 표현하기 위해 사용하는 그림으로 된 표기법을 의미합니다. UML을 사용하면 한 번에 이해하기 힘든 복잡한 시스템을 한눈에 이해할 수 있게끔 표현할 수 있습니다. UML로 표현할 수 있는 다이어그램도 여러 종류가 됩니다만, 저는 여기서 클래스 다이어그램을 표현하는 방법에 대해 설명하고자 합니다. 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

UML VSCode에서 활용하기

UML을 VSCode에서 활용하기 위해 저는 PlantUML을 활용했습니다. 

 

 

 

 

PlantUML을 활용하기 위해 VSCode의 Extensions에서 플러그인을 설치합니다. 그 후 Class Diagram을 그리기 위해 GraphViz를 설치해야 합니다. 

 

 

 

GraphViz 설치

Mac OS를 기준으로 GraphViz 설치 방법을 하기에 공유하겠습니다.

 

brew install libtool
brew link libtool
brew install graphviz
brew link --overwrite graphviz

 

 

위와 같이 터미널에 입력 후 설치하고 난 후, 저는 아래의 코드를 PlantUML을 통해 랜더링 했습니다. 랜더링 하는 방법은 Shift + Command + P 키를 눌러서 PlantUML: Preview Current Diagram을 선택하면 됩니다. 아래의 코드를 작성하기 전, test.plantuml 파일을 생성 후 아래의 코드를 입력합니다.

 

 

 

@startuml

scale 1
title AWS SQS Review Event Api

class ReviewEventHandlerReq {
    +type
    +action
    +reviewId
    +content
    +attachedPhotoIds
    +userId
    +placeId
    +toAddEntity()
    +toModEntity()
    +toDeleteEntity()
    -pointCount(attachedPhotoIds, content)
    -bonusCount()
    -isPhotoEntities(attachedPhotoIds, reviewId)
}

class EventApiController {
    +reviewEventHandler(dto)
}

interface IEventApiReviewService {
    +reviewEventHandler(dto)
}

class EventApiReviewService {
    +reviewEventHandler(dto)
}

class EventApiReviewProducerHandler {
    +reviewApiEventHandler(dto)
    -reviewEventHandler(dto)
}

class EventApiAddReviewProducer {
    +addReviewProducer(dto)
    -sendMessage(dto)
}

class EventApiModReviewProducer {
    +modReviewProducer(dto)
    -sendMessage(dto)
}

class EventApiDeleteReviewProducer {
    +deleteReviewProducer(dto)
    -sendMessage(dto)
}

class SqsService {
    +send(queueName, queueOptions)
}

EventApiController --|> IEventApiReviewService :  ReviewEventHandlerReq
EventApiReviewService --|> IEventApiReviewService 
EventApiReviewService --|> EventApiReviewProducerHandler : ReviewEventHandlerReq
EventApiReviewProducerHandler --|> EventApiAddReviewProducer : ReviewEventHandlerReq
EventApiReviewProducerHandler --|> EventApiModReviewProducer : ReviewEventHandlerReq
EventApiReviewProducerHandler --|> EventApiDeleteReviewProducer : ReviewEventHandlerReq
EventApiAddReviewProducer --|> SqsService : ReviewEventHandlerReq
EventApiModReviewProducer --|> SqsService : ReviewEventHandlerReq
EventApiDeleteReviewProducer --|> SqsService : ReviewEventHandlerReq



@enduml

 

 

 

위 코드를 변환하면 

 

 

 

 

 

 

다음과 같은 이미지를 출력할 수 있습니다. 위 코드에서 +의 뜻은 public 메서드 혹은 변수를 나타내는 것이며, -는 private를 뜻합니다. 이렇게 UML을 활용하여 의존의 방향성을 한눈에 볼 수 있게 변경할 수 있었습니다. 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

마치며

앞으로도 팀의 발전을 돕는 개발자가 되기 위해 노력하려 합니다. 팀에 필요한 부분이 무엇일지 고민하면서, 팀에 도움이 된다면, 열심히 공부해서 실무에 적용할 수 있는 개발자가 되기 위해 노력하고 싶습니다. 팀의 성장에 기여할 수 있는 개발자가 되겠습니다. 

 

 

 

 

 

---

 

 

 

 

 

 

참고 및 출처

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

Visual Studio Code 에서 UML 사용하기 · snowdeer's Code Holic

[개발상식] 13.UML이란?