Triphop (2015): 실시간 TODO 애플리케이션 탐구
Source: Dev.to
개요
2015년 개발자 Árpád Kiss (@rpi1337)가 출시한 Triphop은 당시 웹 개발 관행을 보여주는 실시간 TODO 애플리케이션입니다. 견고한 프론트엔드 프레임워크와 이벤트 기반 백엔드를 결합해 반응형 싱글 페이지 애플리케이션(SPA)을 구축합니다.
기술 스택
- 프론트엔드: 데이터 바인딩 및 애플리케이션 로직을 위한 AngularJS (v1.3.14); 스타일링을 위한 Bootstrap (v3.3.1).
- 백엔드: Express 프레임워크를 사용한 Node.js.
- 실시간 통신: 모든 연결된 사용자에게 즉시 업데이트를 전달하는 Socket.IO.
- 스토리지: 전통적인 데이터베이스 대신 커스텀 파일 기반 JSON 저장소(
store/data.json).
아키텍처
백엔드는 API‑first 설계를 위해 조정된 모델‑뷰‑컨트롤러(MVC) 패턴을 따릅니다.
모델 및 데이터 저장소
- List –
id와title을 포함합니다. - Todo –
id,listId(특정 리스트와 연결),title,description을 포함합니다.
Store 모듈(store/index.js)은 data.json을 읽고 씁니다. findAll, find, add, remove, commit과 같은 메서드를 제공해 메모리상의 데이터를 조작하고 파일 시스템과 동기화합니다.
컨트롤러 및 라우팅
중심 라우터(api/index.js)는 HTTP 메서드와 엔드포인트를 컨트롤러 액션에 매핑합니다. 예:
GET /api/lists → ListsController.getLists
POST /api/lists/:id → TodosController.addTodo컨트롤러(lists.js와 todos.js)는 Store와 직접 상호작용하고 SocketService를 사용해 클라이언트에 변화를 브로드캐스트합니다.
클라이언트‑사이드 구조
클라이언트 코드(app/js/main.js)는 클래식 AngularJS 관례를 따르며, 컨트롤러와 서비스로 관심사를 분리합니다.
서비스
- SocketService – Socket.IO 연결을 초기화하고 서버 이벤트를 구독하기 위한
subscribe메서드를 제공합니다. - ListsService & TodosService – 핵심 비즈니스 로직을 처리하고 Express API에 HTTP 요청을 수행하며, 실시간 WebSocket 이벤트를 청취해 내부 데이터 배열을 최신 상태로 유지합니다.
컨트롤러
- MainController – 모든 리스트와 특정 리스트 내 작업 간 전환 등 네비게이션 상태를 관리합니다.
- HeaderController – 네비게이션 바를 통해 새 리스트 생성을 처리합니다.
- ListController & TodosController – 서비스 데이터를 HTML 뷰에 바인딩하고, 항목 수정·삭제를 위한 UI 함수를 노출합니다.
실시간 흐름
사용자가 새 TODO 항목을 추가하면 다음 순서가 실행됩니다:
- 프론트엔드:
TodosController가TodosService.add()를 호출해 서버에POST요청을 보냅니다. - 백엔드:
TodosController가 요청을 받아 Store를 업데이트하고SocketService.publish('new-todo', todo.toJSON())를 호출합니다. - SocketService가 이벤트를 모든 연결된 WebSocket 클라이언트에 브로드캐스트합니다.
- 프론트엔드:
new-todo이벤트를 구독하고 있는TodosService가 페이로드를 받아 데이터 배열에 새 항목을 추가하고 UI를 업데이트합니다.
이 흐름을 통해 한 사용자가 만든, 수정한, 삭제한 리스트·작업이 페이지 새로고침 없이 다른 모든 사용자의 화면에 즉시 반영됩니다.
결론
Triphop(2015)은 실시간 SPA의 깔끔하고 가벼운 예시입니다. AngularJS, Express, Socket.IO를 결합해 서버 상태와 클라이언트 상태를 긴밀히 동기화하는 방법을 보여줍니다. 오늘날에는 React나 Vue와 같은 최신 프레임워크와 PostgreSQL이나 Firebase 같은 데이터베이스가 더 일반적이지만, Triphop은 실시간 웹 아키텍처의 기본 개념을 이해하는 데 유용한 통찰을 제공합니다.
소스 코드: