시스템 설계 2 (17일차)

1. Sequence Diagram 설계

1-1. 설계에 앞서 준비하기

• 설계에 Plant UML을사용
• Plant UML을 사용하는 이유?
  1. 사용하기 쉽다.
  2. Eclipse, VSCode 등 다양한 플러그인을 지원한다.
  3. UML syntax를 이용하여 다이어그램을 만들면, 다이어그램 이미지 파일을 자동으로 생성해 준다.

1-2. 시퀀스 다이어그램 시작하기

1. 자바 설치하기
2. GraphViz 설치하기
3. VS Code marketplace에서 PlantUML 플러그인 설치하기

1-3. PlantUML - Visual Studio Marketplace 사용하기

1. 프로젝트 폴더 아래에  /docs 폴더 생성
2. sequence_diagram.plantuml 파일 생성
3. Participant 선언
   1. User, Database, Web client, DutchPay server
4. Participant 끼리 어떤 순서대로 메시지를 주고 받을 것인지 정의
5. 시퀀스 다이어그램

시퀀스 다이어그램 문법 및 기능

 

1-4) 시퀀스 다이어그램 그려보기

@startuml
participant User
participant "Web Client" as C
participant "DutchPay Server" as S


User -> C: Get /
activate C
C -> S: static asset 요청(HTML/CSS 등)
activate S
S --> C: HTML/CSS 등 응답
deactivate S

C -> C: 그룹 입력 페이지로 redirection
C --> User: 그룹 이름 입력 페이지

User -> C: 1, 그룹 이름 입력 & 저장
C -> C: store에 그룹 이름 저장
C -> C: 그룹 멤버 추가 페이지로 redirection

C -> User: 그룹 멤버 추가 페이지
User -> C: 2, 그룹 멤버 이름 입력
C -> C: store에 그룹 멤버 이름 저장
C -> C: 비용 관리 페이지로 redirection
C --> User: 비용 관리 페이지

loop
User -> C: 3, 비용 정보 입력 & 추가
C -> C: store에 비용 정보 저장
C -> C: 정산 결과 계산
C -> User: 정산 결과 노출
end

deactivate C

@enduml

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

* 필수 삽입 링크 : http://bit.ly/3Y34pE0