혼돈에서 명료함으로: 아키텍처의 중요한 역할

빠르게 진행되는 현대 개발 세계에서 건축은 프로젝트 자체의 복잡성으로 인해 프로젝트가 성공할 것인지 무너질 것인지를 결정하는 경우가 많습니다. 많은 개발자가 아키텍처가 중요하다는 것을 직관적으로 이해하고 있지만 "이유"와 "방법"에 대한 논의는 자주 이루어지지 않습니다. 건축이 그토록 중요한 이유는 무엇이며, 귀하의 선택이 혼돈이 아닌 명확성을 갖도록 어떻게 보장할 수 있습니까?

이 기사는 React, Vue, Svelte 및 Vanilla JS 개발자에게 도움이 됩니다. Angular는 여전히 가치를 제공할 수 있지만 기본적으로 엄격한 아키텍처 패턴을 적용하므로 Angular 개발자에게는 덜 도움이 될 수 있습니다.

제 생각에는 인터넷에 건축에 대한 자세한 정보가 부족한 것 같아요. 나는 몇 가지 유용한 리소스만 찾았습니다. 그래서 건축에 관한 일련의 기사를 만들기로 결정했습니다.

지금은 건축이란 무엇인지, 왜 건축이 필요한지 살펴보고, 몇 가지 주요 용어를 소개하고, 다양한 유형의 건축에 ​​대해 논의해 보겠습니다

문제

아키텍처를 계획하지 않고 코드만 살펴보는 새 프로젝트를 시작한다고 상상해 보세요. 하위 모듈과 구성 요소 간의 링크가 포함된 첫 번째 모듈을 개발합니다. 그런 다음 두 번째 모듈을 만들고 이를 첫 번째 모듈에 연결합니다. 모듈과 연결을 더 추가하면 이 패턴이 계속됩니다.

모듈을 삭제하거나 편집해야 할 때 문제가 발생합니다. 프로젝트가 성장함에 따라 수많은 모듈, 하위 모듈 및 이들 간의 모호한 연결로 인해 복잡성도 커집니다. 결국 이 얽힌 웹은 개발자에게는 골칫거리가 되고 회사에서는 유지 관리 비용이 더 많이 들게 됩니다.

어려움 === 시간 === 돈

건축이란 무엇입니까?

많은 개발자들이 아키텍처가 폴더 구조와 동일하다고 잘못 생각하고 있지만 이는 잘못된 것입니다. 아키텍처는 파일 구성 그 이상입니다. 프로젝트 시스템 내에서 모듈과 구성 요소가 상호 작용하는 방식을 설명합니다.

아키텍처는 프로젝트의 다양한 요소를 포괄하며, 모듈과 구성 요소를 개발하는 방법과 상호 연결하는 방법을 지정합니다.

프런트엔드에서 모듈은 일반적으로 비즈니스 로직을 활용하는 UI 구성요소입니다. 페이지와 같은 큰 구성요소부터 입력, 버튼, 타이포그래피와 같은 작은 구성요소까지 다양합니다.

훌륭한 소프트웨어 디자인은 무엇을 갖추어야 합니까?

프로젝트 모듈에 다음이 포함되어 있는지 확인해야 합니다.

1. 높은 응집력 – 각 모듈에는 관련 비즈니스 로직이 포함되어야 합니다.
2. 낮은 결합 – 모듈은 최대한 서로 독립적이어야 합니다.

응집력은 모듈이 할 수 있는 일을 말합니다. 응집력이 낮다는 것은 클래스가 매우 다양한 작업을 수행한다는 것을 의미합니다. 즉, 클래스가 광범위하고 무엇을 해야 하는지에 집중하지 않습니다. 응집력이 높다는 것은 수업이 해야 할 일, 즉 수업의 의도와 관련된 방법에만 집중한다는 것을 의미합니다.

커플링은 두 모듈이 서로 얼마나 관련되어 있거나 종속되어 있는지를 나타냅니다. 저결합 모듈의 경우 한 클래스의 주요 내용을 변경해도 다른 클래스에 영향을 주어서는 안 됩니다. 결합도가 높으면 코드를 변경하고 유지하기가 어려워집니다. 모듈이 서로 밀접하게 결합되어 있으므로 변경하려면 전체 시스템을 개조해야 할 수도 있습니다.

기본적으로 응집력이 높다는 것은 관련된 코드 조각을 한 곳에 함께 보관하는 것을 의미합니다. 동시에 낮은 결합은 코드베이스에서 관련되지 않은 부분을 최대한 분리하는 것을 의미합니다.

이미지에 대한 설명은 다음과 같습니다.

이미지의 모듈은 쉽게 알아볼 수 있는 뚜렷한 원 클러스터로 표시됩니다. 모듈 내의 각 원은 특정 작업을 수행하는 클래스 또는 구성 요소를 나타냅니다. 모듈 내에서 동일한 색상의 원은 동일한 작업을 해결하는 요소를 나타냅니다. 이미지의 화살표는 모듈 간의 연결을 나타내며 모듈이 서로 상호 작용하는 방식을 보여줍니다.

높은 응집력, 높은 결합력

God object 안티 패턴을 고려해 보겠습니다. God 객체는 여러 하위 모듈과 상호 연결을 갖고 동시에 여러 작업을 해결하려고 시도하는 모듈입니다.

이로 인해 단일 모듈이 여러 작업을 담당하므로 높은 응집력이 발생하고 다양한 모듈과 하위 모듈 간의 연결이 모호하므로 높은 결합력이 발생합니다.

낮은 응집력, 낮은 결합력

이 시나리오에서는 모듈이 잘 나누어져 있지만 내부의 하위 모듈은 서로 다른 작업을 해결합니다(이미지에서 서로 다른 색상으로 표시됨). 하지만 모듈 간의 연결은 여전히 ​​불분명합니다.

낮은 응집력, 높은 결합력

이건 다른 경우입니다. 여기서는 모듈이 명확하게 구분되어 있고 모듈 간의 연결이 견고합니다. 그러나 각 모듈 내부에서는 여러 작업을 해결하기 때문에 응집력이 낮아서 불필요한 복잡성이 발생합니다.

그럼에도 불구하고 개별 모듈을 별 어려움 없이 제거하거나 수정할 수 있다는 점에서 이전 두 예시보다 여전히 좋습니다.

높은 응집력, 낮은 결합 – 이상

이상적인 아키텍처에서는 모듈 간의 링크가 '약'하여 모듈을 쉽게 제거하거나 수정할 수 있습니다. 각 모듈 내에서 구성 요소와 클래스는 하나의 특정 작업(균일한 색상으로 표시됨)을 해결하며 이전 예와 달리 책임이 혼합되지 않습니다.

이러한 이상적인 아키텍처는 프로젝트에서는 드물지만 구체적인 지식과 경험이 필요하기 때문에 우리 모두가 노력해야 할 것입니다.

결론

아키텍처는 모듈, 구성 요소 및 이들 간의 연결 구조입니다.

성공적인 아키텍처의 핵심은 DRY, KISS, SOLID와 같은 개발 원칙을 구현하는 데 있습니다. 모듈 제거 및 수정이 쉬워야 하며, 특히 제거 부분이 주요 포인트입니다.

궁금한 점이 있거나 어떤 아키텍처에 대해 더 듣고 싶은지 댓글로 알려주세요!

위 내용은 혼돈에서 명료함으로: 아키텍처의 중요한 역할의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!