프론트엔드 아키텍처 비교 및 설계 원칙
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
프론트엔드 개발자, 소프트웨어 아키텍트 (중급~고급 수준)
핵심 요약
- 서버사이드 렌더링(SSR)은 검색 엔진 최적화(SEO)에 유리하며, 브라우저에서 즉시 렌더링 가능
- MVC 패턴은 UI 로직 분리와 테스트 주도 개발을 지원하는 아키텍처
- React는 단일 방향 데이터 흐름을 기반으로 중앙 집중식 상태 관리(Redux 등)와 호환
섹션별 세부 요약
1. 서버사이드 렌더링(SSR)
- SSR은 서버에서 HTML 생성 후 클라이언트로 전송하여 즉시 렌더링 가능
- SEO 최적화에 유리하며, 클라이언트사이드 렌더링(CSR)보다 검색 엔진 봇의 접근성이 높음
- 프레임워크 지원: Rails, AngularJS 등
2. MVC 아키텍처
- Model: 데이터 및 비즈니스 로직
- View: 사용자 인터페이스(UI)
- Controller: 사용자 입력을 Model과 View에 적용
- 데이터 흐름: 양방향(예: MVC) 또는 단일 방향(예: React)
- 환경: 클라이언트와 서버 모두 지원
3. React의 단일 방향 데이터 흐름
- Action: 사용자 또는 시스템 이벤트
- Dispatcher: 액션을 전달하는 중앙 허브
- Store: 상태와 로직을 유지(컨트롤러 대신 스토어에 로직 포함)
- Redux와 같은 라이브러리가 단일 스토어 및 중앙 집중식 상태 관리를 제공
- 환경: 복잡한 클라이언트 앱용(React, Vue, Angular)
결론
- SEO 최적화가 필요한 앱은 SSR을, 복잡한 상태 관리가 필요한 앱은 React + Redux를 고려
- MVC 패턴은 유지보수성 향상을 위해 사용하고, 단일 방향 데이터 흐름은 상태 관리 효율성을 높임