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

 

 

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

---

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

 

왜 사용합니까??

 

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

 

언제 사용합니까??

 

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

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

 

 

어떻게 사용합니까??

 

1. 구성 요소 나열

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

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

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

 

 

웹 브라우저는 더치페이 백엔드를 호출한다. 더치페이 백엔드는 더치페이 데이터베이스에 요청을 보낸다.

 

 

위 그림에서 구성요소는 총 네 가지. 흐름을 대충 살펴보자면 아래와 같다.

 

1. 웹 브라우저가 Amazon API Gateway를 호출한다.

2. Amazon API Gateway는 AWS Lambda를 호출한다.

3. AWS Lambda는 Amazon DynamoDB에 요청을 보낸다.

 

Amazon API Gateway, AWS Lambda, Amazon DynamoDB는 AWS Amplify에 의해 관리되고 있다.

 

내가 작성할 코드의 큰 그림을 먼저 그려본다는 것은 굉장히 중요한 일인 것 같다. 나에게 굉장히 부족한 능력이 이런 것이다.

 

'흐름을 상상하며 미리 틀을 짜는 것.'

 

이번 기회에 꼭 어느 정도는 내 힘으로 '어플리케이션 설계도'를 그려봐야겠다.

 

사실 지금도 못 참고 코드부터 조금 짰음.. 이제라도 늦지 않았다. 해보자 화이팅

 

 

 

 

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

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

 

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

 

 

http://bit.ly/3Y34pE0

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