프론트엔드 아키텍처, 방법론, 디자인 패턴

최근 프론트엔드 공부를 하면서 아키텍처와 디자인 패턴에 대해 더 자세하게 알아보고자 정리하게 되었습니다.

잘못된 내용에 대한 지적과 더 많은 정보들은 언제든 감사하게 받고 있습니다 😊

---

이 세 가지는 효율적이고 유지보수가 용이한 애플리케이션 개발을 위해, 개념과 특징을 알고 적절히 조합하여 적용해야 합니다.

방법론은 아키텍처를 구현하는 방식을 제시하고 디자인 패턴은 방법론 내에서 특정 문제를 해결하는 데 사용됩니다.

 

프론트엔드 아키텍처

- 애플리케이션의 전체적인 구조와 구성 요소 간의 관계를 정의하는 설계 방식입니다.

- 애플리케이션의 유지보수성, 확장성을 높이는 데 중요한 역할을 합니다. 

 

특징

• 애플리케이션의 전반적인 구조 결정
• 주요 구성 요소와 그들 간의 상호작용 방식을 정의
• 확장성, 유지보수성, 성능 등 비기능적인 요구사항을 고려
• 기술 스택 선택에 영향을 미친다.

예시

• MVC (Model-View-Controller)
• MVVM (Model-View-ViewModel)
• Flux / Redux
• Microfront-ends

---

프론트엔드 방법론

- 개발 프로세스와 코드 구성에 대한 체계적인 접근 방식을 제공합니다.

특징

• 코드 구조화와 조직화에 대한 가이드라인 제공
• 개발 프로세스와 워크플로우에 대한 지침 제시
• 팀 협업과 코드 일관성 향상에 기여
• 특정 문제 해결을 위한 체계적인 접근 방식 제공

예시

• BEM (Block Element Modifier)
• OOCSS (Object Oriented CSS)
• Atomic Design
• JAMstack
• FSD (Feature-Sliced Design)

---

디자인 패턴

- 소프트웨어 설계에서 자주 발생하는 특정 문제에 대한 재사용 가능한 해결책입니다.

특징

• 특정 문제에 대한 검증된 솔루션 제공
• 코드의 재사용성과 유지보수성 향상
• 개발자 간 커뮤니케이션 개선
• 특정 언어나 프레임워크에 종속되지 않음

예시

• 싱글톤 패턴
• 옵저버 패턴
• 팩토리 패턴
• 프록시 패턴
• 컴포지트 패턴