Backbone.js는 웹 애플리케이션에 체계적인 구조를 제공하는 JavaScript 프레임워크로, 비즈니스 로직과 사용자 인터페이스(UI) 로직을 명확하게 분리할 수 있도록 도와줍니다. 이러한 관심사의 분리 덕분에 코드의 유지보수성과 확장성이 크게 향상됩니다.
Backbone.js의 아키텍처는 다음과 같은 핵심 모듈들로 구성됩니다.
1. HTTP 요청 (HTTP Request)
HTTP 클라이언트는 요청 메시지 형태로 서버에 HTTP 요청을 전송합니다. 웹 브라우저나 검색 엔진 등이 대표적인 HTTP 클라이언트 역할을 수행합니다. 사용자는 HTTP 요청 프로토콜을 통해 문서, 이미지 등 다양한 리소스를 서버에 요청할 수 있습니다.
2. 라우터 (Router)
라우터는 클라이언트 사이드 애플리케이션의 라우팅을 담당하며, URL을 통해 특정 액션과 이벤트를 연결하는 역할을 합니다. 쉽게 말해 라우터는 애플리케이션 객체의 URL 표현이라고 할 수 있습니다.
URL은 사용자가 직접 변경할 수 있으며, Backbone.js는 이 URL을 활용하여 사용자에게 전달하거나 화면에 표시해야 할 애플리케이션 상태를 파악합니다.
3. 뷰 (View)
Backbone.js의 뷰는 애플리케이션에서 무엇을 어떻게 화면에 표시할지 결정하는 역할을 담당합니다. 흥미로운 점은 뷰 자체에는 HTML 마크업이 포함되지 않으며, 모델의 데이터를 사용자에게 어떤 방식으로 제시할지에 대한 개념만 정의한다는 것입니다.
즉, 뷰는 "데이터 모델이 사용자에게 어떤 모습으로 보여질 것인가"를 반영하는 매개체입니다.
4. 이벤트 (Events)
이벤트는 모든 애플리케이션의 핵심 구성 요소입니다. Backbone.js의 이벤트 모듈은 사용자 정의(커스텀) 이벤트를 애플리케이션에 바인딩할 수 있게 해줍니다.
이벤트 기능은 어떤 객체에든 믹스인(mixin)하여 사용할 수 있으며, 커스텀 이벤트를 자유롭게 바인딩하고 트리거할 수 있습니다. 또한 개발자가 원하는 이름으로 이벤트를 지정할 수 있어 유연한 이벤트 처리가 가능합니다.
5. 모델 (Model)
모델은 비즈니스 로직과 데이터 유효성 검증 로직을 포함하는 비즈니스 엔티티를 표현합니다. 주로 데이터 저장과 비즈니스 로직 처리에 사용되며, 데이터 저장소로부터 데이터를 가져오거나 저장할 수 있습니다.
동작 흐름을 살펴보면, 모델은 뷰를 통해 라우터가 전달한 이벤트로부터 HTTP 요청을 받아 데이터베이스와 데이터를 동기화한 후, 그 결과를 다시 클라이언트에 응답으로 반환합니다.
6. 컬렉션 (Collection)
컬렉션은 여러 모델의 집합입니다. 컬렉션 내부의 모델이 수정되면 관련 이벤트가 바인딩되어 상태 변화를 감지할 수 있습니다.
컬렉션은 반복문으로 처리할 수 있는 모델 목록을 포함하며, 정렬(sorting)과 필터링(filtering) 기능을 지원합니다. 컬렉션을 생성할 때 해당 컬렉션이 어떤 타입의 모델을 가질지, 그리고 어떤 속성 인스턴스를 포함할지 정의할 수 있습니다.
또한 개별 모델에서 트리거된 이벤트는 해당 모델이 속한 컬렉션에서도 함께 트리거되므로, 집합 단위의 상태 관리가 용이합니다.
7. 데이터 소스 (Data Source)
데이터 소스는 서버와 데이터베이스 간에 설정된 연결을 의미하며, 클라이언트가 요청한 정보를 담고 있는 최종 저장소 역할을 합니다.
마무리: Backbone.js 아키텍처의 데이터 흐름
정리하면, Backbone.js 아키텍처는 다음과 같은 흐름으로 동작합니다. 사용자가 URL을 통해 요청을 보내면 라우터가 이를 해석하고, 뷰와 이벤트가 사용자 상호작용을 처리합니다. 이후 모델과 컬렉션이 비즈니스 로직과 데이터를 관리하며, 최종적으로 HTTP 요청을 통해 데이터 소스(데이터베이스)와 동기화됩니다.
이러한 MVC 기반의 구조적 접근 방식 덕분에 Backbone.js는 복잡한 단일 페이지 애플리케이션(SPA)에서도 코드를 깔끔하게 조직화할 수 있습니다.