[실전] 시스템 설계1 (16일차)

1. Architecture Diagram 설계

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

• 설계에 LucidChart 툴을 이용
•  LucidChart 툴을 사용하는 이유?
  • 드래그앤 드랍으로 쉽게 컴포넌트를 설계가 가능하다.
  • 다양한 아이콘을 지원함

1-2. 아키텍처 다이어그램 시작하기

Software Requirement (요구사항 내용)
- 그룹 이름을 입력할 수 있는 창을 제공	프론트 엔드
- 시스템은 그룹에 속하는 사람들의 이름을 입력할 수 있는 창을 제공	프론트 엔드
- 각 그룹은 그룹명과 그룹원들의 이름을 담고 있어야 함	데이터에 대한 구조 (데이터 베이스) -> 프론트 엔드로 충분히 구현 가능 --> 데이터 베이스 보류
- 시스템은 내가 사용한 비용을 입력할 수 있도록 입력 창 제공	프론트 엔드
- 시스템은 각 비용에 대해 결제일, 결제 내역, 결제액 정보를 담고 있어야 함	데이터에 대한 구조 (데이터 베이스) -> 프론트 엔드로 충분히 구현 가능 --> 데이터 베이스 보류
- 시스템은 각 비용에 대하여 결제자를 선택할 수 있도록 선택지 제공	프론트 엔드 (User가 보는 화면)
- 시스템은 각 비용에 대해 결제자 정보를 담고 있어야 함	데이터에 대한 구조 (데이터 베이스) -> 프론트 엔드로 충분히 구현 가능 --> 데이터 베이스 보류
- 시스템은 내가 사용한 비용 뿐만 아니라 다른 사람이 사용한 비용도 입력할 수있도록 권한을 제한하지 않아야 함	서버 권한
- 시스템은 주어진 비용 리스트와 그룹 정보를 가지고 정산해서 결과를 보여줘야 함	[프론트엔드 or 백엔드]: 정산 결과 연산(계산) 로직
- 시스템은 모바일과 데스크탑에서 사용가능하도록 responsive한 웹 사이트를제공해야 함	프론트 엔드
- 시스템은 그룹 별로 고유의 페이지를 URL로 제공해야 함 - 시스템은 그룹마다 그룹의 정보, 비용 정보를 저장하고 있어야 함	[백엔드]: 그룹 생성 및 그룹별 URL 제공 &관련 설계 필요 -> 지금 다이어그램을 그리기 보다는 다음 Cycle에서 유지, 보수!

백엔드와 데이터 베이스없이 시작하기로 했지만, 그렇다고 해도 웹을 호스팅할 수 있는 서버는 필요!

1-3. 컴포넌트

• 웹 클라이언트
• 웹 서버

 

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

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

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