사이드 프로젝트 with React 23. 아키텍처 다이어그램 그리기

 

 

 

 

들은 강의: Part 3. 프로젝트 설계하기 05. [실전] 시스템 설계 (1) - Architecture diagram

 

설계에 앞서, 강의에서는 LucidChart 툴을 사용한다고 한다. 아래 링크에서 확인할 수 있다.

 

Intelligent Diagramming | Lucidchart

 

여기서 new document를 만들어 사용할 수 있다.

 

Lucid visual collaboration suite: Log in

 

 

지난번에 공부했던 아키텍처 다이어그램에 대해 복습해보자~

 

아키텍처 다이어그램(Architecture Diagram)

---

• 시스템의 전체 구조. 시스템 간의 상호 작용 및 의존성을 high-level에서 가시화한 다이어그램
• 각 시스템이 어떻게 동작하는지, 어떤 데이터를 다루는지 등의 구체적인 내용은 생략하고 전체적인 맥락에서 기술.

 

왜 사용합니까??

 

• 시스템이 어떤 순서로 요청을 처리하는지, 어떤 시스템과 소통하는지 쉽게 이해하기 위해
• 코드만을 보고 시스템의 흐름을 파악하기에는 오랜 시간이 걸리고, 효율적이지 않아서
• 소프트웨어의 큰 구조/그림을 한 눈에 파악하기 위해

 

언제 사용합니까??

 

• 요구사항이 수집된 후, 초기 설계 시
• 새로운 팀원이 시스템 구조를 파악해야 할 때
• 추가 요구사항이 수집되어, 시스템을 변경해야 할 때

**** 소프트웨어의 규모가 크면 클수록 설계도의 중요성은 높아진다.

 

 

어떻게 사용합니까??

 

1. 구성 요소 나열

• 클라이언트
• 웹, 모바일 앱
• 서버
• 내부 서비스
• 외부 서비스
• 데이터베이스, 스토리지

2. 구성 요소 간 상호 작용 표기

• 화살표로 나타낸다.
• A->B: 구성 요소 A가 구성 요소 B를 호출
• A<-B: 구성 요소 B가 구성 요소 A에게 응답

 

 

 

 

 

다이어그램을 직접 그리는 것보다, '내가 만들 서비스의 구성요소들이 각각 어떤 상호작용을 하는지(high-level 에서)'에 대한 이해가 더 중요하다고 느껴지는 강의였다. 백엔드나 데이터베이스가 꼭 필요한가? 프론트엔드에 정보를 저장해두는 것만으로는 불충분한가? 등의 생각도 해봐야겠다. 근데 백엔드가 뭐지? 데이터베이스가 뭐지? 나는 과연 확실하게 알고 있는가? 열심히 하자 종승아 제발 좀!!!!

 

 

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

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

 

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

 

 

http://bit.ly/3Y34pE0

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