사이드 프로젝트 with React 24. 시퀀스 다이어그램 실습

 

 

 

오 이거 꽤나 어렵군요 ㅎㅎㅎ 좀 더 복습해서 익숙해지도록 해봐야겠습니다. 현재 부트캠프 진도가 굉장히 빡세게 나가고 있어서 언제 보충이 될지는 미지수지만,,,,,

 

 

띄어쓰기 있을 경우에는 문자열로

 

 

 

User가 처음으로 페이지에 들어왔을 때! (root url을 GET)

 

 

아래는 처음 웹 페이지에 접속했을 때의 flow다.

@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: 그룹 이름 입력 페이지
deactivate C

@enduml

 

 

 

 

@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: 비용 관리 페이지

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

deactivate C

@enduml

 

 

 

 

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

 

 

 

 

 

 

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

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

 

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

 

 

http://bit.ly/3Y34pE0

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