프론트엔드 아키텍처 패턴

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

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

 

아키텍처에서 초기 설계를 신경 쓰지 않으면, 시간이 지날수록 새로운 기능을 추가하기 어려워집니다.

 

핵심 원칙

1. 관심사의 분리 : UI, 비즈니스 로직, 상태 관리 등을 명확히 분리합니다.
2. 모듈성 : 애플리케이션을 독립적이고 재사용 가능한 모듈로 구성합니다.
3. 확장성 : 새로운 기능을 쉽게 추가할 수 있는 구조를 만듭니다.
4. 성능 최적화 : 초기 로딩 시간, 렌더링 성능 등을 고려한 설계를 합니다.
5. 테스트 용이성 : 단위 테스트, 통합 테스트 등을 쉽게 할 수 있는 구조를 만듭니다.
6. 상태 관리 : 애플리케이션의 상태를 효과적으로 관리할 수 있는 전략을 수립합니다.

---

모놀리식 아키텍처 (Monolithic Architecture)

- 전체 애플리케이션이 하나의 코드 베이스로 구성된 단일 컴퓨팅 네트워크입니다.

• 간단한 설정과 배포
• 테스트 간소화
• 개발 초기 단계에서 빠른 진행이 가능
• 작은 프로젝트에 적합

• 규모가 커질수록 유지보수가 어려워진다.
• 코드 의존성이 복잡해질 수 있다.
• 개별 컴포넌트를 확장할 수 없다.
• 기술 스택 변경이 어렵다.

Ex) 개인 블로그, 소규모 기업 웹사이트

 

MVC (Model-View-Controller)

- 애플리케이션을 Model(데이터 및 비즈니스 로직), View(UI), Controller(로직)로 분리합니다.

• 관심사의 분리를 통해 코드의 유지보수성과 재사용성 향상
• 각 부분을 독립적으로 개발하고 테스트 가능

• 양방향 데이터 흐름으로 인한 복잡성
• 대규모 애플리케이션에서는 Controller가 비대해질 수 있다.
• View와 Model 사이의 의존성이 높아질 수 있어 단위 테스트가 어려울 수 있다.

Ex) Ruby on Rails, ASP.NET MVC

 

다중 페이지 애플리케이션 (MPA, Multi-Page Application)

- 각 상호작용마다 새로운 페이지를 로드합니다.

• 더 나은 SEO
• 간단한 초기 로드
• 상대적으로 느린 네비게이션

 

MVVM (Model-View-ViewModel)

- MVC를 확장해 ViewModel을 통해 View와 Model을 더 효과적으로 분리합니다. ViewModel은 View를 위한 Model의 추상화 계층입니다.

• View와 Model 사이의 의존성을 줄여 단위 테스트가 더 수월하다.
• 양방향 데이터 바인딩으로 코드량이 줄어든다.
• 데이터 바인딩을 통한 UI 업데이트 자동화
• UI 로직의 재사용성 증가
• 테스트 용이성 향상

• 간단한 UI에 대해 과도한 구조일 수 있다.
• 데이터 바인딩으로 인해 디버깅이 어려울 수 있다.

Ex) Angular, Vue.js

 

Flux

- 단방향 데이터 흐름을 강조하는 아키텍처 패턴입니다. Action, Dispatcher, Store, View의 구조를 가집니다.

- Props Drilling으로 발생하는 문제를 해결하기 위해 등장했습니다.

- React와 주로 사용되며, Redux 라이브러리의 기반이 됩니다.

• 디버깅 용이성
• 예측 가능한 상태 관리 제공
• 복잡한 데이터 흐름 관리에 적합

• 작은 애플리케이션에는 과도할 수 있다.
• 러닝 커브가 있다.

Ex) Redux

 

단일 페이지 애플리케이션 (SPA, Single-Page Application)

- 단일 HTML 페이지를 로드하고 동적으로 업데이트합니다.

• 빠르고 부드러운 사용자 경험
• 초기 로드 시간이 길 수 있다.

 

서버 사이드 렌더링 (SSR, Server-Side Rendering)

- 초기 페이지 로드 시 서버에서 HTML을 생성해 클라이언트로 전송합니다.

• 초기 로딩 속도 개선
• SEO 최적화
• 첫 페이지 렌더링 시간 단축

• 서버 부하 증가
• 더 복잡한 개발 및 배포 프로세스

Ex) Next.js, Nuxt.js

 

정적 사이트 생성 (SSG, Static Site Generation)

- 빌드 시점에 모든 페이지를 미리 생성해 정적 파일로 제공합니다.

• 빠른 로딩 속도
• 높은 보안성
• 호스팅 비용 절감

• 동적 콘텐츠 처리에 제한적
• 빌드 시간이 길어질 수 있음

Ex) Gatsby, Jekyll

 

프로그레시브 웹 앱 (PWA, Progressive Web App)

- 웹과 모바일 앱의 특성을 결합한 하이브리드 앱입니다.

• 오프라인 기능
• 앱과 유사한 경험
• 네이티브 앱에 비해 제한된 기기 기능 접근

 

마이크로 프론트엔드 (MFA, Micro Frontends Architecture)

- 프론트엔드 애플리케이션을 더 작고 독립적인 부분으로 분할하여 각각 개발, 테스트, 배포할 수 있게 합니다.

• 팀 간 독립성 향상
• 기술 스택의 유연성 제공
• 큰 규모의 애플리케이션에 적합
• 점진적으로 업그레이드하기 좋음
• 배포의 범위가 줄어들어 빌드 및 배포 시간과 위험도가 줄어든다.
• 덜 복잡하고 적은 양의 코드를 관리해 코드의 품질을 높일 수 있다.

• 통합과 일관성 유지, 성능 최적화에 주의 필요
• 중복코드 발생 가능
• 초기 설정의 복잡성

Ex) IKEA, Spotify의 웹 애플리케이션

 

JAMstack

- JavaScript, APIs, Markup의 조합으로 웹사이트를 구축합니다. 주로 정적 사이트 생성과 서버리스 함수를 활용합니다.

• 빠른 로딩 속도
• 높은 보안성
• SEO 친화적

• 동적 기능 구현에 추가 작업 필요
• 개발자에게 새로운 사고방식 요구

Ex) Netlify, Vercel을 이용한 웹사이트

 

헤드리스 아키텍처 (Headless Architecture)

- 프론트엔드와 백엔드를 완전히 분리하여 API를 통해 통신합니다.

• 프론트엔드 기술 선택의 자유
• 다양한 플랫폼 지원 용이
• 백엔드 재사용성 향상

• API 설계와 관리의 중요성 증가
• 초기 설정의 복잡성

 

FSD (Feature-Sliced Design)

https://feature-sliced.design/kr/docs/get-started/overview

- 애플리케이션을 기능 단위로 구조화하는 아키텍처 방법론입니다. 계층(layers), 슬라이스(slices), 세그먼트(segments)의 개념을 사용합니다.

• 코드의 명확한 구조화
• 확장성과 재사용성 향상
• 팀 간 협업 효율성 증가

• 러닝 커브가 있다.
• 작은 프로젝트에는 과도할 수 있다.

Ex) 대규모 React 애플리케이션